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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV96f1vyE3LaxL-wIa-FDjXTv1XLsnqScbJAoZTIA6Q9erRlTvz78FVVLHb9ljCtb0k-dtx6NlWbMz47IOTg8MCYey2boXwb_2Uf4UbdbSABh5keAd0eYyYqn0qeKwm4UHh7BU93dXyfNi/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfY7tLr7Q6wsWm1-X5UwvO3Nu-Wr2VrTWVepY4OLPn-PSIKHzKY8WvjBFzYW99-JscoG2rklaTEQTY5dUIw1YxKSSJ7lCDY6AB1ZsD32i-XjNOQRRttogPfS77jR92-LhTvozEl9irlNFZ/s1600/btrix_pinterest.png" title="Pinterest" /></a></li>
<li><a href="http://www.facebook.com/ID FACEBOOK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEVW6bjshRaADWIUFifYBaWrAbrtdnSRTLnILh30sRTWe_59CLCLjulgmfTVHuoLIGZ_40xy7sF0bL6x9xtbNbIgauI-5KwalbrYBtfw59E1ocwm9mrOqwn0_TyuyBaRkOA83_SjLeoP_i/s1600/btrix_facebook.png" title="Add to Facebook" /></a></li>
<li><a href="https://plus.google.com/ID GOOGLE+ SOBAT"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWmDAOdSsasb9g7G5dDs6aVVRHaobPw71e5Sy9cApHRxa8jcgqLbNuHbfhz-RBExC6gk9HoOf_yxBmp2vRNZA7DZXf67jPxjVeezh6fB6nRsvqJIHMBzGM5-92ixYKKos7cQ7XjpAcDWaR/s1600/btrix_google+.png" title="Google plus" /></a></li>
<li><a href="http://www.twitter.com/ID TWITTER SOBAT"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjosyY_UTF7K6iGGi5Pi09JL3X9XA2bsiQN7ZbbEQlHfRdn135HKT93_eaazqcA5onJjuKun4zRSKbKaf95CciK7yuNf8UfGlCRnlR073D6unytFGB6lEC_eh0RRtA-s2idzVrfg3ZFsuSa/s1600/btrix_twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds.feedburner.com/ID FEEDBURNER SOBAT"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8tKjQ6tch7AnklLz3Zw9U-UAAunXCg9NLA41U5tOBCp4BkPVz0a-RaqjSYyarhe5decEm-_m9Ls1jYgc2_jttYJyij3oRg3o2P8RIqwzoqnF1UX3v75RuL_xitvA_3rkaSOq7D8uTeB8k/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 == "") {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>
- Simpan
Semoga Tips Blog yang berjudul Cara Membuat Widget Social Media Flipboard Style di Blog bisa bermanfaat.......
dan selamat mencoba..........
Post a Comment