blogs911.com

834 views

Published on

how to customize template

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
834
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

blogs911.com

  1. 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. 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. 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. 4. 2. After Click "Template" On Right Side Drop Down Menu 3. Now You Can See "Backup/Restore" Button Click It
  5. 5. 04. Now Click Upload Chose File Button To Upload It (If You Need Backup Your Theme Use "Download Full Template" Option)
  6. 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. 7. 06. Now Click Upload Button
  8. 8. 07. Then you can See Theme Preview After theme Upload Don
  9. 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
  10. 10. 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
  11. 11. Then Click Edit Button On Right Side Of Header Box
  12. 12. Now You Can See This Popup Massage
  13. 13. 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.
  14. 14. 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
  15. 15. Than You Can See This Area. (Check This Image Below), now Clik Edit button
  16. 16. now you can see like this pop up
  17. 17. 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
  18. 18. Then Click On Save How To Install Recent Post By Label Tags - http://youtu.be/V5MfemX9BkA E) Image Slider - top
  19. 19. 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)
  20. 20. Than You Can See Again Popup Window Like This
  21. 21. 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>
  22. 22. </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
  23. 23. Now You Can See Layout Page Right side Area Have 3 Add a Gadget Buttons Like This picture
  24. 24. Now Click On "Add a Gadget" and Add Your Own Widgets
  25. 25. 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
  26. 26. G) Flicker Image - top You Can See sidebar Have Flicker Image Widgets. Follow this Steps To Add Flicker Widgets Go To Blogger >> Layout
  27. 27. Now Click On "Add a Gadget" and Add Your Own Widgets
  28. 28. Now Add Your Java Script Here
  29. 29. <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
  30. 30. 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
  31. 31. Now Click "Edit HTML" After You can change Your Keycode. Sample Meta Kaywords Given Below
  32. 32. <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
  33. 33. And Click On "Search Profermence" and Now Click Edit On "Meta Discription"
  34. 34. Now Add Discripton To Meta Discript
  35. 35. 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
  36. 36. And Click On "Search Profermence" and Now Click Edit On "errors and rederects"
  37. 37. 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>
  38. 38. <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
  39. 39. Now Click Edit Html Button
  40. 40. Now Find "Replace With your Blog Url"
  41. 41. 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
  42. 42. 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
  43. 43. 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)-->
  44. 44. 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.
  45. 45. k) Setup Search Box - top Go To Blgger > Layout
  46. 46. Now Click This Edit Button
  47. 47. Thene You Can See This Popup
  48. 48. 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[
  49. 49. 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
  50. 50. 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

×