• Posted by : Unknown 6 Nisan 2012 Cuma


    Yazı Altına Kalpli Paylaş Butonları Eklentisi

    Bu eklentimizde, blogger blogunuzda yayınladığınız yazılarınızın/konularınızın altında, kalp şeklinde paylaş butonlarının nasıl ekleneceğini anlatacağız..
    Oldukça şık bir görüntüye sahip olan Yazı Altına Kalpli Paylaş Butonları Eklentisini blogger blogunuza eklemek için aşağıdaki adımları takip edin , ön izlemesini aşağıdaki demo linkinden görebilirsiniz..

    Aşağıdaki kodumuzu buluyoruz
    </head>
    Hemen üstüne aşağıdaki kodlarımızı ekliyoruz..

    <style type='text/css'>
    /* Yazı Altına Kalpli Paylaş Butonları Eklentisi eklentileri.blogspot.com */
    ul.bbelog-social { list-style:none; margin:15px auto;display:inline-block; }
    ul.bbelog-social li { display:inline; float:left; background-repeat:no-repeat; }
    ul.bbelog-social li a { display:block; width:55px; height:55px; padding-right:10px; position:relative; text-decoration:none; }
    ul.bbelog-social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
    ul.bbelog-social li.bbelog-facebook { background-image:url(&quot;http://tools.adityawebs.com/images/facebook.png&quot;); }
    ul.bbelog-social li.bbelog-twitter { background-image:url(&quot;http://tools.adityawebs.com/images/twitter.png&quot;); }
    ul.bbelog-social li.bbelog-google { background-image:url(&quot;http://tools.adityawebs.com/images/google.png&quot;); }
    ul.bbelog-social li.bbelog-stumbleupon { background-image:url(&quot;http://tools.adityawebs.com/images/stumble.png&quot;); }
    ul.bbelog-social li.bbelog-delicious { background-image:url(&quot;http://tools.adityawebs.com/images/delicious.png&quot;); }
    ul.bbelog-social li.bbelog-reddit { background-image:url(&quot;http://tools.adityawebs.com/images/reddit.png&quot;); }
    ul.bbelog-social li.bbelog-technorati { background-image:url(&quot;http://tools.adityawebs.com/images/technorati.png&quot;); }
    /* Yazı Altına Kalpli Paylaş Butonları Eklentisi eklentileri.blogspot.com
    </style>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
    <script type='text/javascript'>
    // Yazı Altına Kalpli Paylaş Butonları Eklentisi eklentileri.blogspot.com
    $(document).ready(function () {
    $(&quot;#bbelog-jqueryanime li&quot;).each(function () {
    $(&quot;a strong&quot;, this).css(&quot;opacity&quot;, &quot;0&quot;);
    });
    $(&quot;#bbelog-jqueryanime li&quot;).hover(function () {
    $(this).stop().fadeTo(500, 1).siblings().stop().fadeTo(500, 0.2);
    $(&quot;a strong&quot;, this).stop().animate({
    opacity: 1,
    top: &quot;-10px&quot;
    }, 300);
    }, function () {
    $(this).stop().fadeTo(500, 1).siblings().stop().fadeTo(500, 1);
    $(&quot;a strong&quot;, this).stop().animate({
    opacity: 0,
    top: &quot;-1px&quot;
    }, 300);
    });
    });
    // Yazı Altına Kalpli Paylaş Butonları Eklentisi eklentileri.blogspot.com
    </script>

    Şimdi bu kodumuzu buluyoruz..
    <div class='post-footer'>
    Bulduğumuz bu kodun altına , altta yer alan kodları ekliyoruz..DEMO

    <style type='text/css'>
    <!--
    .style2 {font-size: smaller}
    -->
    </style>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <ul class='bbelog-social' id='bbelog-jqueryanime'>
    <li class='bbelog-facebook'>
    <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a>
    </li>
    <li class='bbelog-twitter'>
    <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a>
    </li>
    <li class='bbelog-google'>
    <a expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Add this to Google Bookmarks'><strong>Google Bookmarks</strong></a>
    </li>
    <li class='bbelog-stumbleupon'>
    <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a>
    </li>
    <li class='bbelog-delicious'>
    <a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a>
    </li>
    <li class='bbelog-reddit'>
    <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a>
    </li>
    <li class='bbelog-technorati'>
    <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a></li>
    </ul><br/>

    </b:if>




    <<< Bu Yazı için Arama Sonuçları  >>>

    Yazı Altına Kalpli Paylaş Butonları Eklentisi , Paylaş Butonları Eklentisi , Konu altına Paylaş Butonu , Paylaş Butonları Ekle , Konu içene Paylaş Butonları , Facebook Twitter Paylaş Butonu


    Leave a Reply

    Subscribe to Posts | Subscribe to Comments

  • Copyright © 2013 - Hyperdimension Neptunia

    Blogger Ve Wordpress Tema Arşivi - Powered by Blogger - Designed by Johanes Djogan