Anasayfa / Blogger / Blogger Sayfa Altında Sabit Duran Sosyal Paylaşım Butonları
sosyal medya 111 660x330 - Blogger Sayfa Altında Sabit Duran Sosyal Paylaşım Butonları

Blogger Sayfa Altında Sabit Duran Sosyal Paylaşım Butonları

Evet arkadaşlar bugün sizlere her zaman sabit duran ve üzerine geldiğinizde hareketlenen sosyal paylaşım butonları eklentisini kurmayayı anlatıcam :)

1 ) Blogger kumanda paneline gelip Şablon >> HTML’yi Düzenle sekmesiyle temamızın kodlarını açıyoruz.
2 ) Ctrl + F yardımı ile

]]></b:skin>

kodunu buluyoruz.
3 ) </head> kodunun öncesine aşağıdaki  Blogger Sayfa Altında Sabit Duran Menü kod dizinini ekliyoruz.


div.cap { display: block; height: 100px; width: 40px; background: url(https://3.bp.blogspot.com/-296iWD5AC80/UEHlDsazgbI/AAAAAAAAFBk/Y22FaBJ66Lo/s1600/dock-background-left.png)bottom left no-repeat; } div.cap.left { position: absolute; bottom: 0px; left: 0px; } div.cap.right { background-position: right bottom; position: absolute; top: 0px; right: 0px; } ul.mbl-dock { display: inline-block; height: 130px; padding: 0 40px 0 0; background: url(https://3.bp.blogspot.com/-296iWD5AC80/UEHlDsazgbI/AAAAAAAAFBk/Y22FaBJ66Lo/s1600/dock-background-left.png) no-repeat right bottom; overflow: hidden; margin: 0 0 0 40px; } ul.mbl-dock li { display: block; position: relative; float: left; width: 50px; height: 50px; margin: 60px 0 4px 0; -webkit-transition: 0.15s linear; -webkit-transition-property: -webkit-transform margin; text-align: center; } ul.mbl-dock li a { display: block; height: 50px; padding: 0 1px; -webkit-transition: 0.15s linear; -webkit-transition-property: -webkit-transform margin; margin: 0; -webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.45, transparent), to(rgba(255, 255, 255, 0.25)));} ul.mbl-dock li a img { width: 48px; } ul.mbl-dock li:hover { margin-left: 9px; margin-right: 9px;} ul.mbl-dock li:hover a { -webkit-transform-origin: center bottom; -webkit-transform: scale(1.5);} ul.mbl-dock li.nearby { margin-left: 6px; margin-right: 6px; z-index: 100;} ul.mbl-dock li.nearby a { -webkit-transform-origin: center bottom; -webkit-transform: scale(1.25);} ul.mbl-dock li span { background:#fff; position: absolute; bottom: 80px; margin: 0 auto; display: none; width: auto; font-family:arial; font-size: 11px; font-weight: bold; padding: 3px 6px; -webkit-border-radius: 6px; color: #000; } ul.mbl-dock li:hover span { display: block; } div#mbldockwraps { position: fixed; bottom: 12px; height: 120px; padding: 50px 0 0; text-align: center; -webkit-border-radius: 6px; -moz-border-radius: 6px; width: 100%; line-height: 1; z-index: 100; } div#macWrap { width: auto; display: inline-block; position: relative; border-bottom: solid 2px rgba(255,255,255,.35); line-height: 0; }

1 ) Ardından Ctrl + F yardımı ile

</head> 

kodunu buluyoruz.

İlginizi Çekebilir :   Yorum Gönder Yazısı Yerine Resim Eklemek

2 )  kodunun öncesine aşağıdaki  Blogger Sayfa Altında Sabit Duran Menü kod dizinini ekliyoruz.

  <script type="text/javascript" src="http://mybloggerlab.com/Scripts/jquery.js"></script> <script type="text/javascript" src="http://mybloggerlab.com/Scripts/jquery.tipsy.js"></script> <script type="text/javascript"> // Place all Javascript code here $(document).ready(function(){ $("a[rel=tipsy]").tipsy({fade: false, gravity: "s"}); $("ul.mbl-dock li").each(function (type) { $(this).hover(function () { $(this).prev("li").addClass("nearby"); $(this).next("li").addClass("nearby"); }, function () { $(this).prev("li").removeClass("nearby"); $(this).next("li").removeClass("nearby"); }); }); }); </script>

Blogger Sayfa Altında Sabit Sosyal Paylaşım Butonu kullanmak için Şablon >> Gadget Ekle >> HTML/Java Script kutucuğunu kullanarak aşağıda ki kodları ekleyin.

<div id="mbldockwraps"> <div id="macWrap"> <div class="cap left"></div> <ul class="mbl-dock"> <li class="active"> <span>Ana Sayfa</span> <a href="https://www.cemkarakurt.com.tr/"><img src="http://4.bp.blogspot.com/-lC4nKtzobds/UEHqESlqTpI/AAAAAAAAFCE/QHcVB7RMPjY/s1600/MBL_home.png" /></a> </li> <li> <span>İletişim</span> <a href="hhttps://www.cemkarakurt.com.tr/"><img src="http://1.bp.blogspot.com/-jVB-sgRwlxg/UEHqDEtbnII/AAAAAAAAFB8/ZbqjWTDa_lM/s1600/MBL_contact.png" /></a> </li> <li> <span>Hakkında</span> <a href="https://www.cemkarakurt.com.tr/"><img src="http://3.bp.blogspot.com/-Y2BvQc08uic/UEHtEJQFxfI/AAAAAAAAFCU/w8QtfuH0Iug/s1600/MBL_about.png" /></a> </li> <li> <span>Site İçeriği</span> <a href="https://www.cemkarakurt.com.tr/"><img src="http://1.bp.blogspot.com/-KnAwKKZWvEw/UEHuSHTwDPI/AAAAAAAAFCs/ZyW0FZhMK0o/s1600/MBL_search.png" /></a> </li> <li> <span>RSS</span> <a href="http://feeds.feedburner.com/xxx"><img src="http://2.bp.blogspot.com/-9Kc5o_rvKp4/UEHtHjae3HI/AAAAAAAAFCk/pqxlbz53pr0/s1600/MBL_rss.png" /></a> </li> <li> <span>Blogger</span> <a href="http://www.blogger.com/profile/xxx"><img src="http://1.bp.blogspot.com/-icNwvQYp2sY/UEHv_hiI1QI/AAAAAAAAFDE/gxYpxMDK97Y/s1600/MBL_blogger.png" /></a> </li> <li> <span>PAGE</span> <a href="https://www.facebook.com/xxx"><img src="http://4.bp.blogspot.com/-LRdFm6v8XDU/UEHxLwRiUjI/AAAAAAAAFDM/hkTdpEGWQA0/s1600/MBL_FB.png" /></a> </li> <li> <span>Twitter</span> <a href="https://twitter.com/Bloggerblog_"><img src="http://4.bp.blogspot.com/-eZOdFkkJWV4/UEHxNzy5_HI/AAAAAAAAFDU/-KQDINX3Vcc/s1600/MBL_Twitter.png" /></a> </li> <li> <span>Pin IT</span> <a href="http://pinterest.com/xxx/"><img src="http://3.bp.blogspot.com/-SFmDScdgZpo/UEHz_FHcqwI/AAAAAAAAFDk/raWzRemcLE0/s1600/MBL_pin.png" /></a> </li> <li> <span>Google</span> <a href="https://plus.google.com/u/0/xxx"><img src="http://2.bp.blogspot.com/-9N7cAlgzEws/UEH01DGfEtI/AAAAAAAAFDs/JaeQr-_MPvY/s1600/MBL_googleplus.png" /></a> </li> </ul> </div> </div>

Bunları da kontrol edebilirsiniz.

sercih plus 310x165 - Sercih Plus v1 Blogger Teması

Sercih Plus v1 Blogger Teması

Blogger platformunda tema yapmak kolay değil fakat tema düzenlemek kolay.  Css kodları ile biraz oynayarak …

1 Yorum

  1. can

    ziyaretcilerin sayfanızı paylaşmasını saglayan güzel eklenti.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir