Sabit Sosyal Paylaşım Eklentisi

ads

ads

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

Blogspot Sabit Sosyal Medya Buton Eklentisi

Bazı sitelerde görmüşsünüzdür Sayfa hareket eder ama menü sabit kalır. Bu eklentimiz sayfa hareket etse bile sayfanın altında sabit şekilde duran sosyal paylaşım eklentisi.

1. Adım

ilk olarak Şablon > HTML'yi Düzenle kısmından Ctrl + F ile şu kodu bulun  ]]></b:skin> aşağıdaki kodu yukarıdaki kodun üstüne ekleyin.

/*---www.ibrahimfirat.net Like To Enter Advance Traffic POP ---*/ div.cap { display: block; height: 100px; width: 40px; background: url(http://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(http://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; } /*---www.ibrahimfirat.net Like To Enter Advance Traffic POP ---*/

2. Adım

Tekrar aynı şekilde  </head> kodunu  bulun. Aşağıdaki kodu </head> kodundan önceki bölüme ekleyin.

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

3. Adım

Blogger Kumanda paneli > Yerleşim yolunu takip ederek Gadget ekle seçeneğinden aşağıdaki kodu ekleyin. Aşağıdaki linkleri kendi adresleriniz ile değiştiriniz.

<div id="mbldockwraps"> <div id="macWrap"> <div class="cap left"> </div> <ul class="mbl-dock"> <li class="active"> <span>Ana Sayfa</span> <a href="http://www.ibrahimfirat.net"><img src="http://4.bp.blogspot.com/-lC4nKtzobds/UEHqESlqTpI/AAAAAAAAFCE/QHcVB7RMPjY/s1600/MBL_home.png" /></a> </li> <li> <span>İletişim</span> <a href="http://www.ibrahimfirat.net"><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="http://www.ibrahimfirat.net"><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="http://www.ibrahimfirat.net"><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/ibrahimfirat"><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.http://www.ibrahimfirat.net/search/label/blogger%20eklentileri"><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/ibrahimfirat"><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/Genel_Portal"><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/atolyye/"><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/IDNİZ"><img src="http://2.bp.blogspot.com/-9N7cAlgzEws/UEH01DGfEtI/AAAAAAAAFDs/JaeQr-_MPvY/s1600/MBL_googleplus.png" /></a> </li> </ul> </div> </div>

ads