Animated Recent Posts Tumbnails

<span class="Apple-style-span" style="color: #444444; font-family: trebuchet,arial,verdana,sans-serif; font-size: 12px;">Finally Abu Farhan finished the widget from Bloggertricks.com and animation Simple Spy . Simple Spy style taken from Scarlet theme, results for wordpress can be found in this blog. View as below</span><br /><span class="Apple-style-span" style="color: #444444; font-family: trebuchet,arial,verdana,sans-serif; font-size: 12px;"></span><br /><h2 style="background-color: white; border-bottom: 1px solid rgb(34, 34, 34); color: #222222; font-size: 12px; font-weight: bold; line-height: 1.9em; margin: 0px; padding-left: 23px; text-transform: uppercase;"><b>ANIMATED RECENT POSTS WIDGET FOR BLOGGER</b></h2><br /><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLQNy8K2EJiZyjPZSo71-q8QygkCI4Ev85xjKJTRpFWoMenPmfMttzWvTTg5Z3Otcqro6FSCrXW7CKuoERepDPn3yuagle75IcM15x_wechjCzmr6WPeTyjvd9WtejaCWk0Sfw-3E1pKVI/s320/RECENT+POST.png" /><br /><br />For bloggers you need to put the widget into the Sidebar Gadget (add gadget) select html, copy all html below to that gadget:<br /><br /><br /><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid7c52qOcHOAMZOstt4FrCdOgAFW6JXJF87WWUMvBkG1MCR4isA2M9wBKXpEyn6MJMFMrwf29RsvHT48u08xFq4Nflmze0HUWcogUx7zVO1S9_SeVapmGSvmtjVITlHW23l4Z1zq9AVEdn/s320/image5.png" /><br /><br />and here is the code :<br /><br /><div style="background: url(" http://i735.photobucket.com/albums/ww355/erwin80/SPIDER23.jpg ") repeat scroll 0% 0% transparent; color: #a6120d; font: 15px/25px cursive; height: 400px; overflow: scroll; width: 640px;"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><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(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x;<br />border:1px solid #ddd;<br />}<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 /><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><br /><br />    <script language='JavaScript'><br /><br />imgr = new Array();<br /><br />imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";<br /><br />imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";<br /><br />imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";<br /><br />imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";<br /><br />imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";<br />showRandomImg = true;<br /><br />boxwidth = 255;<br /><br />cellspacing = 6;<br /><br />borderColor = "#232c35";<br /><br />bgTD = "#000000";<br /><br />thumbwidth = 70;<br /><br />thumbheight = 70;<br /><br />fntsize = 12;<br /><br />acolor = "#666";<br /><br />aBold = true;<br /><br />icon = " ";<br /><br />text = "comments";<br /><br />showPostDate = true;<br /><br />summaryPost = 40;<br /><br />summaryFontsize = 10;<br /><br />summaryColor = "#666";<br /><br />icon2 = " ";<br /><br />numposts = 10;<br /><br />home_page = "http://www.raudhatulmuhibbin.org/";<br /><br />limitspy=4<br />intervalspy=4000<br /><br /></script><br /><br /><div id="spylist"><br />    <script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/recentpostthumbspy-min.js' type='text/javascript'></script><br /></div></div><br /><div class="MsoNormal" style="margin: 0px;"><a href="http://violarta.blogspot.com/">Violarta Site</a></div><br />for modification this widget to fit your template than you need to visit ABU FARHAN Blog<span class="Apple-style-span"> </span><a href="http://www.abu-farhan.com/2009/07/recent-posts-for-blogger-with-thumbnail-and-simple-spy/" style="margin: 0px; padding: 0px; text-decoration: none;" target="_blank"><span class="Apple-style-span">here you go</span><br /></a><br /><br />regards,

Animated Recent Posts Tumbnails

Finally Abu Farhan finished the widget from Bloggertricks.com and animation Simple Spy . Simple Spy style taken from Scarlet theme, results ...

Baca selengkapnya »

A Professional Tabbed For Blogger

Add Widget on your blog with A PROFESSIONAL TABBED, like this picture below<br /><br /><div class="separator" style="clear: both; color: black; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8SgRQlUXixdiA697NiZJiJpdKcVEf6zSRH2f-6diZEmGLnPWLw6-nKM4QyKBd9zIyqcz1Y3JZCxDfmUhzVweTd8Q1naNPSJGiLwqbbu0G-60dOpMVZbVUWeulwCgZEMWH-PU738l6dc6q/s320/demoview.jpg" /></div><br />Follow These Step to Install this widget <br /><br />1. Log in to your Blogger account<br />2. On your Blogger Dashboard, click on the "Layout" link as shown in the blow image<br /><br /><div class="separator" style="clear: both; color: black; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg17m3MXiyOpMdO89lSC8NhPDqBapJ1QQUwN21K1nBjyGFwgMWHFcGSVTeM8hSpI56ZI_fOFbauU7E8CizXstBL86flqXx7RxhzFo8Qb4vpfiiBikHWTrOj2X-ig_TPW5QGLzWa1mpfwu0D/s320/Blog-Tips-Statistics-Widget-Blogger.jpg" /></div><br />3. Click On "Add a Gadget" as displayed in the Below Image<br /><div class="separator" style="clear: both; color: black; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiAZUgbNoRNdp6vZrY-NZAlJzjtz4gfZVgzeD-3kGEwPL2VeRVtAJrELKFUeNVBpK7n-OO_u6heUTMtRX1TxLcEhhwYzJ5cvU-I8OlrbhrPdi4C_0S_zQ7GFhXx35cFM85ERcaQy2UUt-S/s320/Blog-Tips-Statistics-Widget-Blogger1.jpg" /></div><br /><div class="separator" style="clear: both; color: black; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdsscVvlChcEvDbpuPUvz0qXonkbrNE3k71i8Q_f04mEDhTXWjnwwSktui3gv_yipi3tNwFFQ8kLoaO7QByx_Lj-b9NHBtv5ecxgNdudCKKacIqbJ8MP65PaU5ZoUb_qxLs90L-QM6EaqI/s320/Blog-Tips-Statistics-Widget-Blogger2.jpg" /></div><br />FINALLY INSERT THIS CODE WHICH IS BELLOW AND SAVE IT ! THAN PREVIEW YOUR TEMPLATE :) DONE<br /><br /><div style="background: url("http://i735.photobucket.com/albums/ww355/erwin80/kertas11.jpg") repeat scroll 0% 0% transparent; color: #a6120d; font: 13px/23px cursive; height: 400px; overflow: scroll; width: 640px;"><style type="text/css"><br />body {<br />    background: #f0f0f0;<br />    margin: 0;<br />    padding: 0;<br />    font: 10px normal Verdana, Arial, Helvetica, sans-serif;<br />    color: #444;<br />}<br />h1 {font-size: 3em; margin: 20px 0;}<br />.container {width: 500px; margin: 10px auto;}<br />ul.tabs {<br />    margin: 0;<br />    padding: 0;<br />    float: left;<br />    list-style: none;<br />    height: 32px;<br />    border-bottom: 1px solid #999;<br />    border-left: 1px solid #999;<br />    width: 100%;<br />}<br />ul.tabs li {<br />    float: left;<br />    margin: 0;<br />    padding: 0;<br />    height: 31px;<br />    line-height: 31px;<br />    border: 1px solid #999;<br />    border-left: none;<br />    margin-bottom: -1px;<br />    background: #e0e0e0;<br />    overflow: hidden;<br />    position: relative;<br />}<br />ul.tabs li a {<br />    text-decoration: none;<br />    color: #000;<br />    display: block;<br />    font-size: 1.2em;<br />    padding: 0 20px;<br />    border: 1px solid #fff;<br />    outline: none;<br />}<br />ul.tabs li a:hover {<br />    background: #ccc;<br />}    <br />html ul.tabs li.active, html ul.tabs li.active a:hover  {<br />    background: #fff;<br />    border-bottom: 1px solid #fff;<br />}<br />.tab_container {<br />    border: 1px solid #999;<br />    border-top: none;<br />    clear: both;<br />    float: left; <br />    width: 100%;<br />    background: #fff;<br />    -moz-border-radius-bottomright: 5px;<br />    -khtml-border-radius-bottomright: 5px;<br />    -webkit-border-bottom-right-radius: 5px;<br />    -moz-border-radius-bottomleft: 5px;<br />    -khtml-border-radius-bottomleft: 5px;<br />    -webkit-border-bottom-left-radius: 5px;<br />}<br />.tab_content {<br />    padding: 20px;<br />    font-size: 1.2em;<br />}<br />.tab_content h2 {<br />    font-weight: normal;<br />    padding-bottom: 10px;<br />    border-bottom: 1px dashed #ddd;<br />    font-size: 1.8em;<br />}<br />.tab_content h3 a{<br />    color: #254588;<br />}<br />.tab_content img {<br />    float: left;<br />    margin: 0 20px 20px 0;<br />    border: 1px solid #ddd;<br />    padding: 5px;<br />}<br /></style><br /><script type="text/javascript"<br />src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script><br /><script type="text/javascript"><br /><br />$(document).ready(function() {<br /><br />    //Default Action<br />    $(".tab_content").hide(); //Hide all content<br />    $("ul.tabs li:first").addClass("active").show(); //Activate first tab<br />    $(".tab_content:first").show(); //Show first tab content<br />    <br />    //On Click Event<br />    $("ul.tabs li").click(function() {<br />        $("ul.tabs li").removeClass("active"); //Remove any "active" class<br />        $(this).addClass("active"); //Add "active" class to selected tab<br />        $(".tab_content").hide(); //Hide all tab content<br />        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content<br />        $(activeTab).fadeIn(); //Fade in the active content<br />        return false;<br />    });<br /><br />});<br /></script><br /></head><br /><br /><body><br /><br /><ul class="tabs"><br />    <li><a href="#tab1">Gallery</a></li><br />    <li><a href="#tab2">Submit</a></li><br />    <li><a href="#tab3">NEWS</a></li><br />    <li><a href="#tab4">FAQ</a></li><br /></ul><br /><br /><div class="tab_container"><br />    <div id="tab1" class="tab_content"><br />        <!--Content--><br />    </div><br />    <div id="tab2" class="tab_content"><br />       <!--Content--><br />    </div><br /><div class="tab_container"><br />    <div id="tab3" class="tab_content"><br />        <!--Content--><br />    </div><br /><div class="tab_container"><br />    <div id="tab4" class="tab_content"><br />        <!--Content--><br />    </div><br /></div><br /></body><br /></html></div><br /><br />NOTE : THIS WIDGET IS MADE ON WIDTH 500px SO IF YOUR SIDEBAR OR THE PLACE WHERE YOU WANT THIS WIDGET IS LESS OR MORE THAN YOU NEED TO ADJUST THE SIZE TO YOUR NEED <br /><br />Thx  <a href="http://blogger-dashboard.blogspot.com/2009/07/tabbed-content-widget-box-for-blogger.html">blogger-dashboard</a>

A Professional Tabbed For Blogger

Add Widget on your blog with A PROFESSIONAL TABBED, like this picture below Follow These Step to Install this widget 1. Log in to your Blogg...

Baca selengkapnya »

Tumbnails Recent Posts Widget

<div class="separator" style="clear: left; color: black; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4fSgf8XJxxEIG6_1zYVpVqMsFs8ODYCQDcCZOZfSiErCVk4JQUtPKePb0v30irfqnTKMMuuVO2xT9V5Gm-Iz3mSRMZ3P2tADzun03UHx7BjlwpzVfRxCNUsNo9OL3v7pJ_XWLCS7c2bJe/s320/relatedpost.png" /></div>From Blogger Dasboard,This post explains how to add Recent Posts widget in Blogger with image thumbnails:<br /><br />well they are many hacks up there on the net for RECENT POSTS BLOGGER and actually i have tried many of them ! and while i was surfing  the net than i found this amazing hack<br /><br />finally i have got what i want ! this widget was made by the legend  “bloggertricks”   we thanks him for this amazing widget ,very simple recent posts …bravo for the great job Thumbails to Recent Posts<br /><br /><br /><br />So, let's see how to install this cool widget in your blog..:<br /><br />1. Sign into <a href="http://www.blogger.com/"><b>Blogger</b></a> <b>dashboard</b><br /><br />2. Go to<b> Layout </b>» <b>Add a gadget</b> » <b>html/javascript</b><br /><br />3. Just copy and paste this code..<br /><br /><div style="background: url("http://i735.photobucket.com/albums/ww355/erwin80/blogerwinz1.png") repeat scroll 0% 0% transparent; color: #a6120d; font: 14px/24px cursive; height: 400px; overflow: scroll; width: 640px;"><script language="JavaScript"><br /><br />imgr = new Array();<br /><br /><br />imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";<br /><br />imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";<br /><br />imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";<br /><br />imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";<br /><br />imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";<br />showRandomImg = true;<br /><br />boxwidth = 298;<br /><br />cellspacing = 8;<br /><br />borderColor = "#ffffff";<br /><br />bgTD = "#000000";<br /><br />thumbwidth = 40;<br /><br />thumbheight = 40;<br /><br />fntsize = 12;<br /><br />acolor = "#666";<br /><br />aBold = true;<br /><br />icon = " ";<br /><br />text = "comments";<br /><br />showPostDate = false;<br /><br />summaryPost = 40;<br /><br />summaryFontsize = 10;<br /><br />summaryColor = "#666";<br /><br />icon2 = " ";<br /><br />numposts = 5;<br /><br />home_page = "http://schemar-mag.blogspot.com/";<br /><br /></script><br /><br /><script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script><br /><br /><br /></div><br />home_page : <a href="http://schemar-mag.blogspot.com/">http://schemar-mag.blogspot.com/</a> (change this to your blog url)<br /><br />Note : Make sure you selected YES in Settings » Site Feed » Full » Allow Blog Feeds<br /><br />4. Save the Changes and happy widget :)<br /><br />regards,

Tumbnails Recent Posts Widget

From Blogger Dasboard,This post explains how to add Recent Posts widget in Blogger with image thumbnails: well they are many hacks up there ...

Baca selengkapnya »