twitter takipci rozeti
Sitenize, blogunuza ekleyebileceğiniz bu eklenti, twitter takipçilerinizi kartvizit tarzı rozet şeklinde gösterir. Tweetlerinizi, takipçilerinizi ve takip ettiklerinizi sayısal olarak gösterir. Jquery kullanan bu eklenti, ayrıca konumuzu gösterir. Twitter'da bulunan bilgilerinizi aynen gösterir ve günceller. Uygulaması kolay ve sidebarınıza renk katacak çok şık bir eklenti.

● Blogunuza twitter takipçi rozeti Eklentisi
● Twitter Follow Badge
ÖNİZLEME


1. Blogger Kumanda Panelinize gidin.
2. Yerleşim tıklayın.
3. Gadget/Widget Ekle.
4. HTML / JavaScript seçeneğini seçin.
5. Aşağıdaki kodu isteğinize göre özelleştirerek, kopyalayın ve yapıştırın.

<style>
#boxs{display:none;}
.SG-tweter-header{background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid2m6EkfnZQbH4TBbYvYl5HB6lFqSa1oyIP7XONSzPeyl8ro0wSfOscohdGH_SHzf6Jbw1nyrDZumEoQ3Aq7WnvmgeGvN-9fcJC0kYhFDs4875T1oc2ODBZ5fLW8q0mLDNZzGf_biMnYVS/s320/at-the-beach-hd-wallpaper-1920x1200.jpg) 0 0 no-repeat;}
.SG-tweter{width:266px;background-color:#fff;font-family:Arial, Helvetica, sans-serif;border-radius:0;}
.SG-tweter .SG-tweter-header{height:73px;padding:10px;}
.SG-tweter .SG-tweter-header .screen-name h1{color:#fff;font-size:16px;text-transform:capitalize;font-family:Helvetica, sans-serif;margin:0;}
.SG-tweter .SG-tweter-header .screen-name h2,.SG-tweter .SG-tweter-header .screen-name h3{color:#fff;font-size:12px;font-family:Helvetica, sans-serif;background:none;margin:0;}
.SG-tweter .SG-tweter-header .screen-name{margin-top:20px;width:150px;float:left;}
.SG-tweter .SG-tweter-header .profile-image{width:70px;height:70px;float:right;}
.SG-tweter .SG-tweter-header .profile-image img{width:70px;height:70px;border-radius:40px;}
.SG-tweter .twitter-summary{background-color:#f9f9f9;height:60px;position:relative;}
.SG-tweter .twitter-summary ul{display:table-row;height:60px;width:100%;text-align:center;margin:0;padding:15px 0;}
.SG-tweter .twitter-summary ul li{background:#0AB7E2;list-style-type:none;font-size:12px;text-align:center;vertical-align:middle;display:table-cell;color:#fff;width:84px;-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;transition:.5s;border:0;padding:0 6px;}
.SG-tweter .twitter-summary ul li:hover{background:#9808AC;-webkit-box-shadow:0 5px 5px 0 #666;-moz-box-shadow:0 5px 5px 0 #666;-ms-box-shadow:0 5px 5px 0 #666;-o-box-shadow:0 5px 5px 0 #666;box-shadow:0 5px 5px 0 #666;}
.SG-tweter .twitter-summary ul li a{color:#fff;text-decoration:none;}
</style>
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
 $("#box").dwseeTwitterBox({
 'screenname':'Twitter Kullanıcı adınız',})})
</script>
<div id="box">
</div>

Kodu denemek için Online html editor'ü kullanabilirsiniz. Yukarıdaki kırmızı ile belirttiğim alanları kendi adınıza göre düzenlemeyi unutmayın! Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz.iyi bloglamalar...

Yorum Gönder

Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın. Ve lütfen yorumlara tıklanabilir link yazmayın!

Önceki Makale Sonraki Makale