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 :
Vertikal Sossial Share, sosial share, css

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>
 #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://2.bp.blogspot.com/-pQlns3b8NDY/UTrTsZE6qVI/AAAAAAAABhg/B9T1k5N7FwM/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 .


59 Responses to "Beautifful Vertikal Sossial Share"

  1. Replies
    1. terimakasih banyak gan atas support serta kunjungannya

      Delete
  2. hoho...... terima kasih kembali.. ^_^

    oya aku mau pesan boleh ya.. gini aku mau ganti yang icon pinterest dg youtube dan icon rss dengan about.me , gimana caranya ya. kalo gak pake css bisa gak?? soalnya takut nambah berat gitu. yg kemren aja belum bisa menghapus css yg tak terpakai :D .

    ReplyDelete
    Replies
    1. Mis thank juga atas kunjungannya...!!!
      Untuk icon tersebut silakan icon yang ada di widget miz ganti dengan url ini :
      http://4.bp.blogspot.com/--2m3dvpi-SE/UT_3tr8lZvI/AAAAAAAABkE/61-8TJELhxs/s1600/alexjoen-Vertikal+Sosial+Share+With+Animation3.png
      dan, kayanya mesti pake css miss

      Delete
  3. punya saya gak pake css . dan tulisannya juga saya hapus. saya mau iconnya diganti aja.

    ReplyDelete
    Replies
    1. hehhhehhe, pake mizz cuman digabung sama html nya, silakan tinggal ganti iconnya aja ko.

      Delete
  4. cara gantinya yg gimana. kalo tau bisa bantu ^_^ .

    ReplyDelete
  5. Mizz coba cari url icon di widget mis yang kurang lebih seperti ini :
    https://lh4.googleusercontent.com/-l0EYSSxxuc8/UFd37FdwjzI/AAAAAAAAG2E/CDbmwPO4haA/s800/sprites.png
    kemudian ganti dengan url icon dibawah ini :
    http://4.bp.blogspot.com/--2m3dvpi-SE/UT_3tr8lZvI/AAAAAAAABkE/61-8TJELhxs/s1600/alexjoen-Vertikal+Sosial+Share+With+Animation3.png

    ReplyDelete
    Replies
    1. udah aku coba .. terima kasih :) .. oya tapi icon about.me nya bisa pake yang icon kayak punya gini gak?? http://about.me/miztia .

      Delete
    2. maksud miz tia icon ini bukan :
      http://o.aolcdn.com/aboutme/production135/images/icons/favicon.ico

      Delete
    3. iya benar icon itu, jadi icon yg kepala di ganti icon about.me ya.. kalo bisa icon youtubenya di perjelas coz gak jelas coba di cek di blog saya tulisan youtubenya kurang jelas :)

      terima kasih ya kak.

      Delete
    4. Kalau pake icon ini gimana :
      http://4.bp.blogspot.com/-USpj63umlUU/UUP-bS6S2sI/AAAAAAAABk0/R5rhj0HfOTk/s1600/alexjoen-Vertikal+Sosial+Share+With+Animation123.png
      silakan di coba

      Delete
    5. jika sudah ada tolong kasi link imagenya ke blog saya ya .. ^_^ .

      Delete
  6. tutorialnya keren sobat
    terima kasih sudah berbagi

    ReplyDelete
    Replies
    1. sama2 gan, terimakasih ats kunjungannya

      Delete
    2. sama sama sobat, saya juga mengucapkan terima kasih
      mohon maaf selalu terlambat, soalnya gangguan listrik

      Delete
  7. sipp gan terimakasih sudah berbagi

    ReplyDelete
    Replies
    1. sama2 gan, terimakasih kembali dah mampir disini.

      Delete
  8. trik yg bagus nih.. perlu dicoba.. mksh sharenya :)

    ReplyDelete
  9. ok banget nih tutornya....

    nti ane coba diblog baru ane....

    salam sehat sobat

    ReplyDelete
    Replies
    1. terimakasih, silakan mas, terimakasih udah berkunjung

      Delete
  10. mantep tutorialnya, izin copas codenya y sob, terima kasih

    ReplyDelete
    Replies
    1. terimaksih, silakan mas, sama2 terimakasih kembali sudah sudi berkunjung.

      Delete
  11. ingin coba dulu ah, sepertinya bagus juga

    ReplyDelete
  12. mantep kang tutornya,,,backgroundnya juga keren makasih sudah berbagi

    ReplyDelete
    Replies
    1. biasa aa mas,sama2 mas terimakasih banyak atas kunjungannya.

      Delete
  13. hello teman, tampilan blognya tambah keren, aku sampai gak tahu, bagaimaa caranya punya template seperti ini

    ReplyDelete
    Replies
    1. hehhehhe bisa aja ni mas, ini template nya karya maskholis mas, terimakasih banyak atas kunjungannya.

      Delete
  14. Wooww... keren banget, boleh nih ane praktekin?? thanks yah...

    ReplyDelete
    Replies
    1. Silakan mas, terimakasih banyak atas kunjungannya

      Delete
  15. Dahsyat gan, ternyata agan pinter desain blog yah? kayaknya ane harus byk blajar ama agan...

    ReplyDelete
    Replies
    1. terimakasih banyak biasa aja mas, saya masih dalam tahap belajar mas, kalau soal belajar banyak yang lebih dari ane gan, terimakasih banyak atas kunjungannya.

      Delete
  16. wahhhh...ini dia yang kucari sob...makasih ya

    ReplyDelete
    Replies
    1. sama2 mas, terimakasih juga mas sudah mampir disini

      Delete
  17. nice post.. makasih ilmunya kang :) mampir ya di blog ane

    ReplyDelete
  18. wah ada e-booknya gak gan ini? ane pusing memahaminya :D

    ReplyDelete
    Replies
    1. wah lom buat tu mas, insya allah lain waktu ane bikin, hehhehehm, terimakasih banyak dah berkunjung

      Delete
  19. Keren, bagaimana nak buat tu cara, biar bisa nampak sama blog saya punya.. :D

    ReplyDelete
    Replies
    1. tinggal di edit aja mas kode CSS nya, terimakasih banyak mas ats kunjungannya.

      Delete
  20. gila, master sekali ilmunya sobat. sgt bagus sekali nih. jarang ane baca artikel sperti ini. hehehe

    ReplyDelete
    Replies
    1. biasa aja mas, ana masih pemula dalam urusan blogging, saya hanya mencoba berbagi pengalaman seadanya aja, terimakasih banyak mas atas kunjungannya.

      Delete
  21. nice share . . .

    http://banyakin-info.blogspot.com/2013/03/5-cara-mempercantik-bulu-mata.html

    ReplyDelete
  22. Ini yang saya cari terima kasih ya gan.

    ReplyDelete
    Replies
    1. Sama2 mas, terimakasih kembali atas kunjungannya

      Delete
  23. keren infonya mas, lebih maju lagi ya

    ReplyDelete
    Replies
    1. Terimaksih banyak atas support serta kunjungannya

      Delete
  24. Kunjungan siang mas.. Inguk2

    ReplyDelete
  25. keren keren tutornya sob,BTW ane mo tanya nih ada pengaruhnya gak yah ke loading,maksudnya menambah berat loadnya gitu sob,Terimaksih

    ReplyDelete
    Replies
    1. gak terlalu mas soaal, biasanya yang bikin ngaruh ke loadin yang lebih signifikan biasa Javascript, ini kan cuma HTML sama CSS, gitu mas

      Delete
  26. oh oh oh ,,,terikakasih mas bro untuk infonya

    ReplyDelete

Terimakasih banyak atas kunjungannya, salam silatuhami M. Alex Joenaedi

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Visit Kabar Sehat