Membuat Widget Social Media Tanpa Edit Template HTML di Blog

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

 

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم  

Bagi Sobat bloger yang sedang sibuk mencari cari widget social media di blog, (lihat animasi di atas) mungkin postingan saya kali ini bisa membantu sobat. Widget ini bisa membantu pengunjng blog anda untuk berinteraksi dengan anda melalui media social. (Facebook, Tweeter dll.) selain itu dengan memasang widget jejaring sosial yang saat ini lagi booming, bisa meningkatkan jumlah pengunjung blog sobat. oke silahkan simak tutorial di bawah ini.

Cara Mudah membuat Widget Social Media Tanpa Edit HTML di Blog

1. Masuk ke Account Blogger Anda.
2. Pilih Tata Letak.
2. Pilih Add Gadget.Tambahkan Gadget.
4. Pilih HTML Java Script.
5. Copy dan Paste Kode Di bawah ini :

<style>
    .touchme a {
    display:block;
    height:50px;
    width:50px;
    padding:0 4px;
    float:left;
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4HkPCjE9Z9oVWRMQBfOFoJJX4uvF9KuAUPFaZPu2QIBNIDiTLpKqGCsLkLs309F7I34J4E5anITD18GHGF8KIyO6n8yMMQkndalyE0RiOwlsqf6OP8__Rrhj3SiP0s0kfvyDn5NOtVwI/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 Sobat" target='_blank'></a>

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

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

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

6. Selesai dan Lihat hasilnya.

Catatan:
* Ganti Tulisan berwarna Biru sesuai Link Social Media Sobat.
* Anda juga bisa mengurangi Link Social Media yang tidak ingin anda Tampilkan.

SELAMAT MENCOBA.. HAPPY BLOGGING..

Artikel Terkait