Cara Membuat Kotak Pencarian plus Ikon Media Sosia di Blogl!!

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. Kamu dapat melihat di halaman demo.

Berikut caranya:

  1. Login ke blogger.com 
  2. Masuk ke bagian Layout / Design 
  3. Klik Tambahkan Widget. 
  4. Pilih HTML/Javascript. 
  5. Copy Kode dibawah ini dan Pastekan di HTML/Javascript. Save 
<style type="text/css">
#flipboard_tempatblogging{ width:300px;}
ul.flipboard_tempatblogging{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px;
-moz-perspective: 10000px;
-o-perspective: 10000px;
perspective: 10000px;
}
ul.flipboard_tempatblogging 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_tempatblogging 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_tempatblogging 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_tempatblogging li a img{
border-width: 0;
}
ul.flipboard_tempatblogging 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_tempatblogging li:hover a span{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#tempatblogging-searchbox {
border-radius: 5px;
background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTUSQrg1vGJl73qqATKSzI_AkavomAIQeLCBRHzR2ORUBm91nDmm57frrrEadg011r-SP1DAXkJ4LbQn_GobA47_yzowjIqwNW9uP2c4K_R_CYXipZ-Nb1wPU9n2wNFZ_-493S7STcbFl2/s1600/green.png) no-repeat scroll center center transparent;
width: 290px;
height: 50px;
disaply: block;
}
form#tempatblogging-searchform {
display: block;
padding: 7px 16px;
margin: 0;
}
form#tempatblogging-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#tempatblogging-searchform
#sbutton {
margin: 0;
padding: 0;
height: 40px;
width: 74px;
vertical-align: top;
border: none;
background: transparent;
}
</style>
<div id="flipboard_tempatblogging">
<center>
<a style="font-size:25px;" >Connect With Us </a>
</center>
<br />
<ul class="flipboard_tempatblogging">
<li><a href="http://www.pinteresr/TempatBlogging"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpHv3NEDJm9vezz6bnTAW_2TOBYS2huYaU6Eog4OxP6XJFZq-UmAwaS2M9NBtDevhfa60KbLP1bJUNDpe5bFzkCn66z3bz_GLk_5n4LRtwqBdU02lchAnofMXU4LHPJR1uNkMoWRHSR2Ky/s1600/tempatblogging_pinterest.png" title="Pinterest" /></a></li>
<li><a href="http://www.facebook.com/TempatBlogging"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj469-DUkF3OrRdU1GD7lc6C2w7GX7qrO-0KjUx9xsisoLTei1X5sekdANz3JxYGB0rpLoR9GNtOIivxlnmJPWi4joGMw6kQ5P9jH9m0AARL_mzQPhKaN-FomwpahlXGzVthYr915z0tS5g/s1600/tempatblogging_facebook.png" title="Add to Facebook" /></a></li>
<li><a href="https://plus.google.com/userId"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJKpUviSTzog9Ti51S5q1lrY3ueP2H8b6epZ90FhN01ft7RNyT-TM7Wf0ExI_f5y1ocKkL-UA6L7yz1mJlpB8dtzsOxSeV0LLuo9X706nvtq4eGskzKhln5rzgor8L0hJKrP4eqtwOLOqY/s1600/tempatblogging_google+.png" title="Google plus" /></a></li>
<li><a href="http://www.twitter/TempatBlogging"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4O-0SwJAccWL-xqVchvInfEAcevYafLO2BJESBLMvbZDBjVwwnWwI_6W5adQFwZYtwesMTKOhqO2kDIHFQAJHWyYvGpr2xRC0uhQVt2cCYnWeTC7Igv99d3UqLWeLYRyIEq8o0R-B5sRN/s1600/tempatblogging_twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/TempatBlogging"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5tdse9v34pQ6IuAvX-S3vpa8vQ_fh4VKc-UUspUQu47CUM0mxc-bFq62iso7irrlbqetkz_-fxX_OOOaeBcYIF8Yop-Vib-yfC1zd8MD2nw6V-qKPDrt1OYDpExQTWhDT5eIAyt1C1kHC/s1600/tempatblogging_rss.png" title="Add RSS Feed" /></a></li>
</ul>
<div id="tempatblogging-searchbox">
<form action="/search" id="tempatblogging-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>

NOTE :
  • Ganti TempatBlogging dengan Pinterest Username Anda
  • Ganti TempatBlogging dengan nama pengguna Facebook Anda
  • Ganti UserId dengan ID Google Plus Anda 
  • Ganti TempatBlogging dengan Nama Twitter Anda
Ok, itu saja yang bisa saya sampaikan semoga bermanfaat.


Nimbuzz Hijau

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

Tidak ada komentar:

Posting Komentar