Bloggerda Sayfa Navigasyon

Blogger tabanlı bloglarda sayfa navigasyon eklentisi kodunu bu yazımızda sizlerle paylaşacağız. Burda ayrıca kodla birlikte kodun içinde hangi kısımları değiştirebileceğinizden bahsedeceğiz. Bu sayede kodu kendinize özgü bir şekilde düzenleyebilecek, Blogger sayfa navigasyon eklentisini blogunuza uyarlayabileceksiniz.

<style type="text/css">#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#fff}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV8QPxteicSYQccv1OR_tP2mOZjoyr1pl6CroiTvjS-hG2Ij2OOzBbNFQFEZS-Qh9j_ft-5fGh3v1ynuyXuyZpGHwHVj16OWZkMa3p8YWKQ_psmaPYk5-wk5J0Lh7sGtlbhGvoRM16DwI/s1600/wp5.jpg) 0 -50px repeat-x}.showpageNum a:hover{background:#666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV8QPxteicSYQccv1OR_tP2mOZjoyr1pl6CroiTvjS-hG2Ij2OOzBbNFQFEZS-Qh9j_ft-5fGh3v1ynuyXuyZpGHwHVj16OWZkMa3p8YWKQ_psmaPYk5-wk5J0Lh7sGtlbhGvoRM16DwI/s1600/wp5.jpg) 0 -25px repeat-x}.showpagePoint{color:#fff;padding:3px 8px;margin:2px;font-weight:700;background:#06a2b9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV8QPxteicSYQccv1OR_tP2mOZjoyr1pl6CroiTvjS-hG2Ij2OOzBbNFQFEZS-Qh9j_ft-5fGh3v1ynuyXuyZpGHwHVj16OWZkMa3p8YWKQ_psmaPYk5-wk5J0Lh7sGtlbhGvoRM16DwI/s1600/wp5.jpg) 0 0 repeat-x;text-decoration:none}.showpageOf{margin:0 5px 0 0} </style>
<script style='text/javascript'>
var postperpage=10;
var numshowpage=5;
var upPageWord="Önceki Sayfa";
var downPageWord="Sonraki Sayfa";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://code.helperblogger.com/10page-navi.js'></script>

Yukardaki kodumuzu bir Blogger sayfa navigasyon eklentisi gibi kullanabilmek için aşağıdaki işlemleri gerçekleştirin.

• Blogger yönetim paneline gidin.
• Yerleşim sekmesine gidin
• Gadget ekleye tıklayın
• Html/Javascript ekleye tıklayın
• Yukardaki kodu yapıştırıp kaydedin

Bu işlemlerden sonra sayfa navigasyon eklentisini kullanabileceksiniz. Şimdi gelelim kodda değişiklik yapabileceğiniz kısımlara. Kod üzerinde kırmızı yazıları değiştirebilirsiniz. Belirgin olsun diye birde kalın yaptım. Kırmızılar haricinde değişiklik yaparsanız kodun çalışmama ihtimali var.

Font Family kısmı yazı fontuyla ilgili bir kısım. Color ve Backgroun kısmı renklerle alakalıdır. Eğer blogunuza uyarlamak istiyorsanız buraya uygun renk kodlarını yazabilirsiniz. Kırmızı ile işaretlediğimiz görsel linkleridir. Bu görselleri kendinizinkiyle değiştirebilirsiniz. Son olarak postperpage sayfada gösterilecek yazı anlamına gelir, rakamı dilediğiniz gibi ayarlayın. Aynı yerde numshowpage kodu ise gösterilecek rakam sayısını belirler. Açıklanması gereken başka birşey yok... Çözemediğiniz bir durum olduğunda yorum vasıtasıyla bizimle iletişime geçebilirsiniz.


Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Yandan Açılan Sosyal Paylaşım Sitesi Eklentisi

Sitenizin yan tarafında görselde gördüğünüz gibi sosyal paylaşım siteleri (Facebook, Twitter, Google +, E-mail) çıkmasını istiyorsanız bu eklentiyi eklemelisiniz. Bu eklentiyi eklemek için aşağıdaki kodu sitenize Gadget ile ekleyin. 

<style>img,a{border:0;}#on{visibility:visible;}#off{visibility:hidden;}#facebook_div{width:196px;height:353px;overflow:hidden;}#twitter_div{width:246px;height:353px;overflow:hidden;}#google_plus_div{width:152px;height:97px;overflow:hidden;margin-left:50px;margin-top:10px;}#knfeedburner_div{width:300px;height:97px;margin-top:25px;overflow:hidden;}#kakinetwork_div{width:300px;height:97px;overflow:hidden;}/* right side style */#facebook_right{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;right:-200px;}#facebook_right img{position:absolute;top:-2px;left:-35px;}#facebook_right iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;left:-2px;top:-3px;}#twitter_right{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;right:-250px;}#twitter_right_img{position:absolute;top:-2px;left:-35px;border:0;}#google_plus_right{z-index:10003;background-color:#f2f2f2;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom:2px solid #0056a0;border-right:2px solid #0056a0;border-left:hidden;width:152px;height:97px;position:fixed;right:-154px;}#google_plus_right_img{position:absolute;top:-2px;left:-33px;border:0;}#feedburner_right{z-index:10003;background-color:#fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom:2px solid #5b5b5b;border-right:2px solid #5b5b5b;border-left:hidden;width:300px;height:97px;position:fixed;right:-303px;}#feedburner_right_img{position:absolute;top:-2px;left:-33px;border:0;}#kakinetwork_right{z-index:10003;border:2px solid #303030;background-color:#fff;width:300px;height:97px;position:fixed;}#kakinetwork_right img{position:absolute;top:-2px;left:-101px;}/* left side style */#facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px;}#facebook_left img{position:absolute;top:-2px;right:-35px;}#facebook_left iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px;}#twitter_left{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;left:-250px;}#twitter_left_img{position:absolute;top:-2px;right:-35px;border:0;}#google_plus_left{z-index:10003;background-color:#006ec9;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom:2px solid #0056a0;border-left:2px solid #0056a0;border-right:hidden;width:152px;height:97px;position:fixed;left:-154px;}#google_plus_left_img{position:absolute;top:-2px;right:-33px;border:0;}#feedburner_left{z-index:10003;background-color:#fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom:2px solid #5b5b5b;border-left:2px solid #5b5b5b;border-right:hidden;width:300px;height:97px;position:fixed;left:-303px;}#feedburner_left_img{position:absolute;top:-2px;right:-33px;border:0;}#kakinetwork_left{z-index:10003;border:2px solid #303030;background-color:#fff;width:300px;height:97px;position:fixed;}#kakinetwork_left img{position:absolute;top:-2px;right:-101px;}.box-title1{border:1px solid #ddd;/*border-radius*/-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;/*box-shadow*/-webkit-box-shadow:5px 5px 5px #CCCCCC;-moz-box-shadow:5px 5px 5px #CCCCCC;box-shadow:5px 5px 5px #CCCCCC;padding:10px;margin:10px 0;}.enteryouremail{background:#fff !important;border:1px solid #d2d2d2;padding:0px 8px 0px 8px;color:#a19999;font-size:12px;height:25px;width:165px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;margin:0px;}.submitbutton{background:#f2f2f2;border:1px solid #F66303;/*box-shadow*/-webkit-box-shadow:3px 3px 3px #666;box-shadow:3px 3px 3px #666;font:bold 12px Arial, sans-serif;color:#000000;height:25px;padding:0 12px 0 12px;margin:0 0 0 5px;/*border-radius*/-webkit-border-radius:5px;border-radius:5px;cursor:pointer;}</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script><script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script><script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); }); jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); }); jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); }); jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); }); });</script><div id="on"><div id="facebook_right" style="top: 18%;"><div id="facebook_div"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyRqYZHZrNMWFleIC2z9a6rPU1xmhHc_0LT-Dw4f0C-FKemlv2_T0T8dOOdebe6geJ07lKTzSknklwAGKiU03WwXCEnEyVLJ1U-DRRyoxp7DDSZCsPPiKtYVSyC3HM63c8RRdQ9FZkLrg/s1600/helperblogger.com-facebook-icon.png" alt="" /><iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/XXXXX&amp;locale=en_GB&amp;width=200&amp;connections=9&amp;stream=&amp;header=false&amp;show_faces=0&amp;height=356" scrolling="no"></iframe></div></div></div><div id="on"><div id="twitter_right" style="top: 35%;"><div id="twitter_div"><img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixzvCv7aPf-U7k3N8sOnESfqHiEv3bRlO0pNMhbfW1k-OMKWO1TZINCjQJhq_08oAulseB933hhzGG-GZrB-qCuMLKD-2W0lXZTCPgif8uh2gvLyTV3U149rwwear9PIapk5tMrem0SQk/s1600/helperblogger.com-twitter-icon.png" /><script src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 265,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }}).render().setUser('TWİTTERADRES').start();</script></div></div></div><div id="on"><div id="google_plus_right" style="top: 52%;"><div id="google_plus_div"><img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieHrvkni9nKGezDEmCzTe-nM9JbLPV3Q_3J9VnYqhcf6l0PsSXA7DJcDG2OwiiktCFqz9C7z-qnivw-v5q1J3l0pWudDAz9XrxoyuJYj5nbV4kIxult2JbamGkicqtF2kZsoaupvQ9ZJg/s1600/helperblogger.com-google-plus-icon.png" /><div style="float:left;margin:10px 10px 10px 0;"><g:plusone size="tall" expr:href="data:post.url"></g:plusone></div></div></div><div id="on"><div id="feedburner_right" style=" top: 69%;"><div id="knfeedburner_div"><center><h4 style="color:#F66303;">You can also receive Free Email Updates:</h4><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNERADRES', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="FEEDBURNERADRES" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form></center><img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXr5c0gJ5ygO_am_Jl3bCyST8fASXigdaMif11ZuUEsU83v1hz23xZx0bckOn6f9m2nFbIjRz06hfqQHs6OHi0fkYqtXfwz6eGZNhpwXFMdmkHsbrAIdJK5DTs8Ziu_jF9Fnce7wzx1Eg/s1600/helperblogger.com-subscribe-icon.png" /></div></div></div></div> 

Kırmızı yazılmış yerlere, Facebook, Twitter ve Feedburner adreslerinizi yazınız , ( https://www.facebook.com/XXXXX, TWİTTERADRES, FEEDBURNERADRES kısımlarına kendi adreslerinizi yazınız.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Blogger İçin Aşağı Doğru Açılır Menü Eklentisi

Blogger’ınıza yeni bir açılır menü eklemek istiyorsanız bu eklenti tam size göre. Bu eklenti eklendiği zaman üzerine gediğiniz zaman aşağı doğru tıklayabileceğiniz sekmeler açılıyor. Görselden de gördüğünüz gibi bir menü karşınıza çıkıyor. 

Bu eklentiyi edinmek için aşağıdakileri yapabilirsiniz. 

Yerleşim – Gatget Ekle – HTML/JavaScript yolunu takip ederek aşağıdaki kodu yapıştırın. 

Kod: 

<style text-type="CSS">
#bmenu{
position:fixed;
right:5px;
center:0px;
background-color:#2059DC;
border-radius:10px;
-moz-border-radius:10px;
border:2px solid #FFF;
width:202px;
height:20px;
color:#FFFFFF;
transition:all .5s ease-in;-moz-transition:all .5s ease-in;-webkit-transition:all .5s ease-in;-o-transition:all .5s ease-in;z-index:3;overflow:hidden;padding:9px 15px 10px;}


#bmenu h3{
margin:0;
padding:0;
text-align:center;
cursor:pointer;}


#bmenu ul{
border-radius:10px;-moz-border-radius:10px;
border:2px solid #FFf;
background-color:#9AB2EA;
margin:15px 0;
padding:0 15px;}


#bmenu li{list-style:none;margin:0 0 5px;padding:0;} #bmenu li a{
color:#000;
text-decoration:none;
font-size:14px;}


#bmenu li a:hover{
color:#fff;}


#bmenu:hover{
z-index:5;
height:175px;
</style>


<div id="bmenu">
<h3>
Açılır Menü</h3>
<ul>
<li><a href="#">MENÜ 1</a></li>
<li><a href="#">MENÜ 2</a></li>
<li><a href="#">MENÜ 3</a></li>
<li><a href="#">MENÜ 4</a></li>
<li><a href="#">MENÜ 5</a></li>
</ul>
</div> 

Kodlar bunlar. Kırmızı yere görüntü başlığınızı, mavi yerlere menü başlıklarınızı, sarı yere de menülere tıklandığı zaman gidilmesini istediğiniz linkleri koyun. Bu eklentinin demosu bu bağlantıdadır. Bakabilirsiniz.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Blogger’da Gazete Yazısı Gibi Görünen Yazı Tarzı Eklentisi

Blogger bloğunuzda yazılarınızın görseldeki gibi görünmesini istiyorsanız yapmanız gereken şey size vereceğimiz kodları değerlendirmek. 

Kodlar: 

<table cellpadding="10" cellspacing="10"><tbody>
<tr><td align="justify" valign="top" width="320">Deneme Yazısı Sol Tarafı</td><td align="justify" valign="top" width="300">Deneme Yazısı Sağ Tarafı</td></tr>
</tbody></table> 

Yukarıkdaki kodları nereye yapıştıracaksınız? Kodları yapıştıracağınız yer şurasıdır. Yeni yayın diyeceksiniz. Karşınıza gelen sayfada sol köşede “oluştur/HTML” adında bir buton gelecek. HTML’ye tıkladığınız zaman yazının kod sayfası açılır. Yukarıdaki kodları oraya yapıştıracaksınız. Herhangi bir yere yapıştırabilirsiniz. 

Ancak şuna dikkat edin. Kırmızı ile geçen yer sol taraftaki yazınız, mavi ile geçen yer ise sağ taraftaki yazınızdır. Bunu dikkate alarak düzenleme yapın.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Blogger İçin Resimli Benzer Yazılar Eklentisi

Blogger bloğunuzda benzer yazıları resimli bir şekilde ziyaretçilerinize göstermek istiyorsanız bu eklentiyi kullanmalısınız. Bu eklentiyi nasıl Blogger bloğunuza eklersiniz? 

İlk olarak aşağıdaki kodu bulun. 

</head> 

Bu kodu “Şablon” – “HTML’yi düzenleden bulabilirsiniz. Kodu bulduğunuz zaman hemen üstüne aşağıdaki kodları yapıştırın. 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
text-transform:none;
padding-left:5px;
}
#related-posts li {
list-style:none;
}
#related-posts h2{
font-size: 18px;
font-weight: bold;
color: #003300;
}
#related-posts a{
font-size: 16px;
color:#868686;
}
#related-posts a:hover{
color:black;
}
a.hidden img{
filter:alpha(opacity=70);
-moz-opacity: 0.5;
opacity: 0.5;
}
a.hidden:hover img{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;}
</style>
<script src='http://yourjavascript.com/1124875421/benzer.js' type='text/javascript'/>
</b:if> 

Kodu yapıştırdıktan sonra şimdi de aşağıdaki kodu bulun. 

<data:post.body/> 

Kodu bulduktan sonra kodun altına aşağıdaki kodları yapıştıralım. 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
var relatedpoststitle=&quot;BENZER YAZILAR&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if> 

Yapacağınız işlemler bu kadardır. Eğer bir yanlış yapmadıysanız eklentiniz hazır demektir.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Blogger İçin Otomatik Thumbnail ve Devamını Oku Eklentisi

Blogunuzdaki yazılarda devamını oku butonu tıklama açısından daha iyi olabilir. Yazınız olduğu gibi ortalıkta gözükmez. Kısa bir tarafı gösterilir. Sonra da devamını oku çıkar. Okumak isteyen kişi tıklamak zorunda kalır. 

Bu eklentiyi Blogger’a nasıl eklersiniz? 

İlk olarak aşağıdaki kodu bulun. 

</head> 

Ardından kodun hemen üstüne aşağıdaki kodu yapıştırın. 

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 400;
summary_img = 400;
img_thumb_height = 140;
img_thumb_width = 140; 
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
if(img.length<=0) {
imgtag = '<span style="float:left;margin-right:5px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidjaOJU8cx1UcLG5J92IOlHsX6ScvNYHA9F523DYfOWm3cSuHBfHWACNGWnBjwC1NQwTNLj1AoHwTwbU-aQM_7oafdf38cuppGcdEbCGe18Vv6tsx-TTyku4swFq6MJe5oZltIJWmXPXWm/s0/2nrklth.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
var summ = summary_noimg;
}
if(img.length>=1) {
imgtag = '<span style="float:left;margin-right:5px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script> 

Bu kodu yapıştırdıysanız aşağıdaki kodu bulun. 

<data:post.body/> 

Bu kodu bulduysanız kodu silin ve onun yerine aşağıdaki kodları ekleyin. 

<!-- webmaster.10line.net thumbnail devamını oku başlangıcı -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Devamını oku...</a>
</b:if>
</b:if>
<!—webmaster.10line.net thumbnail devamını oku bitişi --> 

Bunu yaptıysanız artık bu eklentiye sahipsiniz demektir. yapmanız gereken son bir iş daha var. İlk kodda kırmızı renkte olan iki yer göreceksiniz. 

img_thumb_height = 140; 

img_thumb_width = 140; 

Yukarıdaki yerleri görmüş olacaksınız. Bu yerleri resmin boyutunu ayarlamak için değiştirebilirsiniz.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Blogger İçin Resim Üstüne Yazı Eklentisi

Blogger bloğunuzda bu eklenti çok şık duracaktır. Eklediğiniz resimlerin alt kısmında kısa yazılar görünecektir. O yazıları elbette siz belirleyeceksiniz. Peki, bu eklentiyi nasıl edinirsiniz? 

Bu eklentiyi Blogger bloğunuza yüklemek için aşağıda söylenenleri yapın. 

İlk olarak aşağıdaki kodu bulacaksınız. 

]]></b:skin> 

Ardından da yukarıdaki kodun tam üstüne aşağıdaki kodları ekleyin. 

#arka{
background-color:#FFFFFF;
}
#arka li{
display:inline-block;
box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
}
.text{
padding:3px 5px;
font-size:12px;
width:175px;
color:#FFFFFF;
background: #000000;
background: rgba(0,0,0,0.5);
position:relative;
z-index:1;
text-align:center;
margin-top:-36px;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
transition: background 1s;
}
.text:hover{
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
transition: background 1s;
background: #000000;
background: #000000;
} 

Yukarıdaki kodu eklediyseniz yerleşimden bir gatget ekleyerek aşağıdaki kodları yapıştırın. 

<div id="arka">
<li><a href="#"><img src="resim" width="185" height="120" /></a>
<div class="text">Resim açıklamaları</div></li>

<li><a href="#"><img src=" resim" width="185" height="120" /></a>
<div class="text"> Resim açıklamaları </div></li>

<li><a href="#"><img src=" resim" width="185" height="120" /></a>
<div class="text"> Resim açıklamaları </div></li>

</div> 

Yapmanız gerekenler bu kadar. Artık resimlerinizin üstünde eklediğiniz açıklamalar görünecektir.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Üzerine Fare Gelince Dairesel Çıkan Paylaş Butonları

Bu blogger eklentisinin demosunu bu adresten görebilirsiniz. Ayrıca görselini de sizinle paylaştım. Peki, bu eklentiyi Blogger bloğunuza nasıl eklersiniz? 

İlk olarak aşağıdaki kodu bulun. 

</body> 

Bu kodu bulduktan sonra hemen üstüne aşağıdaki kodu yapıştırın. 

<!-- Start Shareaholic Sassy Bookmarks HTML (webmaster.10line.net)-->
<div class="shr_ss shr_publisher">
</div>
<!-- End Shareaholic Sassy Bookmarks HTML (helperblogger.com) -->
<!-- Start Shareaholic Sassy Bookmarks settings -->
<script type="text/javascript">
var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
</script>
<!-- End Shareaholic Sassy Bookmarks settings -->
<!-- Start Shareaholic Sassy Bookmarks script -->
<script type="text/javascript">
(function() {
var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
})();
</script>
<!-- End Shareaholic Sassy Bookmarks script (webmaster.10line.net) --> 

Şablonunuzu kaydedin ve çıkın. Artık bu eklentiye sahipsiniz.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Blogger İçin Çılgın Karınca Eklentisi!

Blogger bloğunuza biraz daha hareket mi katmak istiyorsunuz? Size çılgın karınca eklentisi yardımcı olacaktır. Çılgın karınca sürekli koyduğunuz yerde döner durur. Blogunuzu göze hitap eder kılar. 

Bu eklentinin nasıl göründüğünü görmek isterseniz bu adresten kontrol edebilirsiniz. Bu adreste sol köşede küçük bir karıncayı geziyor olarak göreceksiniz. 

Bu eklentiyi nasıl yüklersiniz? 

Yerleşim – Gatget Ekle – HTML/JavaScript yolunu takip ederek aşağıdaki kodları yapıştırın ve kaydedin. 

Kodlar: 

<div style="display:scroll; position:fixed; top:150px; left:20px;"><img border="0" src="http://i1217.photobucket.com/albums/dd381/funywrld/semutfuny.gif" /> </div> 

Bu kodları yapıştırdığınız zaman bloğunuzda karınca dolaşmaya başlayacaktır.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Blogger’da Yukarı Doğru Kayan Yorumlar Eklentisi

Bu eklenti bloğunuzda bulunan yorumları hareketlendirir. Yorumlar aşağıdan yukarı doğru kayar. Peki, bu eklentiyi nasıl uygularsınız? 

Yerleşim – Gatget Ekle – HTML/JavaScript yolunu izleyin. Daha sonra aşağıdaki kodu yerleştirin. 

Kod: 

<marquee direction=up scrollamount="2" onmouseover="this.scrollAmount=0" onmouseout="this.scrollAmount=2"><style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.w2b_recent_comments li .avatarImage{padding:3px;background:#none;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{margin-top:4px;color: #000000;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 60,
roundAvatar = true,
characters = 80,
showMorelink = false,
moreLinktext = "More »",
defaultAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSuY3XObt2_GvbSTuleG4su9HSxNHmdT2UH0ma7agmgzcEDW3C71DNksGC1hvPrk4wIcFecLu-eTWqsKFQnhjUuyIFl6Z_GNXRtKhyphenhyphenjpL8u2520TmP368afXGAlNw_pUSd9iIkhHUOplRF/s1600/comment.png",
hideCredits = false;
//]]>
</script>
<script type="text/javascript" src="http://yourjavascript.com/211112512416/come.js"></script>
<script type="text/javascript" src="http://webmaster.10line.net/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script></marquee> 

Kırmızı ile yazılmış 2 rakamını değiştirerek hız ayarlarını yapabilirsiniz. Daha sonra mavi ile yazılmış olan webmaster.10line.net adresine de kendi sitenizin adresini yazınız.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Dairesel Blogger Eklentisi

Blogunuzun görselliği açısından oldukça yardımcı olacak olan b eklenti göze hitap ediyor. Görselden de gördüğünüz gibi butonlar daire şeklinde. Ayrıca butonların üzerine fareyi getirdiğiniz zaman çeşitli hareketler de yapıyor. 

Bu eklentiyi edinmek isterseniz ne yapmalısınız?

İlk olarak aşağıdaki kodu şablon – HTML’yi düzenle yolunu kullanarak bulun. 

Kod: 

]]></b:skin> 

Yukarıdaki kodun hemen üstüne aşağıdaki kodu ekleyin. 

.a-btn{
width:60px;
height:60px;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
display:block;
margin:20px;
float:left;
background:#f0ad4e;
position:relative;
-webkit-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 0px 0px 1px 8px rgba(188, 188, 188, 0.4), 0px 0px 0px 9px #fff;
-moz-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 0px 0px 1px 8px rgba(188, 188, 188, 0.4), 0px 0px 0px 9px #fff;
box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 0px 0px 1px 8px rgba(188, 188, 188, 0.4), 0px 0px 0px 9px #fff;
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
transition:all 0.3s linear;
}
.a-btn span{
display:table-cell;
width:40px;
height:40px;
padding:10px;
text-align:center;
vertical-align:middle;
font-size:16px;
color:#fff;
text-shadow:0px 1px 1px #A03F16;
font-family:"Arvo", "Myriad Pro", "Trebuchet MS", sans-serif;
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
transition:all 0.3s linear;
}
.a-btn span:nth-child(1),
.a-btn span:nth-child(3){
position:absolute;
top:0px;
left:0px;
font-size:16px;
line-height:19px;
opacity:0;
}
.a-btn span:nth-child(1){
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBUlJ5LkooyJxdASUhXqQhYKNIA19jFn_TzZYc2plELt5vWg_LsQGcqvBjp_gRFL4mlOhCYpWUJ9s7RmGM92BK_Xc0aiEM3S-hBA2FXKhkSAMlt8BsjeRIc9k29-e4uC_qMaveBUWBPI/s1600/star.png) no-repeat center center;
opacity:0.2;
}
.a-btn:hover{
background:rgba(170, 77, 27, 0.6);
-webkit-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 1px 4px 5px 8px rgba(188, 188, 188, 0.6), 0px 0px 0px 9px #fff;
-moz-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 1px 4px 5px 8px rgba(188, 188, 188, 0.6), 0px 0px 0px 9px #fff;
box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 1px 4px 5px 8px rgba(188, 188, 188, 0.6), 0px 0px 0px 9px #fff;
}
.a-btn:hover span:nth-child(3){
opacity:1;
}
.a-btn:hover span:nth-child(2){
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
transform: scale(0);
}
.a-btn:hover span:nth-child(1){
-webkit-animation:rotate 1s linear;
-moz-animation:rotate 1s linear;
animation:rotate 1s linear;
}
.a-btn:active{
-webkit-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 0px -1px 0px 8px rgba(188, 188, 188, 0.3), 0px 0px 0px 10px #fff;
-moz-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 0px -1px 0px 8px rgba(188, 188, 188, 0.3), 0px 0px 0px 10px #fff;
box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 0px -1px 0px 8px rgba(188, 188, 188, 0.3), 0px 0px 0px 10px #fff;
}
.a-btn:active span:nth-child(2){
color:rgba(170, 77, 27, 0.8);
text-shadow:0px 1px 1px rgba(255, 255, 255, 0.6);
}
@keyframes rotate{
0% { transform: scale(1) rotate(0);}
50% { transform: scale(0.5) rotate(180deg);}
100% { transform: scale(1) rotate(360deg);}
}
@-webkit-keyframes rotate{
0% { -webkit-transform: scale(1) rotate(0);}
50% { -webkit-transform: scale(0.5) rotate(180deg);}
100% { -webkit-transform: scale(1) rotate(360deg);}
}
@-moz-keyframes rotate{
0% { -moz-transform: scale(1) rotate(0);}
50% { -moz-transform: scale(0.5) rotate(180deg);}
100% { -moz-transform: scale(1) rotate(360deg);}
} 

Bu kodları girerek eklentiyi hazır hale getiriyorsunuz. Yapmanız gereken işlem bu kadar. Ancak siz yazı içinde bu eklentiyi kullanmak isterseniz ekstra olarak aşağıdaki kodları da kullanmalısınız. 

div class="button-wrapper">
<a href="#" class="a-btn"><span></span>
<span>Sign up</span>
<span>It's free!</span></a>
<a href="#" class="a-btn"><span></span>
<span>Join Now</span>
<span>It's free!</span></a>
<a href="#" class="a-btn"><span></span>
<span>Enter</span>
<span>It's free!</span></a>
<a href="#" class="a-btn">
<span></span>
<span>Get in</span>
<span>It's free!</span></a>
</div>

Yapmanız gerekenler bu kadar. Artık eklentiniz tamamen hazır hale gelmiştir.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Blogger İçin Dikey Navigation Menüsü

Eğer blogger bloğunuzda görselde gösterdiğimiz gibi bir menü bulundurmak istiyorsanız kodları eklemeniz yeterlidir. 

Bu eklentiyi nasıl yüklersiniz? 

Şablondan HTML’yi düzenleye tıklayın. Orada aşağıdaki kodu bulun. 

Kod: 

]]></b:skin> 

Daha sonra hemen üst kısmına aşağıdaki kodu yapıştırın. 

#menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin: 10px; } #menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH1AV4EgoPQPg0ZkYjD9RsH95N9JwIPRb44tXyw0xfBAYPijIuKGSAiBgW8vOXU8zW66H3j2FzdIBJncW9yaNg8mOumMC5xLeLb8sBSEXtBtmMcPF-Bf8AhCrJ0DJlV_QCl6FrKfNyu6g/s288/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH1AV4EgoPQPg0ZkYjD9RsH95N9JwIPRb44tXyw0xfBAYPijIuKGSAiBgW8vOXU8zW66H3j2FzdIBJncW9yaNg8mOumMC5xLeLb8sBSEXtBtmMcPF-Bf8AhCrJ0DJlV_QCl6FrKfNyu6g/s288/menu9.gif) 0 -32px; padding: 8px 0 0 35px; } 

Daha sonra Yerleşim – Gatget Ekle – HTML/JavaScript yoluyla istediğiniz yere aşağıdaki kodu ekleyin. 

<div id="menu9"> <ul> <li><a href="#">MENU 1</a></li>
<li><a href="#">MENU 2</a></li>
<li><a href="#">MENU 3</a></li>
<li><a href="#">MENU 4</a></li>
<li><a href="#">MENU 5</a></li> </ul> </div> 

Kırmızı alanlara görülmesini istediğiniz yazıyı yazın. Mavi alanlara ise gidilmesi gereken linkleri koyun. Yapmanız gereken bu kadar.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Blogger İçin Renkli En Popüler Yayınlar Eklentisi!

Blogger bloğunuzda bu eklenti değişik bir ortam katacaktır. Bu eklentiyi edinmek için aşağıda sizlere anlattığımız yolu takip edin. 

Şablon – HTML’yi düzenle butonuna tıklayıp kodların bulunduğu alana gidin. Ardından da aşağıda verdiğim kodu bulun. 

Kod: 

]]></b:skin> 

Bu kodu bulduğunuz zaman hemen üstüne aşağıdaki kodu yapıştırın. 

Kod: 

/*Renkli Populer Yayınlar Eklentisi Baslangıcı http:// webmaster.10line.net */
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:30px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:89%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:89%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:89%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:89%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:89%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:89%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:89%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:89%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:89%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:89%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
/*Renkli Populer Yayınlar Eklentisi Sonu http://webmaster.10line.net*/

Bu kodu hemen üstüne yapıştırdıktan sonra şablonunuzu kaydedin. Yapmanız gereken tüm işlemler bu kadar. Artık renkli popüler yayınlar eklentiniz hazır durumdadır.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Blogger’ınızda Etiketleri Hareketlendirme Eklentisi

Blogger’ınızda etiketlerin hareketlenmesini ister misiniz? Eğer bu eklentiyi yükleyip bloğunuzun daha çekici hale gelmesini istiyorsanız aşağıdaki adımları uygulayın. 

Aşağıdaki kodu bulun. 

Kod: 

]]></b:skin> 

Bu kodun bir satır üstüne aşağıdaki kodu yapıştırın ve şablonunuzu kaydedin. 

/*-----Etiketleriniz hareketlensin webmaster.10line.net----*/
.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:10px;
color:#666;
}
.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.label-size a {
text-transform: uppercase;
float:left;
text-decoration: none;
}
.label-size a:hover {
text-decoration: none;
} 

Kodu yapıştırdıktan sonra şablonu kaydet deyin. Eklenti kullanıma hazırdır.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Blogger’da 3 Boyutlu Arama Kutusu Eklentisi

Blogger’ınızda 3 boyutlu arama kutusu görmek ister misiniz? Diğer arama kutularına göre daha hoş bir ortam yaratıyor. Görselde de gördüğünüz gibi bir arama kutusu ortaya çıkıyor. Bu eklentiyi eklemek için aşağıdaki kodları Yerleşim - Gatget Ekle – HTML/JavaScript yolunu takip edip yapıştırın. 

Kodlar:

<style type="text/css">
.form-wrapper {
width: 250px;
padding: 8px;
margin: 10px auto;
overflow: hidden;
border-width: 1px;
border-style: solid;
border-color: #dedede #bababa #aaa #bababa;
-moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background-color: #f6f6f6;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8));
background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: linear-gradient(top, #f6f6f6, #eae8e8);
}
.form-wrapper #search {
width: 160px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 1px solid #ccc;
-moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.form-wrapper #search:focus {
outline: 0;
border-color: #aaa;
-moz-box-shadow: 0 1px 1px #bbb inset;
-webkit-box-shadow: 0 1px 1px #bbb inset;
box-shadow: 0 1px 1px #bbb inset;
}
.form-wrapper #search::-webkit-input-placeholder {
color: #999;
font-weight: normal;
}
.form-wrapper #search:-moz-placeholder {
color: #999;
font-weight: normal;
}
.form-wrapper #search:-ms-input-placeholder {
color: #999;
font-weight: normal;
}
.thumb{position:relative;left:4px;top:1px; border:8px solid transparent;-webkit-box-shadow:0 0 8px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 0 8px rgba(0, 0, 0, 0.3);box-shadow:0 0 8px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}
.form-wrapper #submit {
float: right;
border: 1px solid #00748f;
height: 42px;
width: 70px;
padding: 0;
cursor: pointer;
font: bold 15px Arial, Helvetica;
color: #fafafa;
text-transform: uppercase;
background-color: #0483a0;
background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));
background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);
background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);
background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);
background-image: -o-linear-gradient(top, #31b2c3, #0483a0);
background-image: linear-gradient(top, #31b2c3, #0483a0);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
}
.form-wrapper #submit:hover,
.form-wrapper #submit:focus {
background-color: #31b2c3;
background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));
background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);
background-image: -moz-linear-gradient(top, #0483a0, #31b2c3);
background-image: -ms-linear-gradient(top, #0483a0, #31b2c3);
background-image: -o-linear-gradient(top, #0483a0, #31b2c3);
background-image: linear-gradient(top, #0483a0, #31b2c3);
}
.form-wrapper #submit:active {
outline: 0;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
.form-wrapper #submit::-moz-focus-inner {
border: 0;
}
</style>
<form class="form-wrapper" action="/search" method="get">
<input id="search" name="q" type="text" placeholder="ARA.." />
<input id="submit" type="submit" value="ARA.." />
</form> 

Yapmanız gerekenler bu kadar. Artık bloğunuzda 3D arama kutusu yer alıyor.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Blogger İçin Kurban Bayramı Eklentisi

Blogger bloğunuza gelen ziyaretçilerin Kurban Bayramlarını kutlamak ister misiniz? Bunu basit bir eklenti ile yapabilirsiniz. Blogunuz ziyaretçilerinizin gözünde daha hoş ve popüler bir blog olur.

Peki, bu eklentiyi nasıl edinirsiniz? 

Aşağıdaki kodları Yerleşim – Gadget Ekle – HTML/JavaScript yolunu izleyerek ekleyin. 

<img src="http://m1308.hizliresim.com/1d/7/r7l13.jpg" style="position:fixed; top: 0px;right:0px;border:none;z-index:5;"/>

Yaptığınız değişiklikleri kaydedin ve bloğunuz artık ziyaretçilerinizin Kurban Bayramını kutlasın.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Blogger İçin En Çok Yorum Yapan Kişiler Eklentisi

Blogunuzdaki yayınlara yorum yapan kişiler bir liste ile kenarda bir yerde çıksın istiyorsanız bu eklenti tam size göredir. Bu bloğunuzu ziyaret eden kişiler tarafından da çok sevilecektir ve onları yorum yapmaya itecektir. 

Peki, bu eklentiyi nasıl bloğunuza eklersiniz? 

Aşağıda verdiğimiz kodları Yerleşim – Gadget Ekle – HTML/JavaScript yolunu takip ederek ekleyin. 

<style type="text/css">
.top-commenter-line img {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.top-commenter-line {margin: 3px 0;}
.top-commenter-line .profile-name-link {padding-left:0;}
.top-commenter-avatar {vertical-align:middle;}
</style>
<script type="text/javascript">
//
// Top Commentators gadget with avatars, by MS-potilas 2012.
// Gets a list of top commentators from all comments, or specified number of days in the past.
// See http://www.webmaster.10line.net/
//
// CONFIG:
var maxTopCommenters = 5; // how big a list of top commentators
var minComments = 1; // how many comments must top commentator have at least
var numDays = 0; // from how many days (ex. 30), or 0 from "all the time"
var excludeMe = true; // true: exclude my own comments
var excludeUsers = ["Anonymous", "someotherusertoexclude"]; // exclude these usernames
var maxUserNameLength = 42; // 0: don't cut, >4: cut usernames
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = ''; // empty, or Anonymous user name localized if you want to localize
//
var sizeAvatar = 56;
var cropAvatar = true;
//
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrgQd6nqgZ58m-Dt6WQDek9pp8qV6-DIUvLPuWbsLgxlOHJt_IvhdsL5Sjexr2vyyDni7_Kjao_8nhM84wI8dPsmn9pMzPLC0Jo_T_WrzMAGdHBeIYR6L3TFMYlSq8PIn55hkrlMdtc1Y/"+sizeAvatar+"/avatar_blue_m_96.png"; // http://www.blogger.com/img/avatar_blue_m_96.png resizeable
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
var urlMyProfile = ''; // set if you have no profile gadget on page
var urlMyAvatar = ''; // can be empty (then it is fetched) or url to image
// config end
// for old IEs & IE modes:
if(!Array.indexOf) {
Array.prototype.indexOf=function(obj) {
for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
return -1;
}}
function replaceTopCmtVars(text, item, position)
{
if(!item || !item.author) return text;
var author = item.author;
var authorUri = "";
if(author.uri && author.uri.$t != "")
authorUri = author.uri.$t;
var avaimg = urlAnoAvatar;
var bloggerprofile = "http://www.blogger.com/profile/";
if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
avaimg = author.gd$image.src;
else {
var parseurl = document.createElement('a');
if(authorUri != "") {
parseurl.href = authorUri;
avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
}
}
if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
avaimg = urlMyAvatar;
if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
avaimg = urlNoAvatar;
var newsize="s"+sizeAvatar;
avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
if(cropAvatar) newsize+="-c";
avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");
var authorName = author.name.$t;
if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
authorName = txtAnonymous;
var imgcode = '<img class="top-commenter-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';
if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
authorName = authorName.substr(0, maxUserNameLength-3) + "...";
var authorcode = authorName;
if(authorUri!="") authorcode = '<a class="profile-name-link" href="'+authorUri+'">'+authorcode+'</a>';
text = text.replace('[user]', authorcode);
text = text.replace('[image]', imgcode);
text = text.replace('[#]', position);
text = text.replace('[count]', item.count);
return text;
}
var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
var one_day=1000*60*60*24;
var today = new Date();
if(urlMyProfile == "") {
var elements = document.getElementsByTagName("*");
var expr = /(^| )profile-link( |$)/;
for(var i=0 ; i<elements.length ; i++)
if(expr.test(elements[i].className)) {
urlMyProfile = elements[i].href;
break;
}
}
for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i];
if(numDays > 0) {
var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);
//Calculate difference btw the two dates, and convert to days
var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
if(days > numDays) break;
}
var authorUri = "";
if(entry.author[0].uri && entry.author[0].uri.$t != "")
authorUri = entry.author[0].uri.$t;

if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
continue;
var authorName = entry.author[0].name.$t;
if(excludeUsers.indexOf(authorName) != -1)
continue;
var hash=entry.author[0].name.$t + "-" + authorUri;
if(topcommenters[hash])
topcommenters[hash].count++;
else {
var commenter = new Object();
commenter.author = entry.author[0];
commenter.count = 1;
topcommenters[hash] = commenter;
}
}
if(json.feed.entry.length == 200) {
ndxbase += 200;
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
return;
}
// convert object to array of tuples
var tuplear = [];
for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);
tuplear.sort(function(a, b) {
if(b[1].count-a[1].count)
return b[1].count-a[1].count;
return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
});
// list top topcommenters:
var realcount = 0;
for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
var item = tuplear[i][1];
if(item.count < minComments)
break;
document.write('<di'+'v class="top-commenter-line">');
document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
document.write('</d'+'iv>');
realcount++;
}
if(!realcount)
document.write(txtNoTopCommenters);
}
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script> 

Yapmanız gerekenler bu kadar. Blogunuzda hazır olarak bu eklentiyi görebilirsiniz.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Blogger İçin 29 Ekim Cumhuriyet Bayramı Eklentisi

Blogger bloğunuzun sağ ya da sol köşesine 29 Ekim Cumhuriyet bayramı şanına fotoğraf ekleyebilirsiniz. Bu eklenti Cumhuriyet Bayramı’nın bloğunuzda da coşkulu bir şekilde kutlanmasına yol açacak. 

Peki, nasıl yapacaksınız? 

Aşağıdaki kodu Yerleşim – Gatget Ekle – HTML/JavaScript yolunu takip ederek gatget ekleyeceksiniz. 

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3fuzdU_6YKTy0fiSKve8Wsu33zELOzAYv65rurxeVnZINtRzHUVGF54bI4S9Za-UTz00i7GSDFLKeNMMhUKVjPJdPs89JHZD-5FbsGa97rkYbuT1MQHSsjA7UL_YE5EqqcRg4iVQMcH1P/s1600/29-ekim-blogger-eklenti-sol.png" style="position:fixed; top: 0px;left:0px;border:none;z-index:5;"/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizc7ZafGR1po051ekoK8Gd99_Ak0dyNtqrimj_LUfpbjHitZ5N1_TwO4jGBqMo8JPsxviI1Vw0_q_K9z-H6xKAzS6o2QRIsUTZiqBN3I6r9uIiBwy3i1PUD7_4u6RWkYfrlxiK_N38qyPZ/s1600/29-ekim-blogger-eklenti-sag.png" style="position:fixed; top: 0px;right:0px;border:none;z-index:5;"/> 

Eğer sadece sol tarafa eklemek isterseniz aşağıdaki kodu kullanacaksınız. 

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3fuzdU_6YKTy0fiSKve8Wsu33zELOzAYv65rurxeVnZINtRzHUVGF54bI4S9Za-UTz00i7GSDFLKeNMMhUKVjPJdPs89JHZD-5FbsGa97rkYbuT1MQHSsjA7UL_YE5EqqcRg4iVQMcH1P/s1600/29-ekim-blogger-eklenti-sol.png" style="position:fixed; top: 0px;left:0px;border:none;z-index:5;"/> 

Yapmanız gerekenler bu kadar. Blogunuza o gün çok hoş bir hava katacak.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Resim Üzerine Fare Gelince Açıklama Çıkaran Eklenti!

Blogger bloğunuzda kullandığınız resimlerin üzerine fare ile gelindiği zaman açıklama çıkar. Bu eklenti bu görevi görür. Eğer bu eklentiyi edinmek isterseniz aşağıdaki yolları izleyin. 

İlk olarak aşağıdaki kodu bulun: 

]]></b:skin> 

Yukarıdaki kodun üzerine hemen alttaki kodları yapıştırın. 

.imagepluscontainer{ /* main image container */
position: relative;
z-index: 1;
}
.imagepluscontainer img{ /* CSS for image within container */
position: relative;
z-index: 2;
-moz-transition: all 0.5s ease; /* Enable CSS3 transition on all props */
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.imagepluscontainer:hover img{ /* CSS for image when mouse hovers over main container */
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-transform: scale(1.05, 1.05);
-webkit-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}
.imagepluscontainer div.desc{ /* CSS for desc div of each image. */
position: absolute;
width: 90%;
z-index: 1; /* Set z-index to that less than image's, so it's hidden beneath it */
bottom: 0; /* Default position of desc div is bottom of container, setting it up to slide down */
left: 5px;
padding: 8px;
background: rgba(0, 0, 0, 0.8); /* black bg with 80% opacity */
color: white;
-moz-border-radius: 0 0 8px 8px; /* CSS3 rounded borders */
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
opacity: 0; /* Set initial opacity to 0 */
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); /* CSS3 shadows */
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-moz-transition: all 0.5s ease 0.5s; /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */
-webkit-transition: all 0.5s ease 0.5s;
-o-transition: all 0.5s ease 0.5s;
-ms-transition: all 0.5s ease 0.5s;
transition: all 0.5s ease 0.5s;
}
.imagepluscontainer div.desc a{
color: white;
}
.imagepluscontainer:hover div.desc{ /* CSS for desc div when mouse hovers over main container */
-moz-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
opacity:1; /* Reveal desc DIV fully */
} 

Bu işlemleri tamamladıysanız aşağıdaki kod dizilimini kullanmalısınız. Bunun ardından her şey hazır olacaktır. 

<div class="imagepluscontainer" >
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8IwEdVfxZ7S7rJcFMqmWXJpy_czg38qBCIr39dBMfpA2PtdnZ23VgsWgfPnNDg8r_vUr_q4RPQ0bcFzoNKkYuJCO5HzuYqVCGQqGKQRElOnbLyEj22JFLnEkRIZOpNmKFu8wbrCajd2TO/s1600/yorum.png" style="width:263px; height:199px; z-index:2" />
<div class="desc">

Birçok Blogger eklentisini www.webmaster.10line.net sitesinde bulabilirsiniz.

</div>
</div> 

Eklentiniz tamamen hazır duruma gelmiştir.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Blogger İçin Yana Esneyen Sosyal Paylaşım Eklentisi

Blogger için görselliği ön planda tutuyorsanız o zaman bu eklentiyi mutlaka edinmelisiniz. Diğer klasik sosyal paylaşım butonlarına benzemiyorlar. Ortaya çok güzel bir manzara çıkıyor. Görsellerden de görüyorsunuz. 

Peki, bu eklentiyi Blogger bloğunuza uygulamak için ne yapabilirsiniz? 

İlk olarak Blogger yönetim paneline girin ve Yerleşim - Gadget Ekle - HTML/JavaScript yolunu takip edin. Ardından açılan panele aşağıdaki kodu ekleyin. 

<style type="text/css"> #buttonbg {width: 260px;margin: 10px 20px;padding: 0;} #buttonbg li {cursor: pointer;height: 48px;position: relative;list-style-type: none; } #buttonbg .icon {background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuKO25L5sbBVnSPfYvT_GvEHArji0huG6N3sR7E6OVWhLkw2I5G9i4TmQZmJ60fZSuMtCXxsZOMiC5wPhi4zhBATAwSA2U-MvAppjaZdcaCjIZMh5Z5SCy-rDB7yot7kCs94nNE4-2wU8/s1600/blsocial12.png') 0 0 no-repeat; background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block; color: #141414;float: none;height: 48px;line-height: 48px; margin: 5px 0;position: relative;text-align: left;text-indent: 90px; text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5; -webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out; -moz-transition: width .25s ease-in-out, background-color .25s ease-in-out; -o-transition: width .25s ease-in-out, background-color .25s ease-in-out; transition: width .25s ease-in-out, background-color .25s ease-in-out; -webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px; -moz-box-shadow: rgba(0,0,0, .28) 0 2px 3px; -o-box-shadow: rgba(0,0,0, .28) 0 2px 3px; box-shadow: rgba(0, 0, 0, .28) 0 2px 3px; text-decoration: none;} #buttonbg span:hover {visibility: hidden;} #buttonbg span {display: block;top: 15px;position: absolute;left: 90px;} #buttonbg .icon {color: #fafafa;overflow: hidden;} #buttonbg .fb {background-color: rgba(45,118,185, .42); background-position: 0 -382px;} #buttonbg .twit {background-color: rgba(0, 161, 223, .42); background-position: 0 -430px;} #buttonbg .google {background-color: rgba(167, 0, 0, .42); background-position: 0 -478px;} #buttonbg .pint {background-color: rgba(204, 0, 0, .42);background-position: 0 -526px;} #buttonbg .linked {background-color: rgba(0, 87, 114, .42); background-position: 0 -574px;} #buttonbg .deviant {background-color: rgba(76, 122, 74, .42); background-position: 0 -622px;} #buttonbg .ytube {background-color: rgba(170, 0, 0, .42); background-position: 0 -670px;} #buttonbg .rss {background-color: rgba(255,109, 0, .42); background-position: 0 -718px;} #buttonbg li:hover .icon {width: 250px; } #buttonbg li:hover .icon {background-color: #d91e76; } #buttonbg li:hover .fb {background-color: #2d76b9;background-position: 0 2px;} #buttonbg li:hover .twit {background-color: #00A1DF; background-position: 0 -46px; } #buttonbg li:hover .google {background-color: #A70000;background-position: 0 -94px;} #buttonbg li:hover .pint {background-color: #C00;background-position: 0 -142px; } #buttonbg li:hover .linked {background-color: #005772;background-position: 0 -190px;} #buttonbg li:hover .deviant {background-color: #4C7A4A;background-position: 0 -238px;} #buttonbg li:hover .ytube {background-color: #A00;background-position: 0 -286px; } #buttonbg li:hover .rss {background-color: #EC5601;background-position: 0 -334px; } #buttonbg .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;} </style> 
<ul id="buttonbg"> <li ><a href="Facebook Adresiniz" class="icon fb">Facebook Takip Et >>></a><span>Facebook Takip Et</span></li> <li ><a href="Twitter Adresiniz" class="icon twit" >Twitter Takip Et >>></a><span>Twitter Takip Et</span></li> <li ><a href="Google+ Adresiniz" class="icon google" >Google+ Takip Et >>></a><span>Google+ Takip Et</span></li>
</ul>

Yapmanız gerekenler bu kadar. Sosyal paylaşım eklentiniz hazır. Ancak son bir şey daha yapmalısınız. Siyah ve kırmızı renkteki yazıları kendinize göre düzenleyin ve kullanmaya başlayın.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.