Post-Thumbnail
0
Octofuss Theme

First of all we thank all of you who downloaded the Octofuss theme. Now some of you are not that well versed with coding.

So to help you guys we are sharing the complete tutorial to customize Octofuss Blogger Theme. So let's get the party started.

You may also Like: JaBeen: A Minimal Blogger Template

1. Installation

If you haven't downloaded the theme then download the theme by clicking on the link below.
Okay so after downloading the Octofuss theme the first thing that you need to do is to install it. To install the theme follow the steps below.
  • Go to Blogger > Theme
  • Click Backup / Restore
  • Click chose file and select the downloaded theme file.
  • And Then click upload
Install Octofuss

2. Setting Up The Top Menu

Responsive Menu - Blogger

To Setup, the menu follow the given steps.
  • Go to Blogger > Theme > Edit HTML
Installation - Octofuss Theme

Installation - Octofuss Theme
  • Search for class='menu' (Use CTRL+F for search)
  • You will find the following code
<nav class='menu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<ul>
<li><a href='#'>Item #6</a></li>
<li><a href='#'>Item #5</a></li>
<li><a href='#'>Item #4</a></li>
<li><a href='#'>Item #3</a></li>
<li><a href='#'>Item #2</a></li>
<li><a href='#'>Item #1</a></li>
<li><a href='#'>Home</a></li>
</ul>
</nav>
  • Replace '#' with your link URLs and 'Item #' with your link text.

3. Setting Up The Mobile Menu

Mobile Menu - Octofuss Theme


Follow the following steps
  • Go to Blogger > Theme > Edit HTML
  • Search for id='mobmenu'
  • You will find the following code
<nav id='mobmenu'>
<input type='checkbox'/>
<label><span>&#8801; Menu</span></label>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Item #1</a></li>
<li><a href='#'>Item #2</a></li>
<li><a href='#'>Item #3</a></li>
<li><a href='#'>Item #4</a></li>
<li><a href='#'>Item #5</a></li>
<li><a href='#'>Item #6</a></li>
</ul>
</nav>
  • Replace '#' with your link URLs and 'Item #' with your link text.

4. Welcome Message

Welcome Message - Octofuss Theme

If you want to change the Welcome message, follow the given steps.
  • Go to Blogger > Theme > Edit HTML
  • Search for class='slideshow-container'
  • You will find the following code
<div class='slideshow-container'>
<!-- Full-width slides/quotes -->
<div class='mySlides'>
<p>Welcome to our Blog!</p>
<q>We Provide Blogger Tips, Tricks, Widgets, Templates. </q>
</div>
</div>
  • Replace the text in red with your welcome message 

5. Customize The About Me Widget

About Me Widget - Octofuss Theme
Okay so now we come to the widgets. To customize the about me widget, follow the following steps.
  • Go to Blogger > Layout
  • Under 'SidebarRight' section look for 'About Me'
  • Click Edit
  • You will find the following code
<div class='about-me'>
<p><img class='img-round' style='height:200px;width:200px;' src='https://4.bp.blogspot.com/-FwTEG0Os8yw/XGcKpBRUMJI/AAAAAAAAC-g/HaAhNWwVwEU5U9PSS3A3NprJRdYuXNpMQCLcBGAs/s1600/ayo-ogunseinde-93181-unsplash.jpg'/></p>
<p>Wes Anderson banjo you probably haven&#8217;t deep v kale chips Kickstarter viral. Swag meggings disrupt. Meditation flexitarian authentic organic, you probably haven&#8217;t heard of them taxidermy.</p>
</div>
  • Replace the link in red with your image link and the text in pink with your bio.

6. Customize The Social Widget

Social Widget - Octofuss Theme
  • Go to Blogger > Layout
  • Under 'SidebarRight' section look for 'Socialize'
  • Click Edit
  • You will find the following code
<ul class='socialize'>
<li><a href='https://twitter.com/' rel='nofollow' target='_blank' title='Twitter'><i class='fab fa-twitter'></i></a></li>
<li><a href='https://www.facebook.com/' rel='nofollow' target='_blank' title='Facebook'><i class='fab fa-facebook'></i></a></li>
<li><a href='https://www.pinterest.com/' rel='nofollow' target='_blank' title='Pinterest'><i class='fab fa-pinterest'></i></a></li>
<li><a href='https://www.linkedin.com/' rel='nofollow' target='_blank' title='Linkedin'><i class='fab fa-linkedin'></i></a></li>
<li><a href='https://www.instagram.com/' rel='nofollow' target='_blank' title='Instagram'><i class='fab fa-instagram'></i></a></li>
<li><a href='https://www.youtube.com/' rel='nofollow' target='_blank' title='Youtube'><i class='fab fa-youtube'></i></a></li>
<li><a href='https://www.tumblr.com/' rel='nofollow' target='_blank' title='Tumblr'><i class='fab fa-tumblr'></i></a></li>
<li><a href='https://dribbble.com/' rel='nofollow' target='_blank' title='Dribbble'><i class='fab fa-dribbble'></i></a></li>
<li><a href='https://github.com/' rel='nofollow' target='_blank' title='Github'><i class='fab fa-github'></i></a></li>
<li><a href='https://vimeo.com/' rel='nofollow' target='_blank' title='Vimeo'><i class='fab fa-vimeo'></i></a></li>
<li><a href='http://digg.com/' rel='nofollow' target='_blank' title='Digg'><i class='fab fa-digg'></i></a></li>
<li><a href='https://www.flickr.com/' rel='nofollow' target='_blank' title='Flickr'><i class='fab fa-flickr'></i></a></li>
<li><a href='https://www.reddit.com/' rel='nofollow' target='_blank' title='Reddit'><i class='fab fa-reddit'></i></a></li>
<li><a href='https://delicious.com/' rel='nofollow' target='_blank' title='Delicious'><i class='fab fa-delicious'></i></a></li>
<li><a href='mailto:123@abc.com' rel='nofollow' target='_blank' title='Contact'><i class='fa fa-envelope'></i></a></li>
<li><a href='https://yourblog.com/feeds/posts/default' target='_blank' title='RSS'><i class='fa fa-rss'></i></a></li>
</ul>
  • Replace the colored text with the links of your profile of respective social media site.

 7. Footer Logo

Footer Logo - Octofuss Theme
  • Go to Blogger > Layout
  • Find the widget under 'FootSec1'
  • Click Edit
  • You will find the following code
<div id='footer-about'>
<img alt="All Blogger Things" src="https://4.bp.blogspot.com/-PakUKgDBI3I/W_2b5epiQrI/AAAAAAAACzU/JW3kEqX56YE9mI1xPs6DkPteYq7xOoAVgCLcBGAs/s1600/footer-logo.png" style="display: block;padding-left:0px;padding-top:0px;" width="280px; " />
</div>
  • Replace All Blogger Things with your blog name and the URL in red with your logo URL.

8. Footer About Widget

Footer About Widget - Octofuss Theme
  • Go to Blogger > Layout
  • Find the widget under 'FootSec2'
  • Click Edit
  • You will find the following code
<div id='footer-about'>
<p>All Blogger Things provide free Blogger Tips, Tricks, Widgets, Templates and helps newbies make a living online.<br/><a href="https://www.allbloggerthings.com/p/about.html" title="About">Read More <i class="fas fa-angle-double-right"></i></a></p></div>

  • Replace the text in red with your info and the URL in blue with your About Page URL.

 9. Customize the Copyright Widget

Copyrights Widget - Octofuss Theme
  • Go to Blogger > Theme > Edit HTML
  • Search for class='copyright'
  • You will find the following code
<div class='copyright'>
<div id='credits'>
<p>  Copyright &#169; 2018 <a href='#'>Octofuss</a>, Designed By: <a href='https://www.allbloggerthings.com' id='creditlink'>All Blogger Things</a>
</p>
</div>
</div>
  • Replace 'Octofuss' with your Blog name and # with your Blog URL.
To avoid copyright infringement, Please do not remove the Credit Link.

10. Customize the Footer Menu

Footer Menu - Octofuss Theme
  • Go to Blogger > Theme > Edit HTML
  • Search for class='footer-nav'
  • You will find the following code
<div class='footer-nav'>
<a href='#'>About</a>
<a href='#'>Contact</a>
<a href='#'>Privacy Policy</a>
<a href='#'>Terms & Conditions</a>
</div>
  • Replace # with your link URLs and the text in red with your Link Names. 

11. Customize The Schema Blog Name Script

  • Go to Blogger > Theme > Edit HTML
  • Search for "@context" : "http://schema.org"
  • You will find the following code
<script type='application/ld+json'>
// <![CDATA[
{
  "@context" : "http://schema.org",
  "@type" : "WebSite",
  "name" : "All Blogger Things",
  "alternateName" : "ABT",
  "url" : "https://www.allbloggerthings.com"
}
{
  "@context": "http://schema.org",
  "@type": "WebSite",
  "url": "https://www.allbloggerthings.com",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://www.allbloggerthings.com/search?q={search_term_string}",
    "query-input": "required name=search_term_string"
  }
}
// ]]>
      </script>
  • Replace All Blogger Things with your blog name, ABT with your blog's alternate name and https://www.allbloggerthings.com with your blog URL.

12. Customize Twitter Cards Meta Tags

  • Go to Blogger > Theme > Edit HTML
  • Search for name='twitter:site'
  • You will find the following code
<meta content='@BloggerThings' name='twitter:site'/>
<meta content='@IamHassanTahir' name='twitter:creator'/>  
  • Replace @BloggerThings with your Blog's Twitter Username and @IamHassanTahir with your (Admin's) own Twitter Username.

Conclusion

That's all folks! We thank you for downloading the theme. If you love it, then please share it with your friends so that we keep providing you with cool templates. Thanks!

You May Also Like

0 comments:

Post a Comment