As many of bloggers love to show of there content in gallery or can say there most important posts or works to there readers.The first featured gallery template which i released was chucky blogger template which again was magazine style,don't forget to check it for sure.So lets take an demo of foodiary blogger template.
Features Of Foodiary Blogger Template
- Fixed Width Template
- Two Column Blogger Template
- Right Sidebar
- Rss Button Ready
- Twitter Ready Widget
- Compatible With Mozilla, Chrome and IE7
- Search Box Ready
- Beautiful Comment System
- 125 x 125 adds Widget
- Add Post Automatic Thumbnail
- Auto Slider Featured Post
Hacks Supported By Template
- Search Box For Blog
- Swap Title Hack For Blogger
- Hidden Navbar Layout
- Post Date Widget
- Blogger Avatars Activated
- Three Column Footer
- Auto Move Featured Posts
- Tweet Me Button
- Social Bookmarking Widget
- Read More Hack WIth Thumbnail
Foodiary Template Installation
- Featured Content
- Twitter Username
- 125 Banner Ads
- Post Image And Content Size
Just Go To Blogger Layout > Page Elements > Click on Edit Button of HTML/Javascript Widget as shown in below picture
And add the following codes to it.
<div id="featured">
<div class="enter">
<div class="featured-body">
<div class="featured-thumb"><img alt=" " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ4PEP4-8mNijDvgZr25mNmSt51Y0PYfHxZStcffhe956rFVbgI3DiH22hT1LGJpaJO2pyodgDSu25oX3kLnlJE6STUVj2uLQEoHzm2Kn2_wDcl1qCftvXGE9iRz5gLnwVzW3dBfuWPVdQ/s400/twitter_lg2.jpg"/></div>
<div class="featured-text"><a href="#" class="featured-title">Twitter Traffic – How To Drive Loads of Traffic to your blog</a></div>
</div>
</div>
<div class="enter">
<div class="featured-body">
<div class="featured-thumb"><img alt=" " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvZrbu3krYRp8609Gc7h5RbQqZcoa9en6WAn423RLaV7a3RkHOjAt6EQWYCwno5UWB5xDxk_WMJngu0eBrZnCrM1esiRt5r8PyzcznSUNRcSaqwlpZhepVszvwrPlmXuIujiU0xFoWFVIv/s400/ebook_350.png"/></div>
<div class="featured-text"><a href="#" class="featured-title">Secret Methods of How to Make Money with Email Marketing</a></div>
</div>
</div>
<div class="enter">
<div class="featured-body">
<div class="featured-thumb"><img alt=" " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx5SUOgTFtIZ06CZy8f3ZEEKLPL9BYfJLVaRahRGFZkhTAFIjjLPSVYiVrtcVgbUk08PrP-XvubsXjJNsFAsUUs5UKWh2rAlBh3Hrqs2z4ONJ4aH5U55TzXu2PXhTKXAJOETFY-eSlI2Pu/s400/070125_the_traffic_bully.gif"/></div>
<div class="featured-text"><a href="#" class="featured-title">Get paid to blog at today.com</a></div>
</div>
</div>
<div class="enter">
<div class="featured-body">
<div class="featured-thumb"><img alt=" " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXUOwZC0rd8YyWVLfOcoeHhGgchRn-hPhQALsBeJNjTduylPNUd-HI9zvfSjjfKaCGgoa0Yca7pBGfq_KFrxc7NzhK3X40ZyfimtHmc8zCX8unKpS_WnjGhKrw5gCQNypMIKo4tYsovPZS/s400/downloadreport.jpg"/></div>
<div class="featured-text"><a href="#" class="featured-title">Free download CPA marketing guide</a></div>
</div>
</div>
<div class="enter">
<div class="featured-body">
<div class="featured-thumb"><img alt=" " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPkbNxp3UlTv9WpyGltjg6f17vGBuPSlrHocIsHO2p5uBRVgONNpzTBAI0ZMyKjIBF0TTkuZlc3ghrBvjZsF13y9klV9E00FNuWtDew7QihS4yaW2KCB2ufIFyokPm8fTbDLXglCwZB6X8/s400/ice_cream.jpg"/></div>
<div class="featured-text"><a href="#" class="featured-title">Delicious ice cream post</a></div>
</div>
</div>
</div><!-- END featured -->
Just what you have to do is edit the red content i.e red link with the image link of your post,red text with post title and # with the post link.Edit all the below content like this to make your own.
I have hosted the javascripts file in blogger itself because of bandwidth problems.You can host them to your server also to make your template load fast.All three scripts you will get together with template on above download link.
Just find below codes and change the twitter username to yours.
<a class='side-twitter' href='http://www.twitter.com/anshuldudeja'>Follow me on Twitter</a>
Just find the below codes:-
<div class='banner'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZAzWlPTBJMsgUS_a6gm1GiYx7I8Sn_U-odBapqQfqMU3QWRSrvorCiQYTTpAVxok8ZuS2a1O98zdxQ5k6yFR3P0vQc6G8DffZbgssJ9fNQJHdW3H8Z7wkwwPSJTsVubp31BQBt_kGAk4t/s400/125.gif'/></a>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZAzWlPTBJMsgUS_a6gm1GiYx7I8Sn_U-odBapqQfqMU3QWRSrvorCiQYTTpAVxok8ZuS2a1O98zdxQ5k6yFR3P0vQc6G8DffZbgssJ9fNQJHdW3H8Z7wkwwPSJTsVubp31BQBt_kGAk4t/s400/125.gif'/></a>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZAzWlPTBJMsgUS_a6gm1GiYx7I8Sn_U-odBapqQfqMU3QWRSrvorCiQYTTpAVxok8ZuS2a1O98zdxQ5k6yFR3P0vQc6G8DffZbgssJ9fNQJHdW3H8Z7wkwwPSJTsVubp31BQBt_kGAk4t/s400/125.gif'/></a>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZAzWlPTBJMsgUS_a6gm1GiYx7I8Sn_U-odBapqQfqMU3QWRSrvorCiQYTTpAVxok8ZuS2a1O98zdxQ5k6yFR3P0vQc6G8DffZbgssJ9fNQJHdW3H8Z7wkwwPSJTsVubp31BQBt_kGAk4t/s400/125.gif'/></a>
</div>
Now replace the # with links and image link with yours or either completely remove all codes if you don't want banner ads.
summary_noimg = 730;
summary_img = 140;
img_thumb_height = 230;
img_thumb_width = 295;
Just find above codes and control these properties to do change in image size and content size if you want to,as many users like to adjust in there own way.You can read about adjusting whole hack here - Automatic Read More Hack With Thumbnail.
Donate If You Like The Work
If You Really liked our work and want us to continue provide these premium templates for free, Then support us by donating something you feel for this design by using paypal button in my sidebar.
No comments:
Post a Comment