Soldan Açılır Sosyal Menü

İster sola sabitleyip açılan sosyal menü yapın, ister Gatget Alanınıza ekleyip açılan sosyal menü yapın.Tercih size kalmış.Aşağıda vereceğimiz kodlarda ki href="Urlniz" kısmını kendi sosyal Urlniz ile değiştirip sitenize yerleştire bilirsiniz.

Soldan Açılır Sosyal Menü Kodu

Soldan açılan sosyal menü eklemek için Şablon>Html'yi Düzenle adımlarını ilerleyip Crtl+F yardımı ile <body kodunu aratın ve altına aşağıdaki kodu yapıştırın.

<div style='position:fixed;z-index:1000;'>
<div style='height:200px;'/>
   <style type='text/css'>#buttonbg {width: 160px;margin: 0px 0px;padding: 0;}
#buttonbg li {cursor: pointer;height: 48px;position: relative;list-style-type: none; } 
#buttonbg .icon {background: #D91E76 
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik4oTh8on7p7aE8pwvK8ptmkGop9-97J5CCfjcR90IX0pQ0Afp4EcmNvRbCB_WIaLxmVi805qpeVi-P2ucGPWDsAimUHftjbRJiaBhhWNWD2yvD1oLbqYAW8pavvs394IMQVeELnlHiLk/s1600/blsocial12.png') 0 0 no-repeat; 
background-color: rgba(217, 30, 118, .42);
border-radius: 30px;
display: block; color: #141414;float:none;
height: 48px;line-height: 48px; 
margin: 5px 0;position: relative;
text-align: left;text-indent: 60px; 
text-shadow: #333 0 1px 0;white-space: nowrap;
width: 48px;z-index: 5; 
-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out; -moz-transition: width .25s ease-in-out, background-color .25s ease-in-out; -o-transition: width .25s ease-in-out, background-color .25s ease-in-out; transition: width .25s ease-in-out, background-color .25s ease-in-out; -webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px; -moz-box-shadow: rgba(0,0,0, .28) 0 2px 3px; -o-box-shadow: rgba(0,0,0, .28) 0 2px 3px; box-shadow: rgba(0, 0, 0, .28) 0 2px 3px; text-decoration: none;} 
#buttonbg .icon {color: #fafafa;overflow: hidden;font-weight:bold} 
#buttonbg .fb {background-color: rgba(45,118,185, .42); background-position: 0 -382px;} 
#buttonbg .twit {background-color: rgba(0, 161, 223, .42); background-position: 0 -430px;} 
#buttonbg .google {background-color: rgba(167, 0, 0, .42); background-position: 0 -478px;} 
#buttonbg .pint {background-color: rgba(204, 0, 0, .42);background-position: 0 -526px;} 
#buttonbg .linked {background-color: rgba(0, 87, 114, .42); background-position: 0 -574px;} 
#buttonbg .deviant {background-color: rgba(76, 122, 74, .42); background-position: 0 -622px;} 
#buttonbg .ytube {background-color: rgba(170, 0, 0, .42); background-position: 0 -670px;} 
#buttonbg .rss {background-color: rgba(255,109, 0, .42); background-position: 0 -718px;} 
#buttonbg li:hover .icon {width: 150px; } 
#buttonbg li:hover .icon {background-color: #d91e76; } 
#buttonbg li:hover .fb {background-color: #2d76b9;background-position: 0 2px;} 
#buttonbg li:hover .twit {background-color: #00A1DF; background-position: 0 -46px; } 
#buttonbg li:hover .google {background-color: #A70000;background-position: 0 -94px;}   
#buttonbg li:hover .ytube {background-color: #A00;background-position: 0 -286px; }  
#buttonbg .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}
</style>
<ul id='buttonbg'>
<li><a class='icon fb' href='https://www.facebook.com/turkishtemp' target='_blank'>Takip Et</a></li>
<li><a class='icon twit' href='Twitter-Urleniz' target='_blank'>Takip Et</a></li>
<li><a class='icon ytube' href='https://www.youtube.com/channel/UCM_V6OZs94Im7z9zghcwPWg' target='_blank'>Abone Ol</a></li>
<li><a class='icon google' href='https://plus.google.com/115600809991274475324' target='_blank'>Abone Ol</a></li>
</ul>
</div>

Gatget Alanı için Sosyal Menü Kodu

Gatget Alanınıa sosyal menü eklemek için Yerleşim>Gatget Ekle adımlarını ilerleyip Html/Javascript'i seçin ve içine aşağıdaki kodu yapıştırın.

Önizleme

Temalar Nasıl İndirilir ?

Turkish Template

Soldan Açılır Sosyal Menü

1 yorum: