Add Cute Custom Facebook Like Box To Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="http://bit.ly/13W8b3f" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="How To Add a Custom Facebook Like Box to Your Site" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBxf2C1WqtO7WGXuoDcAquXAI-yABlY_D6OCW6ronBTGDJ-alivEypYUiHr0zmtcOP3y7nk7_2ZnGbi3_DLvgsj1KHaeDIoRq4lfKmm5H834kz76G-sU56OxqoiaAhWSsopuJxrdnXebPP/s1600/fan+box+like.png" title="How To Add a Custom Facebook Like Box to Your Site" /></a></div>Facebook Like Box is very useful widget to show visitors the authority and love of the people for his blog. Facebook offers a simple Like Box plugin that you can easily integrate into your website But the default Facebook like box is not having good look at ugly all. This tutorial will show you How To Add Cute Custom Facebook Like Box using CSS To Blogger. Facebook Like Box is the best way to get more fans on Facebook. A Fan Box allows great attract your Blog more visitors or readers to like your Facebook fan page not leaving the like go here. you don't need to do any think you only need to copy and paste the code. Im Sure that this Cool Customize Facebook Like Box With CSS widget attracts your facebook fans increase the count of Likes.<br /><br /><a name="more"></a><br /><span style="color: red; font-size: x-large;">How To Add a Custom Facebook Like Box to Your Site</span><br /><br /><br />Now let's start adding it... <br /><br /><b><span style="color: blue;">Step 1.</span></b> Login to Your Blogger Account.Go to your Blogger Dashboard.Click on Layout tab from left pane and click on Add a Gadget link. <br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://bit.ly/work24" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" height="345" img="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2RdNBqjfjEofcH93jGolZE6_pO9V3I50yTHO220rTtU-8UX3B3SGub2G4opdXfOKnJRB5byMqiXhASBACXQmhAmGJsHQueKJz-1MWPnXQ8-zAYe_p_uNlnQ3OzIg1zjXyX-aX6PTOg4F_/s1600/Blogger+Dashboard,+go+to+Layout+and+click+on+Add+a+Gadget+link.png" width="550" /></a></div><br /><b><span style="color: blue;">Step 2.</span></b> After click on Add a Gadget link A pop-up box will open now<br />with many gadget list, Choose HTML/JavaScript from the gadget options by clicking the blue plus sign for that gadget. <br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://bit.ly/work24" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" height="219" img="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr9fOyYc42xjawkDpgQUW445mywOAf8BcrMrPvRja_q6sC-hE07ieCRv05XAW4cxof7XpNKA4BN5UUhaG7ewjT5NUYxU6maBPRCs4fEhCu3JiZOOBbxTnnMvygQnlPrCvx0IpnZgAfVmQ9/s1600/pop-up+window,+choose+the+HTMLJavaScript+widget.png" width="486" /></a></div><br /><b><span style="color: blue;">Step 3.</span></b> Select 'HTML/Javascript' and add the one of code given below. <br /><br /><b><span style="color: blue;">Step 4.</span></b> Now Click On Save 'JavaScript' You are done.<br /><br /><h4 style="text-align: left;"><span style="color: red;">Note:</span>- Replace <span style="background-color: magenta;">pages%2FBlogspot-tutorial%2F220888831260608</span> With your Facebook User name</h4><br />Style 1:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Customize Facebook Like Box" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk2Jqndlx-SAZEML2OZfJHhJHPAgZKcsKa2I28oOnKHt7NcnqF0h3xCFJCpXNeePU4WjtHixN0yDGS8CpIhCFfXDSKcxIbnXyeTzkmjBEq4Y_xxViEHYp1VV6mpRFwS8RwsUdq74PgMwIg/s1600/Style+1.png" title="Customize Facebook Like Box" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/fan-box-like/style-1.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><div style="background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLzUzW57jqdq7X8B_7M01sm2iQix4YRYEEA9fLKsAiyYAxpFkO3AdKw7oxxQrOpRP39S2GsACzhv0ZAfddirUdL7DSZ6WPuTcl_di0SZnUTHNAnrpMKpyQlFISGoXVTSZcNhuExUJezpu6/s1600/fan-01-pic.png');overflow:hidden;border-radius: 110px;.height:250px;width: 238px;border-radius: 0px 13px 0px 0px;overflow: hidden;"><div style="height: 250px; overflow: hidden;"><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F<span style="color: magenta; font-size: large;">pages%2FBlogspot-tutorial%2F220888831260608</span>&amp;width=250&amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe><br /></div><br /></div></div><br /><br />And now click <b style="background-color: #ff7700; border: solid #993300 1px; color: white; margin: 2px; padding: 2px;"> Save </b><br /><br /><br /><br />Style 2:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Customize Facebook Like Box" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlrk5_t4Ji3csZKh0G3UYdDLXbC38APw9s9ioWdasXyoYLSayUYG7JKzKNptfejg_YFba-ZSPg8I5UADksQ-QjwAHYFgKkXmzltxci50i4t-aI8UGDBebJG7R7tQq3Y_ACFkbQ_GxOmjm7/s1600/Style+2.png" title="Customize Facebook Like Box" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/fan-box-like/style-2.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><div style="background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiefpnwAqu9ZA1AFOCTd65pUcgPjzlaxNduNpdZOh5W66YW3jzFP23nsc2Rl0wMUqxQljOZE5U-M009tDgE-f2BuzIX1UgRP8J5u8sqp4PtugUUlntpha0SWLVJfqm78H6QKE1NDZDwvctQ/s1600/fan-02-pic.png');overflow:hidden;border-radius: 110px;.height:250px;width: 238px;border-radius: 0px 13px 0px 0px;overflow: hidden;"><div style="height: 250px; overflow: hidden;"><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F<span style="color: magenta; font-size: large;">pages%2FBlogspot-tutorial%2F220888831260608</span>&amp;width=250&amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe><br /></div><br /></div></div><br /><br /><br />Style 3:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Customize Facebook Like Box" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMkzowZNhY6C_ne7Hcos3FryR28zxN2uksQTHnQX78gQccn3dRO_OOxuXuMV0URs_sctWlWgERsE05rp1R1KTSmoPAwvzwoKsSLE1fzuw-SOmFlYxwEetHYf39rpPtFrpc4YnlFx_6Jh1s/s1600/Style+3.png" title="Customize Facebook Like Box" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/fan-box-like/style-3.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><div style="background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVJmCWJQlak9WM_x8W0vKX0MXSJRtHPxhB4xNU4WzoUnvc2GkgxzKicIJ1VRfVLuz_YILbULxukCkYV__i5RGemGghPAL0Zydi5PY1XPbjOSUgrMeK3m3c9tfKzdIN38dNjyQOWnP8WlEv/s1600/fan-03-pic.png');overflow:hidden;border-radius: 110px;.height:250px;width: 238px;border-radius: 0px 13px 0px 0px;overflow: hidden;"><div style="height: 250px; overflow: hidden;"><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F<span style="color: magenta; font-size: large;">pages%2FBlogspot-tutorial%2F220888831260608</span>&amp;width=250&amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe><br /></div><br /></div></div><br /><br /><br />Style 4:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Customize Facebook Like Box" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNU6_8brwgqEQd3oL1IiAuUNS7-LTos616ZIutkgcFz-3jh4e9E9kYOTWn3DyfojrqCm2BchI-ZnAIxuVP3w2YhIwZgfYdt31UsgwWTDxe_GTByN0Ydcna_7blNc8Px7uqCOu6VhYna-3Z/s1600/Style+4.png" title="Customize Facebook Like Box" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/fan-box-like/style-4.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><div style="background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj16cEXoReopLrrjJLuPIu9sXHHlrRWv0vzCOq_gWusDjdNo4BJwipaBfg1AFfTNiuyutJP2ZubY1PhNwO1WPo-igsV00eGUW_wfVzuUe4ypneEVN8N1ll0FN1B9OvbYSPHXS4HC7lYnsbY/s1600/fan-04-pic.png');overflow:hidden;border-radius: 110px;.height:250px;width: 238px;border-radius: 0px 13px 0px 0px;overflow: hidden;"><div style="height: 250px; overflow: hidden;"><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F<span style="color: magenta; font-size: large;">pages%2FBlogspot-tutorial%2F220888831260608</span>&amp;width=250&amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe><br /></div><br /></div></div><br /><br /><br />Style 5:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Customize Facebook Like Box" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmD4XDVB-VT_uqC535Nb934iqOiBfSw4q0pWJdoS1TfLiKmmVyPdFJzkXmhskHbAJXZhdZ1WN4ta4KhdwWzV1qOWi3NeuJkdV8WhS9yTzofrOMIs1zxkDJ9SdNUNqiWcPdZ7nMQ2C_gK7v/s1600/Style+5.png" title="Customize Facebook Like Box" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/fan-box-like/style-5.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><div style="-moz-box-shadow: 0px 15px 20px 0px #777777; -webkit-box-shadow: 0px 15px 20px 0px #777777; background-color: #f4f4f4; border-radius: 15px; border: 1px solid #CCCCCC; box-shadow: 0px 15px 20px 0px #777777; height: 270px; margin: 30px; padding: 10px 0 10px 10px; width: 250px;"><div style="height: 250px; overflow: hidden;"><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F<span style="color: magenta; font-size: large;">pages%2FBlogspot-tutorial%2F220888831260608</span>&amp;width=250&amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe><br /></div><br /></div></div><br /><br /><br />Style 6:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Customize Facebook Like Box" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6l_J-YStRNBfXIzEdt7YVR79GjIk9K8GaF1x91sU3jZJ1tjPFF_T81AgBGnTlJXekEXMMwI428K4z-6BtxlpmELMz1Z2If3Q7ohBINVQ-vV-YyBVMhloLAZVxqb7WHJgEKiCxD0yeBi_P/s1600/Style+6.png" title="Customize Facebook Like Box" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/fan-box-like/style-6.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><div style=".width:248px; padding:10px 0px 10px 10px;height:230px;border-top:5px solid #CCCCCC;border-right:5px solid #CCCCCC;border-bottom:5px solid #cccccc;border-left:5px solid tomato;border-radius: 0px 30px 0px 0px;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2_PouVP7UFFX1ZcthpvtiemG-cJLa_9g026oLzTAlZ187GtgzhF3Al4JpdJC9HrhuIohk0B6Chyzg1jp4pOaCiMLR45IqKLfE5wmLmlq-7muG_UsDNEltdGs7Wx1Xu7c8Sp8XTC2dk41A/s320/3783098647_fb208001b5.jpg');overflow:hidden;.height:250px;width: 238px;border: 5px outset #f2f2f2;border-radius: 0px 13px 0px 0px;overflow: hidden;"><div style="height: 250px; overflow: hidden;"><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F<span style="color: magenta; font-size: large;">pages%2FBlogspot-tutorial%2F220888831260608</span>&amp;width=250&amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe><br /></div><br /></div></div><br /><br /><br />Style 7:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Customize Facebook Like Box" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS1x1IJ21Sos45eNMb20Jk5jAQOPg5xxaPADAn9oe8cmwjYHrVc0QqaxJgxRm9-a9dAP-iC0R1Bk-WHf8wPg4G_-5XmtAfU5c7GhhOhYxbcS0w7umZkcxg4R9WJZ0wi8sttxdSl5ryjsSu/s1600/Style+7.png" title="Customize Facebook Like Box" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/fan-box-like/style-7.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><div style=".width:248px;padding:10px 0px 10px 10px;height:230px;border-top:5px solid #CCCCCC;border-right:5px solid tomato;border-bottom:5px solid #cccccc;border-left:5px solid tomato;border-radius: 0px 30px 0px 0px;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ7m8xvFBQswYaSYW3PcPj4RR-3T2QMI1Jo507QVP3lSxP_AM9CSRDU9ppkykmrlWK9fyHAyFw4l3IAJ0Ff33X4gfYVH7PezijayI5r1ThD-znghWjlyMDnT2HZ5Myj6QPveoZ1K-p20rn/s1600/image4.png');overflow:hidden;border-radius: 110px;.height:250px;width: 238px;border-radius: 0px 13px 0px 0px;overflow: hidden;"><div style="height: 250px; overflow: hidden;"><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F<span style="color: magenta; font-size: large;">pages%2FBlogspot-tutorial%2F220888831260608</span>&amp;width=250&amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe><br /></div><br /></div></div><br /><br /><br />Style 8:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Customize Facebook Like Box" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxcfZW8dMw7JsLD3z8d6Y6sIUGHcxtidIEYXdZgbjjf5VK7jRqfOjywuSYygEguBBSzpvY8Eui4LtCTsUUp_9bt4pE8ji_WlQaD63Vv2VpFKcOuNRE3MT8s83F61KoKykhzGj7gTEI4oBr/s1600/Style+8.png" title="Customize Facebook Like Box" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/fan-box-like/style-8.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><div style=".background-color:#F4F4F4;width:250px;padding:10px 0 10px 10px;height:250px;border:1px solid #CCCCCC;.height:250px;overflow:hidden;"><div style="height: 250px; overflow: hidden;"><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F<span style="color: magenta; font-size: large;">pages%2FBlogspot-tutorial%2F220888831260608</span>&amp;width=250&amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe><br /></div><br /></div></div><br /><br /><br />Style 9:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Customize Facebook Like Box" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeMjLBaVstebx9cpVRrPpWxr81ozhvHrDO16n3iapvbrJ2V9RIsy1yv2yOwnz5WuURvWQrxzpw1Wj6eR-Tbztz10A3fLQ7xO3Z-RH9N74jnABGiMc2KPOPZFEy8KkwpAHSRckCmpTRXjR_/s1600/Style+9.png" title="Customize Facebook Like Box" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/fan-box-like/style-9.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><div style="background-color:#F8E0E0;width:250px;padding:10px 0 0px 10px;height:250px;border:2px ridge #CCCCCC;box-shadow:10px 5px 5px #CCCCCC;"><div style="height: 250px; overflow: hidden;"><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F<span style="color: magenta; font-size: large;">pages%2FBlogspot-tutorial%2F220888831260608</span>&amp;width=250&amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe><br /></div><br /></div></div><br /><br /><br />Style 10:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Customize Facebook Like Box" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigC-6LZTywm0Z8urq5lnzy4ydRRHZimpywTUixoJu1Zwo-UhQWTAjlketY2KhCIiALyEEA6wpDlNgm0OCE0Ltp7mT6NrqsoDGm9_qpLPByl1RxKP5K25TvMCQjva_7jU1spz3AzVNized4/s1600/Style+10.png" title="Customize Facebook Like Box" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/fan-box-like/style-10.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><div style="background-color:#F4F4F4;width:250px;padding:10px 0 10px 10px;height:250px;border:1px solid #CCCCCC;"><div style="height: 250px; overflow: hidden;"><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F<span style="color: magenta; font-size: large;">pages%2FBlogspot-tutorial%2F220888831260608</span>&amp;width=250&amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe><br /></div><br /></div></div><br /><br /><br />Style 11:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Customize Facebook Like Box" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgam8rQOCoRhjaXSAxqOrVMDXn6Zw6-jzBofVULnVu9nJ2xmFR-XJKTlwsRHP9z34oC3_MXT9RgIKEj3vcQ6SJtuNf2fhPUB07qemkCPwaWlNi_W4QIb6qwZFFQv4h0sr8D8qhn2n5YdBrS/s1600/Style+11.png" title="Customize Facebook Like Box" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/fan-box-like/style-11.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><div style="background:#F6CECE;width:250px;border:1px solid#FA5858;padding:2px;"><div style="height: 250px; overflow: hidden;"><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F<span style="color: magenta; font-size: large;">pages%2FBlogspot-tutorial%2F220888831260608</span>&amp;width=250&amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe><br /></div><br /></div></div><br /><br /><br />Style 12:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Customize Facebook Like Box" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBNYnsJEGqxELTZhM_TOcNMYOb5C2Z_4hwt2kQNZCL3WYCVUbHpRUQ7pHVIGRxsKAMfvegRNksMtndjEixyFw3VfJ-mhVa4QBf3DdIs4dwjkEX7RSSVgBo4qF5Lr6o5Sg4v-0XneQwOJba/s1600/Style+12.png" title="Customize Facebook Like Box" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/fan-box-like/style-12.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><style type="text/css">.labstrikeFB {width: 250px;height: 250px;border-radius: 3px;position: relative;<br />background-color:#f4f4f4;padding:5px 10px 15px 0}.labstrikeFB,.labstrikeFB:before, .labstrikeFB:after {background:#f4f4f4;border: 1px solid #ccc;}.labstrikeFB:before,.labstrikeFB:after {content:"";position:absolute;bottom: -3px;left: 2px;right: 2px;height: 1px;border-top: none;}.labstrikeFB:after {left: 4px;right:4px;bottom: -5px;box-shadow: 0 0 2px #ccc;}<br /></style><div class="labstrikeFB"><div style="height: 250px; overflow: hidden;"><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F<span style="color: magenta; font-size: large;">pages%2FBlogspot-tutorial%2F220888831260608</span>&amp;width=250&amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe><br /></div><br /></div></div><br /><br /><br />Style 13:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Customize Facebook Like Box" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIDILZrvJl0eoXW3KtxyyJuHZOuMT0jBdsixdg7u5I8zonI-BnSzUFVij0WUu2mBDistq-8It7LXvomr1NeNZfDFDclUKvQJgBcEtMl4W70hnERa1bJAW5svqyojH0sfb1ypnEJjf_T_-X/s1600/Style+13.png" title="Customize Facebook Like Box" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/fan-box-like/style-13.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><div style="width:250px; height:250px; background: #FFFFCC; border:1px dashed #FF3300;"><div style="height: 250px; overflow: hidden;"><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F<span style="color: magenta; font-size: large;">pages%2FBlogspot-tutorial%2F220888831260608</span>&amp;width=250&amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe><br /></div><br /></div></div><br /><br /><br />Style 14:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Customize Facebook Like Box" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj04d-FdJRYO2ny2oFz5V0D0LnYKMUam3mCCtrgl96NN6pv2DogsXKXzohHO-39rez4E_nqHHAsJclOHuB7e14gD8ycVNDZjR_V8AFNqfIUQUeOb2I9XQ3ezQGpkr4fxM2_iH7Sefkes_kT/s1600/Style+14.png" title="Customize Facebook Like Box" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/fan-box-like/style-14.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><div style="background:#f4f4f4;width:250px;padding:0 0px;margin:10px 0;border:solid 6px #e9e8e8;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;"><div style="height: 250px; overflow: hidden;"><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F<span style="color: magenta; font-size: large;">pages%2FBlogspot-tutorial%2F220888831260608</span>&amp;width=250&amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe><br /></div><br /></div></div><br /><br /><br />Style 15:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Customize Facebook Like Box" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcuxlLn_sGGLnOQeF_MWDIEfQ34ffIoOAvkFFS_bjVj7AHwTTLgmlN1fr4Lr4aDI45nOXkQSLaMc3irp1uIoKCBEUpvj7iTCEzTG9KubQC-CgyzjVV7QK1bf2EYLrEm1_2jZXBhX7DDToz/s1600/Style+15.png" title="Customize Facebook Like Box" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/fan-box-like/style-15.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><div style="background: rgb(0, 255, 0);background: -moz-linear-gradient(90deg, rgb(0, 255, 0) 14%, rgb(249, 228, 175) 69%);background: -webkit-linear-gradient(90deg, rgb(0, 255, 0) 14%, rgb(249, 228, 175) 69%);background: -o-linear gradient(90deg, rgb(0, 255, 0) 14%, rgb(249, 228, 175) 69%);background: -ms-linear-gradient(90deg, rgb(0, 255, 0) 14%, rgb(249, 228, 175) 69%);background: linear-gradient(90deg, rgb(0, 255, 0) 14%, rgb(249, 228, 175) 69%);width:250px;padding:0 0px;margin:10px 0;border:solid 1px #c7c7c7;"><div style="height: 250px; overflow: hidden;"><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F<span style="color: magenta; font-size: large;">pages%2FBlogspot-tutorial%2F220888831260608</span>&amp;width=250&amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe><br /></div><br /></div></div><br /><br /><br />Style 16:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Customize Facebook Like Box" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIf5l0yAOfKk32N4Q5RBG6tgu41BSmFLGFYqh-vbNa-hctbWYGwwAa8-1zIOAry0KThMnHggLsuR48NcaDb2pDspAAC7corJ0OHIxWYJ8y3PUYCLlloVnZIaBTqWQB_JvPNO37TI7v-VfA/s1600/Style+16.png" title="Customize Facebook Like Box" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/fan-box-like/style-16.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><style>#FBox{display:block;position:absolute;top:8px;left:8px}<br /></style><svg width="250px" height="258px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <desc>Facebook Like Box</desc> <g> <defs> <lineargradient id="MyGradient"> <stop offset="20%" stop-color="pink" /> <stop offset="40%" stop-color="white" /> <stop offset="60%" stop-color="mistyrose" /> <stop offset="70%" stop-color="#f2f2f2" /> <stop offset="100%" stop-color="dodgerblue" /> </stop></stop></stop></stop></stop></lineargradient> </defs> <rect fill="url(#MyGradient)" x="0" y="0" width="292" height="258"/> </rect></g></svg><div id='FBox'><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F<span style="color: magenta; font-size: large;">pages%2FBlogspot-tutorial%2F220888831260608</span>&amp;width=250&amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe><br /></div><br /></div></div><br /><br /><br />Style 17:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Customize Facebook Like Box" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrRZpqSGiyuy2hvYuQNjaSLrLwhSXKT1PCWB2aNRgeiP7__4Xd56XX-BLitscHNnxzAWBjauCARmD1Vkbzt6b8R4RVMhtSg6YhEu_bwaFZoMg_3dLP5LMgOVq4hlqM268OGsutkeg70PFR/s1600/Style+17.png" title="Customize Facebook Like Box" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/fan-box-like/style-17.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><div style="background-color:#D6E0FF;width:250px;padding:10px 0 10px 10px;height:250px;border:1px solid #66F;border-radius:10px;"><div style="height: 250px; overflow: hidden;"><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F<span style="color: magenta; font-size: large;">pages%2FBlogspot-tutorial%2F220888831260608</span>&amp;width=250&amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe><br /></div><br /></div></div><br /><br /><br />Style 18:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Customize Facebook Like Box" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRwHOKx6YyrXl-I8FZCB1qt4apAmJlCTkSsWkRixu9B3gqgGAzwzfEGyVr29xuZS09OE1dR6eIJ34TVLFlLKzBuRtVNmshQBrVizFXSJmoaJzsvJG5aLrzEG0iNjfslSJ28czBiLvEjanc/s1600/Style+18.png" title="Customize Facebook Like Box" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/fan-box-like/style-18.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><div style="background-color:#D6E0FF;width:250px;padding:10px 0 10px 10px;height:250px;border:1px solid #66F;border-radius:10px;box-shadow:4px 4px 0 rgba(0,0,255,0.45);"><div style="height: 250px; overflow: hidden;"><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F<span style="color: magenta; font-size: large;">pages%2FBlogspot-tutorial%2F220888831260608</span>&amp;width=250&amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe><br /></div><br /></div></div><br /><br /><br />Style 19:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Customize Facebook Like Box" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR8W0_ZxiH_grt1R6zCL5m0SdMmothZ9TxnJQeRylV-qdX8i_WnKtZAmqDBgbP5UedTOBEInaWnVea0mQoT3cS8F9nXdcV2bHAAzOTrlK6gBEmeaNrZFsS0ZYhiaBoarN_aDHy4i1WU-Mc/s1600/Style+19.png" title="Customize Facebook Like Box" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/fan-box-like/style-19.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><div style="background: rgb(255, 192, 203);background: -moz-linear-gradient(90deg, rgb(255, 192, 203) 14%, rgb(249, 228, 175) 69%);background: -webkit-linear-gradient(90deg, rgb(255, 192, 203) 14%, rgb(249, 228, 175) 69%);background: -o-linear gradient(90deg, rgb(255, 192, 203) 14%, rgb(249, 228, 175) 69%);background: -ms-linear-gradient(90deg, rgb(255, 192, 203) 14%, rgb(249, 228, 175) 69%);background: linear-gradient(90deg, rgb(255, 192, 203) 14%, rgb(249, 228, 175) 69%);width:250px;padding:0 0px;margin:10px 0;border:solid 1px #c7c7c7;"><div style="height: 250px; overflow: hidden;"><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F<span style="color: magenta; font-size: large;">pages%2FBlogspot-tutorial%2F220888831260608</span>&amp;width=250&amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe><br /></div><br /></div></div><br /><br /><br />Style 20:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Customize Facebook Like Box" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMax92Y9pkZpXXjR7SkGOeBBHN7NRP-T3clTC5W3q2ESuParI1c0BhsCvpbINhOMthzJklUqntlX_q7oLsAXKc01YJ8IaL9FBKqP74gmWntQSQwBEyabHp7lrg3paIEZyQ5MtDmQBME3hs/s1600/Style+20.png" title="Customize Facebook Like Box" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/fan-box-like/style-20.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><div style="background: rgb(255, 123, 73);background: -moz-linear-gradient(90deg, rgb(255, 123, 73) 14%, rgb(232, 129, 116) 69%);background: -webkit-linear-gradient(90deg, rgb(255, 123, 73) 14%, rgb(232, 129, 116) 69%);background: -o-linear gradient(90deg, rgb(255, 123, 73) 14%, rgb(232, 129, 116) 69%);background: -ms-linear-gradient(90deg, rgb(255, 123, 73) 14%, rgb(232, 129, 116) 69%);background: linear-gradient(90deg, rgb(255, 123, 73) 14%, rgb(232, 129, 116) 69%);width:250px;padding:0 0px;margin:10px 0;border:solid 1px #c7c7c7;"><div style="height: 250px; overflow: hidden;"><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F<span style="color: magenta; font-size: large;">pages%2FBlogspot-tutorial%2F220888831260608</span>&amp;width=250&amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe><br /></div><br /></div></div><br /><br /></div>

Add Cute Custom Facebook Like Box To Blogger

Facebook Like Box is very useful widget to show visitors the authority and love of the people for his blog. Facebook offers a simple Like Bo...

Read more »

How To Add Animated Flash Clock To Your Blogger Blog

<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="http://bit.ly/vU4F7I" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Animated Flash Clock To Your Blogger Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3OU9DX46ZiK0a9YIYjUTtp2w-YmtO2pF9qTN1fctVCnLgy0P7g-j49PVXkktED8hFOzRMRBAhBB80u43JLqZcNC1QV9cuqByidYPgxQW4EU0yn5tru4vJAETFvr1eXyKWEuwYNfj6SqYW/s1600/Flash+Clock+To+Your+Blogger+Blog.png" title="Animated Flash Clock To Your Blogger Blog" /></a></div><br />Hello! `How are you guys? here's the cool Clock.this tutorial will show you how to Add animated flash clock gadget your Blogger blog. A clock gives a beautiful look to a website. A clock is a necessity for a personal website, forum, blog etc.Isn’t it exciting when you get a highly quality flash Clock absolutely Free? you can add this flash animated clock your blog easily.i've tested this Flash Clock on internet explorer, mozzilla firefox & many other web browsers. it's very fast and fresh.You simply have to copy the code below each clock and add it to your blog.<br /><br /><br /><a name="more"></a><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/flash-clocks/animated-flash-clock-demo-1.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><h3 style="text-align: left;"><b><span style="color: red;">How To Add Aniamted Flash Clock Widget To Blogger?</span></b></h3></div><ul style="text-align: left;"><li>Choose a type of clock below</li><li>Provide Require widget title</li><li>Fill <b>Height</b> and <b>Width</b> of the Widget </li><li>Click on <b>"Genetate"</b> button</li><li>Finally click on <b>"Add to Blogger"</b> to add it to your blog.</li></ul><br /><br /><br /><br /><iframe allowtransparency="true" frameborder="0" height="2400px" scrolling="no" src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/flash-clocks/free-flash-clock-yocode.html" width="100%"></iframe><br /><br /><br /><br /><br /><br /><b>Add Animated Flash Clock To Your Blogger blog</b><br /><br /><br />Now let's start adding it... <br /><br /><b><span style="color: blue;">Step 1.</span></b> Login to Your Blogger Account.Go to your Blogger Dashboard.Click on Layout tab from left pane and click on Add a Gadget link. <br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://bit.ly/work24" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" height="345" img="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2RdNBqjfjEofcH93jGolZE6_pO9V3I50yTHO220rTtU-8UX3B3SGub2G4opdXfOKnJRB5byMqiXhASBACXQmhAmGJsHQueKJz-1MWPnXQ8-zAYe_p_uNlnQ3OzIg1zjXyX-aX6PTOg4F_/s1600/Blogger+Dashboard,+go+to+Layout+and+click+on+Add+a+Gadget+link.png" width="550" /></a></div><br /><b><span style="color: blue;">Step 2.</span></b> After click on Add a Gadget link A pop-up box will open now<br />with many gadget list, Choose HTML/JavaScript from the gadget options by clicking the blue plus sign for that gadget. <br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://bit.ly/work24" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" height="219" img="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr9fOyYc42xjawkDpgQUW445mywOAf8BcrMrPvRja_q6sC-hE07ieCRv05XAW4cxof7XpNKA4BN5UUhaG7ewjT5NUYxU6maBPRCs4fEhCu3JiZOOBbxTnnMvygQnlPrCvx0IpnZgAfVmQ9/s1600/pop-up+window,+choose+the+HTMLJavaScript+widget.png" width="486" /></a></div><br /><br /><b><span style="color: blue;">Step 3.</span></b> Select 'HTML/Javascript' and add the one of code given below. <br /><br /><b><span style="color: blue;">Step 4.</span></b> Now Click On Save 'JavaScript' You are done.<br /><br /><br />Happy blogging!<br /><br /><br /><br /><br /><br />Special Thanks http://flash-clocks.com/ & http://flash2nd.blogspot.com/<br /><br />Picture From http://www.2dayblog.com/2009/10/19/manual-digital-clock/<br /><br /><br /><br /><br /></div>

How To Add Animated Flash Clock To Your Blogger Blog

Hello! `How are you guys? here's the cool Clock.this tutorial will show you how to Add animated flash clock gadget your Blogger blog. A ...

Read more »

How to change mouse cursor in blogger blog to animated cursors

<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="http://bit.ly/wmV0kq" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="mouse cursor in blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBCR4t3uVrlroEf3aQmo8KpBCtsx8dX0hqhzIY_ZNRC3dZ3u9_d0TIpBu_mZoLW2gzJSdNAXuKyr1L3xziUswrNRaIsm2_MzdW6UxIR8jle20ULQ2Th1TynlvbOOAgQZluFmJUI3Ch4gGB/s1600/mouse+cursor+in+blogger.png" title="mouse cursor in blogger" /></a></div><br />How to change mouse cursor in blogger blog to animated cursors.One of the best way to add extra fun to your blog is, changing mouse cursor on your blog. Changing the mouse cursor in blogger or blogspot blogs is very easy.This tutorial will help you to change the mouse cursor of your blog to animated cursors.Many bloggers are asking such kind of questions but there is no tutorial available on the internet.I created this post because there are a blogger friend who asked how to change the pointer / cursor on the blogger. This you can do to decorate the look of blog.<br /><br /><br /><br />Read More:<br /><span style="color: red;"><b>1. <a href="http://bit.ly/trHoJv" target="_blank"><span style="color: red;">How To Add Snow Effect On The Blogger Mouse Cursor Area</span></a></b></span><br /><br /><a name="more"></a><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/mouse-cursor/live-demo/mouse-cursor-demo-1.html" rel="nofollow" target="_blank">New Live Demo</a></div><br />I take the cursor image from http://www.cursors-4u.com and http://rw-designer.com you can change it anytime depends on your festive moods.<br /><br /><br /><h4 style="text-align: left;"><b>How to Install mouse cursor in blogger blog to animated cursors</b></h4><br /><b>How to add HTML-CSS-Javascript Codes to your Blog ? </b><br /><br />This is very simple and easy you only follow below steps and add this widget in your blog.<br /><br /><b><span style="color: magenta;">Step 1</span></b> Log-in to your <b style="background-color: orange;">Blogger account</b>.<br /><br /><b><span style="color: magenta;">Step 2</span></b> Backup your Template.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://bit.ly/work24" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Edit Template HTML" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8LVlk6CgmagGSR90qTyJokoH9-gzEGA-ehqBdl9bjC_m58jNu4eSwBlj7jX5VjBuJDxWl7bmblvPCjGuqX-4ydtsivW-d3UWBAggkUTge5IChMpGBeGrYGSPfgGB6OcDovwFiosOzBGUg/s1600/Edit+Template+HTML.png" title="Edit Template HTML" /></a></div><br /><br /><b><span style="color: magenta;">Step 3</span></b> Click on The <b style="background-color: cyan;">Template</b>>> <b><span style="background-color: #f4cccc; color: purple;">Edit HTML</span></b>>> <b><span style="color: orange;">Proceed</span></b>.<br /><br /><b><span style="color: magenta;">Step 4</span></b> Now find [by pressing <kbd style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid gray; box-shadow: rgb(238, 238, 238) 1px 0px 1px 0px, rgb(204, 204, 204) 0px 2px 0px 2px, rgb(68, 68, 68) 0px 2px 0px 3px; font-size: 1.2em; margin: 2px 3px; padding: 1px 5px;">Ctrl</kbd><span style="font-family: "georgia" , serif; font-size: 13.63636302947998px;"> + </span><kbd style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid gray; box-shadow: rgb(238, 238, 238) 1px 0px 1px 0px, rgb(204, 204, 204) 0px 2px 0px 2px, rgb(68, 68, 68) 0px 2px 0px 3px; font-size: 1.2em; margin: 2px 3px; padding: 1px 5px;">F</kbd> ] this code in the template:<br /><br /><div class="code"></head></div><br />And immediately <b><span style="color: red;">Before</span></b> it, paste this code:<br /><br /><br /><br /><br /><div class="code" style="background-attachment: initial; background-clip: initial; background-color: #ebf0ff; background-image: initial; background-origin: initial; border-bottom-color: rgb(34, 51, 68); border-bottom-style: dotted; border-bottom-width: 1px; border-left-color: rgb(34, 51, 68); border-left-style: dotted; border-left-width: 1px; border-right-color: rgb(34, 51, 68); border-right-style: dotted; border-right-width: 1px; border-top-color: rgb(34, 51, 68); border-top-style: dotted; border-top-width: 1px; color: #474747; font-family: Arial, Verdana; font-size: 14px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px; text-align: left;"><span class="Apple-style-span" style="font-family: "trebuchet ms" , sans-serif; font-size: 13px;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAEU5jzUxetDP1lg-YMKI2fYUlryXT8R63PWlt7QRGfGs9k6pdbAup5CUOrMozpVQc-quQBq9KZSshccRI4ARtuIWIa2-dI2oMVQCFTE7sZJYP1sBHvoncHHWYN7R7AhtLKFg5-dbd4XiZ/s1600/cur220.gif" imageanchor="1" style="clear: right; color: #a42828; cursor: url(http://safir85.ucoz.com/24work-blogspot/mouse-cursor/COOL_BLUE_OUTER_GLOW_POINTER-www.24work.blogspot.c.cur), progress; float: right; margin-bottom: 1em; margin-left: 1em; opacity: 1; outline-color: initial; outline-style: none; outline-width: initial;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAEU5jzUxetDP1lg-YMKI2fYUlryXT8R63PWlt7QRGfGs9k6pdbAup5CUOrMozpVQc-quQBq9KZSshccRI4ARtuIWIa2-dI2oMVQCFTE7sZJYP1sBHvoncHHWYN7R7AhtLKFg5-dbd4XiZ/s1600/cur220.gif" style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(246, 206, 119); border-bottom-style: solid; border-bottom-width: 0px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 0px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 0px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 0px; border-width: initial; margin-bottom: 10px; margin-left: 10px; margin-right: 10px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" /></a><br /><br /><br /><br /><br /><br /><br /><br /><b><link href="https://24work-new.googlecode.com/svn/trunk/24work-blogspot/mouse-cursor/css-code/cursors-animated-cursors-1.css" rel="stylesheet" type="text/css" /><a href="http://24work.blogspot.com/" target="_blank" title="Blogger Templates"><img src="https://bitly.com/24workpng1" alt="Blogger Templates" border="0" style="position:absolute; top: 0px; right: 0px;" ></a></b></span></div><br /><br /><br />And now click <b style="background-color: #ff7700; border: solid #993300 1px; color: white; margin: 2px; padding: 2px;"> Save Template </b><br /><br /><br /><br /><h2 style="text-align: left;"><span style="color: red;">Change Mouse Cursor Generator by 24work.blogspot.com</span></h2><h4 style="text-align: left;"><b><span style="color: orange;">How To Add Mouse Cursor Widget To Blogger?</span></b></h4></div><ul style="text-align: left;"><li>Choose a type of Mouse Cursor below</li><li>Click on <b>"Genetate"</b> button</li><li>Finally click on <b>"Add to Blogger"</b> to add it to your blog.</li></ul><br /><br /><br /><div style="border: 2px dashed red; padding: 10px;"><iframe frameborder="0" height="4420px" scrolling="no" src="https://24work-new.googlecode.com/svn/trunk/24work-blogspot/mouse-cursor/cursor-generator-ycode.html" width="580px"></iframe></div><br /><span class="Apple-style-span" style="background-color: white; color: #474747; font-family: "arial" , "verdana"; font-size: 14px;"><span class="Apple-style-span" style="color: #0c343d; font-family: "arial" , "verdana"; font-size: 14px;"><b>Note</b>: </span><span class="Apple-style-span" style="color: white; font-family: "segoe ui" , "calibri" , "myriad pro" , "myriad" , "trebuchet ms" , "helvetica" , "arial" , sans-serif; font-size: 14px;"><b style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span style="color: red; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> </span><span style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span class="Apple-style-span" style="color: magenta;">We are going to add more cursor, cursor pointer, cursors, mouse cursor, Totally Free Cursors, Myspace Cursors, Animated Cursors and cursors oftenly so keep visiting this page</span></span></b></span><span class="Apple-style-span" style="font-family: "segoe ui" , "calibri" , "myriad pro" , "myriad" , "trebuchet ms" , "helvetica" , "arial" , sans-serif; font-size: 14px;"><span class="Apple-style-span" style="color: magenta;">.</span></span></span><br /><br /><br /><br /><b style="background-color: #ff7700; border: solid #993300 1px; color: white; margin: 2px; padding: 2px;"><span style="font-size: x-large;">Blogger MySpace Cursor Code Generate </span></b><br /><br /><br /><br />You can change the appearance of the cursor on the MySpace profile page (the cursor is the little that moves on the screen by moving the mouse). For example, you could make the appearance of the cursor as a question mark when the user hovers over an object.The widget is originally developed by code-generator.net, i just changed something in the widget.<br /><br /><br /><br /><iframe frameborder="0" height="1110" name="Scrolling Recent Posts Widget" scrolling="no" src="https://24work-new.googlecode.com/svn/trunk/24work-blogspot/mouse-cursor/blogger-myspace-cursor-generator-ycode.html" width="585px"></iframe><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><b>How to Install Blogger MySpace Cursor Code Generator Widget</b><br /><br />Now let's start adding it... <br /><br /><b><span style="color: blue;">Step 1.</span></b> Login to Your Blogger Account.Go to your Blogger Dashboard.Click on Layout tab from left pane and click on Add a Gadget link. <br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://bit.ly/work24" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" height="345" img="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2RdNBqjfjEofcH93jGolZE6_pO9V3I50yTHO220rTtU-8UX3B3SGub2G4opdXfOKnJRB5byMqiXhASBACXQmhAmGJsHQueKJz-1MWPnXQ8-zAYe_p_uNlnQ3OzIg1zjXyX-aX6PTOg4F_/s1600/Blogger+Dashboard,+go+to+Layout+and+click+on+Add+a+Gadget+link.png" width="550" /></a></div><br /><b><span style="color: blue;">Step 2.</span></b> After click on Add a Gadget link A pop-up box will open now<br />with many gadget list, Choose HTML/JavaScript from the gadget options by clicking the blue plus sign for that gadget. <br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://bit.ly/work24" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" height="219" img="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr9fOyYc42xjawkDpgQUW445mywOAf8BcrMrPvRja_q6sC-hE07ieCRv05XAW4cxof7XpNKA4BN5UUhaG7ewjT5NUYxU6maBPRCs4fEhCu3JiZOOBbxTnnMvygQnlPrCvx0IpnZgAfVmQ9/s1600/pop-up+window,+choose+the+HTMLJavaScript+widget.png" width="486" /></a></div><br /><b><span style="color: blue;">Step 3.</span></b> Select 'HTML/Javascript' and add the one of code given below. <br /><br /><b><span style="color: blue;">Step 4.</span></b> Now Click On Save 'JavaScript' You are done.<br /><br /><br /></div>

How to change mouse cursor in blogger blog to animated cursors

How to change mouse cursor in blogger blog to animated cursors.One of the best way to add extra fun to your blog is, changing mouse cursor o...

Read more »

Animated Recent posts for Blogger with Thumbnails - Simple Spy

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="http://bit.ly/vGLd4R" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Recent Post With Thumbnail Simple Spy" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLr_PXFVSvdSaEMzTeuSjbDeG7Ak_bA74geCTZZiC7Rd9DZxq7PHwaUzYmBPSZP-zAhlgt0I9_jkwJnk1BnLqZUW_OVZK4V-nhTnv8PMdHNuy1cMPFHrA8iNJh-sYceSH8HeXq2ocgyE2-/s1600/Recent+Post+With+Thumbnail.png" title="Recent Post With Thumbnail Simple Spy" /></a></div><br /><br />Animated recent post is a fantastic way to present headlines updates to your readers.The effect of smooth scrolling attract readers and generate more clicks to your site.This gadget displays your most recent posts and includes a small thumbnail, but has the added bonus of using an animated effect that moves smoothly through the posts.There are a lot of great tutorials discussing on how to add Animated Recent posts for blogger with thumbnails and Simple Spy, but most of the tutorials I've found are not really suitable for a beginner.<br /><br /><br /><a name="more"></a><br />Read More: <br /><span style="color: red;">1. <a href="http://bit.ly/1dGPvYH" target="_blank"><span style="color: red;"><b>Recent Posts Widget for Blogger Text CSS Hover Effect with jQuery</b></span></a></span><br /><br /><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/animated-recent/recen-posts-live-demo-1.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><span style="font-size: large;"><b>How to Install Animated Recent posts for blogger with thumbnails and Simple Spy</b></span><br /><br />Now let's start adding it... <br /><br /><br /><b><span style="color: blue;">Step 1.</span></b> Login to Your Blogger Account.Go to your Blogger Dashboard.Click on Layout tab from left pane and click on Add a Gadget link. <br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://bit.ly/work24" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" height="345" img="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2RdNBqjfjEofcH93jGolZE6_pO9V3I50yTHO220rTtU-8UX3B3SGub2G4opdXfOKnJRB5byMqiXhASBACXQmhAmGJsHQueKJz-1MWPnXQ8-zAYe_p_uNlnQ3OzIg1zjXyX-aX6PTOg4F_/s1600/Blogger+Dashboard,+go+to+Layout+and+click+on+Add+a+Gadget+link.png" width="550" /></a></div><br /><br /><b><span style="color: blue;">Step 2.</span></b> After click on Add a Gadget link A pop-up box will open now<br /><br />with many gadget list, Choose HTML/JavaScript from the gadget options by clicking the blue plus sign for that gadget. <br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://bit.ly/work24" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" height="219" img="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr9fOyYc42xjawkDpgQUW445mywOAf8BcrMrPvRja_q6sC-hE07ieCRv05XAW4cxof7XpNKA4BN5UUhaG7ewjT5NUYxU6maBPRCs4fEhCu3JiZOOBbxTnnMvygQnlPrCvx0IpnZgAfVmQ9/s1600/pop-up+window,+choose+the+HTMLJavaScript+widget.png" width="486" /></a></div><br /><br /><b><span style="color: blue;">Step 3.</span></b> Select 'HTML/Javascript' and add the one of code given below. <br /><br /><br /><b><span style="color: blue;">Step 4.</span></b> Now Click On Save 'JavaScript' You are done.<br /><br /><br /><br /><div class="code"><b><span style="color: red;"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script></span></b><br /><br /><br /><br /><style type="text/css" media="screen"><br /><!--<br /><br />#spylist {<br />overflow:hidden;<br />margin-top:5px;<br />padding:0px 0px;<br />height:350px;<br />}<br />#spylist ul{<br />width:220px;<br />overflow:hidden;<br />list-style-type: none;<br />padding: 0px 0px;<br />margin:0px 0px;<br />}<br />#spylist li {<br />width:208px;<br />padding: 5px 5px;<br />margin:0px 0px 5px 0px;<br />list-style-type:none;<br />float:none;<br />height:70px;<br />overflow: hidden;<br />background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgls6qtJLCJXYpm7RAXXPJ8RGd4a99EfmWEVnngrOAqKf4FtQzOUsQsVHy9KtqgRbgHNYSvYX_pb6DV7ytaxOGlusq4Rpu6hOMGVmDCgR0hyLZRlnbovR6Rm3Itb6Omk1IU5AFHJiDPsRgP/s1600/24work-blogspot-com.jpg) repeat-x;<br />border:1px solid #ddd;<br />}<br />#spylist li a {<br />text-decoration:none;<br />color:#4B545B;<br />font-size:11px;<br />height:18px;<br />overflow:hidden;<br />margin:0px 0px;<br />padding:0px 0px 2px 0px;<br />}<br />#spylist li img {<br />float:left;<br />margin-right:5px;<br />background:#EFEFEF;<br />border:0;<br />}<br />.spydate{<br />overflow:hidden;<br />font-size:10px;<br />color:#0284C2;<br />padding:2px 0px;<br />margin:1px 0px 0px 0px;<br />height:15px;<br />font-family:Tahoma,Arial,verdana, sans-serif;<br />}<br />.spycomment{<br />overflow:hidden;<br />font-family:Tahoma,Arial,verdana, sans-serif;<br />font-size:10px;<br />color:#262B2F;<br />padding:0px 0px;<br />margin:0px 0px;<br />}<br /><br />--><br /><br /></style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script language='JavaScript'> <br /><br />imgr = new Array();<br />imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPfb3TxhRzk4md8nz8GejdRTwxqxKADWCreRhny8Uv1RQqq2OSWsi2v4Oy60hsRFa4plGpwFdON_674RAtbTOTYxnSOM9ljqf_Q8fPzikBxV4UjTFrt0ELIpIomjGwiOX2Pej32DT-yyCK/s1600/noimage.png";<br />imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPfb3TxhRzk4md8nz8GejdRTwxqxKADWCreRhny8Uv1RQqq2OSWsi2v4Oy60hsRFa4plGpwFdON_674RAtbTOTYxnSOM9ljqf_Q8fPzikBxV4UjTFrt0ELIpIomjGwiOX2Pej32DT-yyCK/s1600/noimage.png";<br />imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPfb3TxhRzk4md8nz8GejdRTwxqxKADWCreRhny8Uv1RQqq2OSWsi2v4Oy60hsRFa4plGpwFdON_674RAtbTOTYxnSOM9ljqf_Q8fPzikBxV4UjTFrt0ELIpIomjGwiOX2Pej32DT-yyCK/s1600/noimage.png";<br />imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPfb3TxhRzk4md8nz8GejdRTwxqxKADWCreRhny8Uv1RQqq2OSWsi2v4Oy60hsRFa4plGpwFdON_674RAtbTOTYxnSOM9ljqf_Q8fPzikBxV4UjTFrt0ELIpIomjGwiOX2Pej32DT-yyCK/s1600/noimage.png";<br />imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPfb3TxhRzk4md8nz8GejdRTwxqxKADWCreRhny8Uv1RQqq2OSWsi2v4Oy60hsRFa4plGpwFdON_674RAtbTOTYxnSOM9ljqf_Q8fPzikBxV4UjTFrt0ELIpIomjGwiOX2Pej32DT-yyCK/s1600/noimage.png";<br />showRandomImg = true;<br />boxwidth = 255;<br />cellspacing = 6;<br />borderColor = "#232c35";<br />bgTD = "#000000";<br />thumbwidth = 70;<br />thumbheight = 70;<br />fntsize = 12;<br />acolor = "#666";<br />aBold = true;<br />icon = " ";<br />text = "comments";<br />showPostDate = true;<br />summaryPost = 40;<br />summaryFontsize = 10;<br />summaryColor = "#666";<br />icon2 = " ";<br />numposts = 10;<br /><br /><br /><br /><b style="background-color: cyan;"><span style="color: red;">home_page </span></b>= "<b><span style="color: red;">http://bdlab.blogspot.com/</span></b>";<br /><br /><br /><br />limitspy=4<br />intervalspy=4000<br /></script><br /><div id="spylist"><br /><script src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/animated-recent-posts-ycode-1.js' type='text/javascript'></script><br /><br /></div></div><br /><br />And now click <b style="background-color: #ff7700; border: solid #993300 1px; color: white; margin: 2px; padding: 2px;"> Save </b><br /><br /><br /><b><span style="color: red;">Note :If your template already have a jquery do not put again, just copy after it</span><br style="color: red;" /><span style="color: red;"> Html from above a few things could be replaced :</span><br /><br /></b><br /><br /><blockquote><b><span style="color: red;"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script></span></b></blockquote><br /><br /><br /><br /><br /><br />1. homepage address<br /><br /><span style="color: red;"><span style="background-color: cyan;">home_page</span> = “http://<b>bdlab</b>.blogspot.com/</span>”;<br /><br /><br />2. Style<br /><br />from above style/css, you can change :<br /><br /><br />width : 220px;<br /><br />width:208px:<br /><br /><br />customize base on your template<br /><br />and<br /><br />background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgls6qtJLCJXYpm7RAXXPJ8RGd4a99EfmWEVnngrOAqKf4FtQzOUsQsVHy9KtqgRbgHNYSvYX_pb6DV7ytaxOGlusq4Rpu6hOMGVmDCgR0hyLZRlnbovR6Rm3Itb6Omk1IU5AFHJiDPsRgP/s1600/24work-blogspot-com.jpg) repeat-x;<br /><br /><br />Customize the colors of backuground<br /><br /><br />3. image size<br /><br />thumbwidth = 70;<br /><br />thumbheight = 70;<br /><br /><br />Match your needs<br /><br /><br />4. How many post you will show<br /><br />numposts = 10;<br /><br /><br />Base on what you need to show<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><h4 style="text-align: left;">Stylish Scrolling Recent Posts Widget For Blogger</h4><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://bit.ly/vGLd4R" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Stylish Scrolling Recent Posts widget" border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLGdydliWiiO6wGNVPoJZZ3wvDjo3Yd5J72GWaOlrQKbx9z4enTL3K3Hfqa2zqFyqWYKO47UIPcpT1w1kRijchPYg1R178kqa5ezwKjXuYBIgDq1883rsTmaWiXVtUu4HnjU4_2a-dB0UN/s1600/Stylish+Scrolling+Recent+Posts+widget.png" title="Stylish Scrolling Recent Posts widget" width="308" /></a></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/animated-recent/recen-posts-live-demo-2.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br />1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.<br /><br />2. Paste the following code in HTML/Javascript Box.<br /><br /><br /><div class="code"><b><span style="color: red;"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script></span></b><br /><br /><br /><style type="text/css" media="screen"><br />#workwidget {<br />overflow: hidden;<br />margin-top: 5px;<br />padding: 0px 0px;<br />height: 385px;<br />}<br /><br />#workwidget ul {<br />width: 295px;<br />overflow: hidden;<br />list-style-type: none;<br />padding: 0px 0px;<br />margin: 0px 0px;<br />}<br /><br />#workwidget li {<br />width: 282px;<br />padding: 5px 5px;<br />margin: 0px 0px 5px 0px;<br />list-style-type: none;<br />float: none;<br />height: 80px;<br />overflow: hidden;<br />background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgls6qtJLCJXYpm7RAXXPJ8RGd4a99EfmWEVnngrOAqKf4FtQzOUsQsVHy9KtqgRbgHNYSvYX_pb6DV7ytaxOGlusq4Rpu6hOMGVmDCgR0hyLZRlnbovR6Rm3Itb6Omk1IU5AFHJiDPsRgP/s1600/24work-blogspot-com.jpg) repeat-x;<br />border: 1px solid #ddd;<br />}<br /><br />#workwidget li a {<br />text-decoration: none;<br />color: #4B545B;<br />font-size: 15px;<br />height: 18px;<br />overflow: hidden;<br />margin: 0px 0px;<br />padding: 0px 0px 2px 0px;<br />}<br /><br />#workwidget img {<br />float: left;<br />margin-top: 10px;<br />margin-right: 15px;<br />background: #EFEFEF;<br />border: 0;<br />}<br /><br />#workwidget img {<br />-webkit-transition: all 0.5s ease;<br />-moz-transition: all 0.5s ease;<br />transition: all 0.5s ease;<br />padding: 4px;<br />background: #eee;<br />background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));<br />background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);<br />-webkit-border-radius: 4px;<br />-moz-border-radius: 4px;<br />border-radius: 4px;<br />-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);<br />-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);<br />box-shadow: 0 0 3px rgba(0,0,0,.7);<br />}<br /><br />#workwidget img:hover {<br />-moz-transform: scale(1.2) rotate(-350deg);<br />-webkit-transform: scale(1.2) rotate(-350deg);<br />-o-transform: scale(1.2) rotate(-350deg);<br />-ms-transform: scale(1.2) rotate(-350deg);<br />transform: scale(1.2) rotate(-350deg);<br />-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);<br />-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);<br />box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);<br />}<br /><br />.spydate {<br />overflow: hidden;<br />font-size: 10px;<br />color: #0284C2;<br />padding: 2px 0px;<br />margin: 1px 0px 0px 0px;<br />height: 15px;<br />font-family: Tahoma,Arial,verdana, sans-serif;<br />}<br /><br />.spycomment {<br />overflow: hidden;<br />font-family: Tahoma,Arial,verdana, sans-serif;<br />font-size: 10px;<br />color: #262B2F;<br />padding: 0px 0px;<br />margin: 0px 0px;<br />}<br /><br /><br /></style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script language='JavaScript'><br />imgr = new Array();<br />imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPfb3TxhRzk4md8nz8GejdRTwxqxKADWCreRhny8Uv1RQqq2OSWsi2v4Oy60hsRFa4plGpwFdON_674RAtbTOTYxnSOM9ljqf_Q8fPzikBxV4UjTFrt0ELIpIomjGwiOX2Pej32DT-yyCK/s1600/noimage.png";<br />imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPfb3TxhRzk4md8nz8GejdRTwxqxKADWCreRhny8Uv1RQqq2OSWsi2v4Oy60hsRFa4plGpwFdON_674RAtbTOTYxnSOM9ljqf_Q8fPzikBxV4UjTFrt0ELIpIomjGwiOX2Pej32DT-yyCK/s1600/noimage.png";<br />imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPfb3TxhRzk4md8nz8GejdRTwxqxKADWCreRhny8Uv1RQqq2OSWsi2v4Oy60hsRFa4plGpwFdON_674RAtbTOTYxnSOM9ljqf_Q8fPzikBxV4UjTFrt0ELIpIomjGwiOX2Pej32DT-yyCK/s1600/noimage.png";<br />imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPfb3TxhRzk4md8nz8GejdRTwxqxKADWCreRhny8Uv1RQqq2OSWsi2v4Oy60hsRFa4plGpwFdON_674RAtbTOTYxnSOM9ljqf_Q8fPzikBxV4UjTFrt0ELIpIomjGwiOX2Pej32DT-yyCK/s1600/noimage.png";<br />imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPfb3TxhRzk4md8nz8GejdRTwxqxKADWCreRhny8Uv1RQqq2OSWsi2v4Oy60hsRFa4plGpwFdON_674RAtbTOTYxnSOM9ljqf_Q8fPzikBxV4UjTFrt0ELIpIomjGwiOX2Pej32DT-yyCK/s1600/noimage.png";<br />showRandomImg = true;<br />boxwidth = 255;<br />cellspacing = 6;<br />borderColor = "#232c35";<br />bgTD = "#000000";<br />thumbwidth = 50;<br />thumbheight = 50;<br />fntsize = 15;<br />acolor = "#666";<br />aBold = true;<br />icon = " ";<br />text = "comments";<br />showPostDate = true;<br />summaryPost = 40;<br />summaryFontsize = 10;<br />summaryColor = "#666";<br />icon2 = " ";<br /><span style="color: #b4a7d6;"><b>numposts = 10</b></span>;<br />home_page = "<b><span style="color: red;">http://bdlab.blogspot.com</span></b>/";<br /><b><span style="color: #ffe599;">limitspy=4</span></b>;<br /><b><span style="color: #a2c4c9;">intervalspy=4000</span></b>;<br /></script><br /><br /><div id="workwidget"><br /><script src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/animated-recent-posts-ycode-2.js' type='text/javascript'></script><br /></div></div><br /><br /><br /><br /><br />And now click <b style="background-color: #ff7700; border: solid #993300 1px; color: white; margin: 2px; padding: 2px;"> Save </b><br /><br /><br /><br /><br /><br /><b><span style="color: red;">Note :If your template already have a jquery do not put again, just copy after it</span><br style="color: red;" /><span style="color: red;"> Html from above a few things could be replaced :</span><br /><br /><br /><br /></b><br /><br /><br /><br /><blockquote><b><span style="color: red;"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script></span></b></blockquote><br />Now Replace the <b><span style="color: red;">http://bdlab.blogspot.com</span></b> with your blog Url.<br /><br /><br />You Can Also <span style="background-color: #38761d;"><span style="color: yellow;">CUSTOMIZE</span></span> The CODE According to Your Need<br /><br /><b><span style="color: #b4a7d6;">numposts = 10</span></b>; Total number of posts which you wants to scroll by this widget<br /><b><span style="color: #ffe599;">limitspy=4</span></b>; Number of the posts to appear on the widget<br /><b><span style="color: #a2c4c9;">intervalspy=4000</span></b>; Scrolling speed of the widget,if you decreased the value speed of widget will increases.<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><h4 style="text-align: left;">Add Animated Recent Post Widget Sliding Recent Post Widget for Bloggers</h4><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://bit.ly/vGLd4R" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Animated Recent Post Widget Sliding Recent Post Widget" border="0" height="234" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg46lqkEB6RHndpqoONLqCiVML3bjfK45dfEWDnmH-8VAzJNWQvgihEWX3G7VrT4Kxic9LoL0njCefMz1KoNkqtotrMlipMNizS32VaD2Yz90QBrY8it5T9Wy2OLkfflM0u0s_o8hSaSTD5/s1600/Animated+Scrolling+Recent+Post+Widget.png" title="Animated Recent Post Widget Sliding Recent Post Widget" width="441" /></a></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/animated-recent/recen-posts-live-demo-3.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br />Go to blogger > Open layout tab<br /><br />Now Add A new HTML/JavaScript widget<br /><br />Now paste the code given below : <br /><br /><br /><br /><div class="code"><b><span style="color: red;"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script></span></b><br /><br /><br /><style type="text/css"><br />#rp_plus_img{height:377px;}<br />#rp_plus_img li {height:60px;padding:5px;list-style:none;<br />background-color:#ffffff;<br />border:solid 1px #000000;}<br />#rp_plus_img a{color:#00000;}<br />#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;<br />text-align:justify;<br />-moz-border-radius: 5px;}<br />#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}<br /></style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script type="text/javascript" src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/animated-recent-posts-ycode-3.js"></script><br /><script type="text/javascript"><br />var speed = 1500;<br />var pause = 3500;<br />$(document).ready(function(){<br />rpnewsticker();<br />interval = setInterval(rpnewsticker, pause);<br />});<br /></script><br /><ul id="rp_plus_img"><br /><script style="text/javascript"><br />var <span style="background-color: #f4cccc; color: #4c1130;"><b>numposts = 5</b></span>;<br />var numchars = 0;<br /></script><br /><script src="<b><span style="color: red;">http://bdlab.blogspot.com</span></b>/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script></ul></div><br /><br /><br /><br />And now click <b style="background-color: #ff7700; border: solid #993300 1px; color: white; margin: 2px; padding: 2px;"> Save </b><br /><br /><br /><br /><br /><b><span style="color: red;">Note :If your template already have a jquery do not put again, just copy after it</span><br style="color: red;" /><span style="color: red;"> Html from above a few things could be replaced :</span></b><br /><br /><br /><blockquote><b><span style="color: red;"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script></span></b></blockquote><br /><br />Now Replace the <b><span style="color: red;">http://bdlab.blogspot.com</span></b> with your blog Url.<br /><br /><br /><span style="background-color: #f4cccc;"><b><span style="color: #4c1130;">numposts = 5</span></b></span>; Total number of posts which you wants to scroll by this widget<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><h4 style="text-align: left;">Stylish Animated Blogger Recent Posts Widget</h4><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://bit.ly/vGLd4R" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Stylish Animated Blogger Recent Posts Widget" border="0" height="304" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnv9GpP-1ONBcdSTSiMa4P6UIt77IUeVNV0ZVZmQRImapKPVjSAio-lM_T8w_Q72ZHTa_OEZk3Qk03KPAYS7tbue3OuwnxtzVk-LAtXTktwXnoGVbFgtnp8uUucuNsMqb6YL1wLkBAc6cm/s1600/Stylish+Animated+Blogger+Recent+Posts+Widget.png" title="Stylish Animated Blogger Recent Posts Widget" width="266" /></a></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/animated-recent/recen-posts-live-demo-4.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br />Go to blogger > Open layout tab<br /><br />Now Add A new HTML/JavaScript widget<br /><br />Now paste the code given below : <br /><br /><br /><div class="code"><b><span style="color: red;"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script></span></b><br /><br /><br /><style type="text/css" media="screen"><br />#workwidget {<br />overflow: hidden;<br />margin-top: 5px;<br />padding: 0px 0px;<br />height: 385px;<br />}<br /><br />#workwidget ul {<br />width: 295px;<br />overflow: hidden;<br />list-style-type: none;<br />padding: 0px 0px;<br />margin: 0px 0px;<br />}<br /><br />#workwidget li { <br />width:230px; <br />background: #1ed2f2;<br />list-style-type: none;<br />margin:0 0 5px 0px;<br />padding:5px 5px 1px 10px !important;<br />-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;border: 0 none !important;-webkit-border-top-left-radius:40px;-webkit-border-bottom-right-radius:40px;-moz-border-radius-topleft:40px;-moz-border-radius-bottomright:40px;border-top-left-radius:40px;border-bottom-right-radius:40px; <br />}<br /><br />#workwidget li a {<br />text-decoration: none;<br />color: #4B545B;<br />font-size: 15px;<br />height: 18px;<br />overflow: hidden;<br />margin: 0px 0px;<br />padding: 0px 0px 2px 0px;<br />}<br /><br />#workwidget img {<br />float: left;<br />margin-top: 10px;<br />margin-right: 15px;<br />background: #EFEFEF;<br />border: 0;<br />}<br /><br />#workwidget img {<br />-webkit-transition: all 0.5s ease;<br />-moz-transition: all 0.5s ease;<br />transition: all 0.5s ease;<br />padding: 4px;<br />background: #eee;<br />background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));<br />background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);<br />-webkit-border-radius: 4px;<br />-moz-border-radius: 4px;<br />border-radius: 4px;<br />-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);<br />-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);<br />box-shadow: 0 0 3px rgba(0,0,0,.7);<br />}<br /><br /><br />#workwidget li:hover { <br />background: #84f6f5;<br /><br />}<br /><br />#workwidget img:hover {<br />-moz-transform: scale(1.2) rotate(-350deg);<br />-webkit-transform: scale(1.2) rotate(-350deg);<br />-o-transform: scale(1.2) rotate(-350deg);<br />-ms-transform: scale(1.2) rotate(-350deg);<br />transform: scale(1.2) rotate(-350deg);<br />-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);<br />-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);<br />box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);<br />}<br /><br />.spydate {<br />overflow: hidden;<br />font-size: 10px;<br />color: #0284C2;<br />padding: 2px 0px;<br />margin: 1px 0px 0px 0px;<br />height: 15px;<br />font-family: Tahoma,Arial,verdana, sans-serif;<br />}<br /><br />.spycomment {<br />overflow: hidden;<br />font-family: Tahoma,Arial,verdana, sans-serif;<br />font-size: 10px;<br />color: #262B2F;<br />padding: 0px 0px;<br />margin: 0px 0px;<br />}<br /><br /><br /></style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script language='JavaScript'><br />imgr = new Array();<br />imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPfb3TxhRzk4md8nz8GejdRTwxqxKADWCreRhny8Uv1RQqq2OSWsi2v4Oy60hsRFa4plGpwFdON_674RAtbTOTYxnSOM9ljqf_Q8fPzikBxV4UjTFrt0ELIpIomjGwiOX2Pej32DT-yyCK/s1600/noimage.png";<br />imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPfb3TxhRzk4md8nz8GejdRTwxqxKADWCreRhny8Uv1RQqq2OSWsi2v4Oy60hsRFa4plGpwFdON_674RAtbTOTYxnSOM9ljqf_Q8fPzikBxV4UjTFrt0ELIpIomjGwiOX2Pej32DT-yyCK/s1600/noimage.png";<br />imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPfb3TxhRzk4md8nz8GejdRTwxqxKADWCreRhny8Uv1RQqq2OSWsi2v4Oy60hsRFa4plGpwFdON_674RAtbTOTYxnSOM9ljqf_Q8fPzikBxV4UjTFrt0ELIpIomjGwiOX2Pej32DT-yyCK/s1600/noimage.png";<br />imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPfb3TxhRzk4md8nz8GejdRTwxqxKADWCreRhny8Uv1RQqq2OSWsi2v4Oy60hsRFa4plGpwFdON_674RAtbTOTYxnSOM9ljqf_Q8fPzikBxV4UjTFrt0ELIpIomjGwiOX2Pej32DT-yyCK/s1600/noimage.png";<br />imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPfb3TxhRzk4md8nz8GejdRTwxqxKADWCreRhny8Uv1RQqq2OSWsi2v4Oy60hsRFa4plGpwFdON_674RAtbTOTYxnSOM9ljqf_Q8fPzikBxV4UjTFrt0ELIpIomjGwiOX2Pej32DT-yyCK/s1600/noimage.png";<br />showRandomImg = true;<br />boxwidth = 255;<br />cellspacing = 6;<br />borderColor = "#232c35";<br />bgTD = "#000000";<br />thumbwidth = 50;<br />thumbheight = 50;<br />fntsize = 15;<br />acolor = "#666";<br />aBold = true;<br />icon = " ";<br />text = "comments";<br />showPostDate = true;<br />summaryPost = 40;<br />summaryFontsize = 10;<br />summaryColor = "#666";<br />icon2 = " ";<br /><span style="background-color: magenta;">numposts = 10</span>;<br />home_page = "<b><span style="color: red;">http://bdlab.blogspot.com/</span></b>";<br />limitspy=4;<br />intervalspy=4000;<br /></script><br /><br /><div id="workwidget"><br /><script src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/animated-recent-posts-ycode-2.js' type='text/javascript'></script><br /></div></div><br /><br /><br /><br /><br />And now click <b style="background-color: #ff7700; border: solid #993300 1px; color: white; margin: 2px; padding: 2px;"> Save </b><br /><br /><br /><br /><br /><br /><b><span style="color: red;">Note :If your template already have a jquery do not put again, just copy after it</span><br style="color: red;" /><span style="color: red;"> Html from above a few things could be replaced :</span><br /><br /><br /><br /></b><br /><br /><br /><br /><blockquote><b><span style="color: red;"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script></span></b></blockquote><br />Now Replace the <b><span style="color: red;">http://bdlab.blogspot.com</span></b> with your blog Url.<br /><br /><br /><br /><br /><br /><b style="background-color: yellow;">Settings:</b><br /><br />Change <b><span style="color: red;">http://bdlab.blogspot.com</span></b> to Your Blog address<br />Change <span style="background-color: magenta;">numposts = 10</span> to Show number of Recent posts with thumbnails<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><h4 style="text-align: left;">Scrolling Recent Post Gadget For Blogger</h4><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://bit.ly/vGLd4R" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Scrolling Recent Post Gadget For Blogger" border="0" height="206" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJgZXmVW2TUEn1YaVQmoBBddJy9_18rc8aA_qjyGj2Ig6SbPQvB_t7C7jNLWaQCV7JW1iA622V141P8_tfryuCa9__KtgshEZrjdGM3Z3YjKt_2FIlW6FBt5Q9wRxZ0TvtKonrGhbzMEi8/s1600/Scrolling+Recent+Post+Gadget+For+Blogger.png" title="Scrolling Recent Post Gadget For Blogger" width="507" /></a></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/animated-recent/recen-posts-live-demo-5.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><b>Adding The Widget To Blogger</b><br /><br /><br /><br />Go to Blogger >> Layout >> Add Gadget >> Select an HTML/JavaScript Gadget<br /><br />Copy the following code and paste inside an HTML/JavaScript widget<br /><br /><br /><div class="code"><b><span style="color: red;"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script></span></b><br /><br /><br /><style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script style='text/javascript' src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/hb-recentposts-ycode.js" ></script><br /><script style='text/javascript' src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/hb-jquery-ticker-nocode.js'></script><br /><script style='text/javascript'><br /><b><span style="color: blue;">var numposts = 7</span></b>;<br /><b><span style="color: magenta;">var showpostthumbnails = true</span></b>;<br />var displaymore = false;<br />var displayseparator = false;<br />var showcommentnum = false;<br />var showpostdate = false;<br />var showpostsummary = true;<br />var numchars = 100;<br />$(document).ready(function () {$('#sai').vTicker({<br />speed: 500,<br />pause: 3000,<br />showItems: 3,<br />animation: 'fade',<br />mousePause: false,<br />height: 0,<br />direction: 'up'<br />});});<br /></script><br /><div id="sai"><br /><script src='<b><span style="color: red;">http://bdlab.blogspot.com</span></b>/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script><br /></div></div><br /><br /><br /><br /><br />And now click <b style="background-color: #ff7700; border: solid #993300 1px; color: white; margin: 2px; padding: 2px;"> Save </b><br /><br /><br /><br /><br /><br /><b><span style="color: red;">Note :If your template already have a jquery do not put again, just copy after it</span><br style="color: red;" /><span style="color: red;"> Html from above a few things could be replaced :</span><br /><br /><br /><br /></b><br /><br /><br /><br /><blockquote><b><span style="color: red;"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script></span></b></blockquote><br />Now Replace the <b><span style="color: red;">http://bdlab.blogspot.com</span></b> with your blog Url.<br /><br /><br /><br /><b><span style="color: lime;">Optional Customizations</span></b><br /><br /><br />To change total number of posts find this code <b><span style="color: blue;">var numposts = 7</span></b>; <br />If you don't want to show post thumbnails then change this value <b><span style="color: magenta;">var showpostthumbnails = true</span></b>; to false.<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><h4 style="text-align: left;">New and Flexible Recent Posts Widget With Thumbnail for Blogger</h4><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://bit.ly/vGLd4R" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Flexible Recent Posts Widget With Thumbnail" border="0" height="285" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXjaEBmhWWislJHZkEmFuGdk4huOtHkXK7DKvhA7mwYZ0X0QMzXzGN6sSoGyQlUvsLTXUyA6gMmtASlNjIhrw7f-hQcP9TSwjpk2D_bf8ZfHvih_jXxZtCTxb1I6qMIwrxEo44PBkwJABG/s1600/Flexible+Recent+Posts+Widget+With+Thumbnail.png" title="Flexible Recent Posts Widget With Thumbnail" width="474" /></a></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/animated-recent/recen-posts-live-demo-6.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br />Follow the step by step instructions to add this widget in Blogger:<br />Sign in to Blogger<br />Go to Layout > Add a Gadget<br />Select HTML / JavaScript<br />Paste the code given below in the field and Save.<br /><br /><br /><div class="code"><style type="text/css"><br />/*<![CDATA[*/<br />img.label_thumb{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;transition:all .5s ease;float:left;padding:0;border:3px solid #cccccc;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;background:#fff;margin-right:10px;height:70px;width:70px}<br />img.label_thumb:hover{-moz-transform:scale(1.2) rotate(-350deg);-webkit-transform:scale(1.2) rotate(-350deg);-o-transform:scale(1.2) rotate(-350deg);-ms-transform:scale(1.2) rotate(-350deg);transform:scale(1.2) rotate(-350deg);-webkit-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);-moz-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);background:#f7f6f6}<br />.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 10px 2px 0;adding:0}ul.label_with_thumbs li{background:#f5f5f5;list-style-type:none;padding:8px 0;min-height:65px;margin-bottom:5px}<br />.label_with_thumbs a{color:#3395BF;font-size:12pt;outline:0;text-decoration:none}<br />.label_with_thumbs a:hover,.label_with_thumbs a:focus{color:#F4A557}.credits,.credits a{font-size:12px!important;text-align:left;text-shadow:0 1px 0 #fff;color:#888}<br />#mdjumplink{font-weight:800;background:#f7f8f9;background:-webkit-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-moz-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-o-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-ms-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f8f9',endColorstr='#e9e9e9',GradientType=0);border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:6px 12px;margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);-moz-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);color:#888!important;text-shadow:0 1px 0 #fff;line-height:1.2;cursor:pointer;font-size:13px;font-weight:bold;text-decoration:none!important}<br />#mdjumplink:hover{background:#f1f1f1;background:-webkit-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-moz-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-o-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-ms-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1',endColorstr='#e0e0e0',GradientType=0);text-decoration:none!important}<br />#mdjumplink a{color:#888!important;text-decoration:none;display:block;margin:2px}<br />#mdjumplink a:hover{color:#888!important;text-decoration:none}<br />#mdcomments{padding:6px 12px;background:#3395BF;color:#FFFFFF!important;font-size:13px;font-weight:800}<br />#mdcomments:hover{background:#F4A557;text-decoration:none}<br />/*]]>*/<br /></style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script type="text/javascript" src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/animated-recent-posts-ycode-5.js"></script><br /><script type='text/javascript'><br />//<![CDATA[<br /><b><span style="color: magenta;">var numposts = 5</span></b>;<br /><b><span style="color: purple;">var showpostthumbnails = true</span></b>;<br /><b><span style="color: blue;">var displaymore = true</span></b>;<br />var displayseparator = true;<br /><b><span style="color: cyan;">var showcommentnum = false</span></b>;<br />var showpostdate = false;<br />var showpostsummary = false;<br />var numchars = 80;<br />//]]><br /></script><br /><script src='<b><span style="color: red;">http://bdlab.blogspot.com</span></b>/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs'></script></div><br /><br /><br /><b>Customization:</b><br /><b><span style="color: magenta;">var numposts = 5</span></b>; (Number of Posts to be shown)<br /><b><span style="color: purple;">var showpostthumbnails = true</span></b>; (Post Image)<br /><b><span style="color: blue;">var displaymore = true</span></b>; (More Button)<br /><b><span style="color: cyan;">var showcommentnum = false</span></b>; (No of Comments)<br />var showpostdate = false; (Post Date)<br />var showpostsummary = false; (Post Summry)<br />var numchars = 80; (Characters in post summary)<br />True is for Display item and False for not to display. Change According to your needs.<br /><br />Change <b><span style="color: red;">http://bdlab.blogspot.com</span></b> with your Website/ Blog URL.<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><h4 style="text-align: left;">Tooltips Recent Post Widget For Blogger With Thumbnail</h4><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://bit.ly/vGLd4R" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tooltips Recent Post Widget For Blogger With Thumbnail" border="0" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzB0yic4vsuIB456qp5eGtHKSGTU0Y53wY5_wUwWb1vO1MuL4_qAEOt9GqChM4iAGgNb3Zwo-EoLOg9a1n1JOfBbFV3gB14xom-zt07-8OsTwjFiOyS31j6JWWhXWJCaCJWxs1zRVIaMWi/s1600/Tooltips+Recent+Post+Widget+For+Blogger+With+Thumbnail.png" title="Tooltips Recent Post Widget For Blogger With Thumbnail" width="322" /></a></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/animated-recent/recen-posts-live-demo-7.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><b>Follow these very simple steps to add the "Tooltips Recent Post Widget For Blogger With Thumbnail " in your blog.</b><br /><b><br /></b> Step 1 : Go To Blogger > Design > Page Elements<br />Step 2: Click on "<b>Add a Gadget</b>" link<br />Step 3: From the pop-up window, choose <b>HTML/JavaScript</b><br />Step 4: Copy and paste the following code below<br /><br /><br /><div class="code"><b><span style="color: red;"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script></span></b><br /><br /><br /><style type="text/css"><br />#post-gallery {<br />width:304px;<br />margin:0px auto;<br />font:normal 11px Arial,Sans-Serif;<br />color:##000000<br />;<br />padding:8px;<br />background-color:#1BA1E2<br />;<br />-webkit-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);<br />-moz-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);<br />box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);<br />-webkit-border-radius:4px;<br />-moz-border-radius:4px;<br />border-radius:4px;<br />}<br />#post-gallery h2 {<br />font:20px Arial,Sans-Serif;<br />color:white;<br />text-shadow:0px 3px 2px black;<br />text-transform:uppercase;<br />margin:2px 2px 2px;<br />padding:7px 14px;<br />background-color:#000000;<br />text-align: center;<br />}<br />#post-gallery .rp-item {<br />float:left;<br />display:inline;<br />position:relative;<br />margin:2px;<br />padding:0px 0px;<br />background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV9W_-v4QPLs3gk1OLc8lx3fUcsvoQPbSxih-OzoViTXwtVOnnvwizWHn2pPvljn4dhvjdMHz1VE5ai6tGTMkPxu3XFRP4XtwbxfdxWtcUm9yyxVeTkDIiEomI2D8n6Az5L5iUF_LLyyoM/s1600/24work.blogspot.com.loading.gif') no-repeat 50% 50%;<br />width:72px;<br />height:72px;<br />}<br />#post-gallery .rp-item img {<br />width:72px;<br />height:72px;<br />border:none !important;<br />margin:0px 0px !important;<br />padding:0px 0px !important;<br />background:transparent !important;<br />display:none;<br />}<br />#post-gallery .rp-item .rp-child {<br />position:relative;<br />top:10%!important;<br />left:10%!important;<br />z-index:1000;<br />width:200px;<br />background-color:white;<br />border-top:5px solid #1BA1E2;<br />-webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);<br />-moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);<br />box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);<br />padding:10px 15px;<br />overflow:hidden;<br />word-wrap:break-word;<br />display:none;<br />opacity: 0.9;<br />}<br />#post-gallery .rp-item .rp-child h4 {<br />font-size:12px;<br />margin:0px 0px 5px;<br />color:#1BA1E2;<br />}<br />#post-gallery .rp-item:hover .hidden {display:block;}<br /></style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script type="text/javascript"><br /><br /><br />var rpTitle = "Latest Post", // Widget Title<br /><b><span style="color: magenta;"><br /></span></b> <b><span style="color: magenta;">numposts = 20,</span></b> // The number of thumbnails / posts to display<br /><b><span style="color: purple;">numchar = 200</span></b>, // Number of characters in the description tooltip<br /><b><span style="color: blue;">rcFadeSpeed = 600</span></b>, // Speed of the effect. fadeIn () tooltip appears<br /><br />pBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPfb3TxhRzk4md8nz8GejdRTwxqxKADWCreRhny8Uv1RQqq2OSWsi2v4Oy60hsRFa4plGpwFdON_674RAtbTOTYxnSOM9ljqf_Q8fPzikBxV4UjTFrt0ELIpIomjGwiOX2Pej32DT-yyCK/s1600/noimage.png", // Image that show up if the post doesn't have a image<br />blogURL = "<b><span style="color: red;">http://bdlab.blogspot.com/</span></b>"; // Your Blog Address<br /></script><script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/animated-recent-posts-ycode-6.js" type="text/javascript"></script></div><br /><br /><br /><br /><br />And now click <b style="background-color: #ff7700; border: solid #993300 1px; color: white; margin: 2px; padding: 2px;"> Save </b><br /><br /><br /><br /><br /><br /><b><span style="color: red;">Note :If your template already have a jquery do not put again, just copy after it</span><br style="color: red;" /><span style="color: red;"> Html from above a few things could be replaced :</span><br /><br /><br /><br /></b><br /><br /><br /><br /><blockquote><b><span style="color: red;"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script></span></b></blockquote><br />Now Replace the <b><span style="color: red;">http://bdlab.blogspot.com</span></b> with your blog Url.<br /><br /><br /><br /><b style="background-color: orange;">Customization</b><br /><br /><b><span style="color: magenta;"><br /></span></b> <b><span style="color: magenta;">numposts = 20,</span></b> // The number of thumbnails / posts to display<br /><b><span style="color: purple;">numchar = 200</span></b>, // Number of characters in the description tooltip<br /><b><span style="color: blue;">rcFadeSpeed = 600</span></b>, // Speed of the effect. fadeIn () tooltip appears<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><blockquote><span class="Apple-style-span" style="font-family: "arial" , "helvetica" , sans-serif; font-size: 14px; line-height: 20px;"><span style="color: #333333;">Many thanks to </span><a href="http://www.abu-farhan.com/" rel="nofollow" style="background-attachment: initial; background-clip: initial; background-color: transparent; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #838c1c; font-size: 14px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank">abu-farhan</a><span style="color: #333333;"> And </span><a href="http://www.helperblogger.com/" rel="nofollow" target="_blank"><span style="color: orange;">Rahul</span></a><span style="color: #333333;"> for making this code and I just tested and modified to work on blogger</span></span></blockquote><br /><br /><br /></div>

Animated Recent posts for Blogger with Thumbnails - Simple Spy

Animated recent post is a fantastic way to present headlines updates to your readers.The effect of smooth scrolling attract readers and gene...

Read more »