Css Icon Hover Effect Navigation Bar

Each one web specialists using Css3 Icon float affect all through their progression process.there have various frameworks they have to focus on.like speedier loading,efficient and dealing with easier.there have some piece of inclination of using Css3 drift effects,web architects and webmasters know it well.designing website furthermore learning process.on this excercises moreover exhibit to us fitting techniques to use Css3 Icon float sway  course bar without using any Javascript library. Css3 continually steady to tweak our action easily.it is basic because streamlined by Html.hope every visitors have scrutinizing foundation with,how is the Css3 Icon buoy effect satisfies desires. 

Course bar is extraordinarily basic  bloggers. We can investigate our pages, classes without having problem.there have some piece of benefits of using Css3 Icon buoy effect course bar.it help our social event of individuals to run across our indispensable pages like contact us page, About us, Advertising etc.and other thing is, whether you pick some charming looking course bar, it help to make your site attractive.by considering this excercise, you can evaluate how to incorporate Css3 Icon float effect course bar to blogger.this is amazingly important web builds likewise. 

1. Go to Blogger Dashboard > Template 

2. Dowload Backup Of your Template

3. Click on Edit HTML 


4. Find  ]]></b:skin>  and include underneath code simply above it.

/* The CSS Code for the menu starts here bloggertrix.com */ #btrix-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}
#btrix-nav li {float: left;}
#btrix-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;}
#btrix-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#btrix-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#btrix-nav li a:hover {cursor: pointer;}
#btrix-nav li a:hover img {top: -85px;}
#btrix-nav li a:hover .aname {top: 85px;}
#btrix-nav li:nth-child(1) a {background: #3eb006;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}
#btrix-nav li:nth-child(2) a {background: #9bc704;}
#btrix-nav li:nth-child(3) a {background: #0dc3ff;}
#btrix-nav li:nth-child(4) a {background: #51a2ec;}
#btrix-nav li:nth-child(5) a {background: #6e3cab;border-radius: 0 5px 5px 0;border-right: 1px solid #555;}

5. Go to blogger Layout 
6. Click Add Gadget and select 'HTML/Javascript'
7. Paste below code.

<div id="btrix-nav">
<li> <a href="#"><span class="aname">Homes</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5i_dU8T5Ie9C3i6rrkrNJTuRu_Ih_8U6JNU3ZPaJ1iLmTWcsxk-WG0F-kc7b6ylikmmRn8lv_dr9bNELlh37Y6IW_Ov3WNQIwNePUoXHhy4zbrjxJ9hyo17dBGsEDQPyPba8c7fjP5-E/s1600/btrix-home.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Download</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu73y_Vfo-QgC5Befgyj_WMwOJ509qO78u0QkTI9D_KiEtxdGTJmHNJZ_V94hMoxd0lkRb2uYbq6Y4BmCYDfUSKGhpuo9ZOhfnc_K5y2-FuyX3Hiiui0HS7aZgoUWyDahb7Yn_aPwUu08/s1600/btrix-download.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> MySql</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhauhsasQIH0a2Ii2gMkQGS5tkBhzvt-Jn1iZGQFmdn4PXKGnO6vArIydzr932kK7R78lDOUwOJ9mEEmG_g8_M5u28W7hrW-zw1Ox-mTcfj_y6EzuuVgZtMfXVhyciSl0YnWBVRQD9GJvc/s1600/btrix-mysql.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> Html</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiikHNQeQUq81mf9MswVAmNmbYztmfqX2ynzAsGmGuf3EmR1IVVUXnBn2RIOHq_PwlQC67NEuohUt6Ty77UEqVkxLP4hJHVaXvXn6wka5TuTGoJM7mBJPK1YvHLjtQT4qNQ-vr2C56wZss/s1600/Btrix-html.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Contact</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTxlTwGiLEgv0cZvjbf6bUOiSbryCgaU6UX3rtLxEdd1c2fih7dwe8UUW3kJcl8zMVfpeQXWKxr5lXzmZaXcdTya97NDkUoWObucAec0CXgj7X-3pxjZMpvND44mZCy0_MTr_WFPRcSik/s1600/btrix-contact.png" /> </a> </li> </div>

Replace # with your links.

8. Now save your HTML/Javascript'.
You are done. If you have any problem related to this Css Icon Hover Effect Navigation Bar. Just leave a comment.I will help to you.

Please Share It With Your Freinds So That More and More People Get Its Benefit !

ThnX !!

Read more »

Facebook PopUp Like Box with Timer and Cookies (Comszone)

Remember Always Back Up Your Template Before You Make Changes. In Your Blogger Dashboard Click Design > Add a gadget > Choose html/javascript.

Copy and Paste the following code into the Html/Javascript gadget, there is a lot of code make sure to get it all. 

 <style>


            /*


            ColorBox Core Style:


            The following CSS is consistent between example themes and should not be altered.


            */


            #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}


            #cboxOverlay{position:fixed; width:100%; height:100%;}


            #cboxMiddleLeft, #cboxBottomLeft{clear:left;}


            #cboxContent{position:relative;}


            #cboxLoadedContent{overflow:auto;}


            #cboxTitle{margin:0;}


            #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}


            #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}


            .cboxPhoto{float:left; margin:auto; border:0; display:block;}


            .cboxIframe{width:100%; height:100%; display:block; border:0;}


            /*


            User Style:


            Change the following styles to modify the appearance of ColorBox. They are


            ordered & tabbed in a way that represents the nesting of the generated HTML.


            */


            #cboxOverlay{background:#000;opacity:0.5 !important;}


            #colorbox{


            box-shadow:0 0 15px rgba(0,0,0,0.4);


            -moz-box-shadow:0 0 15px rgba(0,0,0,0.4);


            -webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);


            }


            #cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxriCTpV0j6pXY5Iw07SrX1MAdqqrRmAf36qpp_b0a2EHbvcfzQkLUTvnCQRes4NBfwJPXxHl72CIjGc1nwTlIMI3qaTmdBOX9w_LnNNsk9OrGQzFXVCf2YD6ZnOccsuuRXZdHdiK5JagK/s1600/controls.png) no-repeat 0 0;}


            #cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrAlijg-wvyZ8Zk76mAQT1Z7vflbyAVoppSggLkUYrKgTr-uuCHTBZjEiyZ79Wtpd_ZgYRe-cTZuxVqoz2DS5MZzXaNigO9U9hWODQjkbn9vyJRC_IqCVdc76HHmasWLL6uJ-yISi092I6/s1600/border.png) repeat-x top left;}


            #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxriCTpV0j6pXY5Iw07SrX1MAdqqrRmAf36qpp_b0a2EHbvcfzQkLUTvnCQRes4NBfwJPXxHl72CIjGc1nwTlIMI3qaTmdBOX9w_LnNNsk9OrGQzFXVCf2YD6ZnOccsuuRXZdHdiK5JagK/s1600/controls.png) no-repeat -36px 0;}


            #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxriCTpV0j6pXY5Iw07SrX1MAdqqrRmAf36qpp_b0a2EHbvcfzQkLUTvnCQRes4NBfwJPXxHl72CIjGc1nwTlIMI3qaTmdBOX9w_LnNNsk9OrGQzFXVCf2YD6ZnOccsuuRXZdHdiK5JagK/s1600/controls.png) no-repeat 0 -32px;}


            #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrAlijg-wvyZ8Zk76mAQT1Z7vflbyAVoppSggLkUYrKgTr-uuCHTBZjEiyZ79Wtpd_ZgYRe-cTZuxVqoz2DS5MZzXaNigO9U9hWODQjkbn9vyJRC_IqCVdc76HHmasWLL6uJ-yISi092I6/s1600/border.png) repeat-x bottom left;}


            #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxriCTpV0j6pXY5Iw07SrX1MAdqqrRmAf36qpp_b0a2EHbvcfzQkLUTvnCQRes4NBfwJPXxHl72CIjGc1nwTlIMI3qaTmdBOX9w_LnNNsk9OrGQzFXVCf2YD6ZnOccsuuRXZdHdiK5JagK/s1600/controls.png) no-repeat -36px -32px;}


            #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxriCTpV0j6pXY5Iw07SrX1MAdqqrRmAf36qpp_b0a2EHbvcfzQkLUTvnCQRes4NBfwJPXxHl72CIjGc1nwTlIMI3qaTmdBOX9w_LnNNsk9OrGQzFXVCf2YD6ZnOccsuuRXZdHdiK5JagK/s1600/controls.png) repeat-y -175px 0;}


            #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxriCTpV0j6pXY5Iw07SrX1MAdqqrRmAf36qpp_b0a2EHbvcfzQkLUTvnCQRes4NBfwJPXxHl72CIjGc1nwTlIMI3qaTmdBOX9w_LnNNsk9OrGQzFXVCf2YD6ZnOccsuuRXZdHdiK5JagK/s1600/controls.png) repeat-y -211px 0;}


            #cboxContent{background:#fff; overflow:visible;}


            #cboxLoadedContent{margin-bottom:5px;}


            #cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2oi7WLdg3JItqx80i95ptARn55v1SEZuv9C5UQZjL19rVPLtyeO5R5Yl0b4kAll0FbF4BNhicaM4lGIuwTLC6-Q_gogUPycUH9hOhmRWsVqCHa6C8oahVosyEzE33YOkL9zK1_xWomS5J/s1600/loading-background.png) no-repeat center center;}


            #cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS98Esgs9iOB8tiVYj8Ufz9xEzA4ZkYWLVbfzxficl1CzDWtnOJdN_MK5vuN4yd1m-guaEVQ0g4btwIopg-jfdZED_xMk0-0IeUBdebDYEUPhhEs1zd0oRUmY3csueGUVkwFzuzhP3q9Te/s1600/loading.gif) no-repeat center center;}


            #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}


            #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}


            #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxriCTpV0j6pXY5Iw07SrX1MAdqqrRmAf36qpp_b0a2EHbvcfzQkLUTvnCQRes4NBfwJPXxHl72CIjGc1nwTlIMI3qaTmdBOX9w_LnNNsk9OrGQzFXVCf2YD6ZnOccsuuRXZdHdiK5JagK/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}


            #cboxPrevious{left:0px; background-position: -51px -25px;}


            #cboxPrevious.hover{background-position:-51px 0px;}


            #cboxNext{left:27px; background-position:-75px -25px;}


            #cboxNext.hover{background-position:-75px 0px;}


            #cboxClose{right:0; background-position:-100px -25px;}


            #cboxClose.hover{background-position:-100px 0px;}


            .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}


            .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}


            .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}


            .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}


            /*-----------------------------------------------------------------------------------*/


            /* Facebook Likebox popup For Blogger


            /*-----------------------------------------------------------------------------------*/


            #subscribe {


            font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;


            }


            #subscribe a,


            #subscribe a:hover,


            #subscribe a:visited {


            text-decoration:none;


            }


            .box-title {


            color: #3B5998;


            font-size: 20px !important;


            font-weight: bold;


            margin: 10px 0;


            border:1px solid #ddd;


            -moz-border-radius:6px;


            -webkit-border-radius:6px;


            border-radius:6px;


            box-shadow: 5px 5px 5px #CCCCCC;


            padding:10px;


            line-height:25px; font-family:arial !important;


            }


            .box-tagline {


            color: #999;


            margin: 0;


            text-align: center;


            }


            #subs-container {


            padding: 35px 0 30px 0;


            position: relative;


            }


            a:link, a:visited {


            border:none;


            }


            .demo {


            display:none;


            }


            </style>


            <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>


            <script src="http://yourjavascript.com/11215013191/jquery.colorbox-min.js"></script>


            <script type="text/javascript">


            jQuery(document).ready(function(){


            if (document.cookie.indexOf('visited=true') == -1) {


            var fifteenDays = 1000*60*60*24*30;


            var expires = new Date((new Date()).valueOf() + fifteenDays);


            document.cookie = "visited=true;expires=" + expires.toUTCString();


            $.colorbox({width:"400px", inline:true, href:"#subscribe"});


            }


            });


            </script>


            <!-- This contains the hidden content for inline calls -->


            <div style='display:none'>


            <div id='subscribe' style='padding:10px; background:#fff;'>


            <h3 class="box-title">Receive all updates via Facebook. Just Click the Like Button Below<center><p style="line-height:3px;" >▼</p></center></h3>


            <center>


            <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FCobralite&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>


            </center>


            <p style=" float:right; margin-right:35px; font-size:9px;" >Powered By | <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.mybloggertricks.org">Blog Gadgets</a> Via <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.mybloggertricks.org">Blogger Widgets</a></p>


            </div>


            </div>

Make these important changes:

 Replace this Cobralite with your Facebook page username.

Read more »

How to customize next and previous post link

Today, I am going to walk you through how to customize next and previous post link. As we know, there are "Older Posts" and "Newer Posts" located in every blog which can make readers stay longer in your blog. But, is it attractive enough to draw visitors' attentions? I would recommend you change this. It won't take long to customize the next and previous links, so just follow the steps below:

1. Go to Layout >> Template >> Download the full template >> Click on Expand Widget Templates
2. Press Ctrl + F, and find this code:

<data:newerPageTitle/>

3. Replace it with: NEXT POST  or this code if you want to show an image:

<img src="YOUR--IMAGE--ADDRESS--HERE" />

We've added a NEW POST link, now we'll change the PREVIOUS link
4. Find this code:

<data:olderPageTitle/>

5. Replace it with PREVIOUS or this code:

<img src="YOUR--IMAGE--ADDRESS--HERE" />

Now we'll do the same for the HOME PAGE
6. Find this code: (note: there are two similar code, use the first one)

<data:homeMsg/>

7. Replace it with HOME PAGE or

<img src="YOUR--IMAGE--ADDRESS--HERE" />

I have these cool NEXT and PREVIOUS post link icons, you can use it also:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXl3XcygXW30SUL838IbfIC9zf1eFmDLqvi1IWWwXHXgzppl7KZhuF9LAClPcFSR_YG9lcCi5etOZPXMHBBYLDDVjzk4HhEz6CWhgR_q2toVmz5k4njfrxPRgGkviPOlBrxmOEJ-bd-idY/s1600/Next-page.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5FteC8o9h3nMMNT8PRRFFUTDoOZlAASsbl7krugw-yWbO9WgnzsjDzXzp0scrsUm4FGW7HOYpzwPbPd2S89Xc6p_KnU_G9hkJ3mzNCNoeCqk1jBqNeqWWy0MCu9rt4vf-lkCW9GYgockd/s1600/Previous-posts.png

Read more »

How to Make 2 Column Content with Navigation Sitemap Page Comszone

This time i will share How to Make 2 Column Content with Navigation Sitemap Page.This tutorial comes from the Internet, I just modify it a little CSS in order to look into 2 columns.

Demo here

Okay straight to the installation phase.First of all entry and select the Bloggers page,click New page.

 After that ,select HTML instead of Compose mode:

Then copy and paste the code below and paste it in column HTML:

<style scoped="" type="text/css">
#toc-outer {
  color:black;
  font:normal 11px/14px Arial,Sans-Serif;
  height:auto;
  margin:0 auto;
  overflow:hidden;
  padding:0;
  text-align:left;
}

#loadingscript {
  padding:0px 0px;
  height:37px;
  text-indent:-9999px;
  color:transparent;
  background:white url('data:image/gif;base64,R0lGODlhEAALALMMAOXp8a2503CHtOrt9L3G2+Dl7vL0+J6sy4yew1Jvp/T2+e/y9v///wAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCwAMACwAAAAAEAALAAAEK5DJSau91KxlpObepinKIi2kyaAlq7pnCq9p3NZ0aW/47H4dBjAEwhiPlAgAIfkECQsADAAsAAAAAAQACwAABA9QpCQRmhbflPnu4HdJVAQAIfkECQsADAAsAAAAABAACwAABDKQySlSEnOGc4JMCJJk0kEQxxeOpImqIsm4KQPG7VnfbEbDvcnPtpINebJNByiTVS6yCAAh+QQJCwAMACwAAAAAEAALAAAEPpDJSaVISVQWzglSgiAJUBSAdBDEEY5JMQyFyrqMSMq03b67WY2x+uVgvGERp4sJfUyYCQUFJjadj3WzuWQiACH5BAkLAAwALAAAAAAQAAsAAAQ9kMlJq73hnGDWMhJQFIB0EMSxKMoiFcNQmKjKugws0+navrEZ49S7AXfDmg+nExIPnU9oVEqmLpXMBouNAAAh+QQFCwAMACwAAAAAEAALAAAEM5DJSau91KxlpOYSUBTAoiiLZKJSMQzFmjJy+8bnXDMuvO89HIuWs8E+HQYyNAJgntBKBAAh+QQFFAAMACwMAAIABAAHAAAEDNCsJZWaFt+V+ZVUBAA7') no-repeat 50% 50%;
}

.itemposts {
    float: left;
    height: auto;
    overflow: hidden;
    width: 47%;
    box-shadow: 1px 1px 5px #C3C3C3;
    background: none repeat scroll 0% 0% #F9F9F9;
    border: 1px solid #FFF;
    margin: 3px 5px 8px;
    padding: 0px 3px;
}

.itemposts h6 {
    border-bottom: 1px solid #CCC;
    color: #333;
    font: bold 12px Arial;
    height: 15px;
    overflow: hidden;
    text-transform: none;
    margin: 0px 0px 5px;
    padding: 2px 6px !important;
}

.itemposts h6 a:hover {
  color:#38f;
  text-decoration:none;
}

.itemposts img {
  background-color:#fff;
  border:1px solid #ccc;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  float:left;
  height:65px;
  margin:0 7px 5px 0;
  padding:3px;
  width:65px;
  z-indent:99999px;
}

.itemposts .iteminside {}

.itemposts .itemfoot {
    border-top: 1px solid #CCC;
    clear: both;
    overflow: hidden;
    padding: 4px 5px;
}

.itemposts .itemfoot a.itemrmore {
  color:#333;
  float:right;
  font-weight:bold;
  text-decoration:none;
}

.itemposts .itemfoot a.itemrmore:hover {text-decoration:underline}

#itempager {
  clear:both;
  padding:10px 0;
}

#pagination,

#totalposts {
  color:#000;
  display:block;
  font:bold 10px Verdana,Arial,Sans-Serif;
  margin-bottom:10px;
  text-align:center;
  padding:0;
}

#pagination span, #pagination a {
    color: #FFF;
    display: inline;
    margin: 0px 1px;
    padding: 2px 5px;
    text-indent: 0px;
    background-color: #068BC9;
    background-image: linear-gradient(#068BC9 0%, #3161C2 50%, #3059AB 51%);
    border: 1px solid #3161C2;
    text-decoration: none;
    border-radius: 10px;
}
#pagination a:hover {background-color:#333}

#pagination span.actual {background-color:black}

#pagination span.hidden {display:none}
</style>
<script>
var showPostDate   = true,
    showComments   = true,
    idMode         = true,
    sortByLabel    = false,
    labelSorter    = "JQuery",
    loadingText    = "Loading...",
    totalPostLabel = "Number of posts:",
    jumpPageLabel  = "page",
    commentsLabel  = "comment",
    rmoreText      = "Learn more&#9658;",
    prevText       = "previous",
    nextText       = "next",
    siteUrl        = "http://www.Comszone.blogspot.com",
    postPerPage   = 10,
    numChars       = 150,
    imgBlank       = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC";
</script>
<script src="http://yourjavascript.com/16094131351/sitemaps.js"></script>

  Replace URL http://www.Comszone.blogspot.com with your blog address and save.Done!

Read more »

AUTOMATIC NUMBERING POPULAR POSTS WIDGET FOR BLOGGER

Blogger released its popular posts widget in 2011. since then many alterations has been done by web developers to provide best to the fellow bloggers.

Blogger doesn’t provide options to add different plugins as per the requirement, hence we need to play with the HTML codes to customize our theme. Automatic Numbering Popular Posts Widget for Blogger is created by changing the default CSS to something that provides results as shown in the image.

ADD POPULAR POSTS WIDGET

• Go to Blogger Dashboard
• Go to Layout
• Click “Add a Gadget” in Sidebar
• Add “Popular posts Widget” from the list

• Save it            

CUSTOMIZE POPULAR POSTS WIDGET FOR BLOGGER FOR AUTOMATIC NUMBERING

We need to change the default Design and style of the popular posts widget using custom CSS

Go to Blogger Dashboard

Go to Template

Note- Backup your template (To restore if something goes wrong)

Click Edit HTML

Find this code in your template

</b:skin>

Paste this Code just above </b:skin> in your template

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

/*--- TRI Popular Posts --- */ .popular-posts ul { padding-left: 0px; counter-reset: popcount; } .popular-posts ul li:before { list-style-type: none; margin-right: 15px; padding: 0.3em 0.6em; counter-increment: popcount; content: counter(popcount); font-size: 16px; background: #292D30; color: #ffffff; position: relative; font-weight: bold; font-family: georgia; float: left; border: 2px solid #dddddd; box-shadow: 1px 2px 9px #666666; } .popular-posts ul li { border-bottom: 1px dashed #dddddd; } .popular-posts ul li:hover { border-bottom: 1px dashed #696969; } .popular-posts ul li a { text-decoration:none; color:#5A5F63; }   .popular-posts ul li a:hover { text-decoration:none; }

CUSTOMIZE AUTOMATIC NUMBERING POPULAR POSTS WIDGET FOR BLOGGER

• Change the background color of the Square bubble by editing #292D30
• Change the text color of the bubble by editing #ffffff
• The Default shape of the bubble is Square. Change it to Circle by simply adding the following code just after “box-shadow: 1px 2px 9px #666666;”

Code

1	border-radius:15px;

Save your template and you are done with the customization. Check your blog to verify the changes made. You may comment us if you require assistance regarding the same.

Read more »