KrishnaVandanu

Recent Posts Widget with Thumbnails for Blogger/Blogspot

<div dir="ltr" style="text-align: left;" trbidi="on"> A few days ago, I've posted a tutorial about How To Add A <a href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html">Simple Recent Posts Widget</a> but today I want to present to you a very nice Recent Posts widget that comes along with posts <a class="zem_slink" href="http://en.wikipedia.org/wiki/Thumbnail" rel="wikipedia" title="Thumbnail">thumbnails</a> and post summary as well. If you want to know how to add this Recent Posts widget/gadget to your <a class="zem_slink" href="http://blogger.com/" rel="homepage" title="Blogger">Blogger</a> blog, then follow the steps below: <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOXVIGa_FZTqffXM-VK1xK8HoLw8WoTYx_NxtlolxLq4qH3L2I1xSXaoijFDG1Vop22P7U-Lvl6MiUxBFjUMD-Dz6mcYSF6fS2CvwqME__bHabo-pJFv7XjA-dawozeEernhw2RlazXJuC/s1600/recent+posts+widget+with+thumbnails+for+blogger+blogspot.png" style="margin-left: 1em; margin-right: 1em;"><img alt="recent posts, blogger widgets" border="0" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOXVIGa_FZTqffXM-VK1xK8HoLw8WoTYx_NxtlolxLq4qH3L2I1xSXaoijFDG1Vop22P7U-Lvl6MiUxBFjUMD-Dz6mcYSF6fS2CvwqME__bHabo-pJFv7XjA-dawozeEernhw2RlazXJuC/s320/recent+posts+widget+with+thumbnails+for+blogger+blogspot.png" title="Recent Posts Widget With Thumbnails " width="320" /></a></div> How to Add the Recent Posts Widget to Blogger Step 1. Go To Blogger > Layout and click on "Add a <a class="zem_slink" href="http://en.wikipedia.org/wiki/Gadget" rel="wikipedia" title="Gadget">Gadget</a>" link <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilmtCMYBZFCm9nawX9YuaOVZzHRxUc8Y5o_DZvnixXIm0iF7QE8GdaETLatBQ4S__jFjnyFPXtxV3emu0ko0CLN2UgODuqS2GaaQjt5uF3PZxebDh66vmFHcBExPMqcwnQt4lnIfBqy5TV/s1600/blogger-layout-add+a+gadget-how-to.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilmtCMYBZFCm9nawX9YuaOVZzHRxUc8Y5o_DZvnixXIm0iF7QE8GdaETLatBQ4S__jFjnyFPXtxV3emu0ko0CLN2UgODuqS2GaaQjt5uF3PZxebDh66vmFHcBExPMqcwnQt4lnIfBqy5TV/s640/blogger-layout-add+a+gadget-how-to.png" width="640" /></a></div> Step 2. From the <a class="zem_slink" href="http://en.wikipedia.org/wiki/Pop-up_ad" rel="wikipedia" title="Pop-up ad">pop-up window</a>, scroll down and choose HTML/<a class="zem_slink" href="http://en.wikipedia.org/wiki/JavaScript" rel="wikipedia" title="JavaScript">JavaScript</a> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI5qpVyiHGElqFVOCLBwbgWa2xcblMQoOEOlxEZMaj_AcTqkf6Zm9Ka7PFfnddVZshQnbE9kbS5Th5RIIvQG99EmVP84aCmZAf8rz-bGMUDid65vfpeqd5mat5I5l9MzvzN3jcPmkkhXHN/s1600/blogger-widgets-gadgets-tutorials-tricks-helplogger-html-javascrip.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="195" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI5qpVyiHGElqFVOCLBwbgWa2xcblMQoOEOlxEZMaj_AcTqkf6Zm9Ka7PFfnddVZshQnbE9kbS5Th5RIIvQG99EmVP84aCmZAf8rz-bGMUDid65vfpeqd5mat5I5l9MzvzN3jcPmkkhXHN/s400/blogger-widgets-gadgets-tutorials-tricks-helplogger-html-javascrip.png" width="400" /></a></div> Step 3. Paste inside the empty box, the following code: <blockquote class="tr_bq"> <div class="eggTray"> <script src="http://helplogger.googlecode.com/svn/trunk/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list", "pipe_params":{"<a class="zem_slink" href="http://en.wikipedia.org/wiki/Uniform_resource_locator" rel="wikipedia" title="Uniform resource locator">URL</a>":"YOUR-BLOG/SITE-URL/feeds/posts/default"}, "hideHeader":"false","height":"500","count": 8 }</script> <div style="font-family: arial, sans-serif; font-size: 9px;" class="ycdr"><a href="http://helplogger.blogspot.com/2012/05/recent-posts-widget-with-thumbnails-for.html" target="_blank" title="Grab this widget">Recent Posts Thumbnails</a> <a href="http://helplogger.blogspot.com/" target="_blank">Blogger Widget</a></div><noscript>Your browser does not support JavaScript!</noscript></div> <style type=text/css> .eggTray {margin:10px 0px;<a class="zem_slink" href="http://en.wikipedia.org/wiki/Padding_%28cryptography%29" rel="wikipedia" title="Padding (cryptography)">padding</a>:0px;} .ybr li  {border-bottom:0px #cccccc dotted; padding:0px 0px 10px 0px!important;} .pipesTitle {padding-top:0px;} .pipesDescription {display:true;} .ycdr {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMawMI2YoOJVrEbo_5RhChGOg5je9ecE-XebMLdotRkff_ehLPeZzwBVDKfnah9fngHhiIkbjFT_W_m1IbRexcQhyphenhyphen3zxe0fKDfvcvPN4REmQduQ8F6RPsKy6AYqzINjZi7ppZ9sx6RUWw/s1600/logo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 4px 0px 0px 0px;line-height:14px;} .ycdr, .ycdr a {color:#999999;} <a class="zem_slink" href="http://widgets.yahoo.com/" rel="homepage" title="Yahoo! Widgets">.widget</a> .popular-posts ul {padding-left:0;} </style></blockquote> Step 4. Change YOUR-BLOG/SITE-URL with the url address of your site/blog (ex: http://helplogger.blogspot.com) and look to have no <a class="zem_slink" href="http://en.wikipedia.org/wiki/Slash_%28punctuation%29" rel="wikipedia" title="Slash (punctuation)">forward slash</a> symbol "/" at the end of your url Note: <ul> <li>To disable the <a class="zem_slink" href="http://en.wikipedia.org/wiki/Scrollbar" rel="wikipedia" title="Scrollbar">scroll bar</a>, remove the number 500</li> <li>By default, this widget is set to display a maximum of 8 recent posts. To change this number, replace the number 8 with the number of posts desired</li> <li>if you want only the posts titles to appear, change true to none and "0" from padding-top:0px with 10</li> </ul> Step 5. Save your widget. And you're done! If you need more help, leave your comment below. <div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"> <img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=0385d58c-c4b5-4fc4-ac42-9b4d1148e48a" style="border: none; float: right;" /></div> </div>

Recent Posts Widget with Thumbnails for Blogger/Blogspot

A few days ago, I've posted a tutorial about How To Add A Simple Recent Posts Widget but today I want to present to you a very nice Rec...

Fullscreen colorpicker | CSSDeck

Fullscreen colorpicker | CSSDeck

Publishing your voice is easy and free

<div dir="ltr" style="text-align: left;" trbidi="on"> Publishing your voice is easy and free Creating your blog with <a class="zem_slink" href="http://blogger.com/" rel="homepage nofollow" target="_blank" title="Blogger">Blogger</a> takes just a few easy steps. In a matter of minutes you can start posting text, photos, videos, and more to your blog. Post as often as you want; it's free. Check out this article on <a href="http://help.blogger.com/bin/answer.py?answer=41348">How to get started</a> or watch the <a href="http://goo.gl/how-to-blog-video">How to create a blog with Blogger video</a>. <a href="http://www.youtube.com/watch?v=rA4s3wN_vK8">How to Create a Blog on Blogger - YouTube</a> <object height="315" width="560"><param name="movie" value="http://www.youtube.com/v/rA4s3wN_vK8?hl=id_ID&version=3"></param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube.com/v/rA4s3wN_vK8?hl=id_ID&version=3" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object> <div class="zemanta-pixie"> <img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=5dd1343c-a7b0-40de-a00f-111db10a7abc" /></div> </div>

Publishing your voice is easy and free

Publishing your voice is easy and free Creating your blog with Blogger takes just a few easy steps. In a matter of minutes you can start p...

Publishing your voice is easy and free

<div dir="ltr" style="text-align: left;" trbidi="on">Publishing your voice is easy and free Creating your blog with <a class="zem_slink" href="http://blogger.com/" rel="homepage nofollow" target="_blank" title="Blogger">Blogger</a> takes just a few easy steps. In a matter of minutes you can start posting text, photos, videos, and more to your blog. Post as often as you want; it's free. Check out this article on <a href="http://help.blogger.com/bin/answer.py?answer=41348">How to get started</a> or watch the <a href="http://goo.gl/how-to-blog-video">How to create a blog with Blogger video</a>. <a href="http://www.youtube.com/watch?v=rA4s3wN_vK8">How to Create a Blog on Blogger - YouTube</a> <object height="315" width="560"><param name="movie" value="http://www.youtube.com/v/rA4s3wN_vK8?hl=id_ID&version=3"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/rA4s3wN_vK8?hl=id_ID&version=3" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object> <div class="zemanta-pixie"><img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=5dd1343c-a7b0-40de-a00f-111db10a7abc" /></div></div>

Publishing your voice is easy and free

Publishing your voice is easy and free Creating your blog with Blogger takes just a few easy steps. In a matter of minutes you can start p...

Follow On Tumblr

<div dir="ltr" style="text-align: center;" trbidi="on"> <div class="zemanta-img"> <a href="http://www.crunchbase.com/company/tumblr" rel="nofollow" target="_blank"><img alt="Image representing Tumblr as depicted in Crunc..." src="http://www.crunchbase.com/assets/images/resized/0000/1372/1372v1-max-450x450.png" /></a>  Image via <a href="http://www.tumblr.com/register/follow/hotbiz" target="_blank">CrunchBase</a></div> Follow Buttons: Make it easy for new and existing <a href="http://www.tumblr.com/register/follow/hotbiz" target="_blank">Tumblr </a>users to follow your blog. <iframe allowtransparency="true" border="0" class="btn" frameborder="0" height="25" scrolling="no" src="http://platform.tumblr.com/v1/follow_button.html?button_type=2&tumblelog=hotbiz&color_scheme=light" width="113"></iframe> <div class="zemanta-pixie"> <img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=5dd1343c-a7b0-40de-a00f-111db10a7abc" /></div> </div>

Follow On Tumblr

Image via CrunchBase Follow Buttons: Make it easy for new and existing Tumblr users to follow your blog.

Follow On Tumblr

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="zemanta-img"><a href="http://www.crunchbase.com/company/tumblr" rel="nofollow" target="_blank"><img alt="Image representing Tumblr as depicted in Crunc..." src="http://www.crunchbase.com/assets/images/resized/0000/1372/1372v1-max-450x450.png" /></a>Image via <a href="http://www.crunchbase.com/" target="_blank">CrunchBase</a></div>Follow Buttons: Make it easy for new and existing <a class="zem_slink" href="http://tumblr.com/" rel="homepage nofollow" target="_blank" title="Tumblr">Tumblr</a> users to follow your blog. <iframe allowtransparency="true" border="0" class="btn" frameborder="0" height="25" scrolling="no" src="http://platform.tumblr.com/v1/follow_button.html?button_type=2&tumblelog=hotbiz&color_scheme=light" width="113"></iframe> <div class="zemanta-pixie"><img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=5dd1343c-a7b0-40de-a00f-111db10a7abc" /></div></div>

Follow On Tumblr

Image via CrunchBase Follow Buttons: Make it easy for new and existing Tumblr users to follow your blog.

goog.ui.Zippy

frameborder=""

goog.ui.Zippy

frameborder=""