Berikut caranya:
- Login ke blogger.com
- Masuk ke bagian Layout / Design
- Klik Tambahkan Widget.
- Pilih HTML/Javascript.
- 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 == "") {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_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 == "") {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>
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
Tidak ada komentar:
Posting Komentar