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

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 "

Dipnot

Bu yazı 22 Eylül 2015 Salı günü Unknown tarafından yazılmıştır. Güncel yazılarımızı RSS 2.0 sistemini kullanarak takip edebilir, dilerseniz bu konu hakkındaki düşüncelerinizi yorum bölümünü kullanarak bana ve değerli ziyaretçilerime iletebilirsiniz.