Wednesday, March 27, 2013

ADD MULTI-TABBED WIDGET TO YOUR BLOGGER SIDEBAR:

Posted by with No comments | in , , , ,
ADD MULTI-TABBED WIDGET TO YOUR BLOGGER SIDEBAR:


1. Go to Design>Page Elements, click Add a gadget, then choose HTML/JavaScript. 
       2. Paste below code inside it.
CODE:
<script type='text/javascript'>
//<![CDATA[
function NewBloggerTips_oom(NBTID, id)
{
  var NewBloggerTips = document.getElementById(NBTID);
  var NBTs = NewBloggerTips.firstChild;
  while (NBTs.className != "NBTs" ) NBTs = NBTs.nextSibling;
  var NBT = NBTs.firstChild;
  var i   = 0;
  do
  {
    if (NBT.tagName == "A")
    {
      i++;
      NBT.href      = "javascript:NewBloggerTips_ubah('"+NBTID+"', "+i+");";
      NBT.className = (i == id) ? "Active" : "";
      NBT.blur();
    }
  }
  while (NBT = NBT.nextSibling);
  var Halamans = NewBloggerTips.firstChild;
  while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling;
  var Halaman = Halamans.firstChild;
  var i    = 0;
  do
  {
    if (Halaman.className == 'Halaman')
    {
      i++;
      if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px";
      Halaman.style.overflow = "auto";
      Halaman.style.display  = (i == id) ? 'block' : 'none';
    }
  }
  while (Halaman = Halaman.nextSibling);
}
function NewBloggerTips_ubah(NBTID, id) { NewBloggerTips_oom(NBTID, id);
}
function NewBloggerTips_inisial(NBTID) { NewBloggerTips_oom(NBTID,  1);
document.write('');}
//]]>
</script>

<style>
div.NewBloggerTips div.NBTs {
height: 24px;
overflow: hidden;
}
div.NewBloggerTips div.NBTs a:hover, div.NewBloggerTips div.NBTs a.Active {
background-color: #eee;
}
div.NewBloggerTips div.Halamans {
clear: both;
border: 2px solid #f4f4f4;
overflow: hidden;
background-color: #ffffff;
}
div.NewBloggerTips div.Halamans div.Halaman {
height: 100%; padding: 0px;
overflow: hidden;
}
div.NewBloggerTips div.Halamans div.Halaman div.Alas {
padding: 3px 5px;
}
div.NewBloggerTips div.NBTs a {
border-left:1px solid #eee;
border-right:1px solid #eee;
border-top:1px solid #eee;
border-boNBTom:0px solid #eee;
float: left;
display: block;
width: 95px;
text-align: center;
vertical-align: middle;
height: 24px;
padding-top: 3px;
text-decoration: none;
font-family: "Arial", Serif;
font-size: 11px;
font-weight: 900;
color: #000000
}
</style>

<form action="NewBloggerTips.html" method="get">
<div id="NewBloggerTips" class="NewBloggerTips">
<div style="width: 300px;" class="NBTs"> <a>Tab 1 Title</a> <a>Tab 2  Title</a> <a>Tab 3  Title</a></div>
<div style="width: 300px; height: 300px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
<br/>
Tab 1 content goes here
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 2 content goes here
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 3 content goes here
</div>
</div>
</div>
<small><a style='margin-left:10px;align:right;' href='http://www.newbloggertips.com/2013/02/add-multi-tabbed-widget-to-blogger.html' target='_blank'>Multi-Tabbed Widget</a> | <a href='http://www.NewBloggerTips.com/' target='_blank'>NBT</a></small>
</div>
</div></form>
<script type="text/javascript">NewBloggerTips_inisial('NewBloggerTips');</script>


Customization:

  • Replace Tab 1 Title, Tab 2 Title, Tab 3 Title with you Tab Title.
  • Replace Tab 1,2,3, Content goes here with your widget code.
  • Change width: 300px; height: 300px; with your need.
  • Wanna change Background Color of Multi-Tabbed widget : Replace #ffffff with you favorite color.


 Done...!!!

Add Multi Colored Popular Post Widget In Blogger

Posted by with 1 comment | in , , , ,
    Add Multi Colored Popular Post Widget In Blogger

 We usually show Popular post widget to our readers so that they can enjoy the most popular post of our blog. But this article is not for Normal popular post widget rather how you can add multi colored popular post widget in Blogger. The multi colored popular post widget looks really awesome. It has also three displaying modes: display title only, display title with image thumbnail. I hope you will enjoy the widget.


                                                          


  • Go To Blogger Dashboard → Design → Edit HTML
  • Now Find the following code using CTRL+F   /* Variable definitions

Copy and Paste the Code the code shown below just after it:


<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#ff4c54"/>
<Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ff764c"/>
<Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#ffde4c"/>
<Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#c7f25f"/>
<Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#33c9f7"/>
<Variable name="PopularPosts.background.color6" description="background color6" type="color" default="#ff0" value="#7ee3c7"/>
<Variable name="PopularPosts.background.color7" description="background color7" type="color" default="#ff0" value="#f6993d"/>
</Group>
Now Find the code shown below using [ctrl+F]

]]></b:skin>


Now Paste the Code shown below just before or above it:


#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:$(PopularPosts.background.color6);width:65%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:$(PopularPosts.background.color7);width:60%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}




Now Find the code shown below using F3


<b:section class='sidebar' id='sidebar' preferred='yes'>






Now Paste the Code Shown Below just below/after it:


<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
   <b:if cond='data:title'>
    <h2><data:title/></h2>
   </b:if>
   <div class='widget-content popular-posts'>
    <ul>
     <b:loop values='data:posts' var='post'>
      <li>
       <b:if cond='data:showThumbnails == &quot;false&quot;'>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
        <b:else/>
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
        </b:if>
       <b:else/>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <b:if cond='data:post.thumbnail'>
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQZ-9n855GxXsMsgniuYsk3ddZAc8n-3CIgmuK6vOXgkl1IbICA7Hox40UhTaygV4aPcRNKMOQtekhBjrl-3ErxERx_1bkFyJkgq2tB2j0HfXq_PalnBw6SsZn-P9HaFZttAIfu4ow9zk/s1600/defaultimage.jpg'/>
         </b:if>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
         <div class='clear'/>
        <b:else/>
         <b:if cond='data:post.thumbnail'>
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQZ-9n855GxXsMsgniuYsk3ddZAc8n-3CIgmuK6vOXgkl1IbICA7Hox40UhTaygV4aPcRNKMOQtekhBjrl-3ErxERx_1bkFyJkgq2tB2j0HfXq_PalnBw6SsZn-P9HaFZttAIfu4ow9zk/s1600/defaultimage.jpg'/>
         </b:if>
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
         <div class='clear'/>
        </b:if>
       </b:if>
      </li>
     </b:loop>
    </ul>
   </div>
  </b:includable>
</b:widget>





Now save the template and done....!!!!!















Settings





    

  • Now got o Page Element You will find out a popular widget
    • 

  • Click on the edit link of Popular Posts widget
    • 

  • Select “Display Up To 7 Posts”
    • 

  • Now Save the widget
    • 


Change Color

Go To Design → Template Designer → Advanced → Popular Posts Background

















































How To Add Multi-Colored Popular Posts Widget For Blogger (Working 100%)




	Posted by  with No comments | in , , , , 










Style-1:

How To Add Multi-Colored Popular Posts Widget For Blogger

(Working 100%)


                                                       



Simply Follow these Steps:





                            1.  Log in to blogger account & Go to Design >> Edit HTML

                       2.  Find this code   ]]></b:skin>   by using  Ctrl+F    

                       3.  Paste below code Before  ]]></b:skin>  code







CODE: 





#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}








                     4. Now Click  Save Template.







5. Now,  Go to Layout option --->> Add Gadget --->> Popular Post



Popular post select in this way:




    

  1. Go To Blogger > Design > Page Elements
    2. 

  2. Click "Add a Gadget"
    3. 

  3. Choose the Popular Posts Widget
    4. 




popular posts







  4.  Set your settings in this way,



settings



 5.   Save your widget and you are done!







                     6. You are done...

                     7. Enjoy...!!!!







======================================================================

Style-2:

How To Add Multi-Colored Popular Posts Widget For Blogger

(Working 100%)



                             





1. Go to Blogger Dashboard --> Template --> Edit HTML --> Proceed

2. Backup your Template before making any changes to your blog

3. Now  Expand Widget Templates



4. Press Ctrl+F and search the code shown below



5. Now Find the code shown below using Ctrl+F



]]></b:skin>





Now, Paste the Code Shown Below just above/before  ]]></b:skin>



#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}

#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}

#PopularPosts1 ul li:first-child{background:#ff4c54;width:90%}

#PopularPosts1 ul li:first-child:after{content:"1"}

#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}

#PopularPosts1 ul li:first-child + li:after{content:"2"}

#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}

#PopularPosts1 ul li:first-child + li + li:after{content:"3"}

#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}

#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}

#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}

#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}

#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}

#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}

#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}

#PopularPosts1 ul li:first-child:after,

#PopularPosts1 ul li:first-child + li:after,

#PopularPosts1 ul li:first-child + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}

#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}

#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}

#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

#PopularPosts3 img{

    -moz-border-radius: 130px;

    -webkit-border-radius: 130px;

    border-radius: 130px;

    -webkit-transition: all 0.3s ease;

    -moz-transition: all 0.3s ease;

    transition: all 0.3s ease;

padding:4px;

    border:1px solid #fff !important;

    background: #F2F2F2;}#PopularPosts1 img:hover {

    -moz-transform: scale(1.2) rotate(-560deg) ;

    -webkit-transform: scale(1.2) rotate(-560deg) ;

    -o-transform: scale(1.2) rotate(-560deg) ;

    -ms-transform: scale(1.2) rotate(-560deg) ;

    transform: scale(1.2) rotate(-560deg) ;

}







Now save your template



     Now Go to Blogger Dashboard --> Layout --> Add a Gadget --> Popular Posts

    Select "display up to 9 posts".





Done...!!!





==================================================================

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

==================================================================



Alternate way: (not sure)





1.Log in to blogger  Design > Page Element.

2. Click Add Gadget and select 'HTML/Javascript

3. Now Paste Below code.





Code:



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>     
<style type="text/css" media="screen">      
<!-- 
#spylist {     
overflow:hidden;      
margin-top:5px;      
padding:0px 0px;      
height:350px;      
}      
.spydate{      
overflow:hidden;      
font-size:10px;  }

#spylist ul{      
width:350px;      
overflow:hidden;      
list-style-type: none;      
padding: 0px 0px;      
margin:0px 0px;      
}      
#spylist li {      
width:230px;      
background: #1ed2f2;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 1px 10px !important;
-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; 
}     

#spylist li:hover { 
background: #84f6f5;

} 

#spylist li a {     
text-decoration:none;      
color:#4B545B;      
font-size:11px;      
height:18px;      
overflow:hidden;      
margin:0px 0px;      
padding:0px 0px 2px 0px;      
}      

#spylist li img {      
float:left;      
margin-right:5px;
margin-top:3px;       
background:none;      
border:0;      
}      

.spycomment{     
overflow:hidden;      
font-family:Tahoma,Arial,verdana, sans-serif;      
font-size:10px;      
color:#262B2F;      
padding:0px 0px;      
margin:0px 0px;      
} 
-->
</style>
 <script language='JavaScript'> 


imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 5;

home_page = "http://bloggers-hero.blogspot.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
    <script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/recentpostthumbspy-min.js' type='text/javascript'></script>
</div><a style=" float:right;font-size:8px; color:#3B78CD; text-decoration:none;" href="http://bloggers-hero.blogspot.com/2012/11/how-to-add-stylish-animated-blogger.html">Blogger widget</a>













4.After paste above code

5.Replace http://bloggers-hero.blogspot.com with your Site URL

6.Now save your HTML/Javascript'.

7.And You are done...

8. Enjoy...!!!





Commented many people that this code works.


========================================================================



OR, Follow these steps: (not sure)






    

  1. Go To Blogger > Design
    2. 

  2. Click add a gadget
    3. 

  3. Choose Popular Posts Widget provided by blogger
    4. 

  4. Keep post number greater than 4
    5. 

  5. Save your widget
    6. 

  6. Now select an HTML/Javascript widget
    7. 

  7. Paste the following slide code inside it,
    8. 












Code:













<style type="text/css" media="screen">



#PopularPosts1 {
overflow:hidden;
margin-top:5px;
width:100%;
padding:0px 0px;
height:310px;




}



#PopularPosts1 ul {
width:310px; overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:10px 0px 0px 10px;
}



#PopularPosts1 li {
 width:290px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6a1kZLN8vH4j994iJP-GhvXKtXJ25rT_Jf3NheCcczach2G3hKdHr6pBHKabzzAlZy-MGQ-Wn_VI_g71ajq0ZAFO40mYaAaee8vhovPOf0WT8zvp20J63gBDFtpgLCSSY9-nA3xazXxM/s400/popular+posts.jpg) repeat-x;
border:1px solid #ddd;
}



#PopularPosts1 li .item-title {

    font-size:1em;
    margin-bottom:0.5em;
}



#PopularPosts1 li .item-title a {
text-decoration:none;
color:#7CA2C4;
font:bold 12px verdana;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}



#PopularPosts1 li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:2px solid #7CA2C4;
}



#PopularPosts1 li .item-snippet {
  overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#289728;
padding:0px 0px;
margin:0px 0px;
}



#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
    color:#3E4548;
    text-decoration: none;
}



#PopularPosts1 .spyWrapper {
    height: 100%;
    overflow: hidden;
    position: relative;
}



#PopularPosts1 {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}



.tags span,
.tags a {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}



a img {
    border: 0;
}



-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').simpleSpy();
});
</script>
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js"type="text/javascript"></script>













Keep the two widgets together. One on top of another as shown below,

popular-posts widget















Popular post select in this way:




    

  1. Go To Blogger > Design > Page Elements
    2. 

  2. Click "Add a Gadget"
    3. 

  3. Choose the Popular Posts Widget
    4. 




popular posts







  4.  Set your settings in this way,



settings



 5.   Save your widget and you are done!

































Make Changes To Colors and Fonts







Not all of you uses a white background for your blogs and some of you may wish to have complete control over the appearance of the widget. I am listing below important areas which you can edit to let the widget perfectly blend your template.


    

  • To Change Widget container height edit height:310px;
    • 

  • To change the small rectangles width edit width:310px
    • 

  • To change width of the text snippet then edit width:290px;. Keep this width20px smaller than the rectangles width. For example in this widget I have kept rectangles width=310px; and snippet width=290px;
    • 

  • To change link title color and font size edit color:#7CA2C4;
    font:bold 12px verdana;
    • 

  • To change thumbnail image's border colour and size edit border:2px solid #7CA2C4
    • 

  • To change the snippet text's font size, family and colour then edit the yellow highlighted code
    • 




What if your template background colour is black or dark?



In such a case replace the following code,







background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6a1kZLN8vH4j994iJP-GhvXKtXJ25rT_Jf3NheCcczach2G3hKdHr6pBHKabzzAlZy-MGQ-Wn_VI_g71ajq0ZAFO40mYaAaee8vhovPOf0WT8zvp20J63gBDFtpgLCSSY9-nA3xazXxM/s400/popular+posts.jpg) repeat-x;













with this,







background:#ffffff;







Replace #ffffff with your background color. Use our color generator tool.











Done...!!!!



==================================================================
























        

      












Subscribe to:
Posts (Atom)