Cara Memasang Widget Social Media Keren

Memasang Widget social media pada blog memang perkara hal yang mudah sekali, tetapi kita pasti akan memilih widget tersebut cocok atau tidak berada pada blog kita.

Diluar sana banyak sekali tutorial memasang widget sosial media, benarkan? tetapi pilihannya hanya satu saja, nah kali ini fikrisuka akan berbagi Cara Memasang Widget Social Media Keren karena menurut saya widget ini memang keren.

Mungkin untuk pemasangannya tidak terlalu sulit, alias sangat mudah sekali, karena hanya tinggal memasukkan kode-kode nya. Widget yang saya share kali ini banyak sekali anda lihat diblog-blog tutorial atau download template blogger.

Sebelum anda melakukan langkah-langkah ini sebaikknya sobat backup template sobat terlebih dahulu, agar apabila ada kesalahan sobat bisa mengembalikannya lagi ke tampilan semula. Jika sudah mari kita lanjutkan tutorial memasang widget social media keren ini.

1. Widget Social Media 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/AVvXsEhPKgHnMh86cEjbOvINgNRsiWtwcqqCEC9i0qEWl4155eeFJSqe33XYI0M3oVZjIl0Wtp7tm8V0pE4SvFaUx5CwTc7SZjNWVNavghmP7Py0TU9dBHOJiCo1NnS1Hl2Tz9oaJv8rMrjGuRCU/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>

Terakhir, lihat tampilan blog sobat, apakah widgetnya terpasang dengan baik dan cocok, jika cocok, selamat ya.

2. Widget Metro UI  

Untuk pemasangan sobat fikrisuka bisa perhatikan kode-kode dibawah ini.

1. Pertama pergi ke menu Template - Edit Html

2. Masukkan kode dibawah ini sebelum </head>

<link href='https://sites.google.com/site/samsurysites/nav-metro-ui-1/Nav Menu.css' rel='stylesheet' type='text/css'/>
<link href='https://sites.google.com/site/samsurysites/nav-metro-ui-1/Nav Metro Modal Dialog.css' rel='stylesheet' type='text/css'/>
<script src="https://sites.google.com/site/samsurysites/nav-metro-ui-1/Modal Dialog.js" type="text/javascript"/>
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

3. Cari kode </body> biasanya ini berada paling bawah, masukkan kode dibawah ini diatas kode tersebut

<script src="https://sites.google.com/site/samsurysites/nav-metro-ui-1/Modal Dialog Body.js" type="text/javascript"/>

3. Pergi ke menu Tata Letak - Tambah Gadet - Html/JavaScript
4. Masukkan kode dibawah ini

<script src="https://sites.google.com/site/samsurysites/nav-metro-ui-1/Modal Dialog Body.js" type="text/javascript"/>
<div class="samsury-metronav">
<div class="tile-bt-large solid-coral shadow-black margin-5 floatleft SamsuryMetroMenu" data-navid="samsury-nav">
<div class="md-modal md-effect-13" id="modal-13">
<div class="md-content">
<h3>
MENU <a class="md-close" href="">×</a></h3>
<div>
Silahkan Ganti Dengan Menu Di Blog Anda <br />
( Tapi Ingat Jangan Taruh Menu Makanan Ya )</div>
</div>
</div>
<button class="md-trigger" data-modal="modal-13"><i class="icon-th-large icon-3x"></i></button>
<br />
<div class="md-overlay">
</div>
</div>
</div>
<div class="tile-bt solid-darkblue shadow-black margin-5 floatleft SamsuryMetroMenu" data-navid="samsury-nav2">
<div class="md-modal md-effect-8" id="modal-8">
<div class="md-content">
<h3>
<i class="icon-facebook"></i>
FACEBOOK <a class="md-close" href="">×</a></h3>
<div>
Jika perlu ganti tulisan ini dengan widget Fanpage Facebook Anda</div>
</div>
</div>
<button class="md-trigger" data-modal="modal-8"><i class="icon-facebook icon-3x"></i></button>
<br />
<div class="md-overlay">
</div>
</div>
<div class="tile-bt solid-red shadow-black margin-5 floatleft SamsuryMetroMenu" data-navid="samsury-nav2">
<div class="md-modal md-effect-1" id="modal-1">
<div class="md-content">
<h3>
<i class="icon-envelope"></i> CONTACT ME <a class="md-close" href="">×</a></h3>
<div>
Isilah dengan widget contact me</div>
</div>
</div>
<button class="md-trigger" data-modal="modal-1"><i class="icon-envelope icon-3x"></i></button>
<br />
<div class="md-overlay">
</div>
</div>
<div class="tile-bt-large solid-purple shadow-black margin-5 floatleft SamsuryMetroMenu" data-navid="samsury-nav">
<div class="md-modal md-effect-4" id="modal-4">
<div class="md-content">
<h3>
<i class="icon-group"></i> FOLLOW <a class="md-close" href="">×</a></h3>
<div>
Anda bisa mengganti tulisan ini dengan Follower Blog Anda
        </div>
</div>
</div>
<button class="md-trigger" data-modal="modal-4"><i class="icon-group icon-3x"></i></button>
<br />
<div class="md-overlay">
</div>
</div>
<div class="tile-bt solid-green shadow-black margin-5 floatleft SamsuryMetroMenu" data-navid="samsury-nav2">
<div class="md-modal md-effect-15" id="modal-15">
<div class="md-content">
<h3>
<i class="icon-google-plus"></i> CIRCLE <a class="md-close" href="">×</a></h3>
<div>
Google menyediakan widget ini, silakan pasang di sini</div>
</div>
</div>
<button class="md-trigger" data-modal="modal-15"><i class="icon-google-plus icon-3x"></i></button>
<br />
<div class="md-overlay">
</div>
</div>
<div class="tile-bt solid-yellow shadow-black margin-5 floatleft SamsuryMetroMenu" data-navid="samsury-nav2">
<div class="md-modal md-effect-11" id="modal-11">
<div class="md-content">
<h3>
<i class="icon-user"></i> ABOUT ME<a class="md-close" href="">×</a></h3>
<div>
Aku Hanyalah seorang Blogger yang ingin mencoba mencoba dan terus mencoba dengan hal2 yang baru</div>
</div>
</div>
<button class="md-trigger" data-modal="modal-11"><i class="icon-user icon-3x"></i></button>
<br />
<div class="md-overlay">
</div>
</div>

Terakhir lihat pada template anda, dan coba anda klik satu persatu icon social medianya, dan lihat juga apa yang akan terjadi.

Jika pada widget-widget diatas tidak ada yang sobat suka, sobat fikrisuka bisa mencoba dengan widget keren dibawah ini.

3. Widget Paling Keren Sedunia

Langkah-langkah pemasang widget social media keren ini

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. Simpan, dan lihat hasilnya!

Mungkin cukup sampai disini saja tentang kumpulan widget sosial media yang keren ini, semoga dengan widget keren ini bisa membuat blog anda lebih menarik dan keren.

Apabila ada kekurangan saya mohon maaf. Jika bermanfaat jangan lupa share artikel ini ya sobh. Semoga bermanfaat deh pokoknya.