Beautifful Vertikal Sossial Share

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 :

VIEW A DEMO-1

VIEW A DEMO-2

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>

#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 :

<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>

8. Klik Save, and Enjoy

Note :
Silakan Ganti Tulisan yang berwarna merah dengan akun terkait milik sobat, Sekali lagi thank ti MizTia udah menjadi inspirasi hingga tercipta artikel ini .

Anda baru saja membaca artikel yang berkategori CSS / Tutorial Blog dengan judul Beautifful Vertikal Sossial Share. Anda bisa bookmark halaman ini dengan URL http://tutorial-gratis-di.blogspot.com/2013/03/beautifful-vertikal-sossial-share_12.html. Terima kasih!

Ditulis oleh: Unknown - Selasa, 12 Maret 2013