Home
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 == "") {this.value = "Search...";}" onfocus="if (this.value == "Search...") {this.value = ""}" type="text" value="Search..." />
<input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image" />
</form>
</div>
</div>
#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 == "") {this.value = "Search...";}" onfocus="if (this.value == "Search...") {this.value = ""}" 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..............
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
0 Comments
0 komentar: