Birsorumoalcak » blogger popüler yazılar eklentisi

Blogger Popüler Yayınlar Eklentisi {Hover}

Blogger Popüler Yayınlar Eklentisi {Hover} Efektli

Yine yine yine kaliteli bir popüler yayınlar eklentisini size sunmak için şu anda klavyemin tuşlarını eskitmekteyim.Her neyse geçelim popüler yayınlar eklentimize yine kullanışlı şık görünümlü ve hover efektli bir eklenti.Yine uzatmadan eklenti tanıtımına geçmek istiyorum.

Şimdi eğer beğendiyseniz diğer adımlara geçelim.Yine yerleşim gatged ekle bölümünden ''Popüler Yayınlar Eklentimizi blogumuza ekliyoruz.Ama alt taraftaki resimde gördüğünüz gibi ekleyin yoksa istediğiniz sonuçları alamazsınız.

Popüler yayınlar eklentimizi eklediğimize göre Css kodlarımızı ekleyebiliriz demektir.Alt tarafdaki Css kodlarını Ctrl+F yardımı ile ]]></b:skin> kodunun hemen üzerine ekliyoruz.

#PopularPosts1 h2{
padding:7px 0 3px 0;
width:100%;
margin-bottom:10px;
font-size:1.3em;
text-indent:-12px;
font-size:18px;
text-align:center;
color: #757575; /* Color of the widget's title */
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:8px 0px 1px;
left:-7px;
width:290px;
}
#PopularPosts1 li{
position:relative;
margin:0 0 10px 0;
padding: 3px 2px 0 17px;
left:-5px;
width:285px;
}
#PopularPosts1 ul li{
background: #eee;
position: relative;
display: block;
padding: .4em .2em .4em 2em;
*padding: .2em;
margin: .5em 0;
background: #ddd;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;   
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute; 
top: 50%;
margin: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
font-size: 15px;
color: #fff; /* text color of numbers */
background: #FB8835; /* background color of numbers */
border: .2em solid #fff; /* border color */
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
position: absolute;   
left: 0;
transition: all .3s ease-out;
}
#PopularPosts1 ul li:hover{
background: #eee;
}
#PopularPosts1 ul li:hover:before{
transform: rotate(360deg);   
}
#PopularPosts1 ul li a{
font: 14px Georgia, serif; /* font size of post titles */
text-shadow: 0 -1px 2px #fff;
color: #444;
display:block;
min-height:25px;
text-decoration:none;
text-transform: uppercase;
}
#PopularPosts1 ul li a:hover{
color: #444;
}

Hepsi bu kadar arkadaşlar şablonu kaydedip çıkıyoruz sonra eklentinin keyfini sürüyoruz.Yapamadığınız yer olursa yorum kısmında belirtmeniz yeterli olur.

Blogger Popüler Yayınlar Eklentisi

Blogger Popüler Yayınlar Eklentisi V.2

Yine çok şık ve kullanışlı olan popüler yayınlar eklentisi ile karşınızdayım.Buda diğer popüler yayınlar eklentisi gibi oldukça kullanışlı bir yapıya sahip.Hiç lafı uzatmadan önizlemesini ve kodları size vermek istiyorum.

<div class="recentpoststyle">
<script src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentposts.js"></script>
<script>
var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestposts">
</script><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
.recentpoststyle {counter-reset: countposts;list-style-type: none;}
.recentpoststyle a {text-decoration: none; color: #49A8D1;}
.recentpoststyle a:hover {color: #000;}
.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff;background: #69B7E2; margin: 15px 5px 0px -6px; padding: 0px 10px; border-radius: 100%;}
li.recent-post-title { padding: 5px 0px;}
.recent-post-title { font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
.recent-post-title a {color: #444;font-size: 13px; text-decoration: none; padding: 2px; font-weight: bold;}
.post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;}
.recent-post-summ { border-left: 1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 11px; font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif; font-size: 15px;}
</style></div>

Kod İçerisinde Yapmanız gereken bir değişiklik yok.Kodu Yerleşim Gadget ekle Html/Javascript bölümüne eklemeniz yeterli olacaktır.

Blogger {Resimli} Popüler Yayınlar Eklentisi

Resimli ve Renkli Popüler Yayınlar Eklentisi

Bu popüler yayınlar eklentisi ile siteniz neşelecek ve ziyaterçileriniz sitenizden zevk alacak.Sizde eski popüler yayınlar eklentisinden bıkmadınız mı ? Gelin hep birlikte eskileri klasörlere atalım ve yepyeni bir eklenti edinelim.Bende blogger eklentisi ararken çoğu yerde gömüştüm renkli popüler yayınlar eklentisi ama hem renkli hemde resimliye hiç rastlamamıştım.Uzun lafın kısası hemen size kodları verelim sizde deneyip görün istiyorum.

<script src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentpoststhumbs.js"></script>
<script>
var posts_no = 5;
var showpoststhumbs = true;
var Devamılink = true;
var showcommentslink = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<noscript>Your browser does not support JavaScript!</noscript>
<link href="http://fonts.googleapis.com/css?family=Ubuntu+Condensed" rel="stylesheet" type="text/css"></link>
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: 5px -5px 0px 0px; border-radius: 100%; padding: 3px;background: #fff}
.recent-posts-container {font-family: 'Ubuntu Condensed', sans-serif; float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px; }
ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}
ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}
ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}
ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}
ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;}
ul.recent-posts-container li {padding:5px 10px;min-height:50px; list-style-type: none; margin: 0px 5px -5px 5px; color: #777;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #444; font-weight: bold;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
</style>

Arkadaşlar kod içerisinde hiçbir değişiklik yapmanıza gerek yok.Direk olarak Yerleşim gadget ekle Html/Javascript yolunu takip ederek ekliyoruz.Kendisi otomatik olarak sizin yayınlarınızı ekleyecektir.

Takip Et @Mcahitp

Bloguma Hoşgeldiniz !

Mücahit Polat

Kategoriler :)

E-posta Aboneliği!

Blogger Popüler Yayınlar Eklentisi {Hover}