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="https://the-bhuz.blogspot.com/2013/06/widget-social-media-efek-flipboard.html" target="_blank">Widget Social Media Efek Flipboard Untuk Blogger
Tutorial
- Menambah RAM dan Mempercepat Performa Android
- Membuka Proteksi / Password Pada excel sheet Microsoft Excel
- Cara Pasang Widget Auto Ping Di Blog
- Cara Membuat Auto Like/Bom Like Status Facebook Teman
- Cara Membuat Popup Like Facebook dengan Timer
- Download Deep Freeze 7.22 Full Version
- Download 3DP Chip 13.06 Full Portebel
- Cara Membuat Rupiah Terbilang Di Exel Secara Otomatis
- Kumpulan Font size Dan Font Face Tulisan HTML
- Cara Membuat Widget SMS Gratis di Blog
Bloger
- Download 3 Sofwert Meningkatkan Pengunjung statistik Bloger
- Cara Pasang Widget Auto Ping Di Blog
- Cara Membuat Popup Like Facebook dengan Timer
- Kumpulan Font size Dan Font Face Tulisan HTML
- Cara Membuat Widget SMS Gratis di Blog
- Cara Mendaftarkan Blog/Web Anda Ke Yahoo Directory
- Cara Membuat Sumber Artikel Otomatis Saat Copy paste DiBlog
- Tips Membuat Tabel Dengan Efek Scroll Dipostingan Diblog
- Cara Membuat tabel Di Blog
0 Comments
0 komentar: