Sabit Soldan Açılan Sosyal Menü
Blogunuzun veya şahsınızın Facebook, Twitter, Google+ ve Pinterest hesapları ile blog yazılarınızın beslemelerinin yer aldığı RSS adresinize ait sosyal medya butonlarının yer aldığı başka bir eklenti daha paylaşmak istiyorum.
Bu eklentide pek çok özellik bir arada. Bu eklenti sadece takipçi sayıınzı arttırmakla kalmayacak, aynı zamanda blogunuzu görsel açıdan da zenginleştirecek. Bu sosyal menü eklentisi floating yani yüzen olduğu için sayfa aşağı ya da yukarı kaydırılsa bile menünün pozisyonu sabit kalacaktır. Sayfada sadece sosyal kanalların isimleri gözükürken, menünün üzerine gelindiğinde animasyon efektiyle birlikte açılacak ve tıklayan kişiyi ilgili sosyal kanala yönlendirecektir.
Eklentinin nasıl çalıştığını görmek için aşağıdaki demo videoyu izleyebilirsiniz.
Sosyal menü eklentisini blogunzda kullanmak isterseniz aşağıdaki kodları kendinize göre düzenledikten sonra Blogger kumanda panelinden Yerleşim > Gadget Ekle > HTML/JavaScript Gadget yolunu takip ederek eklemeniz yeterli.
<!--Blog Hocam Sosyal Menü-->
<style type="text/css">
ul#sosyal {
position: fixed;
margin: 0px;
padding: 0px;
top: 20%;
left: 0px;
list-style: none;
z-index:9999;
}
ul#sosyal li {
width: 100px;
}
ul#sosyal li a {
display: block;
margin-left: -2px;
width: 100px;
height: 70px;
background-color:#fff;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #AFAFAF;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
}
ul#sosyal .twitter a{
background:#0F96C6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhWg1Ijfs9UZUAPXgwhOKMAzy0wy75t4m0sTRHz6zmhdPkMjB8j1hzOBS-22BN1yUdkJY88gGreT60uYYNnEuWUOCcGL5IkNJifm9eim7_WkruqYgVTV2bsXrp8PVEVHMjkd1ag4bFzNs/s1600/Twitter.png)no-repeat;
background-position:center center;
}
ul#sosyal .googleplus a {
background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpSAarCI_wgBXNYrD9nD_HxU3pH-AMamxSTUcv97Mw1rlfwZL3hSzNvxZ_0Yepb25Pxk-ifC4T_lEEFDSmyXgzquoZqFPxyFvxt8T8vB0o6mFSp482tmAizSP_8LMFWbPxs-p-5UGuJ70/s1600/GOOGLE+PLus.png)no-repeat;
background-position:center center;
}
ul#sosyal .facebook a {
background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc4o-0nc0fIAHto6BhNV7mfXpDOeypo-W1TDnYkm7HIwH3iv9StSljw-c4CUvyVVFfUNK5PpZxfbimIsi-xCuhPIsPZLaQGLR_7x4iMXgHZp0k2mzGDQBXiVagxZ9UUZV91P2HbfY-hrg/s1600/Facebook.png)no-repeat;
background-position:center center;
}
ul#sosyal .rss a {
background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWfWTc12jG0nzRRpGb5sdqwUZ0qIo4Kl4mYJGvk62D35Q9axoZzk1Kbu8G7WuUfgnq6TFemk9jkVpaQl5v8JCgVb0gQ-BIACMOrmFxRA-T8Z5w1VF_qSn_biBFje-TsalAoiSGD1t4yfo/s1600/rss.png)no-repeat;
background-position:center center;
}
ul#sosyal .pinterest a {
background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs8ynT0kDqn4V5cLPfoYbFjLlc5cpK8eWfDqLuJ93nKY2lE9fPfC8a8qVSBu3aFo0uLKHNZVnjfUAnUSruTbj5Pyslaf6bQcsYl6bWJBTuWO_jI20fr9hl8_cmzXKBMtsXgvGoqzU37pQ/s1600/Pinterest.png)no-repeat;
background-position:center center;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#sosyal a').stop().animate({
'marginLeft': '-85px'
}, 1000);
$('#sosyal > li').hover(
function () {
$('a', $(this)).stop().animate({
'marginLeft': '-2px'
}, 200);
},
function () {
$('a', $(this)).stop().animate({
'marginLeft': '-85px'
}, 200);
}
);
});
</script>
<br />
<ul id="sosyal">
<li class="twitter"><a href="http://twitter.com/bloghocam" title="Twitter"></a></li>
<li class="googleplus"><a href="http://gplus.to/bloghocam" title="Google Plus"></a></li>
<li class="facebook"><a href="http://facebook.com/bloghocam" title="Facebook"></a></li>
<li class="rss"><a href="http://feeds.feedburner.com/bloghocam" title="Rss"></a></li>
<li class="pinterest"><a href="http://pinterest.com/bloghocam" title="Pinterest"></a></li>
</ul>
Kırmızı renkle gösterdiğim yerlerde ilgili sosyal kanallara ait Blog Hocam’ın adresleri yazıyor. Oralara endi hesap adreslerinizi yazmayın unutmayın. Onların dışında değiştirmeniz gereken başka bir yer yok.
Bu çok beğendiğim bir uygulama idi ,çok teşekkürler.
YanıtlaSilselam blogunuzu cok begendim bende yeni blog yaziyorum ogrenecegim cok sey var
YanıtlaSilbasarilar dilerim
güzel eklenti
YanıtlaSiltwitter dışında diğer sosyal medya butonları var ama logolar görünmüyor. ama ilgili sayfaya gidiyor. sorun ne olabilir acaba??
YanıtlaSilbu sorun dışında güzel bir paylaşımdı. teşekkürler serdar
@AsOrTiK
YanıtlaSilAcaba kendi adreslerinizle değiştirirken fazladan kod mu sildiniz? Tekrar kontrol ettim eklentiyi, sorun yok.
Gzl paylasm bendede aynsı var...
YanıtlaSilÇok güzel bende boğuma ekledim birde instagram olsaymış :/
YanıtlaSilAsOrTiK
YanıtlaSilDosyaların imajının çekilmesi gerekiyor link veremiyorum nedense
KıvırcıHayat
Kodları değiştirerek çok rahat bir şekilde işlem yapabilirsiniz.
Yapabilirim isterseniz mail üzerinden kodları gönderebilirim..
interbilgi.com
Bu yorum yazar tarafından silindi.
YanıtlaSilPaylaşımınız için Teşekkür Ederim Bloguma uyguladım.
YanıtlaSilMerhaba paylaşımlarınızı severek takip ediyorum sayenizde bloğum baya düzene girdi :) bunun sağdan açılan ve instagram da ekli olanını yaparsanız çok memnun olurum saatlerdir arıyorum bulamadım :(
YanıtlaSilİyi günler
YanıtlaSilBenim sorunum, kodları ekleyecek yerleri bulamamış olmam.
Yardımcı olabilir misiniz ?
Korsandroidd sitesine bekliyorum
YanıtlaSilFilm,oyun,uygulama,dizi içerikleri vardır