Dalam posting ini saya akan menjelaskan bagaimana memasang Widget Social Media Efek Flipboard Untuk Blogger. Jadi, ini meliputi dua gadget. sosial profil ikon dan kotak pencarian. Anda dapat menghubungkan dengan Facebook, Twitter, Google Plus, Pintrest dan Rss Feed

Untuk langkah - langkahnya :

  • Login ke blogger.com
  • Masuk ke bagian Layout / Design
  • Klik Tambahkan Widget.
  • Pilih HTML/Javascript.
  • Copy Kode dibawah ini dan Pastekan di HTML/Javascript.


<style type="text/css">
#flipboard_The-Bhuz{ width:300px;}
ul.flipboard_
The-Bhuz{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px;
-moz-perspective: 10000px;
-o-perspective: 10000px;
perspective: 10000px;
}
ul.flipboard_
The-Bhuz 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_
The-Bhuz 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_
The-Bhuz 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_
The-Bhuz li a img{
border-width: 0;
}
ul.flipboard_
The-Bhuz 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_
The-Bhuz li:hover a span{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#
The-Bhuz-searchbox {
    border-radius: 5px;
    background: URL(http://i1298.photobucket.com/albums/ag59/Mertha2/green_zps02b8cfcb.png) no-repeat scroll center center transparent;
    width: 290px;
    height: 50px;
    disaply: block;
}
form#
The-Bhuz-searchform {
    display: block;
    padding: 7px 16px;
    margin: 0;
}
form#
The-Bhuz-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 198px;
    font-size: 16px;
    font-family: georgia;
    font-style: italic;
    color: #666666;
    vertical-align: top;
    border: none;
    background: transparent;
}
form#
The-Bhuz-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 74px;
    vertical-align: top;
    border: none;
    background: transparent;
}
</style>
<div id="flipboard_
The-Bhuz">
<center>
<a style="font-size:25px;" >Connect With Us </a>
</center>
<br />
<ul class="flipboard_
The-Bhuz">
<li><a href="http://www.pinteresr/Id
pinteresr"><img src="http://i1298.photobucket.com/albums/ag59/Mertha2/btrix_pinterest_zps8b9c8f23.png" title="Pinterest" /></a></li>
<li><a href="http://www.facebook.com/Id
facebook"><img src="http://i1298.photobucket.com/albums/ag59/Mertha2/btrix_facebook_zpsdd399f2e.png" title="Add to Facebook" /></a></li>
<li><a href="https://plus.google.com/Id
google"><img src="http://i1298.photobucket.com/albums/ag59/Mertha2/btrix_google_zpsd12be39c.png" title="Google plus" /></a></li>
<li><a href="http://www.twitter/Id
twitter"><img src="http://i1298.photobucket.com/albums/ag59/Mertha2/btrix_twitter_zpsb93d558d.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/Id
feedburner"><img src="http://i1298.photobucket.com/albums/ag59/Mertha2/btrix_rss_zps5933803f.png" title="Add RSS Feed" /></a></li>
</ul>
<div id="
The-Bhuz-searchbox">
<form action="/search" id="
The-Bhuz-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>


  • Ganti Tulisan Warna Biru dengan nama pengguna Facebook,Nama Twitter,Pinterest Username,ID Google Plus Anda

Selamat Mencoba..............

Terimakasih sudah Berkunjung, jangan Lupa Meninggalkan komentar

Posted by : The-Bhuz.Com http://visitors2cash.com/ref.php?refId=127284

Artikel Widget Social Media Efek Flipboard Untuk Blogger diposting oleh The-Bhuz.Com . Terima kasih atas kunjungannya. Kritik dan saran dapat disampaikan melalui kotak komentar. Jika diperlukan Artikel ini bisa disebarluaskan melalui blog Sobat, hanya saja mohon sertakan link sumbernya dengan tautan link aktif ke postingan ini. Terimakasih. Selamat bersenang-senang.
a href="http://the-bhuz.blogspot.com/2013/06/widget-social-media-efek-flipboard.html" target="_blank">Widget Social Media Efek Flipboard Untuk Blogger

Related Post :


Comments
0 Comments

0 komentar: