Blogger Sosyal etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Blogger Sosyal etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

7 Eylül 2016 Çarşamba

Blogger Önceki ve Sonraki Yazılar Butonu Oluşturmak

Bu Eklentinin Amacı Nedir ?

Blog ana sayfalarının vazgeçilmezi olan ve tasarım olarak genelde pekte tatmin edici olmayan blog sayları arasında geçiş yapmaya yarayan " önceki ve sonraki " yazılarını görsel hale getirerek, sayfanın tasarımını bi derece göz alıcı hale getirebilmek.

Nasıl Kurabilirim ?

Maddeler halinde anlatacak olursak ;

  • Blogger kontrol paneline giriş yapıyoruz.
  • Sol tarafta bulunan Şablon sekmesine tıklıyoruz ve açılan sayfadaki " Html Düzenle " butonuna tıklıyoruz.
  • Açılan kod penceresinin boş bir kısmına tıklıyoruz ve " ctrl+f " yardımıyla aşağıdaki kodu buluyoruz.
<data:olderPageTitle/>


  • ve yerine aşağıdaki kodu yapıştırıyoruz.


<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidfCk9LsJXrgtXdF-8TCYclwjrC1on3DiRDgwLvayKdySAMh9rBddCLDIHIqTdHtgIFpsFOm8JSjmPD2OyRKQgn-heoDegSnCgi3ublYcQkbYKuWaBO63TxLkJE28tGTC3Ymxmp1pxfRb-/h120/sol.png' border='0' title='ÖNCEKİ'/>


  • Daha sonra aşağıdaki kodu buluyoruz.

<data:newerPageTitle/>


  • ve yerine aşağıdaki kodu yapıştırıyoruz.

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAAEjpyvZvBBrtWoPTAaHGATexJM_jyFaZPLldMA2TYba-NrVR2xRdxE6pKl9WESItlUhV3MI4kBGK20ny4QZLc8Q-bR13yRnU3Ilp0hg_xrtqH3LRc1R5B4OpiC0P7Nx9n59OYjlybYuT/h120/sa%25C4%259F.png' border='0' title='SONRAKİ'/>



  • En son aşağıdaki kodu buluyoruz.

<data:homeMsg/>


  • ve yerine aşağıdaki kodu yapıştırıyoruz.

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFleUyWq4aN4aokE5mjpmG37rGhl_XRm8TGLG9RJ1hHriHw1z2wYyylBAZWrXrl6UU17ILv8uPDuEKOOYHoTVwkgNKzQfz7sZUkHWui7_N1o4u5M_Wob-DYcCRbsb7Qkd4ulZRwtFkbE2p/h120/anasayfaa.png' border='0' title='ANA SAYFA'/>


Bütün işlem bu kadar.Hayırlı olsun .)

Eklentiden bir görsel : 


" Anahtar Kelimeler : Blogger önceki ve sonraki butonlarını görsel hale getirme, blogger önceki ve sonraki kayıtlar, blogger önceki ve sonraki kayıtlar eklentisi, blogger önceki ve sonraki kayıtlar yazısını fotoğraflı hale getirmek, "

17 Ekim 2015 Cumartesi

Blogger manuel twitter ve facebook sayaç eklentisi

Merhaba ;

Sosyal paylaşım ile ilgili birçok eklenti paylaştık ancak bloglar ve websitelerde sosyal medyanın ciddi derecede etkisi olması , birçok yeni eklentiyide beraberinde getiriyor.
Bu eklentilerden bir taneside bloğunuzun tasarımına katkı sağlamanın yanında , şık ve sadece görünüşü ile dikkat çeken facebook ve twitter sayaç eklentisini sizlerle paylaşmak istedim.

Kuruluma geçmeden eklentiden görüntü ;


Kurulum ;

Ayrı ayrı kullanmak isteyen arkadaşlar için 2 ayrı kod halinde paylaşıyorum.

Twitter için ;
<center>
<div style="width:100px;height:100px;margin-bottom:-23px;border-top: 0px solid #F2F2F2; border-right: 0px solid #8A8A8A; border-left: 0px solid #F2F2F2;">
<img src="http://i51.tinypic.com/qoym4o.png" />
</div>
<br />
<span sans ms style=" background-color:#F2F2F2; border-top: 0px solid #F2F2F2; border-right: 0px solid #8A8A8A; border-left: 0px solid #F2F2F2; border-bottom: 0px solid #8A8A8A; padding: 2px 4px 4px 4px; color: #666; font-family: sans-serif, arial; font-size: 10px;">
<span style=" background-color:#D2E9F8; font-size: 9px; border-top: 0px solid #8A8A8A; border-right: 0px solid #ddd; border-left: 0px solid #8A8A8A; border-bottom: 0px solid #ddd; padding: 0px 1px;">1000<blink>+</blink></span> Twitter Takipçimiz Var!</span></center>


Facebook için ;
<center>
<div style="width:100px;height:100px;margin-bottom:-23px;border-top: 0px solid #F2F2F2; border-right: 0px solid #8A8A8A; border-left: 1px solid #F2F2F2;">
<img src="http://i53.tinypic.com/16irvuq.png" />
</div>
<br />
<span sans ms style=" background-color:#F2F2F2; border-top: 0px solid #F2F2F2; border-right: 0px solid #8A8A8A; border-left: 0px solid #F2F2F2; border-bottom: 0px solid #8A8A8A; padding: 2px 4px 4px 4px; color: #666; font-family: sans-serif, arial; font-size: 10px;">
<span style=" background-color:#D2E9F8; font-size: 9px; border-top: 0px solid #8A8A8A; border-right: 0px solid #ddd; border-left: 0px solid #8A8A8A; border-bottom: 0px solid #ddd; padding: 0px 1px;">1000<blink>+</blink></span> Facebook Takipçimiz Var!</span>
</center>


Son olarak Kırmızı renkteki sayı değerini manuel olarak ayarlayınız.
Bütün işlem bu kadar.Hayırlı olsun :)

25 Eylül 2015 Cuma

Blogger yana esneyen sosyal buton eklentisi

Merhaba ;

Blogger ile ilgili birçok tasarım açısından şık ve kullanışlı sosyal eklenti paylaşmıştık.
Bu sosyal eklentide şık ve kullanışlı olması nedeniyle sizlerle paylaşmak istedim.

Kurulum ;

Kumanda paneli > yerleşim > gadget ekle > html/javascript (+) diyoruz ve aşağıda bulunan linkteki kodları ekliyoruz.


https://drive.google.com/file/d/0B2NrnLfIOfS7QlRlRmFqcDQ2bHc


Daha sonra facebook , twitter ve google+ hesaplarımızın url adreslerini kodlardaki adresler ile değiştiriyoruz.
Bütün işlem bu kadar.Hayırlı olsun :)



" Anahtar Kelimeler : blogger sosyal buton eklentisi, blogger sosyal buton, blogger hareketli sosyal buton eklentisi, blogger flash sosyal buton eklentisi, blogger sosyal flash eklenti, blogger yana esneyen sosyal buton eklentisi " 

22 Eylül 2015 Salı

Blogger 4'lü sosyal ağ ve mail aboneliği eklentisi ( 5 in 1 )

Merhaba ;

Sosyal ağların hit sayısına faydasını bir önceki sosyal ağ eklentisini sizlerle paylaşırken uzun uzun yazmıştım.
Bkz: Blogger dönen sosyal buton eklentisi

Bu eklenti sayesinde hem facebook , twitter , google+ ve rss aboneliklerinizi hemde mail aboneliğinizi tek bir box(kutu) şeklinde ve hep birlikte sunmuş oluyoruz.
Bununla birlikte fazla yer tutmadığı için bloğumuzun tasarımına olumsuz bir etkide bulunmuyor.

Eklentiden bir görüntü ;

blogger 4'lü sosyal ağ ve abonelik eklentisi


Kurulum ;

Kumanda paneli > yerleşim > gadget ekle > html/javascript ekle diyoruz ve aşağıdaki kodları yerleştiriyoruz.

<div dir="ltr" style="text-align: left;" trbidi="on">
<style>
#sidebar-subscribe-box{width:300px;border:1px solid #aaa;border-radius:3px;padding:3px 0}
 .sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGTvlfgF4gMO0OeHbdL2GbL9V1viANZYp1Rwqxm2vap-GJQElJ3AlDjVHq1v5S3iEQZcxvjt26w1wjXBxeLqnVYY38NuCEKZHP6PAS6XmAbn46wSYCDDtJTQzYqzNbHFJSjI6Bsv4EEa0/s1600/background.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}
 .sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}
 .sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6OnzZfJWrmHKThVVXnZUVtnn-I7RNKRK7B5X-0DkZNLb4aYFsTXTIe4HMoQHuuOZj1nL9W1TlfwOG5uemO29UrmLVlzyK8_ntoDbEGG0-yquJSFELfoJMfunr0HQIdTfS1mYkdTf1Aqk/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}
 .sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}
 .sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}
 .sidebar-subscribe-box-email-button:active{-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;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}
 #footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}
a.social-icons{margin-right: 5px;height:45px;width:45px;}
a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}
</style>
<br />
<div id="sidebar-subscribe-box">
<div class="sidebar-subscribe-box-wrapper">
<br />
<a class="social-icons" target="_blank" href="facebook url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn9lbQ4r3o1LTFqwwedC-ZGjpNOzhJWWDTtAzuG7TsPpG2MTIeLiVAnwwZdnFaZgcpWmcPffJvV_r4SlVEzOa2geZnnOTR-aXfd9gXTxbGg8vfM-iHkAsafVd4TOPkww8iVjRxkIhIrdCb/s1600/Bloggertrix-facebook.png" /></a>
<a class="social-icons" target="_blank" href="twitter url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYD473j46FWUgH6TdBC6RUr1vNYxFhW5zGvyQry6R6MRgKkjunTHDVEzm0exuOBFLypEhdxridXPDDwF0_7Qs1zYfJeqIzPCZX3c1pCe7Qapksp2lJCuB5GTZSUmyh4ZIQdptQ1WE8F3pZ/s1600/bloggertrix-twitter.png" /></a>
<a class="social-icons" target="_blank" href="google+ url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA2PqAI4ccfocZVbD6jnB7UOzOmZyKIM8WC-ybSJA_KrnGd-sfzDDC13oAD89ZZB0T7SsmuLmc6tLpNLA4pW6Lk4xR0CWffp65vEf07r4km0VU2I5HYkPaFDgbVnE1KOv_27wDM78CpPXx/s1600/Bloggertrix-Googleplus.png" /></a>
<a class="social-icons" target="_blank" href="rss url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggamdVOMtUjExj9Mj7ZAHI7KqLQDgvHprHJ5WFLREhBi2bUrvWjhktBIXZAjF1KGnYwNosAtTmhh2NFniCtpQVptzMoFBzBFUbQPSAej_I8YS4DPN03h0gvOtlK6j570cm_P4i5NMIaU6o/s1600/Bloggertrix-Rss.png" /></a>
<br />
YENİ YAZILARIMIZDAN İLK SEN HABERDAR OL!<br />
<div class="sidebar-subscribe-box-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=bloggereklentideposu" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggereklentideposu', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="bloggereklentideposu" />
<input name="loc" type="hidden" value="tr_TR" /><input autocomplete="off" class="sidebar-subscribe-box-email-field" name="email" placeholder="E-Mail Adresiniz ..." />
<input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Abone Ol!" /></form>
</div>
</div>
</div>
</div>

Kod ekleme işlemi bittikten sonra , gelelim özelleştirme aşamasına.

Koyu siyah > sosyal ağlarınızın url adresleri
Kırmızı > box(kutu) ayarları ( genişlik vs. )
Mavi > mail aboneliği url ayarları
Pembe > sosyal ağların icon url'leri

Eklenti ile ilgili sorularınızı yorum bölümünü kullanarak iletebilirsiniz.

" Anahtar kelimeler : blogger 4'lü sosyal ve abonelik eklentisi, blogger sosyal ağ ve mail aboneliği eklentisi, blogger sosyal ağ kutusu, blogger toplu sosyal ağ eklentisi, blogger sosyal ağ eklentisi "





17 Eylül 2015 Perşembe

Blogger dönen sosyal buton eklentisi

Merhaba ;

Sosyal ağların website ve blogların trafiğindeki katkısı oldukça yüksek.
Özellikte facebook ve youtube bunların başında geliyor.
Tabiki bu sosyal ağlara ne kadar önem verdiğinizle alakalı bir durum ne kadar ekmek o kadar köfte diyorum ve bu şık animasyonlu ve görüntü anlamında bloğunuzun tasarımına katkı sağlayacak eklentinin anlatımına geçiyorum.

Eklentinin görünümü ;



Icon Icon Icon Icon Follow Me on Pinterest

Kurulum ;

Şablon > Yerleşim > Gadget Ekle > Html/Javascript diyoruz ve aşağıdaki kodları ekliyoruz.

<style>
 #social a:hover {
 background-color: transparent;
 opacity:0.7;
 }
 #social img {
 -moz-transition: all 0.8s ease-in-out;
 -webkit-transition: all 0.8s ease-in-out;
 -o-transition: all 0.8s ease-in-out;
 -ms-transition: all 0.8s ease-in-out;
 transition: all 0.8s ease-in-out;
 }
 #social img:hover {
 -moz-transform: rotate(360deg);
 -webkit-transform: rotate(360deg);
 -o-transform: rotate(360deg);
 -ms-transform: rotate(360deg);
 transform: rotate(360deg);
 }
</style>
<center>
 <div id="social">
 <!--Start Rss Icon-->
 <a title="Grab Our Rss Feed" href="rss url'niz" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKOZ3RxwFqa_xvz116eS63qNdZ7VCQSTTdHKsRgHxt30FZIv4Vu21N3qhjXaegXMpIIHazeD4hyphenhypheniXG6p2Kjqt0QGgRzZhMA6y-62yGvzBe5hOWcZHtSbHgLSRwL1HK30_f5kGfjj1tfgsy/h120/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> 
 <!--End Rss Icon-->
 <!--Start Email Rss Icon-->
 <a rel="nofollow" title="Get Free Updates Via Email" href="e-mail rss url'niz" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR0ZFvZ6tsDy0uxtUGFIi1UYIHZul6Kl728v1ZlmF6miKmevycsL2uzEo1ywtC_0CWjwSUEL56JbV14ptxkQZY04LveUEmhibdU33Hs8jT0equw9s0OdmdqtkScCaIAs2rOPOBUwgMj2hu/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a> 
 <!--End Email Rss Icon-->
 <!--Start Facebook Icon-->
 <a rel="nofollow" title="Like Our Facebook Page" href="facebook url'niz" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjClbIOL6seFHYTUc3ZdalShU-H4lv1owDrKyZ2maWNCJs34uUglrWO4rTGyMlGCdiElQ2GPO3IznCkdriwoLWMl1QWM-Fb2e4p0bRWErP2tuDdqB14WLUTCUwuCwTbGVjiyex2d8XQ1oH3/h120/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a> 
 <!--End Facebook Icon-->
 <!--Start Twitter Icon-->
 <a rel="nofollow" title="Follow Our Updates On Twitter" href="twitter url'niz" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH2sSW_vlTyik8GdVwhyMXl_5RPJa6EdHORLVpJKY5mBTF1erS3WyxdGIPf12_tPCvF5pScGg7qxTbuDCNluFqKX2drq3JwW6Qbx4o1THts9uJOc8YU9HXd79zZ4jVA9n6qgADfuGCEWj1/h120/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a> 
 <!--End Twitter Icon-->
 <!--Start Google+ Icon-->
 <a title="Follow Us On Google+" rel="nofollow" href="google+ url'niz" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxHlXgSIufso6F6utMB8-YxqYfoKnARm1vixpJLwrphO-n3BoM6HQ86rTTNmD9-JgXe8o5TzBtNu4UZHu8mfLIU9GDq9qNg2IvdyOrAHGXS6xMjIoz1qtguPETPecvU_i8pZlK8eWTOIg0/h120/GOOGLE-PLUS-48x48.png"/></a> 
 <!--End Google+ Icon-->
 <!--Start Pinterest Icon-->
 <a title="Follow Our Pins" rel="nofollow" href="pinterest url'niz" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm6Q97KcuFipfj5MyREhiPFb1G0ntokO_g4zhVtOvgp0iZhMqW63pauINIua0maHmIOlnCX5iWL9UrfxrVUPWP1_d8xwpEb0s54i3kOUhk-9Xn6AR3GffP9Qc7TNFv9SUw2_2byvgSLuYa/h120/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a>
 <!--End Pinterest Icon-->
<a rel="dofollow" href="http://www.bloggereklentideposu.blogspot.com"
 </div>
</center>

Daha sonra mavi renkle belirttiğim yerlere kendi sosyal hesap linklerimizi ekliyoruz ve kaydedip çıkıyoruz.Hayırlı olsun :)




Anahtar kelimeler : animasyonlu sosyal buton, sosyal buton, blogger animasyonlu sosyal buton, animasyonlu sosyal buton eklentisi, blogger animasyonlu sosyal buton eklentisi