Widget Social Media Efek Flipboard Untuk Blogger

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.

Demo All Widget Social Media

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.

<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/AVvXsEi-nB_9iwmd_khvIZ0jAm98HktRf_hbouF3pFkZiPUL4xchysJGNBmeoSrn31zAsC5lonTRHINDdTEHdsLZv1cD0iwJZkVaALSfzcDzYuSip5ynfMKrIP3tHrggLgNTWI22wdQ9fz6v2yKn/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/AVvXsEgNbkDABQ8mazkphwezmyaPMS_YGdvPMYNaB-Oc-8E7JgK9e7gHHtBqd6KJRTbtjIrhhxPFjxAXJZai9_9HncYK8uqdtdd46gL1bPj2g3mW0oeFNRuHHRyBDoYI0H4HJ0D2OxJsDGnslVRu/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/AVvXsEi5GLbYYWpE4wD6IhyphenhyphenysRXHFnekOOzfaCX6WSHd2sfDJTWahqHgY9aJ01z3shzz-V3Uey6oXTkCsuxEwpSsjvUT59kOjxu4BV4G2s-o-HOrcPXSOHTMRugfqycY_7euc_Y9RCxCpCfgbjgH/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/AVvXsEi_Cla1v1eWhKNob-fJ5Ic2gZYPFJZeMTSbuni-9uCy9QrWqK3osSgdhbUe7tIFGtE2GO2m-E0QYrXq5D0sTMfe3cRwGjDctDzblXnu6j6eC-MUS66xAfndAD34PodaFvMVWO9kLAa7ZhQW/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/AVvXsEipauZSysXUkaVRbTe5wz_tltYCIBKHwRhUCWtxVB4spqwrp6Pa05Kc-lN_VRWnnoAEiWgGJJbbq1CNZIPGW4E4ymX-R17kecYw8HbSx1BJ9OzaOWQWpyXCiy51BWa7_WGg5O53frcZnsF_/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/AVvXsEgN5p-N87gl-hIGlw_bcPDcrUQR7Tv2KYo5tpc7vWd5Ni_V9H6ZUSFt8fm0cpNUyFlyaShL1cjZG1JiH-M8jsgY4vLh7Zo96gGHzUpbXSkr3NK_HrPhV52x6D8KJGd4L_brEF8gk2rdRNES/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 nama pengguna Facebook Anda
• Ganti TempatBlogging dengan Nama Twitter Anda
• Ganti TempatBlogging dengan Pinterest Username Anda
• Ganti UserId dengan ID Google Plus Anda 

Ok, itu saja yang bisa saya sampaikan semoga bermanfaat.

Share this post