Home » » Widget Social Media Flipboard Style

Widget Social Media Flipboard Style

Written By AiRa LoKa on Minggu, 16 Juni 2013 | 11:41

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......


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="http://4.bp.blogspot.com/-RFXNOXNvtlM/UbSS0UFHh-I/AAAAAAAAAlg/5RweJEBrw3c/s1600/btrix_pinterest.png" title="Pinterest" /></a></li>
<li><a href="http://www.facebook.com/airalokablogspotcom"><img src="http://2.bp.blogspot.com/-X-AzrrLMUmU/UbSS0BXsreI/AAAAAAAAAlY/2p0Q547x6V4/s1600/btrix_facebook.png" title="Add to Facebook" /></a></li>
<li><a href="https://plus.google.com/105117023814492818484"><img src="http://2.bp.blogspot.com/-dkXrjHjFx6s/UbSS0P8YPaI/AAAAAAAAAlc/tSvC9X75cpw/s1600/btrix_google+.png" title="Google plus" /></a></li>
<li><a href="http://www.twitter.com/airaloka29"><img src="http://1.bp.blogspot.com/-jQG7qXLQeG4/UbSS1J2680I/AAAAAAAAAl4/8rm8quxTSWs/s1600/btrix_twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds.feedburner.com/airaloka"><img src="http://1.bp.blogspot.com/-5gm3I3l6uLI/UbSS04dF7NI/AAAAAAAAAlw/5LPPDF8wM68/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!

5 komentar:

  1. terimakasih atas informasinya, izin copy dan mau dibuat di website saya.,

    BalasHapus
  2. terimakasih buat bocorannya, tapi mau tanya dibagian social media yang mana berputar ya, soalnya ketika saya arahkan ke twit yang terbang cuma muncul follow me, salam

    BalasHapus
  3. Keren tutorialnya Mas.Salut..lam kenal..

    BalasHapus
  4. Link Anda (Aira Loka) sudah saya pasang di blog saya http://buana-kata.blogspot.com. Selanjutnya pasang pula ya link saya di blog ini, nah, tunggulah kode lnk saya setelah ini

    BalasHapus
  5. tapi duh,gimana cara saya mengirim link kode/bvanner saya kepada anda. Masalah kode seperti di atas saya benar-benar gaptek..puyeng

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Setelah membaca artikel ini, silahkan tinggalkan komentar. Bagi yang mau meninggalkan url blognya, silahkan saja. Asalkan anda tidak memberikan komentar dengan kata-kata yang tidak sopan. Terima kasih telah mengunjungi blog ini.

AiRa LoKa - Blog of tutorials

Konversi Kode di Sini!

 
Support : Blogger | Google | KlikSaya
Copyright © 2013. AiRa LoKa - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger