Selamat Sore sobat Blogger.
Kemaren ana Blogging ke blognya sahabat ane Miz Tia dalam Blognya MizTia Respect, dan melihat widget sosial share yang mungil dan cantik, ane pun merasa terpikat dengan widget tersebut, ahirnya malam tadi ane coba utak atik CSS dan HTML Alhasil jadilah artikel ini hehhehhe....
Widget tersebut kurang lebih seperti ini :
Kemaren ana Blogging ke blognya sahabat ane Miz Tia dalam Blognya MizTia Respect, dan melihat widget sosial share yang mungil dan cantik, ane pun merasa terpikat dengan widget tersebut, ahirnya malam tadi ane coba utak atik CSS dan HTML Alhasil jadilah artikel ini hehhehhe....
Widget tersebut kurang lebih seperti ini :
VIEW A DEMO-1
Baiklah sobat blogger untuk tutorialnya sebagai berikut :
1. Seperti biasa Login ke Akun Blogger sobat
2. Klik Template Klik Edit HTML
3. Jangan Lupa Centang Expand Widget Template
4. Cari kode ]]></b:skin> dan letakan kode CSS dibawah tepat diatas kode ]]></b:skin>
Note :
Silakan Ganti Tulisan yang berwarna merah dengan akun terkait milik sobat, Sekali lagi thank ti MizTia udah menjadi inspirasi hingga tercipta artikel ini .
#KTalex {
list-style:none;
text-decoration:none;
font-size:.9em;
font-family:trebuchet ms,sans-serif;
}
#KTalex a {
text-decoration:none;
font-family:trebuchet ms,sans-serif;
}
#KTalex li {
position:relative;
height:38px;
cursor:pointer;
padding:0 !important;
}
#KTalex .facebook,
.googleplus,
.pinterest,
.rss,
.twitter {
position:relative;
z-index:5;
display:block;
float:none;
margin:7px 0 0;
width:90px;
height:38px;
border-radius:5px;
background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7gGucuqkCe3XVLA_w8Fi9eUHs9t4ahm5NcTST4Pl0hmnxKFXOj3GHT9kWqXhq5MRicC94HzXdlJVk-nwpnDcQrkcQ8T8Lg1NhaYPqi-xYx217L7cDbEua7OMC3qO1jyK-ysTFNZEX89Pk/s320/alexjoen-Vertikal+Sosial+Share+With+Animation.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:35px;
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;
}
#KTalex li:after {
position:absolute;
top:0;
left:50px;
z-index:2;
display:block;
height:38px;
color:#141414;
content:attr(data-alt);
line-height:32px;
}
#KTalex .icon {
overflow:hidden;
color:#fafafa;
}
#KTalex .facebook {
width:32px;
height:32px;
background-color:rgba(59,89,152,0.42);
background-position:0 0;
}
#KTalex .twitter {
width:32px;
height:32px;
background-color:rgba(64,153,255,0.42);
background-position:0 -33px;
}
#KTalex .googleplus {
width:32px;
height:32px;
background-color:rgba(228,69,36,0.42);
background-position:-3px -66px;
}
#KTalex .pinterest {
width:32px;
height:32px;
background-color:rgba(174,45,39,0.42);
background-position:0 -95px;
}
#KTalex .rss {
width:32px;
height:32px;
background-color:rgba(255,102,0,0.42);
background-position:-3px -126px;
}
#KTalex li:hover .icon,
.touch #KTalex li .icon {
width:90px;
}
.touch #KTalex li .facebook,
#KTalex li:hover .facebook {
background-color:rgba(59,89,152,1);
}
.touch #KTalex li .twitter,
#KTalex li:hover .twitter {
background-color:rgba(64,153,255,1);
}
.touch #KTalex li .googleplus,
#KTalex li:hover .googleplus {
background-color:rgba(228,69,36,1);
}
.touch #KTalex li .pinterest,
#KTalex li:hover .pinterest {
background-color:rgba(174,45,39,1);
}
.touch #KTalex li .rss,
#KTalex li:hover .rss {
background-color:rgba(255,102,0,1);
}5. Klik Save
6. Kemudian Klik Tata Letak >>>> Klik Add Widget Klik >>> HTML/Javascript
7. Kopi Paste Kode HTML Dibawah ini :
8. Klik Save, and Enjoy<ul id='KTalex'>
<li data-alt=''><a class='icon facebook' href='https://www.facebook.com/joens.tutorial'><small>Facebook</a></li>
<li data-alt=''><a class='icon twitter' href='https://twitter.com/alexjoen'>Twitter</a></li>
<li data-alt=''><a class='icon googleplus' href='https://plus.google.com/108597184913188482016'>Google +</a></li>
<li data-alt=''><a class='icon pinterest' href='http://pinterest.com/alexjoen'>Pinterest</a></li>
<li data-alt=''><a class='icon rss' href='http://feeds.feedburner.com/blogspot/kolomtutorial'>Feeds</a></li>
</ul>
<li data-alt=''><a class='icon facebook' href='https://www.facebook.com/joens.tutorial'><small>Facebook</a></li>
<li data-alt=''><a class='icon twitter' href='https://twitter.com/alexjoen'>Twitter</a></li>
<li data-alt=''><a class='icon googleplus' href='https://plus.google.com/108597184913188482016'>Google +</a></li>
<li data-alt=''><a class='icon pinterest' href='http://pinterest.com/alexjoen'>Pinterest</a></li>
<li data-alt=''><a class='icon rss' href='http://feeds.feedburner.com/blogspot/kolomtutorial'>Feeds</a></li>
</ul>
Note :
Silakan Ganti Tulisan yang berwarna merah dengan akun terkait milik sobat, Sekali lagi thank ti MizTia udah menjadi inspirasi hingga tercipta artikel ini .
Unknown
CSS,
Tutorial Blog
.jpg)
