Memasang Widget Social Media Keren

Mungkin salah satu trik agar orang-orang mengenal dengan identitas diri kita dalam dunia maya yaitu dengan mencantumkan beberapa akun sosial media kita ya diantaranya seperti Facebook, Twitter, Instagram dan yang lainnya. 
Nah bagaimana jika kita ingin memasang beberapa akun sosial media kita ke dalam sebuah website yang kita miliki?

Kali ini saya akan memberikan cara bagaimana menambahkan akun sosial media kita ke dalam website yang kita miliki dan dengan tampilan yang sangat menarik para pengunjung dengan tampilan yang sangat keren dan indah. Mari kita simak penjelasannya.

Hal yang terpenting dalam penambahan script apapun dalam website kita hendaknya kita selalu menjaga semua kode-kode yang pada awalnya baik-baik saja dengan cara membackup nya tapi jika kalian sudah yakin tinggal eksekusi saja langkah-langkahnya

1. Widget Social Media ala Fastest Magz

Hasil Widget Social Media ala Fastest Magz

1. Untuk memasang widget ini, silahkan masuk ke-blogger.
2. Pilih Menu Template
3. Edit HTML
4. Masukkan kode dibawah ini, tepat diatas kode </style> atau ]]></b:skin>

.social-box{width:280px;padding:10px 9px;margin:0;overflow:hidden;background-color:#f2f2f2;border:1px solid #f2f2f2;text-align:center;}a.social-item-box{display:block;color:#4b4b4b;float:left;width:64px;overflow:hidden;margin:0;padding:4px 0;background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfWeNBNHF62_-J9hTxfzYByHeCTEx3vY2zicT1J68V3jfCT0PXH49A7ICrwT9ANwHvbW5WoxHkoOwvPLZZO7fgW_9VId6_mBct0WYIk_aRlqhFlLFLxHaztEnWgySxJht0G4LlZQJd1MpN/s1600/social-icon.png");background-repeat:no-repeat;}.social-item-outer{background:#f8f8f8;margin:0 0 0 8px;overflow:hidden;float:left;display:inline-block;}.social-item-outer:hover{background:#fff;}.social-item-outer:nth-child(1):hover{box-shadow:0px -2px 0px #E50700 inset;}.social-item-outer:nth-child(2):hover{box-shadow:0px -2px 0px #0084C5 inset}.social-item-outer:nth-child(3):hover{box-shadow:0px -2px 0px #6CAC00 inset;}.social-item-outer:nth-child(4):hover{box-shadow:0px -2px 0px #00C3B7 inset;}.social-item-outer:hover{box-shadow:0px -2px 0px #FF8168 inset;}.social-item-outer:first-child{margin-left:0px;}.facebook-box{background-position:7px 4px;}.rss-box{background-position:-73px 4px;}.twitter-box{background-position:-153px 4px;}.googleplus-box{background-position:-233px 4px;}.counter{margin:60px 0 0 0;font-family:'Oswald',Verdana,Sans-serif;line-height:1.2em;font-size:16px;font-weight:500;}.social-title{color:#888;font-size:11px;}

5. Simpan Template

6. Pindah ke menu Tata Letak

7. Tambah Gadget baru.

8. Pilih HTML/JavaScript

9. Masukkan Kode dibawah ini

<div class='social-box'>

   <div class='social-item-outer'>

   <a class='social-item-box facebook-box' href='http://www.facebook.com'>  

     <div class='counter'>

    76.098

  </div>

  <span class='social-title'>Fans</span>

   </a>

   </div>

   <div class='social-item-outer'>

   <a class='social-item-box twitter-box' href='http://twitter.com'>

     <div class='counter'>

    6.987

  </div>

  <span class='social-title'>Followers</span>

   </a>

   </div>

   <div class='social-item-outer'>

   <a class='social-item-box googleplus-box' href='http://plus.google.com'>

     <div class='counter'>

    4.987

  </div>

  <span class='social-title'>Followers</span>

   </a>

   </div>

   <div class='social-item-outer'>

   <a class='social-item-box rss-box' href='/feeds/posts/default'>

     <div class='counter'>

    398

  </div>

  <span class='social-title'>Subcribers</span>

   </a>

   </div>

    </div>

Simpan, dan lihat hasil nya dengan merefresh website kalian.

Maka widget akan terpasang dengan model pada contoh gambar diatas.

DEMO

2. Widget Social Media Keren

Contoh Widget Social Media ala Keren

1. Loggin blogger.com
2. Langsung menuju Tata letak - Tambah Gadget - Html/Javascript
3. Masukkan kode dibawah ini

<style type='text/css'>
.socialize-panel &gt; div{display:block;text-align:center}.socialize-panel &gt; div a{display:inline-block;margin:0 3px;color:#fff;width:65px;margin-bottom:15px}.socialize-panel &gt; div a span{display:block;background:#444;color:#fff;margin-bottom:1px;font-size:18px;font-weight:700;padding:6px 0}.socialize-panel &gt; div a:hover span{background:#444;color:#FACE0C}.socialize-panel &gt; div a i{display:block;background:#4667AE;font-size:10px;color:#FFF;padding:4px 0;font-style:normal}.socialize-panel p{font-size:13px;margin:0}
</style>
<div class="socialize-panel">
<div>
<div class="social-like">
<a href='http://www.facebook.com/multiajaib' rel='nofollow' target='blank' ><span>2.6k</span><i style="background: #4667AE;">Facebook</i></a>
<a href='http://www.twitter.com/sukafikri' rel='nofollow' target='blank'><span>974</span><i style="background: #009BDA;">Twitter</i></a>
<a href='http://plus.google.com/+MunawirAlfikri' rel='nofollow' target='blank' ><span>403</span><i style="background: #DC4B39;">Google+</i></a>
<a href='http://feeds.feedburner.com/Fikrisuka' rel='nofollow' target='blank' ><span>832</span><i style="background: #FFE620;">RSS Feed</i></a>
</div>
</div><!-- END .socialize-panel --></div>

4. Lalu simpan dan lihat hasil, maka akan sama seperti contoh gambar diatas

Terima kasih anda telah membaca artikel Memasang Widget Social Media Keren. Jika anda kurang paham silahkan berkomentar dibawah & Ada baiknya jika artikel ini bermanfaat Share ke saudara atau teman anda.

Related Posts: