Blogger Hareketli Son Yazılar Eklentisi


Blogger için yeni bir özelliklerden daha eklenti çok renkli ve güzel görünüyor diğer bir örneği ise Son Yazılar yani blogunuzda paylaşmış olduğunuz son son yazıları bir eklenti olarak göstermiş ve hoş bir görüntü vermiş eklemeside oldukça kolay bir blogger eklentisi içeriğini kendinize göre ayarlabilirsiniz üstelik.

DEMO yazının en altındadır.

Blogger Paneli >> Yerleşim >> Gatget Ekle >> HTML/JavaScript seçin aşağıdaki kodlarıda içersine yerleştirin.



<style type="text/css">
#post-gallery {
  width:304px;
  margin:0px auto;
  font:normal 11px Arial,Sans-Serif;
  color:##000000
;
  padding:8px;
  background-color:#1BA1E2
;
  -webkit-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  -moz-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}
#post-gallery h2 {
  font:20px Arial,Sans-Serif;
  color:white;
  text-shadow:0px 3px 2px black;
  text-transform:uppercase;
  margin:2px 2px 2px;
  padding:7px 14px;
  background-color:#000000;
  text-align: center;
}
#post-gallery .rp-item {
  float:left;
  display:inline;
  position:relative;
  margin:2px;
  padding:0px 0px;
  background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf7Utk8PKLSSZg0ohtf9lqZgcc8MiCxIyeGTpf6NKwqQSliewqoFMZnZWS7pX3FToUHgZntG1KfYpe-xYbpWjKwE4p8LWXr2Y8sWrndgM2DfTiKUXeGT9oQSvANof6o-O1y4Ios63oe0w/s1600/bloggerturkey.gif') no-repeat 50% 50%;
  width:72px;
  height:72px;
}
#post-gallery .rp-item img {
  width:72px;
  height:72px;
  border:none !important;
  margin:0px 0px !important;
  padding:0px 0px !important;
  background:transparent !important;
  display:none;
}
#post-gallery .rp-item .rp-child {
  position:relative;
  top:10%!important;
  left:10%!important;
  z-index:1000;
  width:200px;
  background-color:white;
  border-top:5px solid #1BA1E2;
  -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  padding:10px 15px;
  overflow:hidden;
  word-wrap:break-word;
  display:none;
  opacity: 0.9;
}
#post-gallery .rp-item .rp-child h4 {
  font-size:12px;
  margin:0px 0px 5px;
  color:#1BA1E2;
}
#post-gallery .rp-item:hover .hidden {display:block;}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var rpTitle     = "Son Yazılar",       // Witget Başlığı
    numposts    = 20,      // Son Yazılar Kaç Tane Olmasını İstediğiniz Bölüm
    numchar     = 200,      // Açıklama Yazı Karakter Sayısı
    rcFadeSpeed = 600,      // Eklentinin Hızı
    pBlank      = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDHeGrx7xD1PxaV5lOatwlTF0ZUY1O165bL86x41FXG6XBSHP0BihpQyw2P3jtOGyQFhSUIWZjOvzOsf7SccLTuBRRObcbYDLIqA13K_q4_CxnpeP-Xf_tXAyk8TXm9vyHSqMpBWjrRHz1/s100/no-img.png",      // 
    blogURL     = "http://www.bloggerturkey.com/";       // Blog Adresini Yaz
</script>
<script src="http://dl.dropbox.com/u/81212926/Recent%20Post%20Thumbnail-blogger-heroe.js" type="text/javascript"></script>



  • Yukarıdaki kodlar içersinde değiştirmeniz gereken yerler renklendirilmiştir kendinize göre uyarlayabilirsiniz.


0 yorum:

Yorum Gönder