 |
| Blogger Sayfa Altında Sabit Duran Sosyal Paylaşım Butonları |
Blogger eklentimiz sosyal paylaşım butonları haricinde Ana sayfa / Site Haritası Sunma / İletişim ve Arama butonlarına da sahip .
Blogger Dersleri - Sayfa Altında Sabit Duran Menü
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.
/*---www.Bloggerdersleri.com Like To Enter Advance Traffic POP ---*/
div.cap {
display: block;
height: 100px;
width: 40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnA9Qi8qBQmjFq8KVe7WIMcmgXLGJgA6Gp8ld2H15zWPsBzdxAlh73C7-TzvhDY12ecgRUQG_TlnT9OGA-H6Su2TRDib2bVnmbzfIeWRSypwYZDtxk4Iq10bESWT7bK6jxWX1QJd5URZU/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnA9Qi8qBQmjFq8KVe7WIMcmgXLGJgA6Gp8ld2H15zWPsBzdxAlh73C7-TzvhDY12ecgRUQG_TlnT9OGA-H6Su2TRDib2bVnmbzfIeWRSypwYZDtxk4Iq10bESWT7bK6jxWX1QJd5URZU/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.
2 ) </head> 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 Dersleri - Sayfa Altında Sabit Duran Menü Kullanımı
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="http://www.bloggerdersleri.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ6Ci2VrwzxE6nDEoY0r5e71CSNBYSS7Ejca3L0nvzILXA1mz3HTTvImbmMT6FLfjSWbCg7psZXOpyr41DJzO8I8j0ALLEIlwMLVZGnSou1ujffaWnZfnLLGkRXKeIhFXJzDcxouDdq8w/s1600/MBL_home.png" /></a>
</li>
<li>
<span>İletişim</span>
<a href="http://www.bloggerdersleri.com/p/iletisim.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhluM2lZMH208dmWqC2wR0IHLC0y3XnUhtdnLwZqZ6NJb0et3dxs7FH_1WwAZh9JwLV0-YWwd3qx3Xgt2S0LBFq9tlblK-CkVzPIrGJbXokO4wA6V3tUynZKXyrTNzujoqIoQy75vNNW9I/s1600/MBL_contact.png" /></a>
</li>
<li>
<span>Hakkında</span>
<a href="http://www.bloggerdersleri.com/p/blogger-dersleri-site-icerigi.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcst8FFwVGthVbGwa-2r6kH0oKXCwVUrlKhtinlIGnGK9hQk_Clmk68-uLsBR8tAteUa3sbX7hI8rT_OnL1MqJsTMph6TjluPY2p2uQXBs50-Gt9vRgWNp4bcV4ftNwB55ddQvEk0AmZM/s1600/MBL_about.png" /></a>
</li>
<li>
<span>Site İçeriği</span>
<a href="http://www.bloggerdersleri.com/p/blogger-dersleri-site-icerigi.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQE5mG2S6p8YnNOcSVd7yLQtYgXLEGSTm0of1M7S8nsyFXORZ0f5DQf0nTF_HnV_zvihZlvjOwBllBOsh6EZxYF5omvPgfaxPUNm72cbm2ZfCnpfCMMTem2iFCDXtK_9uqvo4qUmsEq8g/s1600/MBL_search.png" /></a>
</li>
<li>
<span>RSS</span>
<a href="http://feeds.feedburner.com/bloggerdersleri/MOiP"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3LM8TtZQHs8460Z_cONx1iYILCfspH4UJeqd9DLBJSqYr8NMveu01vW4XoV-FBhzpRq3X7jr3d9kasE3_MaQFuek7gxv0jZ-Cj6xOQS4aQ4ukY0mTQJT6w6taYsMNKQFFS1J0-54PUVg/s1600/MBL_rss.png" /></a>
</li>
<li>
<span>Blogger</span>
<a href="http://www.blogger.com/profile/3635639306019249049"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH48jtuGOZ33AT5O8Va6EE439frvlzucrqLiBqXnTwxv1qhtdd4PwoLbkkRIXvj53aBmICTRitj7ZghjjThHJHP-jfwqIdxhAYOtg8z0fXpBLGexxVa8tU55q-WUGYrtZZgSULs5HgaiY/s1600/MBL_blogger.png" /></a>
</li>
<li>
<span>PAGE</span>
<a href="https://www.facebook.com/BloggerDersleri"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTPSYSfXsO-4dd_-PpmIz1YZfNoF1NhgQI8KSG-_yDKUM_Qm__CRvZFqdVsnQEg1ehz2i2gqThyphenhyphendUK5b8FgQU8uzKwCOO8Yy9-M9FOzzxKWfCLkfp1TOmwQcH_op5bZMX0wOShN_OlJPE/s1600/MBL_FB.png" /></a>
</li>
<li>
<span>Twitter</span>
<a href="https://twitter.com/Bloggerblog_"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbglkGDd96X_C7Zeddluh46_wO98Ev8oJ2HYY4VpEx5R6UbjKaY_BSknAiesjbv4NJlHmDG6jpj9HHm6GIO1i9cphTt7_D-H1Mozm7dRpJCHaovdbRdieu8ughp-8Wxn_wAsmfwyugYFs/s1600/MBL_Twitter.png" /></a>
</li>
<li>
<span>Pin IT</span>
<a href="http://pinterest.com/atolyye/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7m_Q-bp1NItOZQ1zuem74Yhm3ICG9-p8wp8P93XKHcXTYkb8Z7C5IbkEJ9-Xi6fwWMnQ4WAR0RzkogH5-VzhlfFHD7KYg2g7DC2_Zvhe91T7ngxeljYM1DzmhMgpH6_wuWDsAqyVIuLM/s1600/MBL_pin.png" /></a>
</li>
<li>
<span>Google</span>
<a href="https://plus.google.com/u/0/106374439082237286396"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt2aUQ2pC-G_WPBVBH91i5mbF9wiP365Il-0ENmrGF_vesvwCD17ZKbLQ97tJFT4t44_nV5-MiIZ1ITy8uc0FkltPc3vNu_OKRtWU9AtxNCCzVOXIC7dGDdxhCaxO14aE_ZxUt_MVftJw/s1600/MBL_googleplus.png" /></a>
</li>
</ul>
</div>
</div>
Sabit Duran Sosyal Paylaşım Sitesi Butonları İçin Düzenlemeler:
- Blogger Eklenti kodlarında : Kırmızı ile yazılmış alanlar butonların üzerine gelindiğinde görünecek metin içeriği.
- Mavi ile yazılmış linkler ise sizin sosyal paylaşım sitesi profil linkleriniz.
Umarım yararlı olmuştur. Farklı tarzda hareket eden sosyal paylaşım butonu yapmak isteyenler için ise : Blogger Hareketli Sosyal Paylaşım Buton Yapımı >>
Hiç yorum yok:
Yorum Gönder