Widget Sharing Social Dibawah Post Blogger


  • Pergi ke Blogger.com >> Situs Anda.
  • Klik Template >> Edit HTML.
  • Sekarang Anda baru masuk dalam Blogger HTML Editor tekan CTRL+F untuk mencari code ]]> </ b: skin>
  • Pastekan Kode dibawah ini di atas kode ]]> </ b: skin>

  • ul.social_TempatBlogging {
    list-style:none;
    display:inline-block;
    margin:15px auto;
    }
    ul.social_TempatBlogging li {
    display:inline;
    float:left;
    background-repeat:no-repeat;
    }
    ul.social_TempatBlogging li a {
    display:block;
    width:50px;
    height:50px;
    padding-right:10px;
    position:relative;
    text-decoration:none;
    }
    ul.social_TempatBlogging li a strong {
    font-weight:400;
    position:absolute;
    left:20px;
    top:-1px;
    color:#fff;
    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);
    padding:3px;
    }
    ul.social_TempatBlogging li.abfacebook {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtJx0lpkbWSs9dDBf_u6hJS9iFtzPH5S4QrWcijWxtMAtFvcIp9jPCVgiVmLB6Mwbbv6MabHxm15Jxfv6N8_C3uQhC-KeeS8grBCLJl4s8ygrYVLeIBvaqElMB9ocTFWb2iV1h82J-ni9M/s1600/TempatBlogging-facebook-icon.png);
    }
    ul.social_TempatBlogging li.abtwitter {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpZjOCxOJsI9uFmXMxVFk7DGzKcp6yZhedAqX3ApWQlVE7ry5ydQGB5hxQ9Q9m9c1eA2VSlhU2y5DGimF9NRrVljAH5SAEUW2dk8tKjLB4Xy5gigA9OJrbqXIkuvsKISIPHBFQxVQzREve/s1600/TempatBlogging-twitter-icon.png);
    }
    ul.social_TempatBlogging li.abgoogleplus {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiotvsg5c1D7oU7UelF1LUJbHsBjDYP_v2SIM56mgl3fAD_PVBWKhnsH6l5KGTVWoP2S_mXF_WljFt80fbbM8_BJAI2wUG77UAaT9We6LKumy_I9plDrHyaDlBsViE6CFzDKfbhJjxc8WCa/s1600/TempatBlogging-google-icon.png);
    }
    ul li.abpinterest {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpuZSXeOg4e2qAQQaiqumOGKxoWmn7hsC3f2Xc1hGQmt4WrYIu16MWMA0sQ2By344Sv7T1O83qESxVcYWzFzpWRG361-FdyFbb_gtQsDoWjGigiqgIt8WxkL360hc9o8_iesRTMwwhUTs0/s1600/TempatBlogging-Pinterest-icon.png);
    }
    ul.social_TempatBlogging li.abstumbleupon {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuwdLDeH3u6UzcxLzYom2sYW7g0GxPM7wC5W4tw7blFcxY3sD5-uJXo2YBMT5xDdfCv00nxaLsq7_vXL2ZuII8Rway0dyTp0PC2Vt2Ws1P7IYJxRUY0tVPW5tWcON8RWYrXWe-3_yCaUUE/s1600/TempatBlogging-StumbleUpon-icon.png);
    }
    ul.social_TempatBlogging li.abdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5Jw8ODGgBGhr-__Rpg_7oyXU9Vghm9sRE7bz0Yu8ZIzW9NwKbDrUGb7nnsYV_p1sHGxGlds5F-Xmxh9EPiXSW0VkENjLjyqnVSNAh4D0ZKtPhCfVDb3iBofZEaeKfVbGUPO6Vd6ujXIT5/s1600/TempatBlogging-Digg-icon.png);
    }
    ul.social_TempatBlogging li.ablinkedin {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdr4UljxFoiErtW9daJwd07zLxA8LB3AmMv4XqoZ4dnbphnrhpbd1ZXYzIDckKwAWFockcuLq2CP5U4AgL9s23P-OrHdZigJvCXN4RII9z2Y6jRIusOSm9Mbrlh-pF96lneLV8CSC1LX70/s1600/TempatBlogging-Linkedin-icon.png);
    }
    #animation_TempatBlogging:hover li {
    opacity:0.2;
    }
    #animation_TempatBlogging li {
    -webkit-transition-property:opacity;
    -webkit-transition-duration:500ms;
    -moz-transition-property:opacity;
    -moz-transition-duration:500ms;
    }
    #animation_TempatBlogging li a strong {
    opacity:0;
    -webkit-transition-property:opacity, top;
    -webkit-transition-duration:300ms;
    -moz-transition-property:opacity, top;
    -moz-transition-duration:300ms;
    }
    #animation_TempatBlogging li:hover {
    opacity:1;
    }
    #animation_TempatBlogging li:hover a strong {
    opacity:1;
    top:-10px;
    }
         5. Cari tag <data:post.body/> dengan menggunakan Ctrl + F 
         6. Paste kode di bawah Sebelum tag <data:post.body/>

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div style='font-size: 22px;'><b>Share this article with your friends.</b></div>
        <ul class='social_TempatBlogging' id='animation_TempatBlogging'>
        <li class='abfacebook'>
        <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'><strong>Facebook</strong></a>
        </li>
        <li class='abtwitter'>
        <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
        </li>
        <li class='abgoogleplus'>
    <a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>
        </li>
        <li class='abpinterest'>
    <a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>
        </li>
        <li class='abstumbleupon'>
        <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>
        </li>
        <li class='abdig'>
          <a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><strong>Dig</strong></a>
        </li>
        <li class='ablinkedin'>
        <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>
        </li>
        </ul>
    </b:if>
          7. Simpan Template Anda.

    0 komentar: