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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif1kDUUz_5zLkEC5LmYguT_WzR1dJQtzC-J2kRUM9SE8-ns-XTfG-Jqpd5NTMz5SNnPBa0pjaUj5v6dBV5cRCsbkoMO1pF7pQVh4lpk3mCV59ldGE1gVP0k54lj1Tk6XabuB1dytn45NJK/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 .

M. Alex Joenaedi

Saya hanyalah seorang Newbie di dunia Blogger, Aktivitas Ngeblog dilakukan hanya pada waktu senggang saja atau tidak teratur.

Share this post