Konu altına Sekmeli yazar bilgisi ve sosyal paylaşım

Konu altına sekmeli yazar bilgisi ve sosyal paylaşım eklentisi daha önce de bu eklentiyi vermiştim yanlız tema değişikliğinden dolayı kodlarda bozulma olmuştu tekrar yeniliyelim dedim önceki verdiğim eklentide sosyal paylaşımlar yoktu bu eklentimize eklemiş olduk.
Eklentinin görünümü gerçekten çok şık sitemizde`de örneği mevcuttur zaten inceliyebilirsiniz.

Kodları ekliyebilmemiz için öncelikle tema şablonumuzu açıyoruz ve html düzenle diyip ctrl+f  basıyoruz ve bu kodu buluyoruz öncelikle

<div class='post-footer-line post-footer-line-1'>

Kodu bulduktan sonra altına aşağıdaki kodları ekliyoruz.

Aşağıdaki kodların içersinde sizin değiştirmeniz gereken yerler olacak Renkli olarak göstereceğim yerleri siz kendinize göre ayarlarsınız.

Facebook beğen kodu için Burdaki siteden kodu alacaksınız kod içersindeki iframe kodu ile değiştireceksiniz.

         <div class='ts-fab-wrapper ts-fab-icons-text' id='ts-fab-below-10105'><ul class='ts-fab-list'><li class='ts-fab-bio-link active'><a href='#ts-fab-bio-below-10105'>Yazar</a></li><li class='ts-fab-twitter-link'><a href='#ts-fab-twitter-below-10105'>Twitter</a></li><li class='ts-fab-facebook-link'><a href='#ts-fab-facebook-below-10105'>Facebook</a></li><li class='ts-fab-googleplus-link'><a href='#ts-fab-googleplus-below-10105'>Google+</a></li></ul>
    <div class='ts-fab-tabs'>
    <div class='ts-fab-tab' id='ts-fab-bio-below-10105' style='display: block;'>
    <div class='ts-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='88' id='grav-767b2f7561851b6132fed7bfe5e54d98-0' src='http://i.hizliresim.com/KqG0MR.png' width='64'/></div>
    <div class='ts-fab-text'>
    <div class='ts-fab-header'><h4>Yazar Hakkında</h4></div> <div class='ts-fab-content'> 
        <strong>Tolga Gönül - Kişisel Bir Blog Sitesidir.<u>Tolga GönüL.</u></strong> 
  Blogumuz ilk yayınından bu güne  blogger eklentilerini Ve Tüm Güncel Konular Hakkında Bilgi Vermektedir , tüm blogger kullanıcılarına ulaşrmak için yayın yapmış , bu süre içinde hiç bir şekilde kar/gelir elde etmemiş , etmiyecektir..Lütfen desteklerinizi bizden esirgemeyin.. 
        Bizi Facebook Twitter ve Google+ üzerinden de takip edebilirsiniz.. </div>
    </div>
    </div>
    <div class='ts-fab-tab' id='ts-fab-twitter-below-10105' style='display: none;'>
    <div class='ts-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='88' id='grav-767b2f7561851b6132fed7bfe5e54d98-1' src='http://i.hizliresim.com/KqG0MR.png' style='' width='64'/></div>
    <div class='ts-fab-text'>
    <div class='ts-fab-header'>
    <h4><a href='http://twitter.com/Tolga_GonuL'>@Tolga_GonuL</a></h4></div> <div class='ts-fab-content'> </div><div class='ts-fab-follow'><iframe allowtransparency='true' class='twitter-follow-button twitter-follow-button' data-twttr-rendered='true' frameborder='0' scrolling='no' src='http://platform.twitter.com/widgets/follow_button.1374787011.html#_=1375013320942&amp;id=twitter-widget-2&amp;lang=en&amp;screen_name=Tolga_GonuL&amp;show_count=true&amp;show_screen_name=true&amp;size=m' style='width: 243px; height: 20px;' title='Twitter Follow Button'/></div>
Twitter üzerinden bizleri takip edip konularımızdan haberdar olabilirsiniz.
    </div>
    </div>
    <div class='ts-fab-tab' id='ts-fab-facebook-below-10105' style='display: none;'>
    <div class='ts-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='88' id='grav-767b2f7561851b6132fed7bfe5e54d98-2' src='http://i.hizliresim.com/KqG0MR.png' style='' width='64'/></div>
    <div class='ts-fab-text'>
<div class='ts-fab-header'>
          <h4><a href='http://www.facebook.com/blog.sohbetche'>Sayfamızı; Beğen :)</a></h4></div>
        <div class='fb-follow' data-href='https://www.facebook.com/blog.sohbetche' data-show-faces='true' data-width='450'><span style='height: 100px; width: 450px;'><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FBlog.SohbetcHe&amp;width&amp;layout=standard&amp;action=like&amp;show_faces=true&amp;share=true&amp;height=200&amp;appId=333223803472203' style='border:none; overflow:hidden; height:100px;'/></span></div>Facebook Sayfamızıda Beğenmeyi Unutmayalım Lütfen :p

</div>
</div>
    <div class='ts-fab-tab' id='ts-fab-googleplus-below-10105' style='display: none;'>
    <div class='ts-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='88' id='grav-767b2f7561851b6132fed7bfe5e54d98-3' src='http://i.hizliresim.com/KqG0MR.png' style='' width='64'/></div>
    <div class='ts-fab-text'>
    <div class='ts-fab-header'>
    <h4><a href='https://plus.google.com/u/0/102333023600349452965?prsrc=2?rel=author'>Google Sayfamızıt;/a></h4>
    </div>

<style>a.koddostuc{-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;display: block;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM7rs5iZmUu_zBMqKWVtPUTN4fjk7RXk9xuDYgbFj0giNrl7HcH6WHtCVe2fkxH9wWOmvqGYKVYZ-ZBpYxz9wCH0aD1RfEmqn3YwSlEFSyRgm6BO4dM6NHnilhQ7N6pz_t6qB67hOLDJAe/s1600/cevreneekle.png);background-repeat: no-repeat;width: 125px;height: 24px;}a.koddostuc:hover{background-position: 0 -24px;}a.koddostuc:active {background-position: 0 -48px;}</style><a class='koddostuc' href='https://plus.google.com/u/0/+tolgag%C3%B6n%C3%BCl_Blog/posts' style='text-decoration: none;border:none;margin: 0px;padding: 0px;background-color: transparent;' target='_blank'/><a href='' style='font-family:verdana;font-size:12px;' target='_blank'>Google üzerinden de takip edebilirsiniz.</a>


    </div>
    </div>
    </div>

    <style>

    .ts-fab-wrapper {
        margin: 0 0 2em;
        clear: both;
        }
    .ts-fab-wrapper ul
        {
    list-style:none outside none;
        }

    .ts-fab-wrapper a {
        text-decoration: none !important;
        }

    .ts-fab-wrapper img {
        border: none !important;
        }

    .ts-fab-list {
        overflow: hidden;
        padding: 0 0 0 5px !important;
        margin: 0 !important;
        }

    .ts-fab-list li {
        display: block;
        float: left;
        list-style: none;
        margin: 0 5px 0 0 !important;
        }

.ts-fab-list li a:hover {
background-color: #F0F0F0;

        }

.ts-fab-list li a {
display: block;
line-height: 16px;
height: 16px;
padding: 8px 12px;
background-color: #FFFFFF;
border: 3px double #E9E9E9;
border-bottom: none !important;
text-decoration: none;
font-size: 13px;
color: #333;
font-weight: bold;
outline: 0;
text-shadow: none !important;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;


-webkit-transform: rotateX(5deg) rotateY(-0deg) rotateZ(0deg);
-moz-transform: rotateX(5deg) rotateY(-0deg) rotateZ(0deg);
-o-transform: rotateX(5deg) rotateY(-0deg) rotateZ(0deg);
transform: rotateX(5deg) rotateY(-0deg) rotateZ(0deg);
box-shadow: 5px 5px 0px 0px rgba(118, 124, 124, 0.5),10px 12px 0px 0px rgba(144, 146, 148, 0.35),inset 0px 0px 2px 1px rgba(196, 198, 199, 0.7);
-webkit-box-shadow: 7px 11px 2px 0px rgba(178, 200, 218, 0.5),14px 20px 2px 0px rgba(183, 190, 197, 0.35),inset 0px 0px 2px 1px rgba(165, 173, 179, 0.7);
-moz-box-shadow: 10px 10px 0px 0px rgba(20, 97, 146, 0.5),20px 20px 0px 0px rgba(21, 94, 150, 0.35),inset 0px 0px 2px 1px rgba(18, 62, 92, 0.7);

}

    .ts-fab-list li a:hover {
        color: #333;
        }

    .ts-fab-list li.active a {
        background-color: #0099B9;
        color: #fff;
        border-color: #E9E9E9;
        }

    .ts-fab-list li a {
        background-image: url(&#39;http://www.steamfeed.com/wp-content/plugins/fanciest-author-box_10-13-12/images/fab_tab_icons.png&#39;);
        }

    .ts-fab-list li.ts-fab-bio-link a {
        background-position: 8px 8px;
        background-repeat: no-repeat;
        padding-left: 27px;
        }

    .ts-fab-list li.ts-fab-bio-link.active a {
        background-position: -280px 8px;
        background-repeat: no-repeat;
        padding-left: 27px;
        }

    .ts-fab-list li.ts-fab-twitter-link a {
        background-position: 8px -42px;
        background-repeat: no-repeat;
        padding-left: 35px;
        }

    .ts-fab-list li.ts-fab-twitter-link.active a {
        background-position: -270px -42px;
        background-repeat: no-repeat;
        padding-left: 35px;
        }

    .ts-fab-list li.ts-fab-facebook-link a {
        background-position: 8px -92px;
        background-repeat: no-repeat;
        padding-left: 23px;
        }

    .ts-fab-list li.ts-fab-facebook-link.active a {
        background-position: -284px -92px;
        background-repeat: no-repeat;
        padding-left: 23px;
        }

    .ts-fab-list li.ts-fab-googleplus-link a {
        background-position: 8px -142px;
        background-repeat: no-repeat;
        padding-left: 30px;
        }

    .ts-fab-list li.ts-fab-googleplus-link.active a {
        background-position: -276px -142px;
        background-repeat: no-repeat;
        padding-left: 30px;
        }

    .ts-fab-list li.ts-fab-linkedin-link a {
        background-position: 8px -242px;
        background-repeat: no-repeat;
        padding-left: 30px;
        }

    .ts-fab-list li.ts-fab-linkedin-link.active a {
        background-position: -276px -242px;
        background-repeat: no-repeat;
        padding-left: 30px;
        }

    .ts-fab-custom-link a {
        background-image: none !important;
        }

    .ts-fab-widget .ts-fab-list li a, .ts-fab-icons-only .ts-fab-list li a {
        text-indent: -9999em;
        padding: 8px 12px !important;
        }

    .ts-fab-widget .ts-fab-list li.ts-fab-bio-link a, .ts-fab-icons-only .ts-fab-list li.ts-fab-bio-link a {
        width: 4px;
        }

    .ts-fab-widget .ts-fab-list li.ts-fab-twitter-link a, .ts-fab-icons-only .ts-fab-list li.ts-fab-twitter-link a {
        width: 12px;
        }

    .ts-fab-widget .ts-fab-list li.ts-fab-googleplus-link a, .ts-fab-icons-only .ts-fab-list li.ts-fab-googleplus-link a {
        width: 8px;
        }

    .ts-fab-widget .ts-fab-list li.ts-fab-linkedin-link a, .ts-fab-icons-only .ts-fab-list li.ts-fab-linkedin-link a {
        width: 8px;
        }

    .ts-fab-widget .ts-fab-list li.ts-fab-facebook-link a, .ts-fab-icons-only .ts-fab-list li.ts-fab-facebook-link a {
        width: 0;
        }

    .ts-fab-widget .ts-fab-list li.ts-fab-latest-posts-link a, .ts-fab-icons-only .ts-fab-list li.ts-fab-latest-posts-link a {
        width: 4px;
        }

    .ts-fab-widget .ts-fab-list li.ts-fab-custom-link a, .ts-fab-icons-only .ts-fab-list li.ts-fab-custom-link a {
        text-indent: 0 !important;
        }

    .ts-fab-tab {
        display: none;
        border: 6px double #E9E9E9;
        padding: 12px;
        background: #fff;
        min-height: 64px;
        overflow: hidden;


-webkit-transform: rotateX(5deg) rotateY(-0deg) rotateZ(0deg);
-moz-transform: rotateX(5deg) rotateY(-0deg) rotateZ(0deg);
-o-transform: rotateX(5deg) rotateY(-0deg) rotateZ(0deg);
transform: rotateX(5deg) rotateY(-0deg) rotateZ(0deg);
box-shadow: 5px 5px 0px 0px rgba(118, 124, 124, 0.5),10px 12px 0px 0px rgba(144, 146, 148, 0.35),inset 0px 0px 2px 1px rgba(196, 198, 199, 0.7);
-webkit-box-shadow: 7px 11px 2px 0px rgba(178, 200, 218, 0.5),14px 20px 2px 0px rgba(183, 190, 197, 0.35),inset 0px 0px 2px 1px rgba(165, 173, 179, 0.7);
-moz-box-shadow: 10px 10px 0px 0px rgba(20, 97, 146, 0.5),20px 20px 0px 0px rgba(21, 94, 150, 0.35),inset 0px 0px 2px 1px rgba(18, 62, 92, 0.7);
        }

    .ts-fab-tab:first-child {
        display: block;
        }

    .ts-fab-widget .ts-fab-tab {
        padding: 8px;
        }

    .ts-fab-avatar {
        display: block;
        float: left;
        width: 64px;
        height: 64px;
        }

    .ts-fab-no-float .ts-fab-avatar {
        float: none;
        margin: 0 0 12px;
        }

    .ts-fab-avatar img {
        display: block;
        border: none !important;
        }

    .ts-fab-text {
        margin-left: 76px;
        line-height: 1.9;
        }

    .ts-fab-no-float .ts-fab-text {
        margin-left: 0;
        }

    .ts-fab-header {
        margin-bottom: 10px;
        }

    .ts-fab-text h4 {
        clear: none;
        font-size: 18px;
        line-height: 1 !important;
        font-weight: bold;
        margin: 0 0 0.2em !important;
        line-height: 1;
        padding: 0;
        }

    .ts-fab-description {
        font-size: 12px
        }

    .ts-fab-follow {
        margin-top: 10px;
        }

    .ts-fab-latest {
        margin: 0 !important;
        padding: 0 !important;
        }

    .ts-fab-latest li {
        list-style: none !important;
        line-height: 1.1;
        margin: 0 0 0.6em !important
        }

    .ts-fab-latest li span, .ts-fab-twitter-time {
        font-size: 12px;
        }

    .latest-see-all {
        font-weight: normal;
        }

    .ts-fab-wrapper iframe {
        margin-bottom: 0 !important;
        }

    body.rtl .ts-fab-avatar {
        float: right;
        }

    body.rtl .ts-fab-text {
        margin-left: 0;
        margin-right: 76px;
        }

    body.rtl .ts-fab-list {
        padding: 0 5px 0 0 !important;
        }

    body.rtl .ts-fab-list li {
        float: right;
        margin: 0 0 0 5px !important;
        }
    </style>
</div>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='share-leonyli'>
<div class='addthis_toolbox addthis_default_style '>
<span class='addthis-tooltip'>Bu yazıyı; Payla�</span>
<form action='/search' id='search' method='get'>
<input id='q' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value=' Arama Yap...'/></form>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' style='background:#3b5998;' target='_blank' title='Bagikan ke Facebook'>Facebook</a>
<a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' style='background:#d64136;' target='_blank' title='Bagikan ke +Google'>+Google</a>
<a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;amp;text=&quot; + data:post.title + &quot;&amp;amp;via=LeonyLi_com&amp;amp;lang=id&quot;' rel='nofollow' style='background:#19bfe5;' target='_blank' title='Bagikan ke Twitter'>Twitter</a>
<a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' style='background:#006699;' target='_blank' title='Bagikan ke Digg'>Digg</a>
<a expr:href='&quot;http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' style='background:#ff4006;' target='_blank' title='Bagikan ke Reddit'>Reddit</a>
<script>
//<![CDATA[
var uri = window.location.href;
var ttle = document.title;
document.write("<a href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' target='_blank' rel='nofollow' style='background:#ffbf00;' title='Bagikan ke LintasME'>Lintaskan</a>");
//]]>
</script>
<div class='clear'/>
</div></div>
</b:if>

Sonra css kodlarımız eklemek için bu kodu buluyoruz ]]></b:skin> hemen üstüne aşağıdaki kodları ekliyoruz.

.addthis_toolbox {
width: 96.5%;
position: relative;
background: rgba(209, 210, 211, 0);
border: none;
box-shadow: none;
margin-left: -2px;
padding: 5px 10px;
border-radius: 3px;
margin-top: 20px;

}
.addthis_toolbox:hover .addthis-tooltip {
visibility: visible;
opacity: 1;
margin-bottom: 10px;

}

#search input[type="text"]:hover, #search input[type="text"]:focus {
width: 202px;
border: none;
box-shadow: none;
border-radius: 3px;
padding-left: 35px;
}
#share-leonyli a {

position: relative;
float: left;
box-shadow: none;
border-radius: 3px;
display: block;
color: #fafafa;
padding: 5px;
margin: 0px 3px 0px 0px;
border: none;
box-shadow: none;


}

.addthis_toolbox .addthis-tooltip {
display: block;
width: 160px;
padding: 5px 10px;
position: absolute;
bottom: 100%;
left: 10px;
z-index: 77;
margin-bottom: 30px;
background: #f5696c;
text-transform: none;
font: 18px Maven Pro;
color: white;
text-align: center;
box-shadow: none;
border-radius: 3px;
opacity: 0;
visibility: hidden;
transition: all 0.16s ease-out;

}
.addthis_toolbox .addthis-tooltip:before {
content: "";
position: absolute;
bottom: -10px;
left: 10px;
border-top: 10px solid #f5696c;
border-right: 20px solid transparent;
width: 0;
height: 0;
line-height: 0;


}
#share-leonyli {
font-size: 14px;
}
input, textarea, keygen, select, button, isindex {
margin: 0em;
font: -webkit-small-control;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
}
input, input[type="password"], input[type="search"], isindex {
-webkit-appearance: textfield;
padding: 1px;
background-color: white;
border: 2px inset;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
cursor: auto;
}
#search input[type="text"] {
background: #414042 url("http://1.bp.blogspot.com/-qvnR0Ki46YE/Utcvn_fp8kI/AAAAAAABGzs/OiPE6KlQFbQ/s1600/Search.png")no-repeat center left 6px;
width: 110px;
font-size: 13px;
color: #fff;
padding: 10px 10px 10px 25px;
transition: all 0.7s ease-in-out;
margin: -4px -4px -4px -4px;
z-index: 9;
position: absolute;
border: none;
border-radius: 3px;
right: -15px;
}
.addthis_toolbox .addthis-tooltip:before {
content: "";
position: absolute;
bottom: -10px;
left: 10px;
border-top: 10px solid #f5696c;
border-right: 20px solid transparent;
width: 0;
height: 0;
line-height: 0;
}

En son olarak javascript kodlarını ekliyices busefer </head> kodunu buluyoruz ve kodları hemen üstüne ekliyoruz.

 <script type='text/javascript'>
/*<![CDATA[*/
jQuery(document).ready(function(a){a(".ts-fab-tabs > div").hide();a(".ts-fab-tabs > div:first-child").show();a(".ts-fab-list li:first-child").addClass("active");a(".ts-fab-list li a").click(function(){a(this).closest(".ts-fab-wrapper").find("li").removeClass("active");a(this).parent().addClass("active");var b=a(this).attr("href");if(b.indexOf("#")!=-1){currentTabExp=b.split("#");b="#"+currentTabExp[1]}a(this).closest(".ts-fab-wrapper").find(".ts-fab-tabs > div").hide();a(b).show();return false})});
/*]]>*/
</script>
<script type='text/javascript'>
/*<![CDATA[*/
// Twitter
(function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs");
// Google + (plus)
(function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
/*]]>*/
</script>

Continue Reading