Wednesday, 31 July 2013

Membuat variasi widget jejaring sosial CSS3 dengan ikon warna hitam



Widget yang satu ini selain sangat atraktif juga memiliki desain yang elegan. Widget ini murni menggunakan CSS3 sehingga loading cepat dan ditambah beberapa flatform jejaring sosial terkenal seperti facebook, twitter dan yang lainnya. Dengan background ikon warna hitam menambah sempurna bagi kebanyakan template blogger. Berharap anda menyukai dan menambahkannya di blog..:)


LANGKAH-LANGKAHNYA:

  • Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
  • Kemudian pilih -> Template -> Edit HTML
  • Cari tag/kode ]]></b:skin> tekan  CTRL+F untuk memudahkan pencarian
  • Kopi dan pastekan kode CSS berikut tepat diatas kode ]]></b:skin> 

  • Kemudian cari lagi kode <data:post.body/>
  • Pastekan kode berikut setelah kode <data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='font-size: 22px;'><b>Anda Menyukai Postingan di Atas? Silahkan di share...</b></div>
    <ul class='bssocial' id='bscssanimation'>
    <li class='bsfacebook'>
    <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='bstwitter'>
    <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='bsredit'>
<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow'><strong>Reddit</strong></a>
    </li>
    <li class='bstechnorati'>
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Technorati</strong></a>
    </li>
    <li class='bsstumbleupon'>
    <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='bsdig'>
      <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='bslinkedin'>
    <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 class='bsdelicious'>
    <a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>Delicious</strong></a>
    </li>
    </li>
    </ul>
    </b:if>   
  • Simpan template, selesai...

No comments:

Post a comment

Silahkan Komen Rider,