Widget Social Media Flipboard Style

     Widget Social Media Flipboard Style - Hai semua AiRa LoKa best friend... kali ini saya mau bagi-bagi tutorial tentang Widget Social Media Flipboard Style.

     Hai semua... Berbicara tentang social media, memang tidak ada habisnya... kali ini saya akan membagikan sedikit "contekan" dari blog sebelah. Maksud dari flipboard adalah setiap kita mengarahkan kursor mouse kita ke masing-masing icon widget social media, maka secara otomatis icon-icon tersebut akan flip atau berputar. Nah, bag  yang mau berputar, Langsung saja..

Check It Out......

DEMO

1.  Masuk ke Blogger > Dashboard Blogger > Tata Letak > Tambah Gadget > HTML/JavaScript.

2.  Pada kolom konten, pastekan script di bawah ini.

<style type="text/css">
#flipboard_socmed{ width:300px;}
ul.flipboard_socmed{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px;
-moz-perspective: 10000px;
-o-perspective: 10000px;
perspective: 10000px;
}
ul.flipboard_socmed li{
display: inline-block;
width: 55px;
height: 50px;
margin-right: -px;
background: white;
font: bold 36px Arial;
text-transform: uppercase;
text-align: center;
cursor: pointer;
}
ul.flipboard_socmed li a{
display:block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out 0.1s;
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.flipboard_socmed li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-top: 5px;
display:block;
width: 100%;
height: 100%;
-webkit-transition:all 300ms ease-out 0.1s;
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.flipboard_socmed li a img{
border-width: 0;
}
ul.flipboard_socmed li:hover a{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #cef1ff;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
-webkit-box-shadow:0 0 5px #eee inset;
-moz-box-shadow:0 0 5px #eee inset;
box-shadow:0 0 5px #eee inset;
}
ul.flipboard_socmed li:hover a span{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#airaloka-searchbox {
    border-radius: 5px;
    background: URL(https://sites.google.com/site/airalokablogspotcom/gambar/search%20form%20blue.png) no-repeat scroll center center transparent;
    width: 290px;
    height: 50px;
    disaply: block;
}
form#airaloka-searchform {
    display: block;
    padding: 8px 16px;
    margin: 0;
}
form#airaloka-searchform #s {
    padding-left: 5px !important;
    padding: 8.5px;
    margin: 0;
    width: 170px;
    font-size: 16px;
    font-family: georgia;
    font-style: italic;
    color: #666666;
    vertical-align: top;
    border: none;
    background: transparent;
}
form#airaloka-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 74px;
    vertical-align: top;
    border: none;
    background: transparent;
}
</style>
<div id="flipboard_socmed">
<center>
<a style="font-size:25px;" >Connect With Us </a>
</center>
<br />
<ul class="flipboard_socmed">
<li><a href="http://www.pinterest.com/airaloka"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRlysfjrNn_NcvHwYR-veYcC1FR5QC3juTRC3mrfrvZKjJUJ-vzK_rmZdKnfUFtV2aXWO5CRH2DHVPAqeqceYfDYub8S4h4GarFND8MLtiCMYDjP4qHbkqLaXjhNewvNAsDY-7Ee9PK3Xp/s1600/btrix_pinterest.png" title="Pinterest" /></a></li>
<li><a href="http://www.facebook.com/airalokablogspotcom"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXMI_AHmMJzO9AGzkL7ZULqeLS7t0EMs2yj6RGkbJtjLodY2zhiJUO90Z0xdxb_tz4HpxxKMLXawiRsBAnNb2APSstWdKB9bEgWnCak2W6TGJDVfyhvipqRRt4BIGX_Hd1txSGUwu1XRSi/s1600/btrix_facebook.png" title="Add to Facebook" /></a></li>
<li><a href="https://plus.google.com/105117023814492818484"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD1GO7BWpxO_w7aHihNLPn4IvTKuhv_bGR6Gpfd4E6SBbmHDThOSizxu3eO_Zo0HMQ2OOJsc4myEHoPpmQZvesWPfGT1ugm57YGoYxeeY8wull3FFSgGHjUa-1bGaVydkDZzhJ_Ko4xE85/s1600/btrix_google+.png" title="Google plus" /></a></li>
<li><a href="http://www.twitter.com/airaloka29"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKCgcdQBaAnt7kBvguBXqDBWyNeIzfJDgZDSOSTa_ldq7Sa1cHY8_e0Na20uzdjkLjp5wu3vvUwDCCd7MfLPHyWUhDXNe2CYY_gm1OPTh-OrCW7zQ_JcpaYhtF9nsHRXWbz7RQBdKpAoOs/s1600/btrix_twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds.feedburner.com/airaloka"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0Sd7e4GV6N4rcayF6C_J0Lo2pKBMt82QlvLi_3l3Ts00Xut1e16gIfxO_BDI5pDEpYneWKArZZJib85eeYt01uKyQPjLT5RtBQ_667lwUmalFQn5eiFv6fjY46O1JRMquRWh1_cl1lmGq/s1600/btrix_rss.png" title="Add RSS Feed" /></a></li>
</ul>
<div id="airaloka-searchbox">
<form action="/search" id="airaloka-searchform" method="get">
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}" type="text" value="Search..." />
        <input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image" />
    </form>
</div>
</div>

3.  Ganti kode yang berwarna biru dengan ID Pinterest anda
Ganti kode yang berwarna merah dengan Nama Fanpage / ID Facebook anda
Ganti kode yang berwarna hijau dengan ID Google+ anda
Ganti kode yang berwarna ungu dengan Username Twitter anda
Ganti kode yang berwanya pink dengan ID Feedburner anda

4.  Simpan

Selamat mencoba!