1. “Cody Blogger Template” Documentation by “CBTBlogger
v1.0
Created: 2013 - 08 - 11
By: Lasindu Nadishan - Cbtblogger
Email:Lasinduonline@gmail.com
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file,
please feel free to email via my user page contact form
In this document you will find the basic instructions and help you need to set up this theme. If still you have
any problem then you can contact me through ThemeForest anytime by going to my profile pag
Table of Contents
1. Html Structure
2. How To Install Blogger Tempate
3. How To Setup Headser Right Side Ads Banner
4. Recent Post By Lables
5. Image Slider
6. Setup Tabs Widgets
7. Flicker Image
8. Meta KeyWords And Discription
9. 404 Error page To Bloger
10. Setup Breaking News Bar
11. Setup Adsens Ads
12. How to Setup Search Box
13. Layout ScreenShot
14. Credit to
A) Html Structure - top
“Cody Blogger Template” Documentation by “CBTBlogger - Lasindu Nadishan”
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file,
please feel free to email via my user page contact form here. Thanks so much!
In this document you will find the basic instructions and help you need to set up this theme. If still you have
any problem then you can contact me through ThemeForest anytime by going to my profile pag
How To Install Blogger Tempate
How To Setup Headser Right Side Ads Banner
Meta KeyWords And Discription
404 Error page To Bloger
Setup Breaking News Bar
How to Setup Search Box
Lasindu Nadishan”
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file,
In this document you will find the basic instructions and help you need to set up this theme. If still you have
any problem then you can contact me through ThemeForest anytime by going to my profile page

2. The general template structure is the same throughout the template. Here is the general structure.
<div id="outer-wrapper"><!--outer wrapper Started-->
<!--Header Wep Started-->
<header id="header-wrapper">
<div id="menuatas"><!--menuatas Started-->
<div id="clock"> </div><!--Top menu right side date-->
<div id="sidebaratas"> </div><!--Page Menu-->
</div><!--"menuatas" Started-->
<!--Header Logo And Search Box-->
<div id="isihead">
<div id="headtitle"></div><!--Header Logo/Title-->
<div id="Headerads"></div><!--Header 728Px ads-->
</div>
<!--Header Logo And Search Box end-->
<div class="Main-menu"></div> <!--Header blue Color Menu-->
</header>
<!--Header Wep End-->
<!--content wrapper Started-->
<div id="content-wrapper">
<aside id="sidebar-wrapper-lf"></aside><!--Center Column-->
<div id="main-wrapper"></div><!--Main Content Area-->
<aside id="sidebar-wrapper"></aside><!--Sidebar Area-->
</div>
<!--content wrapper End-->
<!--Footer Started-->
<footer id="footer-wrapper">
div id="footer"></div><!--Footer Column's Area-->
</footer>
<!--Footer End-->
</div><!--outer wrapper End-->

3. B) How To Install Blogger Template
Now you have a Cody Blogger Template. You Can Follow This Steps To Upload Your Blogger Template To
Blogger Platform
1. First Login your Blogger dash Board and Log Using Your Google Username And Password
http://www.blogger.com
B) How To Install Blogger Template - top
Now you have a Cody Blogger Template. You Can Follow This Steps To Upload Your Blogger Template To
gger dash Board and Log Using Your Google Username And Password
Now you have a Cody Blogger Template. You Can Follow This Steps To Upload Your Blogger Template To
gger dash Board and Log Using Your Google Username And Password - use

4. 2. After Click "Template" On Right Side Drop Down Menu
3. Now You Can See "Backup/Restore" Button Click It

5. 04. Now Click Upload Chose File Button To Upload It (If You Need Backup Your Theme Use "Download Full
Template" Option)

6. 05. now Brows Your Theme Folder ( Your PC/Cody Blogger Template/Theme File/Cody Bloogger
Template.xml ) And Upload "Cody Bloogger Template.xml".

7. 06. Now Click Upload Button

8. 07. Then you can See Theme Preview After theme Upload Don

9. 08. Last Step. Now You Should Desable Default Blogger Mobile Template. Click Wheel Button Under The
Mobile And Tick - No. Show desktop template on mobile devices

11. How To Make a Blogger Blog And How To Install Blogger Template - http://youtu.be/SQqMm-OZU98
C) How To Add 728px Ads Banner To Header - top
After Add Upload Your Theme, If You Need You Can Add 468px Ads Banner To Right sidebar
01. Go Yo Blogger >> Layout

12. Then Click Edit Button On Right Side Of Header Box

13. Now You Can See This Popup Massage

14. You Can Add Your Adsens Code Or Derect Ads Code Here. I Added Sample Ads code Below.
<a href="http://www.themeforest.net/" rel="nofollow">
<img alt="Top Banner Advertisement" src="http://1.bp.blogspot.com/-
B8sJuPlJmP8/UbgT1FeNUnI/AAAAAAAACf8/_cgc88-B6ds/s1600/s468.png" />
</a>
Replace - http://www.themeforest.net/ url with your own url
Replace - http://1.bp.blogspot.com/-B8sJuPlJmP8/UbgT1FeNUnI/AAAAAAAACf8/_cgc88-
B6ds/s1600/s468.png with your won image.

15. How To Install 468Px Ads Banner Video - http://youtu.be/BDZpvlSq054
D) Recent Post By Lable For Blogger - top
You can see this Cody blogger theme has 3 column tab area with Recent Post By Labels Area.
Go To Blogger >> Layout

16. Than You Can See This Area. (Check This Image Below), now Clik Edit button

17. now you can see like this pop up

18. Add This Code Given Below
<div id="simplesidepost"></div>
<script type='text/javascript'>
$('#simplesidepost').cbrnewpost({
postType:"h",
tagName:"Movies"
});
</script>
Now You Should Replace "Movies" Tag with Your own Tag

19. Then Click On Save
How To Install Recent Post By Label Tags - http://youtu.be/V5MfemX9BkA
E) Image Slider - top

20. This theme Have Half Page responsive Image Slider, do you need to install slider, if yes follow these steps
Go To Blogger >> Layout
Then Click On Edit Buttons. (See this Example Image Below)

21. Than You Can See Again Popup Window Like This

22. Add This Code Here
<div class="flex-container">
<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
<ul class="slides">
<li data-thumb="slide1-thumb.jpg">
<a href="#">
<img src="slide1.jpg" />
</a>

23. </li>
<li data-thumb="slide2-thumb.jpg">
<a href="#">
<img src="slide1.jpg" />
</a>
</li>
<li data-thumb="slide3-thumb.jpg">
<a href="#">
<img src="slide1.jpg" />
</a>
</li>
<li data-thumb="slide4-thumb.jpg">
<a href="#">
<img src="slide1.jpg" />
</a>
</li>
</ul>
</div>
<script type="text/javascript">
// Can also be used with $(document).ready()
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
controlNav: "thumbnails"
});
});
</script>
Link Url - Replace Links Url With Links
Image URL - Replace Image URL With Your Images
Small Discription For Image - Replace your image discription
How To Install Image Slider To Cody -http://youtu.be/gEU1NJ2KS9c
F) Sidebar Tabs Widgets Setup - top
You can see this Cody blogger theme has 3 column tab area with Recent Post By Labels Area.
Follow These steps To Add Tabs Widgets
Go To Blogger >> Layout

24. Now You Can See Layout Page Right side Area Have 3 Add a Gadget Buttons Like This picture

25. Now Click On "Add a Gadget" and Add Your Own Widgets

26. After Click Save button, You Can Get Idea Using This Image
If You Add Youtube Video to Sidebar You Should Add 300*230 Size Video To There
How To Setup Tabs Widgets To blogger - http://youtu.be/O6OlNiTw2OU

27. G) Flicker Image - top
You Can See sidebar Have Flicker Image Widgets.
Follow this Steps To Add Flicker Widgets
Go To Blogger >> Layout

28. Now Click On "Add a Gadget" and Add Your Own Widgets

29. Now Add Your Java Script Here

30. <div class="flickr_plugin">
<script
src="http://www.flickr.com/badge_code_v2.gne?count=9&display=latest&size=s&la
yout=x&source=user&user=52617155@N08" type="text/javascript">
</script>
</div>
Replace This 52617155@N08 With Your Flicker Id
You Can Use http://idgettr.com/ to generate Your Flicker Id

31. How To Install Flicker Image Gallery - http://youtu.be/I8bZFo5DzIs
H) Meta Key Words And Discription - top
Seo is a one of Most Important Subject Of site. Meta Keywords And Discription Help To Seo Your Site Follow
This Steps To Add Meta Keywords And Discription to Your Site
2.After Clikc "Template" On Right Side Drop Down Menu

32. Now Click "Edit HTML"
After You can change Your Keycode. Sample Meta Kaywords Given Below

33. <meta expr:content='data:blog.metaDescription' name='description'/> <!
Meta Discription To your Blog
<meta content='Blogger , Template, New, Themes,' na
Meta Keyword To your Blog --
How to Add Meta Discription
Goto Blogger >> Settings
<meta expr:content='data:blog.metaDescription' name='description'/> <!
Meta Discription To your Blog -->
<meta content='Blogger , Template, New, Themes,' name='keywords'/><!
-->
<meta expr:content='data:blog.metaDescription' name='description'/> <!-- Add
me='keywords'/><!-- Add

34. And Click On "Search Profermence" and Now Click Edit On "Meta Discription"

35. Now Add Discripton To Meta Discript

36. How To Meta Kw And Discription - http://youtu.be/LAXQ05jtaWs
I) Add Coustom 404 Errpage - top
Add Coustom 404 Page To Cody Blogger Template.
Go To Blogger >> Settings

37. And Click On "Search Profermence" and Now Click Edit On "errors and rederects"

38. 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>Page Not Found :/</p></div>
<ul>
<form class="ssimplesearch" method="get" action="/search">
<table width="100%">
<tr>

39. <td><input type="text" style="width:95%;" value="Search this blog.."
onfocus="if (this.value == &quot;Search this blog..&quot;) {this.value =
&quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value =
&quot;Search this blog...&quot;;}" name="q"></td>
</tr>
</table>
</form>
</li>
</ul>
</div>
Then Save
How To Install 404 Error Page To Blogger - http://youtu.be/ftSKtM1zd_o
j) Setup Breking News bar - top
You Can See recent post shot as a breking news bar, follow this steps to add it to your blog
Goto Blogger >> Template

40. Now Click Edit Html Button

41. Now Find "Replace With your Blog Url"

42. Then Replace This "http://Squid-cbtblogger.blogspot.com/" This url With Your Blog URl
Finaly Click Save Button
How To add "Breaking News" Tab - http://youtu.be/sGqHA3EFfPI
j) Adsens Ads Under The Post Title and before Post Footer - top

43. do you need to add adsense ads under the blog post title and before blog post footer, ok thene foloow this
steps,
1.Add Adsens Ads After Post Title
Goto Blogger.com > Template > Html Editer
Then Search This Code
<!--Add Adsense Code Here / Under the Blog Psot Title (Show Only Post
Page)-->
Now you can see like this code
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!--Add Adsense Code Here / Under the Blog Psot Title (Show Only Post
Page)-->
</b:if>
Replace
<!--Add Adsense Code Here / Under the Blog Psot Title (Show Only Post
Page)-->
this Html Comment With Your Adsens Code

44. 2.Add Adsens Ads before Post footer
Goto Blogger.com > Template > Html Editer
Then Search This Code
<!--Add Adsense Code Here / Before Post Footer (Show Only Post Page)-->

45. Then You can see like this code
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!--Add Adsense Code Here / Before Post Footer (Show Only Post Page)-->
</b:if>
replace
<!--Add Adsense Code Here / Before Post Footer (Show Only Post Page)-->
this code with your adsens code.

46. k) Setup Search Box - top
Go To Blgger > Layout

47. Now Click This Edit Button

48. Thene You Can See This Popup

49. Then Add This Code
<div id="search-form-feed">
<form action="/search" onsubmit="return updateScript();">
<input name="q" type="text" value="Telusuri..." id="feed-q-input"
onkeyup="resetField();" onfocus="this.value='';"/>
</form>
<div id="search-result-container"></div>
<div id="search-result-loader">Loading...</div>
</div>
<script type="text/javascript">
//<![CDATA[

50. var searchFormConfig = {
url: "http://cody-cbtblogger.blogspot.com/", // Add Your Blog URl
numPost: 9999,
summaryPost: true,
summaryLength: 400,
resultTitle: "Search Result",
noResult: "No result",
resultThumbnail: true,
thumbSize: 40,
fallbackThumb: "http://reader-
download.googlecode.com/svn/trunk/images/no-image-72x72.png"
};
//]]>
</script>
<script type="text/javascript" src="http://reader-
download.googlecode.com/svn/trunk/blogger-quick-search.js"></script>
replace "http://cody-cbtblogger.blogspot.com/" This url with your blog url
l) Layout ScreenShot - top

52. 1. Fav Icon
2. Header
3. Page Menu
4. Header Ads
5. Image Slider
6. Left Sidebar
7. Recent Post By Label Area
8. Recent Post By Label Tags
9. Quick Message Wighet
10. Footer Coumn
11. Right sidebar
l) Credits To - top
Image Slider From - http://www.woothemes.com/flexslider/
Flicker Images - http://www.flickr.com/photos/we-are-envato/
Facebook Page - https://www.facebook.com/envato
Other Icons - http://www.iconfinder.com/
Modern Search Box - http://www.dte.web.id/2012/09/membangun-aplikasi-quick-search-dengan.html (Its Not
a English Blog, Please USe Translater Software)
Div popup - http://istockphp.com/jquery/creating-popup-div-with-jquery/
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. If you have a more
general question relating to the themes on ThemeForest, you might consider visiting the forums and asking
your question in the "Item Discussion" section.
CbtBlogger At Themeforest.net
Go To Table of Contents