Blogger popüler post gadgeti özelleştirmek

Blogger'ın size sağladığı ücretsiz popüler post gadget'lerinden bıktıysanız,blogunuza muhteşem bir tarz katmak istiyorsanız bu gadget'i daha güzel bir görünüme kavuşturmalısınız.Güzel bir gadget okuyucularınızın da dikkatini çeker.Bu sayede paylaşımlarınızı daha çok kişi tıklayabilir.Böylece Google'nin gözündeki değeriniz daha da artmış olur.

İlk önce bu gadget'i nereye koymak istediğinize karar verin.

Sonra Blogger kontrol paneli>>Yerleşim>>gadget ekle>>Popüler post sırasıyla tıklayın.

Eğer daha önce blogunuza popüler post gadget'i eklemişseniz yukarıdaki kısmı atlayabilirsiniz.

Sonra Blogger kontrol paneli>>Şablon>>HTML düzenle tıklayın.

HTML şablon kodunuzun içinde Ctrl+F yardımıyla ]]></b:skin> kodu bulun.

Beğendiğiniz alttaki kodlardan bir tanesini kopyalayıp hemen ]]></b:skin> kodunun üst kısmına yapıştırın.

Popüler post 1

           

.popular-posts ul li a { background: none repeat scroll 0 0 #222222; color: #FFFFFF; display: block; margin: 10px 0; padding: 25px 15px 30px; position: relative; text-decoration: none; transition: all 0.3s ease-out 0s; width: 85%;}.popular-posts ul li a:before { background: none repeat scroll 0 0 #2DB3E9; color: #FFFFFF; font-weight: 700; height: 2em; line-height: 2em; margin-left: 88%; padding: 4px; position: absolute; text-align: center; width: 2em; transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s;}.popular-posts ul li a:hover { opacity: 0.8;}.popular-posts ul li a:hover:before { border-left-color: #CCCCCC; left: -1px; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out;}.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before { content: "10";}.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before { content: "9";}.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before { content: "8";}.popular-posts ul li:first-child + li + li + li + li + li + li a:before { content: "7";}.popular-posts ul li:first-child + li + li + li + li + li a:before { content: "6";}.popular-posts ul li:first-child + li + li + li + li a:before { content: "5";}.popular-posts ul li:first-child + li + li + li a:before { content: "4";}.popular-posts ul li:first-child + li + li a:before { content: "3";}.popular-posts ul li:first-child + li a:before { content: "2";}.popular-posts ul li:first-child a:before { content: "1";}.item-snippet { display: none;}.PopularPosts .item-thumbnail { display: none;}

Popüler post 2




            

.PopularPosts .widget-content ul li{padding:0;position:relative}.item-snippet {font-size: 90%;line-height: 1.2em;position: absolute;width: 230px;background-color: whiteSmoke;padding: 7px;border-top: 2px solid #FF0202;z-index: 2;left: 300px;top: 60%;height: 4.5em!important;visibility: hidden;opacity: 0;transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-moz-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-webkit-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-o-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;}.PopularPosts .widget-content ul li:hover .item-snippet{left:60px;opacity:1;visibility:visible}.PopularPosts img{width:50px;height:50px}.PopularPosts .item-title{font-family:'Open Sans Condensed',"Arial Narrow",Arial,sans-serif;font-size:125%}

Popüler post 3


            

.popular-posts ul li a { background: none repeat scroll 0 0 #DDDDDD; color: #444444; display: block; margin: 0 0 0.5em; padding: 0.4em; position: relative; text-decoration: none; transition: all 0.3s ease-out 0s;}.popular-posts ul li a:before { background: none repeat scroll 0 0 #CCCCCC; font-weight: 700; height: 2em; left: -2.5em; line-height: 2em; margin-top: -1em; position: absolute; text-align: center; top: 50%; width: 2em;}.popular-posts ul li a:after { border: 0.5em solid transparent; content: ""; left: -1em; margin-top: -0.5em; position: absolute; top: 50%; transition: all 0.3s ease-out 0s;}.popular-posts ul li a:hover { background: none repeat scroll 0 0 #CCCCCC;}.popular-posts ul li a:hover:after { border-left-color: #CCCCCC; left: -0.5em;}.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before{content:"10"}.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before{content:"9"}.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before{content:"8"}.popular-posts ul li:first-child + li + li + li + li + li + li a:before{content:"7"}.popular-posts ul li:first-child + li + li + li + li + li a:before{content:"6"}.popular-posts ul li:first-child + li + li + li + li a:before{content:"5"}.popular-posts ul li:first-child + li + li + li a:before{content:"4"}.popular-posts ul li:first-child + li + li a:before{content:"3"}.popular-posts ul li:first-child + li a:before{content:"2"}.popular-posts ul li:first-child a:before{content:"1"}

Popüler post  4




                 


Bu tarz için iki kod girmeniz gerekir.

ilk vereceğim kodu ]]></b:skin> kodunun üstüne yapıştırın.ikinci kodu ise HTML'niz içinde Ctrl+F yardımıyla bu kodu bulup <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>⋯</b:widget> vereceğim ikinci kodla değiştirin.Aşağıda birinci kod mavi renk ile ikinci kod kırmızı renk ile gösterilmiştir.

.popular-posts li,.popular-posts .item-content{float:left;display:inline;list-style:none;}.popular-posts .item-snippet,.popular-posts .item-title,.feed-links{display:none;}p.description,aside li{font-size:12px;}.popular-posts ul li,.item-content,.item-thumbnail{margin:0!important;padding:0!important;}.sixcol,.left-main,.right-sidebar{width:50%;}#PopularPosts1 img {background: none repeat scroll 0 0 #FFFFFF;border: 1px solid #CCCCCC;border-radius: 110px 110px 110px 110px;padding: 4px;}

<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;'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (3) Show only thumbnails --> <div class='item-thumbnail-only'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> </div> <div style='clear: both;'/> <b:else/> <!-- (4) Show snippets and thumbnails --> <div class='item-content'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </div> <div style='clear: both;'/> </b:if> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div></b:includable></b:widget>

Popüler post 5


                  

.PopularPosts .item-title {display:none;}.PopularPosts .widget-content ul li {background: none repeat scroll 0 0 transparent;float: right;list-style: none outside none;margin: 10px 0 0 !important;padding: 0 !important;}.PopularPosts .item-thumbnail {margin: 0 8px !important;}#PopularPosts1 img: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 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);-moz-box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);}
.item-thumbnail img {-moz-border-radius: 8px;-webkit-border-radius: 8px;border-radius: 8px;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;transition: all 0.5s ease;border: 3px solid #ccc;height: 60px;padding: 3px;width: 60px;}