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
|
1 |
]]></b:skin> |
kodunu buluyoruz.
3 ) </head> kodunun öncesine aşağıdaki Blogger Sayfa Altında Sabit Duran Menü kod dizinini ekliyoruz.
|
1 |
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(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
|
1 |
</head> |
kodunu buluyoruz.
2 ) kodunun öncesine aşağıdaki Blogger Sayfa Altında Sabit Duran Menü kod dizinini ekliyoruz.
|
1 |
<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.
|
1 |
<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> |