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

tarafından
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 :   Cargam Manga Zine Blogger Teması

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>