Langsung saja kita menuju yang dituju, Berikut langkah-langkahnya :
- Login ke Dashboard
- Masuk ke Layout/Tata Letak
- Add Gadget >> HTML/JavaScript
- Masukkan kode di bawah, lalu Simpan
<style> #tbisose {
list-style:none;
text-decoration:none;
font-size:0.9em;
font-family:trebuchet ms,sans-serif;
}
#tbisose a {
text-decoration:none;
font-family:trebuchet ms,sans-serif;
}
#tbisose li {
position:relative;
height:38px;
cursor:pointer;
padding:0 !important;
}
#tbisose .facebook,
.googleplus,
.pinterest,
.rss,
.twitter {
position:relative;
z-index:5;
display:block;
float:none;
margin:10px 0 0;
width:210px;
height:38px;
border-radius:5px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigxh6mNzMGi4yhZzlh4xRXgokciyIRIwaFb_6w4WbOaEOG3l9mzDFOEocTWtU2uoCz_ICdioK0REMf1M6qZ0uT4VbM4H-qV2_gtf8TBN_AC3WA7psi7KZUrWEC_cEenXFCzrw8Jd2t-iE/s800/sprites.png) no-repeat;
background-color:rgba(217,30,118,.42);
-webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
-moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
box-shadow:rgba(0,0,0,.28) 0 2px 3px;
color:#141414;
text-align:left;
text-indent:50px;
text-shadow:#333 0 1px 0;
white-space:nowrap;
line-height:32px;
-webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out;
-moz-transition:width .25s ease-in-out,background-color .25s ease-in-out;
-ms-transition:width .25s ease-in-out,background-color .25s ease-in-out;
-o-transition:width .25s ease-in-out,background-color .25s ease-in-out;
transition:width .25s ease-in-out,background-color .25s ease-in-out;
-o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
}
#tbisose li:after {
position:absolute;
top:0;
left:50px;
z-index:2;
display:block;
height:38px;
color:#141414;
content:attr(data-alt);
line-height:32px;
}
#tbisose .icon {
overflow:hidden;
color:#fafafa;
}
#tbisose .facebook {
width:32px;
height:32px;
background-color:rgba(59,89,152,0.42);
background-position:0 0;
}
#tbisose .twitter {
width:32px;
height:32px;
background-color:rgba(64,153,255,0.42);
background-position:0 -33px;
}
#tbisose .googleplus {
width:32px;
height:32px;
background-color:rgba(228,69,36,0.42);
background-position:-3px -66px;
}
#tbisose .pinterest {
width:32px;
height:32px;
background-color:rgba(174,45,39,0.42);
background-position:0 -95px;
}
#tbisose .rss {
width:32px;
height:32px;
background-color:rgba(255,102,0,0.42);
background-position:-3px -126px;
}
#tbisose li:hover .icon,
.touch #tbisose li .icon {
width:210px;
}
.touch #tbisose li .facebook,
#tbisose li:hover .facebook {
background-color:rgba(59,89,152,1);
}
.touch #tbisose li .twitter,
#tbisose li:hover .twitter {
background-color:rgba(64,153,255,1);
}
.touch #tbisose li .googleplus,
#tbisose li:hover .googleplus {
background-color:rgba(228,69,36,1);
}
.touch #tbisose li .pinterest,
#tbisose li:hover .pinterest {
background-color:rgba(174,45,39,1);
}
.touch #tbisose li .rss,
#tbisose li:hover .rss {
background-color:rgba(255,102,0,1);
}
</style>
<ul id="tbisose"> <li data-alt="Follow us on
Facebook"><a class="icon facebook" href="#">Follow us on
Facebook</a></li> <li data-alt="Follow us on
Twitter"><a class="icon twitter" href="#">Follow us on
Twitter</a></li> <li data-alt="Follow us on
Google+"><a class="icon googleplus" href="#">Follow us on
Google+</a></li> <li data-alt="Follow us on
Pinterest"><a class="icon pinterest" href="#">Follow us on
Pinterest</a></li> <li data-alt="Subscribe with
RSS"><a class="icon rss" href="#">Subscribe with
RSS</a></li> </ul>
5. Ganti yang perlu diganti
Dan yang terakhir simpan dan lihat hasilnya..
Semoga Bermanfaat!
Judul : Cara Membuat Widget Follow Keren Di Blog
Deskripsi : Langsung saja kita menuju yang dituju, Berikut langkah-langkahnya : Login ke Dashboard Masuk ke Layout/Tata Letak Add Gadget >> ...