Cara Mudah Membuat atau Menambahkan Widget Social Media Share Tanpa Edit HTML

Buat kamu, yang sedang mencari-cari widget social media share, saya akan memberikan tutorial cara pembuatannya tanpa mengedit HTML yang ada di Template.

Untuk  yang baru membuat blog, saya sarankan untuk menggunakan widget ini. Kenapa saya bilang begitu, karena menurut saya widget yang satu ini wajib untuk dimiliki dan dipasang di blog kamu untuk meningkatkan jumlah pengunjung blog sobat. Dengan menggunakan jasa jejaring sisial yang sedang populer saat ini bukan tidak mungkin kan untuk menambah jumlah pengunjung / visitor blog sobat. Selain untuk menambah jumlah pengunjung blog kamu, masih banyak kegunaan atau manfaat yang bisa sobat dapatkan dengan memasang widget ini. Untuk sobat yang ingin memasang widget ini diblog, silahkan ikuti langkah-langkah yang saya buat berikut.

Contoh Widget

1.     Masuk  / Login ke akun blog kamu.

2.   Pilih Tata Letak > lalu Tambahkan Gadget.

3.    Pilih HTML/Javascript.

4.    Setelah itu kamu Copy kode dibawah ini dan Paste di kolom HTML/Javascript.

 /*--------Touch Me Sharing Widget astiepd.blogspot.com Start ------*/

<style>
  
    .touchme a {
    display:block;
    height:50px;
    width:50px;
    padding:0 4px;
    float:left;
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjInqWApAy03wmONLsf25dS-ieLaheAN85KPnHd61tJVVcOuOyjFSjd6qkmprLArLiratrpVVxgyYyphULPoViaEFiqCjhGZlFotb816V6Cv37A2gHFVJzUVabrv_xcWB6926xeAnQYEkM/s1600/Sharing+Touch+Me.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="Link RSS Kamu" target='_blank'></a>

    <!--Google Plus-->
    <a class='googleplus' href="Link Goggle Plus Kamu" target='_blank'></a>

    <!--Facebook-->
    <a class='facebook' href="Link FACEBOOK Kamu" target='_blank'></a>

    <!-- Twitter -->
    <a class='twitter' href="Link TWITTER Kamu" target='_blank' ></a>


    </div>
/*--------Touch Me Sharing Widget astiepd.blogspot.com End ------*/

Artikel Terkait

Luangin waktumu untuk Share this article with your friends

• Facebook
• Twitter
• Google+
• Pinterest
• Dig
• LinkedIn