blogs911.com

“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”
please feel free to email via my user page contact form here. Thanks so much!
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”
any problem then you can contact me through ThemeForest anytime by going to my profile page

The general template structure is the same throughout the template. Here is the general structure.
<div id="outer-wrapper">

<header id="header-wrapper">
<div id="menuatas">
<div id="clock"> </div>
<div id="sidebaratas"> </div>
</div>

<div id="isihead">
<div id="headtitle"></div>
<div id="Headerads"></div>
</div>

<div class="Main-menu"></div> 
</header>


<div id="content-wrapper">
<aside id="sidebar-wrapper-lf"></aside>
<div id="main-wrapper"></div>
<aside id="sidebar-wrapper"></aside>
</div>


<footer id="footer-wrapper">
div id="footer"></div>
</footer>

</div>

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
gger dash Board and Log Using Your Google Username And Password
gger dash Board and Log Using Your Google Username And Password - use

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

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

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

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

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

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

Then Click Edit Button On Right Side Of Header Box

Now You Can See This Popup Massage

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.

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

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

now you can see like this pop up

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

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

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

Than You Can See Again Popup Window Like This

Add This Code Here
<div class="flex-container">

<div class="flexslider">
<ul class="slides">
<li data-thumb="slide1-thumb.jpg">
<a href="#">
<img src="slide1.jpg" />
</a>

</li>
<a href="#">
</a>
</li>
<a href="#">
</a>
</li>
<a href="#">
</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

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

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

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

G) Flicker Image - top
You Can See sidebar Have Flicker Image Widgets.
Follow this Steps To Add Flicker Widgets

<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

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

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

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

Now Add Discripton To Meta Discript

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

And Click On "Search Profermence" 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>Page Not Found :/</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>
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

Now Find "Replace With your Blog Url"

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

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

Now you can see like this code
<b:if cond='data:blog.pageType == "item"'>
Page)-->
</b:if>
Replace
Page)-->
this Html Comment With Your Adsens Code

2.Add Adsens Ads before Post footer
Goto Blogger.com > Template > Html Editer
Then Search This Code

Then You can see like this code
<b:if cond='data:blog.pageType == "item"'>
</b:if>
replace
this code with your adsens code.

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

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[

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

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

blogs911.com

More Related Content

What's hot (20)

Similar to blogs911.com (20)

Recently uploaded (20)

blogs911.com