“FullBox Blogger Template” Documentation by “Odd Themes” v1.0
Created: 23/06/2014
By: Odd Themes
Email: oddthemes@gmail.com
Website: www.OddThemes.com
Thank you for purchasing our template. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form here. Thanks so much!
Table of Contents
- Installation
- Add Social Links on Top Right
- Upload Logo
- Setting up the menu
- Horizontal Ads Image
- Recent Posts
- Meta Keywords and Description
- Custom Error 404 Page
- Breaking News
- Sidebar Social Widgets
- 6 Tabs Widget
- Video Carousel
- Footer
- Credits
- Installation - top
- Add Social Links on Top Right - top
- Upload Logo- top
- Setting up the menu - top
- On Blogger Dashbord Click Template
- Click Edit HTML
- (Top Menu) Scroll down and Find this Code :
<!-- Menu --> <div id='menu-container'> <font face='serif'><nav id='neat-menu'> <ul id='nav'> <li class='active'><a href='/'>HOME</a></li> <li><a href='#'>DROPDOWN <i class='fa fa-chevron-down'/></a> <ul> <li><a href='#'>Menu element 1</a></li> <li><a href='#'>Menu element 2</a></li> <li><a href='#'>Menu element 3</a></li> <li><a href='#'>Menu element 4</a></li> <li><a href='#'>Menu element 5</a></li> </ul> </li> <li><a href='#'>DROPDOWN <i class='fa fa-chevron-down'/></a> <ul> <li><a href='#'>Menu element 1</a></li> <li><a href='#'>Menu element 2</a></li> <li><a href='#'>Menu element 3</a></li> <li><a href='#'>Menu element 4</a></li> <li><a href='#'>Menu element 5</a></li> </ul> </li> <li><a href='#'>DROPDOWN <i class='fa fa-chevron-down'/></a> <ul> <li><a href='#'>Menu element 1</a></li> <li><a href='#'>Menu element 2</a></li> <li><a href='#'>Menu element 3</a></li> <li><a href='#'>Menu element 4</a></li> <li><a href='#'>Menu element 5</a></li> </ul> </li> <li><a href='#'>SINGLE MENU</a></li> </ul> </nav></font> </div> - Change # with yours URL link.
Here you are with FullBox Responsive Blogger Template. You Follow These Steps To Upload Your Blogger Template To Blogger Platform. First Login to your Blogger DashBoard by Using Your Google Username And Password.
Then follow these steps:
1. On Blogger Dashboard Click Template.
2. Click on Customize Mobile Template on right side, now check the radio button for NO.
3. Click Backup/Restore button (Top Right).
4. Click on Choose File ( Browse..) button. Find the “fullbox-template.xml” file location.
5. Then Click Upload.
You Can See that Header Right side area have Social Icons Collection. To Edit Social Icon in this theme you can follow these steps:
1. On Blogger Dashbord Click Template
2. Click Edit HTML
3. Scroll down and Find this Code :
<div class='topbar-right'> <a class='' href='http://facebook.com/#' target='_blank'><i class='fa fa-facebook'/></a><a class='' href='http://twitter.com/#' target='_blank'><i class='fa fa-twitter'/></a><a class='' href='http://instagram.com/#' target='_blank'><i class='fa fa-instagram'/></a><a class='' href='http://dribbble.com/#' target='_blank'><i class='fa fa-dribbble'/></a> </div>
4. Change # with yours Social URL link
Access your blog Layout > click Edit link on Header widget
To Edit Menu in this theme you can follow these steps:
E) Horizontal Ads Image - top
Follow These steps To Add Ads
Go To Blogger >> Layout
Now You Can See Layout Page Right side Area Have Html/Javascript as shown in the image.
Now you can enter your ads code into the HTML/Javascript you just added.
After Click Save button, You Can Get The Idea Using These Images Displayed Above.
F) Recent Posts - top
You Can See below Ads there is a RECENT POSTS section.
The above area is automatically populated when you publishes your posts.
G) Meta Information - top
SEO is a one of Most Important Subject Of site. Meta Keywords And Description Help To SEO Your Site Follow This Steps To Add Meta Keywords And Description to Your Site
. Click "Edit HTML"
After You Enter Your Keywords, It Should Look Something Like Given Below
<meta expr:content='data:blog.metaDescription' name='description'/> <!-- Add Meta Discription To your Blog --> <meta content='Blogger , Template, New, Themes,' name='keywords'/><!-- Add Meta Keyword To your Blog -->
How to Add Meta Description
Goto Blogger >> Settings
And Click On "Search Performance" and Now Click Edit On "Meta Description"
H) Add Custom 404 Error page - top
Add Coustom 404 Page To Blogger Template.
Go To Blogger >> Settings
And Click On "Search Performance" and Now Click Edit On "errors and rederects"
Add Followinmg Code here
<div id="errpage">
<h3>Your requested page was not found</h3>
<div class="errpim"><p>404</p></div>
<div class="emass"><p>Sorry, we cannot find the page that you are looking for. It might have been removed, had its name changed, or is temporarily unavailable.<br/>
Please check that the Web site address is spelled correctly.</p></div>
<ul>
<form class="ssimplesearch" method="get" action="/search">
<table width="100%">
<tr>
<td><input type="text" style="width:95%;" value="Search this blog.." onfocus="if (this.value == "Search this blog..") {this.value = ""}" onblur="if (this.value == "") {this.value = "Search this blog...";}" name="q"></td>
</tr>
</table>
</form>
</li>
</ul>
</div>
I) Setup Breaking News bar on top - top
You Can See recent post shot as a breaking news bar, follow this steps to add it to your blog
Goto Blogger >> Template
Now Click Edit Html Button
Now Find "Replace With your Blog Url"
Then Replace "http://fullbox-oddthemes.blogspot.com/" This url With Your Blog URl
Finaly Click Save Button
J) Sidebar Social Widgets - top Goto Layout >> Click on Add a Gadget as shown below and Add HTML/JavaScript from Popup.
Then Add The Below Code In The Area Provided In The Popup Window.
<!-- Place this tag where you want the widget to render. --> <div class="g-page" data-width="220" data-href="//plus.google.com/u/0/103146606580703035341" data-theme="dark" data-rel="publisher"></div> <!-- Place this tag after the last widget tag. --> <script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script>
Now Change The Links in href To Your Links.
For Facebook refer to the below image, and click on edit
Paste the below code into the content box that appears.
<div class='fb-like-box' data-colorscheme='light' data-header='true' data-height='260' data-href='https://www.facebook.com/oddthemes' data-show-border='true' data-show-faces='true' data-stream='false' data-width='222' style='padding: 0 0 20px 0;'/></div>
K) 6 Tabs Widget - top Goto Template >> Search for below code:
<div class='tab-wrapper'> <div class='tabber' id='tab1'> <script> document.write(" <script src=\"/feeds/posts/default/-/Break?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>"); </script></div> <div class='tabber' id='tab2'> <script> document.write(" <script src=\"/feeds/posts/default/-/Sport?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>"); </script></div> <div class='tabber' id='tab3'> <script> document.write(" <script src=\"/feeds/posts/default/-/Games?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>"); </script></div> <div class='tabber' id='tab4'> <script> document.write(" <script src=\"/feeds/posts/default/-/Cool?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>"); </script></div> <div class='tabber' id='tab5'> <script> document.write(" <script src=\"/feeds/posts/default/-/God?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>"); </script></div> <div class='tabber' id='tab6'> <script> document.write(" <script src=\"/feeds/posts/default/-/Music?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>"); </script></div> <div class='clear'/> </div>Now Add Your Own Labels that you use in your blog in the above code replacing Break, Sport, Games, Cool, God, Music.
L) Video Carousel - top
Find the below code in the template file by clicking edit template:
<div id='carousel' onmouseout='hideDivs();' onmouseover='showDivs();'> <div class='judul'>LATEST VIDEOS</div> <div id='previous_button'/> <div id='next_button'/> <div class='container'> <ul> <script> document.write(" <script src=\"/feeds/posts/default/?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>"); </script> </ul><div class='clear'/> </div> <div class='clear'/> </div>
If you want to show videos, then publish videos posts and label them with the label name: VIDEO. Then add the below code by replacing the above <script> code.
<script> document.write(" <script src=\"/feeds/posts/default/-/VIDEO?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>"); </script>
If you want to show random posts then do nothing. It by defaults show random posts only.
M) Footer - top
The footer is divided into 3 columns.
To add first column GOTO Layout, then follow the below image for instruction.
Now enter the code given below into the content box just appeared by clicking Edit.
<img class="ig" height=45 width=150 src="http://2.bp.blogspot.com/-qgOF1BiiN60/U5IdIukr2aI/AAAAAAAAALs/qgph_8Xj5Bg/s1600/logo+white.png"/> <div class="t1" style="float:right;font-family: roboto condensed;color: #fff;margin: 28px 29px 0 0px;font-size: 16px;">Cum sociis natoque penatibus eteny.</div><div class="t2" style="float:right;font-family: roboto condensed;color: #fff;margin: 0px 36px 0 0px;font-size: 16px;">pturient montes, nascetur ridn mus.</div> <div class="subscribe"> <form name="subscribe" action="#" method="post" target="_blank"> <input style="font-family:sans-serif;font-size:16px" type="email" placeholder="Subscribe to our newsletter..." name="fullbox" id="fullbox" size="25" value="" /> <input type="submit" class="" /> </form> </div> <div class="textf">Text</div> <div class="textf1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultrices metus ut bibendum pretium. Aenean tristique mollis ipsum eget euismod.</div>
Coming to 2nd column footer, for that you have to click on Add a Gadget in Layout in the middle widget, and select Popular Posts widget from the list and follow the image below then click SAVE.
Now the 3rd column footer, for that you have to select Html/Javascript from the Add a Gadget and give the title name as NAVIGATION as shown in the figure below.
Now paste the code given below in the content area.
<ul> <li style="border-bottom: 1px solid #424242;font-family:roboto condensed;font-size:15px"><a href="#">Home</a> <a href="#">Features</a></li> <li style="border-bottom: 1px solid #424242;font-family:roboto condensed;font-size:15px"><a href="#">Products</a> <a href="#">About</a></li> <li style="border-bottom: 1px solid #424242;font-family:roboto condensed;font-size:15px"><a href="#">Services</a> <a href="#">Contact</a></li> </ul>
After the Navigation widget, you have to add the LABEL widget, to add Label Widget, just click on Add a Gadget, then select the Label widget from the list that appears and follow the below image then click Save.
N) Credits To - top
Fonts/Icons: Font Awesome
Other Icons: http://www.iconfinder.com/
Special credits: God [ For Giving Me Strength ]
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.
Ceyron Louis At OddThemes.com