Blogeer Açılır Kapanır Paylaşım Butonları


0
[Toplam: 0   Ortalama: 0/5]

Bugün sizlere oldukç.a şık bir sosyal paylaşım butonunun blogger’a nasıl ekleneceğini dilim döndüğünce anlatmaya çalışacağım. Aşağıda anlattıklarımı yapmadan önce blogunuzun temasının yedeğini almanızı öneriyorum. ”Bloğumun nasıl yedeğini alabilirim” derseniz buradan faydalanabilirsiniz. 

İlk önce Blogger > Şablon > HTML’yi Düzenle  > Widget Şablonlarını Genişlet dedikten sonra ctrl + f tuş kombinasyonunu kullanarak </b:skin> kodunu aratınız.

Bulduğunuz kodun hemen üzerine gelecek şekilde aşağıdaki kodları ekleyiniz.

#mintshare_mini, #mintshare_mini ul {padding:0; margin:0; list-style:none; width:100px; font-family:arial, sans-serif; background:url(“http://2.bp.blogspot.com/_b8IA1ajBJG8/TSfjG3P4w7I/AAAAAAAAB3k/yjkmCOax0yc/s1600/bkg-btn-grey.gif”) repeat-x scroll 0 0 #EDEDED;
}

#mintshare_mini {width:100px; height:30px; border:1px solid #888; padding: 0 15px;
-o-border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}

#mintshare_mini a.sharetext {
display:block; width:100px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; font-size:13px; font-weight:bold;
background: url(“http://3.bp.blogspot.com/_b8IA1ajBJG8/TSfjIshr9pI/AAAAAAAAB3w/UnosHLVx3co/s1600/plus.png”) no-repeat scroll 0 center transparent;
padding-left:5px;
cursor:pointer;
}

#mintshare_mini a.sharetext img {
    border: 0 none;
    display: block;
    margin-left: 10px;
}

#mintshare_mini .flyout {
    background: none repeat scroll 0 0 #AAAAAA;
    height: 113px;
    left: 40px;
    position: relative;
    top: -4px;
    width: 0;
transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-webkit-transition: width 1s ease-in-out;
}

#mintshare_mini .flyout ul {
background:url(“http://2.bp.blogspot.com/_b8IA1ajBJG8/TSfjG3P4w7I/AAAAAAAAB3k/yjkmCOax0yc/s1600/bkg-btn-grey.gif”) repeat-x scroll 0 0 #EDEDED;
list-style:none;
position:absolute; 
left:-1000px; 
top:-27px; 
width:365px; 
height:30px; 
border:1px solid #888; 
border-left:0; 
padding-right:10px;
z-index: 500;
overflow: hidden;
padding-left: 15px;
transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-border-radius: 0 15px 15px 0;
-icab-border-radius: 0 15px 15px 0;
-khtml-border-radius: 0 15px 15px 0;
-moz-border-radius: 0 15px 15px 0;
-webkit-border-radius: 0 15px 15px 0;
border-radius: 0 15px 15px 0;
}

#mintshare_mini:hover .flyout ul{
left:50px;
}

#mintshare_mini .flyout ul li {
float: left;
}

#mintshare_mini .flyout ul li a{

}

#mintshare_mini .flyout ul a img {

}

#mintshare_mini .flyout ul li.drop-li {position:relative; width:35px; height:30px; float:left; z-index:100; margin-top: -2px;}
#mintshare_mini .flyout ul li.drop-li a.drop-a {display:block; width:100px; float:left; text-decoration:none; line-height:16px;}

#mintshare_mini .flyout ul li.drop-li a.drop-a img {display:block; border:0; position:absolute; left:5px; top:5px; z-index:-1; opacity:1; filter: alpha(opacity=100);
transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}

#mintshare_mini .flyout ul li.drop-li a b {background:lightBlue; padding:2px 0; font-family:arial, sans-serif; display:block; width:100px; margin-top:58px; text-align:center; cursor:pointer; color:#000; font-size:14px; opacity:0; filter: alpha(opacity=0);
transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-o-border-radius:10px;
}

#mintshare_mini .flyout ul li.drop-li:hover > a img {opacity:0.5; filter: alpha(opacity=50);}
#mintshare_mini .flyout ul li.drop-li:hover > a b {opacity:1; filter: alpha(opacity=100);}

/* For IE6 */

#mintshare_mini .flyout ul li.drop-li a:hover img {filter: alpha(opacity=50);}
#mintshare_mini .flyout ul li.drop-li a:hover b {filter: alpha(opacity=100);}

/* Get MintShare */

#mintshare_mini .get_mintshare {
    font-size: 10px;
    margin-left: 5px;
    position: relative;
    top: 2px;
}

Daha sonra <data:post.body/> kodunu aratıp yine hemen üstüne gelecek şekilde aşağıda verdiğim kodları ekleyiniz.

<!– MintShare Mini –>
<div id=’mintshare_mini’>
<a class=’sharetext’><b>Share This</b><!–[if gte IE 7]><!–></a><!–<![endif]–>

<!–[if lte IE 6]><table><tr><td><![endif]–>
<div class=’flyout’>
<ul class=’icons’>
<li class=”drop-li”><a expr:href=”&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title”  class=”drop-a”><img alt=”” src=”http://4.bp.blogspot.com/_b8IA1ajBJG8/TSfd22PSeLI/AAAAAAAAB3M/ik_9DA-vzEk/s1600/facebook_small.png”/><!–[if gte IE 7]><!–></a><!–<![endif]–></li>
<li class=”drop-li”><a expr:href=”&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title”  class=”drop-a”><img alt=”” src=”http://2.bp.blogspot.com/_b8IA1ajBJG8/TSfd5p1h2kI/AAAAAAAAB3c/MbeKBRValYk/s1600/twitter_small.png”/><!–[if gte IE 7]><!–></a><!–<![endif]–></li>
<li class=”drop-li”><a expr:href=”&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title”  class=”drop-a”><img alt=”” src=”http://3.bp.blogspot.com/_b8IA1ajBJG8/TSfd4XN-B_I/AAAAAAAAB3U/RWDByrttOSc/s1600/stumbleupon_small.png”/><!–[if gte IE 7]><!–></a><!–<![endif]–></li>
<li class=”drop-li”><a expr:href=”&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title” class=”drop-a”><img alt=”” src=”http://4.bp.blogspot.com/_b8IA1ajBJG8/TSfd2KgvGkI/AAAAAAAAB3I/wgYrRUzkPWQ/s1600/digg_small.png”/><!–[if gte IE 7]><!–></a><!–<![endif]–></li>
<li class=”drop-li”><a expr:href=”&quot;http://www.technorati.com/faves?add=&quot; + data:post.url” class=”drop-a”><img alt=”” src=”http://3.bp.blogspot.com/_b8IA1ajBJG8/TSfd46l_gAI/AAAAAAAAB3Y/ZET5rqbQJMw/s1600/technorati_small.png”/><!–[if gte IE 7]><!–></a><!–<![endif]–></li>
<li class=”drop-li”><a expr:href=”&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title”  class=”drop-a”><img alt=”” src=”http://2.bp.blogspot.com/_b8IA1ajBJG8/TSfd3k4ZNnI/AAAAAAAAB3Q/UIJ0qSGEaHg/s1600/reddit_small.png”/><!–[if gte IE 7]><!–></a><!–<![endif]–></li>
<li class=”drop-li”><a expr:href=”&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?t=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title” class=”drop-a”><img alt=”” src=”http://4.bp.blogspot.com/_b8IA1ajBJG8/TSfd6JqbBPI/AAAAAAAAB3g/C7TjBqdR1m0/s1600/yahoo_small.png”/><!–[if gte IE 7]><!–></a><!–<![endif]–></li>
<li class=”drop-li”><a expr:href=”&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title”  class=”drop-a”><img alt=”” src=”http://2.bp.blogspot.com/_b8IA1ajBJG8/TSfd0lvepwI/AAAAAAAAB3E/jdZrJrv-1yM/s1600/delicious_small.png”/><!–[if gte IE 7]><!–></a><!–<![endif]–></li>

<span class=”get_mintshare”><a href=”http://www.bloggermint.com/2011/01/mintshare-social-bookmarking
-sharing-button-widget/”>Get MintShare!</a></span>

</ul>
</div>
</div>
<!– MintShare Mini End–>

Ekledikten sonra şablonunuzu kaydedip çıkabilirsiniz. 
Yukarıdaki kodları ekledikten sonra paylaşım botunu aşağıdaki gibi olacaktır.
MintShare Mini - Blogeer  Açılır Kapanır Paylaşım Butonları
Butonların yana değilde aşağıya doğru açılmasını istiyorsanız aşağıdaki kodları <data:post.body/>  kodunun hemen üstüne ekleyiniz.
<!– MintShare Compact –>
<div id=”mintshare_c”>
<div class=”mintshare-wrap”><a class=”top-a”>Share This<!–[if gte IE 7]><!–></a><!–<![endif]–>
<!–[if lte IE 6]><table><tr><td><![endif]–>
<div class=”flyout”>
<ul class=”icons”>
<li class=”drop-li”><a expr:href=”&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title”  class=”drop-a”><img alt=”” src=”http://2.bp.blogspot.com/_b8IA1ajBJG8/TSfc4hlSkGI/AAAAAAAAB3A/PKn_KP6sOQI/s1600/facebook_mini.png”/><!–[if gte IE 7]><!–></a><!–<![endif]–></li>
<li class=”drop-li”><a expr:href=”&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title”  class=”drop-a”><img alt=”” src=”http://2.bp.blogspot.com/_b8IA1ajBJG8/TSfc1xv38gI/AAAAAAAAB2w/lwdzgwzlC6I/s1600/twitter_mini.png”/><!–[if gte IE 7]><!–></a><!–<![endif]–></li>
<li class=”drop-li”><a expr:href=”&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title”  class=”drop-a”><img alt=”” src=”http://3.bp.blogspot.com/_b8IA1ajBJG8/TSfc3acrxMI/AAAAAAAAB24/t1KAd8-RvWU/s1600/delicious_mini.png”/><!–[if gte IE 7]><!–></a><!–<![endif]–></li>
<li class=”drop-li”><a expr:href=”&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title”  class=”drop-a”><img alt=”” src=”http://1.bp.blogspot.com/_b8IA1ajBJG8/TSfc0ni5IlI/AAAAAAAAB2o/8voYpZbQST4/s1600/stumbleupon_mini.png”/><!–[if gte IE 7]><!–></a><!–<![endif]–></li>
<li class=”drop-li”><a expr:href=”&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title” class=”drop-a”><img alt=”” src=”http://3.bp.blogspot.com/_b8IA1ajBJG8/TSfc3zp3I3I/AAAAAAAAB28/Hy-QUfKp2DQ/s1600/digg_mini.png”/><!–[if gte IE 7]><!–></a><!–<![endif]–></li>
<li class=”drop-li”><a expr:href=”&quot;http://www.technorati.com/faves?add=&quot; + data:post.url” class=”drop-a”><img alt=”” src=”http://2.bp.blogspot.com/_b8IA1ajBJG8/TSfc1TY3h1I/AAAAAAAAB2s/Mygg8K9VTac/s1600/technorati_mini.png”/><!–[if gte IE 7]><!–></a><!–<![endif]–></li>
<li class=”drop-li”><a expr:href=”&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title”  class=”drop-a”><img alt=”” src=”http://3.bp.blogspot.com/_b8IA1ajBJG8/TSfcz_OapJI/AAAAAAAAB2k/ZbQmKQIbDXA/s1600/reddit_mini.png”/><!–[if gte IE 7]><!–></a><!–<![endif]–></li>
<li class=”drop-li”><a expr:href=”&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?t=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title” class=”drop-a”><img alt=”” src=”http://3.bp.blogspot.com/_b8IA1ajBJG8/TSfc2jCW-hI/AAAAAAAAB20/CLBoYPjxGf4/s1600/yahoo_mini.png”/><!–[if gte IE 7]><!–></a><!–<![endif]–></li>
<span class=”get_mintshare”><a href=”http://www.bloggermint.com/2011/01/mintshare-social-bookmarking
-sharing-button-widget/”>Get MintShare Now</a></span>
</ul>
</div>
<!–[if lte IE 6]></td></tr></table></a><![endif]–>
</div>
</div>
<!– MintShare Compact End–>

Like it? Share with your friends!

0
admin

0 Comments

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format