Widget Sosial Media Petak Umpet

Sosial Media Petak Umpet

Sosial media petak umpet sebenarnya adalah button atau tombol koneksi pada beberapa sosial media seperti facebook, twitter, google plus, dan lain sebagainya. Jadi tombol ini hanya tombol koneksi yang dilengkapi dengan efek hover icon yang bisa nongol dan sembunyi, sehingga tampilannya seperti permainan petak umpet. Sebenarnya saya bingung mau menamakan widget ini apa, jadi saya kasih nama widget sosial media petak umpet aja seperti tampilannya ketika tersentuh cursor. Widget ini juga tidak memberatkan loading dan hanya dibuat dengan css. Baiklah, sekarang mari kita bahas cara membuat sosial media petak umpet.

Cara membuat widget sosial media petak umpet

• Log in ke blogger
• Click Template
• Click Edit HTML
• Masukkan kode css berikut di atas kode ]]></b:skin> atau </stryle>

#petakumpet-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}
#petakumpet-nav li {float: left;}
#petakumpet-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;}
#petakumpet-nav li a span.ngintip {font: bold 17px/61px &quot;Arial&quot;;color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#petakumpet-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#petakumpet-nav li a:hover {cursor: pointer;}
#petakumpet-nav li a:hover img {top: -85px;}
#petakumpet-nav li a:hover .ngintip {top: 85px;}
#petakumpet-nav li:nth-child(1) a {background: #4A5E99;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}
#petakumpet-nav li:nth-child(2) a {background: #00BFFF;}
#petakumpet-nav li:nth-child(3) a {background: #848484;}
#petakumpet-nav li:nth-child(4) a {background: #F78181;}
#petakumpet-nav li:nth-child(5) a {background: #FAAC58;border-radius: 0 5px 5px 0;border-right: 1px solid #555;}

• Selanjutnya masukkan kode html berikut di atas kode <data:post.body/> atau di bawah <div class='post-footer'>. Silahkan saja sesuaikan, karena beberapa template berbeda peletakannya. Pasang saja diantara dua kode tersebut.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='margin-top:-80px; margin-bottom:-60px;'>
<div id='petakumpet-nav'>
<li><a href='http://facebook.com/mbah.dinan' rel='nofollow' target='_blank'><span class='ngintip'> Facebook</span><img alt='facebook' src='http://i745.photobucket.com/albums/xx97/bengkelblogger/facebook_zpse5173059.png' title='join on facebook'/></a></li>
<li><a href='http://twitter.com/mbahdinan' rel='nofollow' target='_blank'> <span class='ngintip'> Twitter</span><img alt='twitter' src='http://i745.photobucket.com/albums/xx97/bengkelblogger/twitter_zps283386b2.png' title='join on twitter'/>
</a></li>
<li><a href='http://plus.google.com/105508807351227737385' rel='nofollow' target='_blank'> <span class='ngintip'> Google+</span><img alt='google plus' src='http://i745.photobucket.com/albums/xx97/bengkelblogger/gplus_zpsaccb1cd9.png' title='join on google plus'/></a></li>
<li><a href='http://pinterest.com/borneoartshop' rel='nofollow' target='_blank'> <span class='ngintip'> Pinterest</span><img alt=' pinterest' src='http://i745.photobucket.com/albums/xx97/bengkelblogger/pinterest_zps6145860e.png' title='join on pinterest'/></a></li>
<li><a href='http://feeds.feedburner.com/BengkelBlogger' rel='nofollow' target='_blank'> <span class='ngintip'> My Feeds</span><img alt='feeds' src='http://i745.photobucket.com/albums/xx97/bengkelblogger/feeds_zps63f07283.png' title='see my feeds'/></a></li>
</div>
</div>
</b:if>

• Selanjutnya ganti tulisan biru sesuai petunjuk
• Atur margin-top:-80px; margin-bottom:-60px untuk menyesuaikan jarak widget sosial media petak umpet dengan jarak akhir tulisan dan batas post body
• Click Simpan Template dan lihat hasilnya.

Demikian tutorial membuat Widget Sosial Media Petak Umpet. Semoga artikel ini bermanfaat bagi kita semua, amin. Selamat mencoba dan sukses selalu.

Terinspirasi dari:
Blog: www.marneskliker.com
Admin: Marnes Kliker
Artikel: Permainan Ucing Sumput atau Petak Umpet dan Manfaat Permainan Petak Umpet Bagi Tumbuh Kembang Anak

Share this post