Home » » Cara Membuat Widget Social Media Flipboard Style di Blog

Cara Membuat Widget Social Media Flipboard Style di Blog

Ditulis oleh Dicky Fajriansyah pada Senin, 10 Juni 2013 | 22.23


Hai sobat..!! Akhirnya saya ngeposting lagi, dan kali ini Dicky's akan share Tips Blog yang berjudul Cara Membuat Widget Social Media Flipboard Style di Blog | Widget social media ini super keren sob, dengan efek flipboard dan dibawahnya terdapat kotak search yang akan menghiasi blog sobat. Social Media pada widget ini diantaranya Pinterest, Facebook, Google+, Twitter, dan satu lagi yaitu RSS. Bagi yang sudah ingin mencobanya, Ikuti Tips-nya.

Berikut Cara Membuat Widget Social Media Flipboard Style di Blog :
  • Login ke Blogger, atau klik disini
  • Tata Letak --> Tambahkan Gadget --> HTML/JavaScript
  • Copy kode dibawah ini dan letakkan ke kolom HTML/JavaScript

<style type="text/css">
#flipboard_db{ width:300px;}
ul.flipboard_db{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px;
-moz-perspective: 10000px;
-o-perspective: 10000px;
perspective: 10000px;
}
ul.flipboard_db 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_db 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_db 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_db li a img{
border-width: 0;
}
ul.flipboard_db 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_db li:hover a span{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#db-searchbox {
    border-radius: 5px;
    background: URL(http://3.bp.blogspot.com/-thVugJfodHE/T_2KIQRrP0I/AAAAAAAACCw/92aQhyWOPMk/s1600/green.png) no-repeat scroll center center transparent;
    width: 290px;
    height: 50px;
    disaply: block;
}
form#db-searchform {
    display: block;
    padding: 7px 16px;
    margin: 0;
}
form#db-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#db-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 74px;
    vertical-align: top;
    border: none;
    background: transparent;
}
</style>
<div id="flipboard_db">
<center>
<a style="font-size:25px;" >Connect With Us </a>
</center>
<br />
<ul class="flipboard_db">
<li><a href="http://www.pinterest.com/ID PINTEREST SOBAT"><img src="http://4.bp.blogspot.com/-RFXNOXNvtlM/UbSS0UFHh-I/AAAAAAAAAlg/5RweJEBrw3c/s1600/btrix_pinterest.png" title="Pinterest" /></a></li>
<li><a href="http://www.facebook.com/ID FACEBOOK"><img src="http://2.bp.blogspot.com/-X-AzrrLMUmU/UbSS0BXsreI/AAAAAAAAAlY/2p0Q547x6V4/s1600/btrix_facebook.png" title="Add to Facebook" /></a></li>
<li><a href="https://plus.google.com/ID GOOGLE+ SOBAT"><img src="http://2.bp.blogspot.com/-dkXrjHjFx6s/UbSS0P8YPaI/AAAAAAAAAlc/tSvC9X75cpw/s1600/btrix_google+.png" title="Google plus" /></a></li>
<li><a href="http://www.twitter.com/ID TWITTER SOBAT"><img src="http://1.bp.blogspot.com/-jQG7qXLQeG4/UbSS1J2680I/AAAAAAAAAl4/8rm8quxTSWs/s1600/btrix_twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds.feedburner.com/ID FEEDBURNER SOBAT"><img src="http://1.bp.blogspot.com/-5gm3I3l6uLI/UbSS04dF7NI/AAAAAAAAAlw/5LPPDF8wM68/s1600/btrix_rss.png" title="Add RSS Feed" /></a></li>
</ul>
<div id="db-searchbox">
<form action="/search" id="db-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>


  • Simpan

Semoga Tips Blog yang berjudul Cara Membuat Widget Social Media Flipboard Style di Blog bisa bermanfaat.......
dan selamat mencoba..........
Dilarang menduplikasi dan menyerbarluaskan artikel tanpa menyertakan sumbernya. Jika melanggar, berarti telah melanggar UUD 1945 No. 19 Tahun 2002 Tentang Hak Cipta dan akan dijatuhi denda.
thumbnail Title: Cara Membuat Widget Social Media Flipboard Style di Blog
Posted by:Dicky Fajriansyah
Published :2013-06-10T22:23:00-07:00
Rating: 5
Reviewer: 100 Reviews
Cara Membuat Widget Social Media Flipboard Style di Blog

0 komentar:

Posting Komentar