Monday, January 07, 2013

Social Profile dengan efek Transisi

Bagaimana membuat social profile yang menarik bagi pengunjung?

You Like Follow Me, Please!!!


Social profile akan menarik perhatian jika kita dapat menampilkannya dengan lebih menarik dan meyakinkan pengunjung, bagaimana caranya? silahkan ikuti konten berikut ini yang mengacu pada konten dari Saudaraku di http://mkr-site.blogspot.com/2012/08/tombol-follow-me-dengan-efek-transisi.html sebagai nara sumbernya. Bagaimana penampilan social profil yang saya maksudkan? silahkan simak hasil berikut ini setelah diberikan efek transisi.


Sobat teratik untuk membuatnya? silahkan copy paste script berikut ini dan masukkan pada HTML Javascript tambah widget di blgospot Sobat. Sobat tinggal pasang pada kotak kosong dan editlah alamat social profil milik Sobat, selanjutnya lihatlah hasilnya. Sobat pasti puas melihatnya, jika belum silahkan diedit style-nya dengan warna yang lebih menarik. Jika hendak berhubungan dengan admin silahkan dicoba untuk klik salah satu profil yang dimaksudkan dan berikan komentarnya.
<style type="text/css">
#buttoncb ul {margin:10px 15px;padding:0px;}
#buttoncb ul li {list-style-type: none;padding: 0;background: transparent;margin: 0;}
#buttoncb ul li a{background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8lumL_5KhmgTMvX7xOESQXM8yu23YFQx6L9MTY1ZiJLufVa-b7KC3DNpUHrt3drKnwYesIC_VynAMm268rxXlvxUw-IFwYmU2F-JLz86Q-LX_HD5JZBXaenRCnmu6EJquURdcHLfvCSU/s1600/blsocial12.png') 0 0 no-repeat;   height:48px;padding-left: 48px;cursor: pointer;text-decoration: none;border-radius:0.5em;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;-o-border-radius:0.5em;display:inline-block;margin:0;width: 220px;}
#buttoncb ul li:hover span {margin-left: 10px;opacity: 1;}
#buttoncb ul li span {border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
color: white;
margin-left: 100px;
opacity: 0;
position: relative;
text-align: center;
width: auto;
padding: 5px 10px;
transition: all 0.3s cubic-bezier(1,2,0,0) 0s;
-moz-transition: all 0.3s cubic-bezier(1,2,0,0) 0s;
-webkit-transition: all 0.3s cubic-bezier(1,2,0,0) 0s;
top: 14px;}
#buttoncb span{padding:5px;background:#000;color:#fff;margin:0 5px;}
#buttoncb .fb span {background-color: #0853A3;}
#buttoncb .twiter span {background-color: #00B1F7;}
#buttoncb .google span {background-color: #9E0202;}
#buttoncb .pint span {background-color: #D00;}
#buttoncb .linkedin span {background-color: #005075;}
#buttoncb .devart span {background-color: #4C7A4A;}
#buttoncb .ytube span {background-color: #00ffff;}
#buttoncb .rss span {background-color: #EC5601;}
#buttoncb a.fb {  background-position: 0 -384px;}
#buttoncb a.twiter {  background-position: 0 -432px;}
#buttoncb a.google {  background-position: 0 -480px;}
#buttoncb a.pint {  background-position: 0 -528px;}
#buttoncb a.linkedin {  background-position: 0 -576px;}
#buttoncb a.devart { background-position: 0 -624px;}
#buttoncb a.ytube {  background-position: 0 -672px;}
#buttoncb a.rss {  background-position: 0 -720px;}
#buttoncb a.fb:hover { background-position: 0 0px;color: #0374DD;}
#buttoncb a.twiter:hover {  background-position: 0 -48px;color: #00A1DF;}
#buttoncb a.google:hover {  background-position: 0 -96px;color: #A70000;}
#buttoncb a.pint:hover {  background-position: 0 -144px;color: #C00;}
#buttoncb a.linkedin:hover {  background-position: 0 -192px;color: #005772;}
#buttoncb a.devart:hover { background-position: 0 -240px;color: #4C7A4A;}
#buttoncb a.ytube:hover {  background-position: 0 -288px;color: #00ffff;}
#buttoncb a.rss:hover {  background-position: 0 -336px;color: #EC5601;}
</style>

<div id="buttoncb"> <ul> <li><a href="Link Facebook Anda" class="icon fb" ><span>Facebook</span></a></li> <li><a href="Link Twitter Anda" class="icon twiter" ><span>Twitter</span></a></li> <li><a href="Link Google+ Anda" class="icon google" ><span>Google+</span></a></li> <li><a href="Link Pinterest Anda" class="icon pint" ><span>Pinterest</span></a></li> <li><a href="Link Linkedin Anda" class="icon linkedin" ><span>LinkedIn</span></a></li> <li><a href="Link Deviant Art Anda" class="icon devart" ><span>DeviantArt</span></a></li> <li><a href="Link Youtube Anda" class="icon ytube" ><span>Youtube</span></a></li> <li><a href="Link RSS Anda" class="icon rss" ><span>RSS</span></a></li> </ul> </div>

Demikian konten saya kali ini semoga bermanfaat bagi kita sekalian dan terima kasih atas kesediaannya untuk membaca konten ini.


Join wazzub Now

2 comments:

Terimakasih Anda telah silaturakhim keblog ini dengan misi didaktik metodik pembelajaran di SMK, sehingga setiap saat dapat berubah sesuai kompetensi Pembelajaran. Silahkan berikan komentar yang sangat berharga demi kemajuan blog ini. Sehubungan dengan hak cipta apabila ada konten Anda disini dengan rendah hati saya mohon ijin memuatnya dan jika tidak berkenan mohon konfirmasinya, Mari berbagi untuk info yang manfaat dan belajar sepanjang hayat, salam sukses buat Anda dan keluarga!!! Klik gambar emoticon berikut jika Anda ingin menggunakannya.



Tahukah Anda bagaimana menjadi marketter yang bijak,hebat dan tepat?
daftarkan segera hari ini silahkan klik img bergoyang dibawah!!!

Formula Bisnis ClickBank
Marilah Tukar Link Untuk Meningkatkan Performance Blog/Web dengan membuka tombol berikut untuk melihat link Anda yang "Sukses!!!" :

Tukar Link Untuk Meningkatkan Performance Blog/Web

Mari kita tukar link secara otomatis untuk meningkatkan rank kita bersama.
Terima kasih atas kebersamaannya untuk menjalin kesetiakawanan,seia dan sekata kita.
Masuklah Anda ke Contact Formuntuk tukar link atau
untuk cek link-bunner sahabat di Link Partner atau kesini saja Kapten untuk silaturahmi bersama teman lainnya.
Adapun link saya seperti berikut ini:
<a href="http://s-surya62.blogspot.com"title="Free blog tutorials on toko information HTML and CSS"target="_blank">Info Toko Surya62</a>



Join Wazzub Now

Silahkan masukkan kode HTML(bebas)jangan lebih dari 50 baris,kemudian klik"convert",
maka akan didapat kode HTML yang siap di posting dan selanjutnya Anda hanya mencopy hasilnya.
Editlah pada program notepad atau wordpad terlebih dahulu ya...

bisnis syariah

Apabila anda ingin menkonvert lengkap encoding dan decoding online
silahkan kunjungi situs Encode/Decode HTML Entities kesini
Salam Pershabatan Selalu dari saya di Info Toko Surya62

MARI MAJU BERSAMA MEMBANGUN BANGSA DENGAN AKHLAQUL KARIMAH
Online Job for All. Work from home computer.