Blogger Slayt Sosyal Paylaşım Butonları Pop Out Widget

Blogcular için çok önemli ve en güzel widget'lerden olan, blog içeriklerinizin sosyal medyada ve ziyaretçilerinizin blogunuzun sosyal medya sayfalarına kolayca ulaşabilmeyi sağlayan, Pop Out Widget özelliği sayesinde blogunuzda alan işgal etmeyen slayt sosyal paylaşım butonları blogunuza ekstra özellikler sunmaktadır.

Adından da anlaşılacağı gibi Pop Out Widget ziyaretçilerinize 4 çeşit sosyal paylaşım platformu sunarak blogunuzun daha fazla paylaşılmasına ve sosyal medyada tanınmasına olanak sağlamaktadır. Pop Out Widget Twitter, Google +, Abonelik formu ve Facebook kombinasyonlarının kullanılmasını sağlamaktadır. Pop Out Widget çalışma sistemi sadece mause ile üzerine gelmeniz ve jQuery etkisi sayesinde slayt tarzında açılır-kapanır sistemi ile çalışmaktadır.

Böyle inanılma bir widget'e sahip olmak isteyen bir çok blog kullanıcısı artık bu widget'i bloglarında kullanabilecek, özellikle sosyal medyada çok vakit geçiren blogcular için üst düzey bir widget olduğunu özellikle söylemek istiyorum.

Pop Out Widget Blogger'a Sitesine Nasıl Eklenir?

Yol-1 : Bu yolu takip ederek CSS kodlarınızı şablon kodları içerisine, HTML ve javaScript kodlarını HTML/JavaScript içerisine ekleyebilirsiniz.

1. Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinde bulunan Şablon > HTML'i Düzenle sekmesine tıklayın. Açılan sayfada ]]></b:skin> yada </style> kodunu bulun ve aşağıdaki CSS kodlarını ]]></b:skin> yada </style> bir satır üzerine ekleyin ve şablonu kaydedin.

#pop_out{visibility:visible}#pop_out span{bottom:0;font:7px "lucida grande",tahoma,verdana,arial,sans-serif;position:absolute;right:6px;text-align:right;z-index:99999}#pop_out span a{color:#808080;text-decoration:none}#pop_out span a:hover{text-decoration:underline}#off{visibility:hidden}#fb_div{width:246px;height:150px;overflow:hidden}#twitter_div{width:100%;height:100%;overflow:hidden}#plus_google_div{width:100%;height:100%;overflow:hidden}#beburner_div{width:100%;height:100%;overflow:hidden}
/* Widget Right Style */
.pop_icon{color:#fff;font-size:1.3rem}.fa-facebook.pop_icon{padding:20px 13px}.fa-twitter.pop_icon{border-radius:5px 0 0 5px;padding:20px 10px;background:#1571A5}.fa-google-plus.pop_icon{border-radius:5px 0 0 5px;padding:20px 6px;background:#BF2424}.fa-rss.pop_icon{border-radius:5px 0 0 5px;padding:20px 12px;background:#ea7237}#fb_right{z-index:10005;border:2px solid #435680;background-color:#526ba5;width:250px;height:76px;position:fixed;right:-250px}#fb_right a{border-radius:5px 0 0 5px;background:#2E4372;position:absolute;top:-2px;left:-40px}#fb_right div{border:0 solid #3c95d9;overflow:hidden;position:static;height:150px;left:-2px;top:-3px}#tweet_right{z-index:10004;border:2px solid #1571a5;background-color:#33a1e1;width:250px;height:32%;position:fixed;right:-250px}#tweet_right_img{position:absolute;top:-2px;left:-40px;border:0}#plus_google_right{z-index:10003;background-color:#f9f9f9;border:2px solid #bf2424;width:80px;height:100px;position:fixed;right:-80px;border-radius:0 0 0 5px}#plus_google_right_img{position:absolute;top:-2px;left:-40px;border:0}#abone_right{z-index:10003;background-color:#f9f9f9;border:2px solid #ea7237;width:303px;height:100px;position:fixed;right:-303px}#abone_right_a{position:absolute;top:-2px;left:-40px;border:0}#blogger_right{z-index:10003;border:2px solid #303030;background-color:#fff;width:300px;height:97px;position:fixed}#blogger_right img{position:absolute;top:-2px;left:-101px}
/* Widget Left Style */
#fb_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:250px;height:250px;position:fixed;left:-250px}#fb_left a{position:absolute;top:-2px;right:-35px}#fb_left iframe{border:0 solid #3c95d9;overflow:hidden;position:static;height:250px;right:-2px;top:-3px}#tweet_left{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:242px;position:fixed;left:-250px}#tweet_left_a{position:absolute;top:-2px;right:-35px;border:0}#plus_google_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}#plus_google_left_a{position:absolute;top:-2px;right:-33px;border:0}#abone_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}#beburner_div form{margin:35px auto}#abone_left_a{position:absolute;top:-2px;right:-33px;border:0}#blogger_left{z-index:10003;border:2px solid #303030;background-color:#fff;width:300px;height:97px;position:fixed}#blogger_left img{position:absolute;top:-2px;right:-101px}.box-title1{border:1px solid #ddd;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;box-shadow:5px 5px 5px #CCCCCC;padding:10px;margin:10px 0}.enteryouremail{background:#fff!important;border:1px solid #ccc;padding:0 8px 0 8px;color:#ddd;font-size:12px;height:25px;width:165px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;margin:0}.submitbutton{background:#ea7237;border:1px solid #ea7237;font:bold 12px Arial,sans-serif;color:#fff;height:25px;padding:0 12px 0 12px;margin:0 0 0 5px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;cursor:pointer}

2. Blogunuzun kumanda panelinde bulunan Yerleşim > Gadget Ekle > HTML/JavaScript Ekle tıklayın ve aşağıdaki HTML ve javaScript kodlarını kopyalayıp HTML/JavaScript içerisine ekleyin ve kaydedin.

<script type="text/javascript" src="https://cdn.rawgit.com/jquerycods/0.4.2/master/popout.js"></script>
<div id="pop_out">
<div id="fb_right" style="top:18%;">
<div id="fb_div">
<a><i class="fa fa-facebook pop_icon"></i></a>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fbloggereklentileri&amp;locale=tr_TR&amp;width=246&amp;connections=9&amp;stream=&amp;header=false&amp;show_faces=0&amp;height=150" scrolling="no">
</iframe>
</div>
<span>
</span>
</div>
</div>
<div id="pop_out">
<div id="tweet_right" style="top:35%;">
<div id="twitter_div">
<a id="tweet_right_img"><i class="fa fa-twitter pop_icon"></i></a>
<div id="twitterfanbox">
<a class="twitter-timeline"  href="https://twitter.com/BEklentileri" data-widget-id="737589172823695361">@BEklentileri tarafından gönderilen tweetler</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<span>
</span>
</div>
</div>
</div>
<div id="pop_out">
<div id="plus_google_right" style="top:52%;">
<div id="plus_google_div">
<a id="plus_google_right_img"><i class="fa fa-google-plus pop_icon"></i></a>
<div style="float:left;margin:15px 15px 15px 15px;">
<g:plusone size="tall" expr:href="data:post.url">
</g:plusone>
<span>
</span>
</div>
</div>
</div>
</div>
<div id="pop_out">
<div id="abone_right" style=" top:69%;">
<div id="beburner_div">
<a id="abone_right_a"><i class="fa fa-rss pop_icon"></i></a>
<center>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/YRCZsC', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="10" class="enteryouremail" name="email" value="@-posta adresiniz..." onblur="if (this.value == &#39;&#39;){this.value = &#39;@-posta adresiniz...&#39;;}"onfocus="if (this.value == &#39;@-posta adresiniz...&#39;){this.value = &#39;&#39;;}" type="text" />
<input value="blogspot/YRCZsC" name="uri" type="hidden" />
<input value="Gönder" class="submitbutton" type="Submit" />
</form>
</center>
<span>
</span>
</div>
</div>
</div>

ÖRNEK GÖRÜNÜM

Yol-2 : Bu yolu takip ederek CSS, HTML ve javaScript kodlarını sadece HTML/JavaScript içerisine ekleyebilirsiniz.

Eğer Pop Out Widget'ini sadece HTML/JavaScript içerisinde kullanmak istiyorsanız, blogunuzun kumanda panelinden Yerleşim > Gadget Ekle > HTML/JavaScript Ekle tıklayın ve aşağıdaki CSS, HTML ve javaScript kodlarını kopyalayıp HTML/JavaScript içerisine ekleyin ve kaydedin.

<style>
#pop_out{visibility:visible}#pop_out span{bottom:0;font:7px "lucida grande",tahoma,verdana,arial,sans-serif;position:absolute;right:6px;text-align:right;z-index:99999}#pop_out span a{color:#808080;text-decoration:none}#pop_out span a:hover{text-decoration:underline}#off{visibility:hidden}#fb_div{width:246px;height:150px;overflow:hidden}#twitter_div{width:100%;height:100%;overflow:hidden}#plus_google_div{width:100%;height:100%;overflow:hidden}#beburner_div{width:100%;height:100%;overflow:hidden}
/* Widget Right Style */
.pop_icon{color:#fff;font-size:1.3rem}.fa-facebook.pop_icon{padding:20px 13px}.fa-twitter.pop_icon{border-radius:5px 0 0 5px;padding:20px 10px;background:#1571A5}.fa-google-plus.pop_icon{border-radius:5px 0 0 5px;padding:20px 6px;background:#BF2424}.fa-rss.pop_icon{border-radius:5px 0 0 5px;padding:20px 12px;background:#ea7237}#fb_right{z-index:10005;border:2px solid #435680;background-color:#526ba5;width:250px;height:76px;position:fixed;right:-250px}#fb_right a{border-radius:5px 0 0 5px;background:#2E4372;position:absolute;top:-2px;left:-40px}#fb_right div{border:0 solid #3c95d9;overflow:hidden;position:static;height:150px;left:-2px;top:-3px}#tweet_right{z-index:10004;border:2px solid #1571a5;background-color:#33a1e1;width:250px;height:32%;position:fixed;right:-250px}#tweet_right_img{position:absolute;top:-2px;left:-40px;border:0}#plus_google_right{z-index:10003;background-color:#f9f9f9;border:2px solid #bf2424;width:80px;height:100px;position:fixed;right:-80px;border-radius:0 0 0 5px}#plus_google_right_img{position:absolute;top:-2px;left:-40px;border:0}#abone_right{z-index:10003;background-color:#f9f9f9;border:2px solid #ea7237;width:303px;height:100px;position:fixed;right:-303px}#abone_right_a{position:absolute;top:-2px;left:-40px;border:0}#blogger_right{z-index:10003;border:2px solid #303030;background-color:#fff;width:300px;height:97px;position:fixed}#blogger_right img{position:absolute;top:-2px;left:-101px}
/* Widget Left Style */
#fb_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:250px;height:250px;position:fixed;left:-250px}#fb_left a{position:absolute;top:-2px;right:-35px}#fb_left iframe{border:0 solid #3c95d9;overflow:hidden;position:static;height:250px;right:-2px;top:-3px}#tweet_left{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:242px;position:fixed;left:-250px}#tweet_left_a{position:absolute;top:-2px;right:-35px;border:0}#plus_google_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}#plus_google_left_a{position:absolute;top:-2px;right:-33px;border:0}#abone_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}#beburner_div form{margin:35px auto}#abone_left_a{position:absolute;top:-2px;right:-33px;border:0}#blogger_left{z-index:10003;border:2px solid #303030;background-color:#fff;width:300px;height:97px;position:fixed}#blogger_left img{position:absolute;top:-2px;right:-101px}.box-title1{border:1px solid #ddd;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;box-shadow:5px 5px 5px #CCCCCC;padding:10px;margin:10px 0}.enteryouremail{background:#fff!important;border:1px solid #ccc;padding:0 8px 0 8px;color:#ddd;font-size:12px;height:25px;width:165px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;margin:0}.submitbutton{background:#ea7237;border:1px solid #ea7237;font:bold 12px Arial,sans-serif;color:#fff;height:25px;padding:0 12px 0 12px;margin:0 0 0 5px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;cursor:pointer}
</style>
<script type="text/javascript" src="https://cdn.rawgit.com/jquerycods/0.4.2/master/popout.js"></script>
<div id="pop_out">
<div id="fb_right" style="top:18%;">
<div id="fb_div">
<a><i class="fa fa-facebook pop_icon"></i></a>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fbloggereklentileri&amp;locale=tr_TR&amp;width=246&amp;connections=9&amp;stream=&amp;header=false&amp;show_faces=0&amp;height=150" scrolling="no">
</iframe>
</div>
<span>
</span>
</div>
</div>
<div id="pop_out">
<div id="tweet_right" style="top:35%;">
<div id="twitter_div">
<a id="tweet_right_img"><i class="fa fa-twitter pop_icon"></i></a>
<div id="twitterfanbox">
<a class="twitter-timeline"  href="https://twitter.com/BEklentileri" data-widget-id="737589172823695361">@BEklentileri tarafından gönderilen tweetler</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<span>
</span>
</div>
</div>
</div>
<div id="pop_out">
<div id="plus_google_right" style="top:52%;">
<div id="plus_google_div">
<a id="plus_google_right_img"><i class="fa fa-google-plus pop_icon"></i></a>
<div style="float:left;margin:15px 15px 15px 15px;">
<g:plusone size="tall" expr:href="data:post.url">
</g:plusone>
<span>
</span>
</div>
</div>
</div>
</div>
<div id="pop_out">
<div id="abone_right" style=" top:69%;">
<div id="beburner_div">
<a id="abone_right_a"><i class="fa fa-rss pop_icon"></i></a>
<center>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/YRCZsC', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="10" class="enteryouremail" name="email" value="@-posta adresiniz..." onblur="if (this.value == &#39;&#39;){this.value = &#39;@-posta adresiniz...&#39;;}"onfocus="if (this.value == &#39;@-posta adresiniz...&#39;){this.value = &#39;&#39;;}" type="text" />
<input value="blogspot/YRCZsC" name="uri" type="hidden" />
<input value="Gönder" class="submitbutton" type="Submit" />
</form>
</center>
<span>
</span>
</div>
</div>
</div>

Slayt Sosyal Paylaşım Pop Out Widget Açıklamaları

Blogunuzun şablon kodları arasında Ajax 1.4.2 jQuery yoksa, aşağıdaki jQuery kodunu blogunuzun şablon kodları arasında bulunan </head> kodunun hemen bir satır üzerine ekleyin.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Yukarıdaki HTML kod içerisinde belirtilen bloggereklentileri kendi blogunuzun facebook sayfa adını yazın. Facebook sayfa adı https://www.facebook.com/bloggereklentileri/ yada https://www.facebook.com/Blogger-Eklentileri-262462050767376/ gibi adres çubuğunda görüntüleyebilirsiniz.
Yukarıdaki HTML kod içerisinde bulunan Feedburner (abone bülteni) için belirtileyen yere kendi Feedburner ID'nizi yazın. Feedburner ID http://feedburner.google.com/fb/a/mailverify?uri=blogspot/YRCZsC gibi görünmektedir.
Yine yukarıdaki HTML kod içerisinde belirtilen yere kendi blogunuzun twitter akışı kutusu olan twitter widget'ini ekleyin.

Blog sitenize Twitter'daki twit akışını eklemek için;

1. Twitter'a giriş yapın.
2. https://twitter.com/settings/widgets linkini tıklayın.
3. Bileşenler sayfası açılacaktır. Yeni Oluştur'u tıklayın.
4. Yapılandırma sayfasında Bileşeni Oluştur'u tıklayın.
5. Twitter size aşağıdaki gibi bir kod üretecektir.

<a class="twitter-timeline"  href="https://twitter.com/BEklentileri" data-widget-id="737589172823695361">@BEklentileri tarafından gönderilen tweetler</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

6. Bu kodu kopyalayın. HTML kodlar içerisinde belirtilen yere ekleyerek twitlerin görünmesini sağlayabilirsiniz.
7. Değişiklikleri kaydet'i tıklayın.

Bu işlemden sonra Twittler web sitenizde görünecektir. Görünmesi bir kaç dakika sürebilir.

Blogger Eklentileri

Blogger Eklentileri özel yeni nesil eklentileri, temaları, CSS, CSS3, HTML, HTML5 Javascript ve JQuery kodları ile blog sitelerinize farklı tasarımlar kazandırmayı amaçlayan, blogger ipuçları hakkında bilgiler paylaşan ve rehberlik yapan kişisel bir blog.

Daha iyi bloglar için faydalı bilgilerin yanı sıra blog sitelerine katkıda bulunmak temel amacımızdır. Teşekkürler.

Facebook

Bize Katılın

Arlina Design

Blogger Slayt Sosyal Paylaşım Butonları Pop Out Widget

Pop Out Widget Blogger'a Sitesine Nasıl Eklenir?

Slayt Sosyal Paylaşım Pop Out Widget Açıklamaları

Yorum Gönder