Rss Abonelik kutusu ve sayaçlı sosyal medya butonları
6 saat önce Onur BATUR tarafından yazılmıstır.
 |
| RSS kutusu Sosyal medya |
Blogunuzun Trafik kaynağı en çok nereden diye sorsak şüphesiz arama motorları dersiniz.Hatta arama motoru değil Google dersiniz. Blog'a gelen trafiklerin çoğunun arama motorlarından geldiği bilinmekte elbette. Arama motorlarından sonraki bir trafik kaynağı Sosyal medya'dır.Yani facebook, twitter, google plus, pinterest, tumblr vb ne kadar sosyal medya aracı var ise hepsi birer trafik kaynağıdır.Bu tür sosyal medya ortamlarından takipçiniz ne kadar fazla olursa bu da blogunuza daha fazla trafik olarak geri dönecektir. Özellikle rss kullanımın faydasından da daha önce ki yazılarımda bahsetmiştim.Blogunuza uğrayan ziyaretçilerin RSS kutusunu kullanarak yazınıza abone olması daha fazla trafik, blogunuz, okuyucu kitleniz, google sıralamanız, Seo ve daha bir çok yararı olacaktır. Rss abonelik kutusu ve Sosyal medya butonlarının kullanımının faydalarından daha önceki yazılarda da bahsetmiştim.
Bakınız:
- Rss Abonelik ve sosyal medya Butonları
- Bloggerda sosyal medya butonlarının kullanımın önemi
- Blogger sosyal paylaşım butonları
- Sayfa da aşağı inildiğinde çıkan paylaş eklentisi
Bu yazımda da Rss abonelik kutusunun yanısıra sayaçlı sosyal medya butonlarının bulunduğu bir eklentiyi blogunuza nasıl uygulayacağınızdan bahsetmeye çalışacağım. Bu Rss abonelik kutusu (yayınlara abone olma) eklentisinde facebook , twitter ve feedburner gibi sosyal medya araçlarında kaç tane takipçiniz olduğu yazmakta. Tabiki bu yalancı takipçi sayısı:)
Rss kutusu ve sayaçlı sosyal medya butonlarının nasıl göründüğünü test etmek isterseniz yukarıda ki test butonuna tıklayarak görebilirsiniz.
Eklentiyi blogumuza nasıl uygulayacağımıza gelince
- Blogger paneline giriş yapıyoruz.
- Yerleşim sekmesine tıklıyoruz.
- Gadget ekle butonuna tıklıyoruz.
- Html/java script 'i seçerek aşağıdaki kodları yapıştırıyoruz.
- Kaydet butonuna tıklıyoruz.
<style>
#ugurturkoglusocialcounters{
width:300px;
padding: 0 0 40px 0;
border: 1px solid #CCC;}
ul#ugurturkoglucounters {
list-style: none;
margin:0px;
overflow: hidden;
width:300px;
padding:10px 0 40px 0;
margin:10px 0 -60px 12px;
}
ul#ugurturkoglucounters li {
float:left;
margin:0px 0px 5px 0px;
width:auto;
padding:0px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;}
ul#ugurturkoglucounters li a {
display: block;
height: 54px;
margin-right: 10px;
padding-top: 85px;
text-align: center;
text-decoration: none;
width: 85px;
text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
font-weight: bold;
}
ul#ugurturkoglucounters li:hover {
opacity:0.6
}
ul#ugurturkoglucounters li:last-child a{
margin-right:0px;
}
ul#ugurturkoglucounters #counter-rss {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjANM3Q76_dV1XzBGTpxvsAE19C_1o7o4mtprrhIHXPz1hDIXO8-8m33NottqUYXlKNmZ-cMsbMCc9ul0gFJ5hMVEObNvgC2tpZN049vxie_ZV0B_8YBEebVeHU7K3PL7yFCrt3oz28jWWr/s1600/btrix-rss-counter.jpg') no-repeat
}
ul#ugurturkoglucounters #counter-rss a {
color:#cf6600
}
ul#ugurturkoglucounters #counter-facebook {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0PP8LqYw7Kszu3uAVNJZLECWftmj34EUbeWy7rJ-XBEa1X6u2qRC4aUHaJDazxm9RQlvCpPUAEp1py1aQuaPNXSx11eBFaNpmJALxH0NHiTGMZOYWWxZ8zas1Y6xVD9ZzWT2vEFJmxA_V/s1600/btrix-facebook-counter.jpg') no-repeat
}
ul#counters #counter-facebook a {
color:#3b4d8f
}
ul#ugurturkoglucounters #counter-twitter {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB32BAXKZ2ZysnXHuYLRzLxNYfZwgGny9RKBculq7ow6h5xHCOGQJz0-w4XbgR9odn8a5F24mlEKdByrVqw_E_zEO9TZdTllVBMreoS_YM_d1fVc1aoLZ1eGemFG_FzImmT-w5Qcry95uV/s1600/btrix-twitter-counter.jpg') no-repeat
}
ul#ugurturkoglucounters #counter-twitter a {
color:#276ab6
}
.textwidget {width: 300px;margin-top: -50px;}
input[type="submit"] {color: white;border: 0px;text-transform: uppercase;font-size: 11px;padding: 13px;float: left;font-weight: bold;background-color: #2DA1EB;margin-left: 100px;cursor: pointer;margin-top: 10px;}
</style>
<center>
<br />
<div id="ugurturkoglucounters">
<ul id="ugurturkoglucounters">
<li class="first-item" id="counter-rss">
<a href="http://feeds.feedburner.com/ugurturkoglu">540</a></li>
<li id="counter-facebook">
<a href="http://www.facebook.com/ugurturkoglu">2319</a></li>
<li id="counter-twitter">
<a href="https://twitter.com/ugurturkoglu">5263</a></li>
</ul>
<div class="ugurturkoglutextwidget">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ugurturkoglu', 'popupwindow', 'scrollbars=yes,width=350,height=520');return true" style=" padding: 3px; text-align: center;" target="popupwindow">
<h3>E-mail adresinizi giriniz><br/>
<input name="email" style="width: 180px;" type="text" /><br />
<input name="uri" type="hidden" value="ugurturkoglu" /><input name="loc" type="hidden" value="en_US" /><input type="submit" value="Kaydol" /></form></div><a href="http://www.ugurturkoglu.blogspot.com.com/2013/03/sosyal-medya-rss-kutusu.html" style="margin-right: -50px;margin-top: 100px;font-size: 10px;">Sitene ekle</a>
</div>
- Kod kısmındaki mavi ile yazılmış olan yerlere kendi sosyal medya hesaplarınızı yazınız.
Sorularınız olursa buradan ulaşabilirsiniz.
Bir önceki yazımda Blogunuza özel google arama kutusu oluşturma hakkında bilgiler verilmektedir.
Bir önceki yazımda Blogunuza özel google arama kutusu oluşturma hakkında bilgiler verilmektedir.
Yazı Altına Sosyal Paylaşım Butonları
6 saat önce Onur BATUR tarafından yazılmıstır.
 |
| Blogger yazi altına sosyal paylaşım butonları |
Blogger da yazı altına sosyal paylaşım butonları ekleyerek , blogunuza uğrayan ziyaretçilerin yazılarınızı sosyal paylaşım sitelerinde paylaşmalarını sağlayabilirsiniz.Daha önceleri de bu sosyal paylaşım butonlarının blogunuza yararları hakkında bir yazı yazmıştım ve bir kaç sosyal paylaşma butonları eklentileri de eklemiştim.
- Bloggerda sosyal medya butonlarının kullanımın önemi
- Blogger sosyal paylaşım butonları
- Sayfa da aşağı inildiğinde çıkan paylaş eklentisi
Bu widgeti blogunuza ekleyerek Facebook , twitter , google plus , pinterest ve linkedin gibi sosyal paylaşım sitelerinde yazılarınız paylaşılabilir.Bu sayede sosyal medya dan alacağınız trafik artacaktır.
Gelelim yazı altına sosyal paylaşım butonlarının nasıl ekleneceğine :
Öncelikle her ihtimale karşı blog şablonunuzun bir yedeğini alınız.
- Blogger paneline giriş yapınız.
- Şablon html'yi düzenle butonuna tıklayınız.
- ]]></b:skin> kodunu Ctrl+F yöntemi ile aratarak bulunuz.
- Bulduğunuz kodun hemen bir üst satırına aşağıdaki kodları yapıştırınız.
ul.social_btrix {
list-style:none;
display:inline-block;
margin:15px auto;
}
ul.social_btrix li {
display:inline;
float:left;
background-repeat:no-repeat;
}
ul.social_btrix li a {
display:block;
width:50px;
height:50px;
padding-right:10px;
position:relative;
text-decoration:none;
}
ul.social_btrix li a strong {
font-weight:400;
position:absolute;
left:20px;
top:-1px;
color:#fff;
z-index:9999;
text-shadow:1px 1px 0 rgba(0,0,0,0.75);
background-color:rgba(0,0,0,0.7);
-moz-border-radius:3px;
-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);
-webkit-border-radius:3px;
-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);
border-radius:3px;
box-shadow:0 0 5px rgba(0,0,0,0.5);
padding:3px;
}
ul.social_btrix li.abfacebook {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjbkobVhjUOJHM4xMgwqUvUQof-7s48nJBPfvz-lYR-UQ1Fh1Qcz0XjHEdDtcsKHMPjSyZVNZOCwjCsPiKUMYbni6wEo724kGP8bQy1rN5e6msEQqkjIrIppVrhKBJ2BbP7x4q2XPV7rO/s1600/btrix-facebook-icon.png);
}
ul.social_btrix li.abtwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHX-BNtgHix4yt5Rmmw8TZ99_XIwlK1aHFtyxq-U9c1BColszUdHVDZWjGzj3CglhJroV6cZTXyBQ4AXRMaFDtUf2xLchsSI7npIBTo-sODL9EQa_U1ApG-PClJjOKKt8LjJvdwKcdFM36/s1600/btrix-twitter-icon.png);
}
ul.social_btrix li.abgoogleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmmSRa4I-RALOVhDx2i1P0l7OIRX9gCY9T5uBpqEND5Srrm0qIzdly7icWWN0aHTisKvIBM1916IQFfPah2mbhyphenhyphenv24MaKpOjzbmZwX31d0qQ96ajBn0QNCDgGMBdpgYAcb7rJg1891I28h/s1600/btrix-google-icon.png);
}
ul li.abpinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXz-pec2ORnzWLZiOQVCpkft40OixbHyGLnfy5z9ybyyrRANegsh6dUBoYxY3y_2Qkzf_IwoY7n5eNzzvhPujyvBhMTeQ1TiI0pSG9sD35oK7d2IyNZQvdBzSWHDKDUQ3orZmCOo_2ta8i/s1600/btrix-Pinterest-icon.png);
}
ul.social_btrix li.ablinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0hyphenhyphenWP5DLXFaCno0c3k7QOFgRzZoIF2lvgMM5BIr_BWyd6nQvOE28YIaw8BfOEmuR5IYzQ92rqqdCfejuVnLyBJGiDt_6Vsh_pbyN9k_IALZ85pvEPTJgpsVAsJW8AVJO8rU7C5SP0_l75/s1600/btrix-Linkedin-icon.png);
}
#animation_btrix:hover li {
opacity:0.2;
}
#animation_btrix li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
}
#animation_btrix li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms;
}
#animation_btrix li:hover {
opacity:1;
}
#animation_btrix li:hover a strong {
opacity:1;
top:-10px;
}
- Daha sonra <data:post.body/> kodunu aratınız.Bu kodun altına da aşağıda yer alan kodları yapıştırınız.<data:post.body/> kodunu arattığınıza birden fazla sonuç çıkabilir.Genelde ikinci bulduğunuz <data:post.body/> kodunun altına yapıştırın.Yani ben bu eklentiyi bloguma uygularken bu şekilde yaptım.Eğer olmazsa diğer bulduğunuz <data:post.body/> kodunun altına yapıştırın.
- Eğer sosyal paylaşım butonlarının yazınızın en başında görünmesini istiyorsanızda bulmuş olduğunuz <data:post.body/> kodunun hemen bir üst satırına aşağıdaki kodları yapıştırın.
<b:if cond='data:blog.pageType == "item"'>
<div style='font-size: 22px;'><b>Share this article with your friends.</b></div>
<ul class='social_btrix' id='animation_btrix'>
<li class='abfacebook'>
<a expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow'><strong>Facebook</strong></a>
</li>
<li class='abtwitter'>
<a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
</li>
<li class='abgoogleplus'>
<a expr:href='"https://plusone.google.com/_/+1/confirm?hl=en&url=" + data:post.url' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>
</li>
<li class='abpinterest'>
<a href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>
</li>
<li class='ablinkedin'>
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>
</li>
</ul>
</b:if>
- Kaydet butonuna tıklayarak yazı altına sosyal paylaşım butonları eklemiş olacaksınız.
Bir önceki yazımda Blogger da yazılarınıza ekledğiniz resimlerin SEO için önemi' hakkında bilgiler verilmektedir.
Blogger da sayfada Aşağı inildiğinde açılan Paylaş Eklentisi
6 saat önce Onur BATUR tarafından yazılmıstır.
 |
| Blogger sayfa paylaş |
Blogger da Blogunuza resimde görüldüğü sayfada aşağı inildikçe üstte çıkan sosyal paylaş eklemek isterseniz aşağıdaki adımları blogunuza uygulayarak bu eklentiyi kullanabilirsiniz.
Bu blogger eklentisi ni uygulamak için :
- Blogger.com a giriş yapıp blogumuzu tıklıyoruz.
- Daha sonra solda bulunan şablon sekmesine tıklayıp html yi düzenleye tıklıyoruz.
- ctrl+f ile </head> kodunu buluyoruz.Bu kodun bir üst satırına aşağıdaki kodları yapıştırıyoruz.
<script type="text/javascript">
var addthis_config = {
bar_show_below : 150
}
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>
- Bu kodu ekledikten sonra </body> kodunu ctrl+f ile aratıp buluyoruz ve aynı şekilde bu kodun bi üst satırına aşağıdaki kodları yapıştırıyoruz.
<div class="addthis_bar addthis_bar_medium">
<label>Sosyal paylaş:)</label>
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<span><a class="addthis_button_preferred_1"></a></span>
<span><a class="addthis_button_preferred_2"></a></span>
<span><a class="addthis_button_preferred_3"></a></span>
<span><a class="addthis_button_preferred_4"></a></span>
<span><a class="addthis_button_compact"></a></span>
<span><a class="addthis_counter addthis_bubble_style"></a></span>
</div>
</div>
- Kaydet deyip çıkıyoruz.Blogumuza eklenti uygulanmış oluyor.
Bir önceki yazımda Blogger sosyal paylaşım ikonları eklentisi adlı makalemde bloggerda blogunuza sosyal paylaşım ikonları eklentisinin nasıl uygulandığı hakkında bilgiler verilmektedir.
