WordPress tarzında sosyal simgeler

Bildiğiniz gibi Wordpres site tasarımı ile blogger arasında çok fark olmasada baktığınızda anlaşılabilecek şekildedir Wordpres.Şimdi sizlere Wordpres'e benze sosyal paylaşım butonlarını blogger adresinize nasıl ekleyebilirsiniz onu anlatacağım.Aşağıda vermiş yazmış olduğum talimat basit ve kolay bir anlatım zaten çoğu blogger arkadaşımızda bilir.

Blogger Paneli > Yerleşim>
Gatget Ekle > HTML/Javascript.
Aşağıdaki Kodu İçersine Yerleştiriyoruz.

HTML-Kodu:

 <style>  .rss-hb {     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBs4JQSb5cAH7wRKxfW4ZZ6wsXEjFtnIuB-MN2Zq-QY-rCnWUKSjmZQlfy3MwDAjKOkF8GS-KbO6sazEr8VBmqMKdZMPguzvJelZpcJ9ScRLGn5d-19wPVapM4S28cF2OSdyE4_sLzcLI/s1600/rss+sepia.png) no-repeat;     height: 64px;     padding: 0px 20px 0px 80px;     margin-top: 5px; }  .rss-hb:hover {     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDrTUlLIsmwKHbbkcuQJpb0TpUu1lS-BFqGM6_g-RKXhfdPP5c9cgwaBr4Jy7fHPrvW5VHeRXMLoFbyHiHleAuw-XNSylC1MuZXQ4eEl6jQsRDynBLU-txfQB2nMnhCTVN5LYc0lDlLYI/s1600/rss.png) no-repeat; }  .twitter-hb {     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCvvc-bMgtowdavte26RxOuF69-H6duwKss38dWR_sNt0uXQqb7E-wdvLyYjgT9JLslR7_UMuSPZIbVUj7OouExQLol3fwizd__7MroKmeKZGLiiNtanhSccqPh1FP6kDokc5wveEshdI/s1600/twitter.png) no-repeat;     height: 64px;     padding: 0px 20px 0px 80px;     margin-top: 10px; }  .twitter-hb:hover {     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5itiGTRaEbI_c1eX-307MBjzqRLjlR1ewqFx8eMTRSdire1TcnqioaXaiALo0wCqsPlJ5ee9S-joZCAGFDuqd5K8N-eaZrjkwxaKfhqemzYQcr-0U0LxDSUi6MykEWXfVk51EUsRgpzo/s1600/twitter.png) no-repeat; }  .facebook-hb {     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVvCPlb6rgTolLL_R-4q5gAC9V5ZS1kt_HzJqhMV1Gd_cE2t6ioPm_gW5mNChgvBKByNg9IeYYkmLOjKsn_j71p5eLOdAIvKpS5hvKHCathAmErB_coMFnQhdBDiqib2hbCfsr2I42fzQ/s1600/fb+sepia.png) no-repeat;     height: 64px;     padding: 0px 20px 0px 80px;     margin-top: 10px; }  .facebook-hb:hover {     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTyIw3zwIerc1GoxD6BSwjOYEOaQX6MueaV6NRdEt0gn1MHh7K_oNp04Qc-GpMK8F3caF5MCWILrxLFV0JyPzh-ALmBNUZBhrLe4ukSsxWudj9ijJ-O6lTy5rfv23jlkwDh4oC3iPPyII/s1600/facebook-logo.png) no-repeat; }  .follower-rss, .follower-twitter, .follower-facebook {     font-family: Georgia,  sans-serif, Times;     font-size: 1.5em;     font-style: italic;     color: #D3C5B1;     padding-top: 05px;     text-shadow: 1px 1px #B2A99D; }  .follower-rss a, .follower-twitter a, .follower-facebook a {     color: #AA9C89; }  .follower-rss span {     font-size: 2.2em;     font-weight: bold;     font-style: italic; }  .follower-twitter span {     font-size: 1.9em;     font-weight: bold;     font-style: italic; }  .follower-facebook span {     font-size: 1.9em;     font-weight: bold;     font-style: italic; }   </style>   <div class='rss-hb'>     <div class='follower-rss'>         <span>             <a href='http://feeds.feedburner.com/nuri-ozdogan'>33</a>        </span>loyal readers</div> </div> <div class='twitter-hb'>     <div class='follower-twitter'>         <span>             <a href='http://twitter.com/nuri-ozdogan' rel="nofollow">270</a>        </span>followers</div> </div> <div class='facebook-hb'>     <div class='follower-facebook'>         <span>             <a href='http://www.facebook.com/nuri-ozdogan'>63</a>        </span>fans</div> </div>

Değiştirmeniz gereken yerler aşağıda gösterilmektedir.

Feedburner http://feeds.feedburner.com/nuri-ozdogan URL yaz ve değiştir 33 sayısı ile RSS susbscribers düzenle.

Twitter http://twitter.com/nuri-ozdogan yerine twitter URL adresini yaz ve değiştir 270sayısı takipçileri düzenle.

Facebook http://www.facebook.com/nuri-ozdogan kendi URL adresinizi 63sayısı ile hayranlarını düzenle.

Blogger'ın normalde bu özelliği var. Bazı blogcular bu özelliği sonradan öğrendiğinde "Ne her yazıya tek tek 'more'ye tıklayıp keseceğim mi ?" der. Bunun daha kolay bir yolu vardır. İşte şimdi size bu eklentiyi anlatacağım.

Blogger hesabımıza giriş yaptıktan sonra Tasarım > HTML'yi Düzenle kısmına gelip Widget Şablonlarını Genişlet kutucuğunu işaretliyoruz.

Şimdi kodlarımızı ekleyelim.

CTRL + F yaparak kod penceremizden </head> etiketini buluyoruz. Hemen sonrasında aşağıdaki kodu, bulduğumuz </head> kodunun üst kısmına yerleştiriyoruz.

Alıntı:

<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
</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");
var summ = summary_noimg;
if(thumbnail_mode == "yes") {
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><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 kısmı hallettikten sonra </head> kodunu bulurken yaptığımız işlemi <data

ost.body/> için yapıyoruz. Daha sonra bulduğumuz kodu seçerek aşağıdaki kodu yerine yapıştırıyoruz.

Alıntı:

<b:if cond='data:blog.pageType == "item"'>
<data

ost.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data

ost.body/>
<b:else/>
<div expr:id='"summary" + data

ost.id'><data

ost.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data

ost.id/>");
</script>
<a class='more' expr:href='data

ost.url'>Read more ...</a>
</b:if>
</b:if>

Kodumuzu kendimize göre düzenleyelim:

thumbnail_mode: Temamıza eklediğimiz kodlar içerisindeki bu kod, yazıyı kestikten sonra küçük resim koyma yada koymama seçeneğini bize sunuyor. Eğer "yes" dersek küçük resim görünür, "no" dersek görünmez.

summary_img: Resim olursa, kaç karakter yazı göstermek istediğimizi giriyoruz. Yukardaki kodda yanında değer var o kısım karakter sayısıdır.

summary_noimg: Yukardaki işlemin aynısı fakat bunda resim yok. O yüzden karakter sayısını yukardakinden fazla girmemizde fayda var.

img_thumb_height ve img_thumb_width: Yazıyı kestikten sonra oluşan küçük resimin hangi boyutlarda küçülmesini istiyorsanız yanındaki değerleri onunla değiştirin. Sadece birini değiştirirseniz diğeri ona göre oranlanır.

Read more ...: Kodumuzun içindeki bu yazı da, yazıyı kestikten sonra ardına eklenecek kelimedir. "Devamını Gör", "Devamını Oku" gibi değiştirebilirsiniz.

Sayfada Aşağı inince Açılan Paylaş Eklentisi

Blogger için , ziyaretçileriniz sayfada biraz aşağı inince açılan paylaş eklentisi istermisiniz ?

Bu eklentimizde , Twitter paylaş butonu , facebook paylaş butonu vb.. butonlar yer alacak , böylelikle ziyaretçileriniz yazlarınızı rahatlıkla paylaşabilecek..

Anlatıma geçelim..

Aşağıdaki kodumuzu bulalım..

Kod:

</head>

Bu kodumuzun üstüne , aşağıdaki kodlarımızı ekleyelim..

Kod:

<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>

Şimdide bu kodumuzu bulalım..

Kod:

</body>

Bu kodumuzun da üstüne , aşağıdaki kodlarımızı ekleyelim..

Kod:

<div class="addthis_bar addthis_bar_medium"> <label>Share This Page:</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>

Artık Sayfada Aşağı inince Açılan Paylaş Eklentisine sahipsiniz, güle güle kullanın..

Blogunuza dinamik bir resim eklentisi istermisiniz ?

Bu eklentimiz , fare ile resim üzerine gelindiğinde resmi bir miktar yatırır , oldukça güzel bir eklenti olduğunu düşündümüz dinamik resim efektini sizde blogunuzda kullanabilirsiniz..

öncelikle blogunuzda aşağıda kodu buluyorsunuz.

Kod:

]=]=></b:skin>

yukarıdaki kodun hemen üstüne bu kodu yapıştırıyoruz

Kod:

]=]=>.post img {-webkit-transition:  -webkit-transform .15s linear;-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);padding: 5px 5px 5px 5px;-webkit-transform:  rotate(+2deg);-moz-transform: rotate(+2deg);}


.post img:hover {-webkit-box-shadow:  0 3px 6px rgba(0,0,0,.5);-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5

Günümüzün en popüler eklentilerinden olan yukarı çık butonu sonsuz kaydırma eklentisi kullanan bloglar ve buna benzer temalarda gerekli eklentiler arasındadır.

Eklentimizin kurulumu için.

Blogger admin paneli > şablon + HTML'yi düzenle kısmından aşağıdaki kodu bulun..

</body>

yukarıdaki kodun bir satır üstüne aşağıdaki kodumuzu ekleyin.

Kod:

 <!--ibrahimfirat.net Kod Başı-->  <script type="text/javascript" src="http://ajax.googleapis.com

Blogger.com > Şablon > HTML'yi düzenle

</head> tagını bulup üstüne aşağıdaki kodu ekledin.

Kod:

<link href='https://googledrive.com/host/0B-vz7n1QSdEfMDZiZXpOR1VCcWs' rel='stylesheet' type='text/css'/>

Daha sonra kaydedin.

Yeni konu açın, HTML sekmesini seçin ve aşağıdaki koddaki kırmızı kısımları düzenleyip, yapıştırın

Kod:

<article id="default-usage"><div class="to-lock" style="display: none;">        <!--Hide

Google Aramalarına Profil Resminizi Ekleyin

Selam arkadaşlar bir süredir paylaşım yapmıyorduk. Son zamanlardır çok aranan bir eklentiyi paylaşacağız. Bu eklentimiz ise Google aramalarında Google+ profilinizde bulunan resminizi gösterecek. Sadece görünüm amaçlı değil, bu eklentinin SEO için büyük yararı da var. İsterseniz anlatımımızı okuyup ayarlara başlayalım :)

Öncelikle aşağıda ki işlemleri sırasıyla uyguluyoruz.
1- Google+ Profilimizi açıyoruz.
2- Hakkında > Bağlantılar > Düzenle seçeneğine tıklıyoruz. Daha sonra "Katkıda bulunduğu siteler" seçeneği karşımıza çıkıyor. Özel Bağlantı Ekle seçeneğine basıyoruz. Etiket yazan yere sitenizin ismini, URL yazan yere ise Site Adresimizi ekliyoruz. Daha sonra Kaydet'e basıyoruz.

Şimdi sıra resmimizi ekleyeme geldi.
<head> kodunu temamızdan buluyoruz ve hemen altına aşağıdaki kodu ekliyoruz.

<link href="https://plus.google.com/google plus id'niz/posts" rel="author"/>

Google Profil İd'niz yazan yere ise Google+ Profil idnizi ekliyorsunuz ve temayı kaydediyoruz. Siteniz index aldığında resim gözükmeye başlayacaktır.

Bu eklenti WordPress bloglar içinde geçerlidir.

Blogger sitenize bir blog arşivi oluşturmak isteyenler için bu yazıyı yazıyorum. Ne işime yarar derseniz; eğer az yazı varsa sitemap görevi görebilir fakat 500 ve yukarısında yazılarınız varsa bu sayfa çöp sayfa olarak değerlendirilir diye düşünüyorum.
Bana sorarsanız böyle bir sayfa oluşturmayan çünkü spam listesine girebilirsiniz bir tek sayfa yüzünden ama yinede blogger arşiv sayfası oluşturmak isteyenler için anlatıyorum.
Blogger Arşiv Sayfası Oluşturma

Blogger panelinize giriş yapın. Yeni bir sayfa oluşturun ve ardından yazı yazma yerini HTML olarak ayarlayın. Son olarak ise aşağıdaki kodları yapıştırın.
Not : Siteadresi yazan yere kendi site adresinizi yazmayı unutmayın…

<script src="http://yourjavascript.com/9184200431/blogtoc-min.js" type="text/javascript"> </script><br /> <script src="http://siteadresiniz.blogspot.com//feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

WordPress tarzında sosyal simgeler

Blogger Otomatik Devamını Oku Eklentisi

Blogger Sayfada Aşağı inince Açılan Paylaş Eklentisi

Blogger Dinamik Resim Eklentisi

Blogger Yukarı Çık Eklentisi

Sosyal Ağlarda Paylaşmadan Kilitleyin!

Google Aramalarına Profil Resminizi Ekleyin

Blogger Arşiv Sayfasi Oluşturma

Kategoriler

Sponsorlar

Dost Bloglar

Görüntülenme