Cara Membuat Widget Sharing "Touch Me" di Blogger



Touch Me Sharing Widget

Kali ini saya mau bagi bagi widget keren nih, yaitu Widget sharing buat blog sobat semua. 
Bisa langsung liat sobat disamping kanan blog saya. Fungsinya adalah untuk memudahkan pengunjung untuk membagikan URL salah satu postingan blog sobat yang dianggap menarik ke akun pengunjung tersebut yang tentunya akan meningkatkan SEO blog.

Okay, buat yang berminat langsung ikuti tutorial berikut :
  1. Login Ke akun blog sobat
  2. Pilih Rancangan/Tata letak
  3. Pilih Page Elemen/Elemen Halaman
  4. Klik Add a Gadget/Tambah Gadget
  5. Lalu pilih "HTML/JavaScript"
  6. Kemudian Copy-Paste kode di bawah ini :


style>
/*--------Touch Me Sharing Widget ------*/
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(http://mybloggertricks.googlecode.com/files/Sharing%20Touch%20Me.png) no-repeat;
-webkit-transition: ease-in 0.2s all;
-moz-transition: ease-in 0.2s all;
-o-transition: ease-in 0.2s all;
-ms-transition: ease-in 0.2s all;
transition: ease-in 0.2s all;
cursor:pointer;
}

.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}

.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
}

.touchme a.rss {
background-position: 0px -174px;
}
.touchme a.rss:hover {
background-position: 0px -116px;
}

</style>

<div class='touchme'>
<!--RSS-->
<a class='rss' href="YOUR RSS LINK" rel='external nofollow' target='_blank'></a>
<!--Google Plus-->
<a class='googleplus' href="YOUR GOOGLE PROFILE LINK" rel='external nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook' href="YOUR FACEBOOK LINK" rel='external nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="YOUR TWITTER LINK" rel='external nofollow' target='_blank' ></a>

</div>

Note :
  • Ganti Tulisan yang berwarna merah dengan Url milik sobat
6. Klik simpan
7. Selesai

Semoga Bermanfaat ^^



 
free counters
Return to top of page Copyright © 2010 | Platinum Theme Converted into Blogger Template by HackTutors