Recent Posts Widget with Thumbnails for Blogger/Blogspot

<div dir="ltr" style="text-align: left;" trbidi="on"><br />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"><span style="color: #0b5394;">Simple Recent Posts Widget</span></a><br /> but today I want to present to you a very nice Recent Posts widget that<br /> 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<br /> 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> <br />blog, then follow the steps below:<br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><br /><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><br /><br /><br /><b><span style="font-size: medium;">How <span style="font-size: medium;"><span style="font-size: medium;">t</span>o <span style="font-size: medium;">A</span>dd </span>the Recent Posts Widget to Blogger</span></b><br /><br /><br /><br /><span style="color: #0b5394;"><b>Step 1.</b></span> 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<br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><br /><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><br /><br /><br /><span style="color: #0b5394;"><b>Step 2.</b></span> 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><br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><br /><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><br /><br /><br /><span style="color: #0b5394;"><b>Step 3.</b></span> Paste inside the empty box, the following code:<br /><br /><br /><br /><blockquote class="tr_bq"><br /><div class="eggTray"><br /><br /><script <br />src="http://helplogger.googlecode.com/svn/trunk/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",<br /><br />"pipe_params":{"<a class="zem_slink" href="http://en.wikipedia.org/wiki/Uniform_resource_locator" rel="wikipedia" title="Uniform resource locator">URL</a>":"<b>YOUR-BLOG/SITE-URL</b>/feeds/posts/default"},<br /><br />"hideHeader":"false","height":"<b><span style="color: blue;">500</span></b>","count": <b><span style="color: blue;">8</span></b> }</script><br /><br /><div style="font-family: arial, sans-serif; font-size: 9px;" <br />class="ycdr"><a <br />href="http://helplogger.blogspot.com/2012/05/recent-posts-widget-with-thumbnails-for.html"<br /> target="_blank" title="Grab this widget">Recent Posts <br />Thumbnails</a> <a href="http://helplogger.blogspot.com/" <br />target="_blank">Blogger <br />Widget</a></div><noscript>Your browser does not <br />support JavaScript!</noscript></div><br /><br /><style type=text/css><br /><br />.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;}<br /><br />.ybr li  {border-bottom:0px #cccccc dotted; padding:0px 0px 10px 0px!important;}<br /><br />.pipesTitle {<b><span style="color: #38761d;">padding-top:0px;</span></b>}<br /><br />.pipesDescription {display:<span style="color: red;"><b>true</b></span>;}<br /><br />.ycdr {background:transparent <br />url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMawMI2YoOJVrEbo_5RhChGOg5je9ecE-XebMLdotRkff_ehLPeZzwBVDKfnah9fngHhiIkbjFT_W_m1IbRexcQhyphenhyphen3zxe0fKDfvcvPN4REmQduQ8F6RPsKy6AYqzINjZi7ppZ9sx6RUWw/s1600/logo.png)<br /> 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 4px <br />0px 0px 0px;line-height:14px;}<br /><br />.ycdr, .ycdr a {color:#999999;}<br /><br /><a class="zem_slink" href="http://widgets.yahoo.com/" rel="homepage" title="Yahoo! Widgets">.widget</a> .popular-posts ul {padding-left:0;}<br /><br /></style></blockquote><br /><br /><br /><span style="color: #0b5394;"><b>Step 4.</b></span> Change <b>YOUR-BLOG/SITE-URL</b> 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 "<b>/</b>" at the end of your url<br /><br /><br /><br /><b><span style="color: #0b5394;">Note:</span></b><br /><br /><ul><br /><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 <b><span style="color: blue;">500</span></b></li><br /><li>By default, this widget is set to display a maximum of 8 recent posts. To change this number, replace the number <b><span style="color: blue;">8</span></b> with the number of posts desired</li><br /><li>if you want only the posts titles to appear, change <b><span style="color: red;">true</span></b> to <b>none</b> and "0" from <b><span style="color: #38761d;">padding-top:0px </span></b>with 10</li><br /></ul><br /><br /><br /><span style="color: #0b5394;"><b>Step 5. </b></span>Save your widget. And you're done!<br /><br /><br /><br />If you need more help, leave your comment below. <br /><br /><br /><br /><div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"><br /><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><br /></div><br />

• 
• 
• 
• 

1. 1
2. 2
3. 3
4. 4

• Previous
• Next

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 Recent Posts widget that comes along with posts thumbnails and post …

Read more »

HTML Background Code

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><div dir="ltr" style="text-align: left;" trbidi="on"><br />This page contains HTML background code. Feel free to copy and paste the HTML background code into your own website, blog, MySpace page, or other HTML document. And feel free to modify the code as you wish.<br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><br /><a href="http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s1600/DSCF0494.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="177" src="http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s320/DSCF0494.JPG" width="563" /></a></div><br /><br /><br /><h2><br />Shorthand Background Code</h2><br />The quickest HTML code for backgrounds is the <code>background</code> property. Strictly speaking, this is a CSS property but you use it in conjunction with your HTML code. The <code>background</code> property is a shorthand property for setting all background properties at once. <br /><br /><table border="0" cellspacing="0" class="example"><tbody><br /><tr><th>Source Code</th><th>Result</th></tr><br /><tr><td><textarea class="exampleCode" cols="70" name="bodyText" rows="3" style="height: 91px; width: 386px;"><!--<br /> Codes by HTMLcodes.me --> <div style="background:#eee <br />url(http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s1600/DSCF0494.JPG) <br />repeat fixed;<br /> overflow:scroll;<br /> width:200px;<br /> height:100px;"><br /><p><br />This example sets all the background properties with one property - the 'background' property. This keeps the code shorter and easier to read.</p><br /></div><br />

This example sets all the background properties with one property - the 'background' property. This keeps the code shorter and easier to read.

Page Background

To set the background for the whole page, simply apply the background property against the body tag.

Example:

<body style="background:#eee url(http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s1600/DSCF0494.JPG) repeat fixed;"> ... </body>

Alternative Background Codes

Below are more HTML background codes. In these examples, instead of using the background shorthand property, we use a property more specific to the actual effect we want to achieve. Doing this is simply an alternative - it's your choice which method you use.

Background Color

This example code applies a background color to a p tag using the background-color property. You can apply background color to any other HTML element, such as a div tag, body tag etc. Here, we also apply color to the text by using the color property.

Choose a color with the HTML color picker.

Source Code	Result
<!--<br /> Codes by HTMLcodes.me --> <p style="background-color:#0f0;color:black;width:200px;"><br />This text has got a background color applied. You could also apply background color to the whole page if you like.</p><br />	This text has got a background color applied. You could also apply background color to the whole page if you like.

Background Image

This example code applies a background color to a p tag using the background-color property. You can apply background color to any HTML element, such as a div tag, body tag etc. Here, we also apply color to the text by using the color property.

Source Code	Result
<!--<br /> Codes by HTMLcodes.me --> <div <br />style="background-image:url('http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s1600/DSCF0494.JPG');color:blue;font-size:14px;width:300px;height:200px"><br />This div tag has got a background image. You could also apply a background image to the whole page if you like.</div><br />	This div tag has got a background image. You could also apply a background image to the whole page if you like.

Fixed Background Image

You can fix the background image so that it doesn't scroll when you scroll the div (or page, as the case may be).

Source Code

Result

<!--<br /> Codes by HTMLcodes.me --> <div <br />style="background-image:url(http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s1600/DSCF0494.JPG);<br /><br /> background-repeat:repeat;<br /> background-attachment:fixed;<br /> overflow:scroll;<br /> width:200px;<br /> height:100px;"><br /><p><br />This HTML background code demonstrates how to keep the background image fixed. Scroll down to see what I mean - the background image stays in the same position.</p><br /></div><br />

This HTML background code demonstrates how to keep the background image fixed. Scroll down to see what I mean - the background image stays in the same position.

http://ajabingung.blogspot.com/2013/03/html-background-code.html

HTML Background Code

<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on">This page contains HTML background code. Feel free to copy and paste the HTML background code into your own website, blog, MySpace page, or other HTML document. And feel free to modify the code as you wish.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s1600/DSCF0494.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="177" src="http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s320/DSCF0494.JPG" width="563" /></a></div><br /><h2>Shorthand Background Code</h2>The quickest HTML code for backgrounds is the <code>background</code> property. Strictly speaking, this is a CSS property but you use it in conjunction with your HTML code. The <code>background</code> property is a shorthand property for setting all background properties at once. <br /><table border="0" cellspacing="0" class="example"><tbody><tr><th>Source Code</th><th>Result</th></tr><tr><td><textarea class="exampleCode" cols="70" name="bodyText" rows="3" style="height: 91px; width: 386px;"><!-- Codes by HTMLcodes.me --> <div style="background:#eee url(http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s1600/DSCF0494.JPG) repeat fixed; overflow:scroll; width:200px; height:100px;"><p>This example sets all the background properties with one property - the 'background' property. This keeps the code shorter and easier to read.</p></div>

This example sets all the background properties with one property - the 'background' property. This keeps the code shorter and easier to read.

Page Background

To set the background for the whole page, simply apply the background property against the body tag.
Example:
<body style="background:#eee url(http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s1600/DSCF0494.JPG) repeat fixed;"> ... </body>

Alternative Background Codes

Below are more HTML background codes. In these examples, instead of using the background shorthand property, we use a property more specific to the actual effect we want to achieve. Doing this is simply an alternative - it's your choice which method you use.

Background Color

This example code applies a background color to a p tag using the background-color property. You can apply background color to any other HTML element, such as a div tag, body tag etc. Here, we also apply color to the text by using the color property.
Choose a color with the HTML color picker.

Source Code	Result
<!-- Codes by HTMLcodes.me --> <p style="background-color:#0f0;color:black;width:200px;">This text has got a background color applied. You could also apply background color to the whole page if you like.</p>	This text has got a background color applied. You could also apply background color to the whole page if you like.

Background Image

This example code applies a background color to a p tag using the background-color property. You can apply background color to any HTML element, such as a div tag, body tag etc. Here, we also apply color to the text by using the color property.

Source Code	Result
<!-- Codes by HTMLcodes.me --> <div style="background-image:url('http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s1600/DSCF0494.JPG');color:blue;font-size:14px;width:300px;height:200px">This div tag has got a background image. You could also apply a background image to the whole page if you like.</div>	This div tag has got a background image. You could also apply a background image to the whole page if you like.

Fixed Background Image

You can fix the background image so that it doesn't scroll when you scroll the div (or page, as the case may be).

Source Code

Result

<!-- Codes by HTMLcodes.me --> <div style="background-image:url(http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s1600/DSCF0494.JPG); background-repeat:repeat; background-attachment:fixed; overflow:scroll; width:200px; height:100px;"><p>This HTML background code demonstrates how to keep the background image fixed. Scroll down to see what I mean - the background image stays in the same position.</p></div>

This HTML background code demonstrates how to keep the background image fixed. Scroll down to see what I mean - the background image stays in the same position.

http://ajabingung.blogspot.com/2013/03/html-background-code.html