Home / Blogger

Cara Memasang Widget Social Counter Keren Pada Blogspot

DP BBM 23 - Cara Memasang Widget Social Counter Keren Pada Blogspot - selamat pagi menjelang siang dan selamat hari jum'at aja .. terimakasih bagi sobat yang masih setia berkunjung ke blog DP BBM 23 sampe detik ini .. dan pada kesempatan kali ini admin mau sedikit berbagi dan mengulas mengenai Cara Memasang Widget Social Counter Keren Pada Blogspot yang sebelumnya kemarin sudah membahas mengenai Cara Membuat Tombol Share WhatsApp Tanpa JavaScript dan berikut ini ulasan singkatnya mengenai Cara Memasang Widget Social Counter Keren Pada Blogspot ..


Cara Memasang Widget Social Counter Keren Pada Blogspot

Memasang Widget social counter pada blog memang perkara hal yang mudah sekali .. tetapi kita pasti akan memilih widget tersebut cocok atau tidak berada pada blog kita .. jika dirasa cocok pastinya sobat akan tertarik untuk memasangnya pada situs / blog sobat ..

Memang diluar sana banyak sekali tutorial memasang widget sosial counter maupun widget sosial media ini .. benarkan ? tetapi pilihannya hanya satu saja ( dan mungkin sobat tertarik dengan cara yang saya gunakan ini .. hehehe ) .. nah kali ini blog DP BBM 23 akan berbagi Cara Memasang Widget Social Counter Keren Pada Blogspot karena menurut saya widget ini memang keren dan bisa sobat lihat pada sidebar di blog ini .. keren bukan ?? ..

Nah, jika sobat tertarik ingin memasangnya juga .. berikut ini cara pemasangannya tidak terlalu sulit kok alias sangat mudah sekali .. karena hanya tinggal memasukkan kode CSS dan HTML Saja .. Widget yang mau saya share kali ini mungkin banyak sekali sobat lihat di blog - blog tutorial maupun pada situs - situs download template blogger ..

Ok next guys kita langsung saja ke cara pembuatannya .. namun sebelum sobat melakukan langkah - langkah ini sebaikknya sobat backup template sobat terlebih dahulu .. agar apabila ada kesalahan sobat bisa mengembalikannya lagi ke tampilan semula .. Jika sudah mari kita lanjutkan tutorial Cara Memasang Widget Social Counter Keren Pada Blogspot yang super keren ini hehehe ..

Cara Memasang Widget Social Counter Keren Pada Blogspot
Hasil Dari Tutorial Cara Memasang Widget Social Counter Keren Pada Blogspot

1. Untuk memasang widget ini, silahkan masuk ke blogger terlebih dulu ..
2. Pilih Menu Template
3. Edit HTML
4. Masukkan kode dibawah ini .. tepat diatas kode </style> atau ]]></b:skin>

1. Kode CSS

.social-box{width:280px;padding:10px 9px;margin:0;overflow:hidden;background-color:#f2f2f2;border:1px solid #f2f2f2;text-align:center;}a.social-item-box{display:block;color:#4b4b4b;float:left;width:64px;overflow:hidden;margin:0;padding:4px 0;background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMXfjDUFY10YgsACvEalkHdkFqLLdbdIvG01DnZ2_FLpeuvOzrEnVlT84WjEWj0yotPHv4CQxBg8fsXEZWXfry80JuvJZoAXgHp_gtJSEsTs9DpDijhDmWYyR6OelFwHsE9JhtvKdPmyqI/s1600/social-icon.png");background-repeat:no-repeat;}.social-item-outer{background:#f8f8f8;margin:0 0 0 8px;overflow:hidden;float:left;display:inline-block;}.social-item-outer:hover{background:#fff;}.social-item-outer:nth-child(1):hover{box-shadow:0px -2px 0px #E50700 inset;}.social-item-outer:nth-child(2):hover{box-shadow:0px -2px 0px #0084C5 inset}.social-item-outer:nth-child(3):hover{box-shadow:0px -2px 0px #6CAC00 inset;}.social-item-outer:nth-child(4):hover{box-shadow:0px -2px 0px #00C3B7 inset;}.social-item-outer:hover{box-shadow:0px -2px 0px #FF8168 inset;}.social-item-outer:first-child{margin-left:0px;}.facebook-box{background-position:7px 4px;}.rss-box{background-position:-73px 4px;}.twitter-box{background-position:-153px 4px;}.googleplus-box{background-position:-233px 4px;}.counter{margin:60px 0 0 0;font-family:'Oswald',Verdana,Sans-serif;line-height:1.2em;font-size:16px;font-weight:500;}.social-title{color:#888;font-size:11px;}

5. Simpan Template
6. Pindah ke menu Tata Letak
7. Tambah Gadget baru
8. Pilih HTML/JavaScript
9. Lalu masukkan Kode dibawah ini

2. Kode HTML

<div class='social-box'>
   <div class='social-item-outer'>
   <a class='social-item-box facebook-box' href='http://www.facebook.com'>    
     <div class='counter'>
    0
  </div>
  <span class='social-title'>Fans</span>
   </a>
   </div>
  
   <div class='social-item-outer'>
   <a class='social-item-box twitter-box' href='http://twitter.com'>
     <div class='counter'>
    0
  </div>
  <span class='social-title'>Followers</span>
   </a>
   </div>
  
   <div class='social-item-outer'>
   <a class='social-item-box googleplus-box' href='http://plus.google.com'>
     <div class='counter'>
    0
  </div>
  <span class='social-title'>Followers</span>
   </a>
   </div>
  
   <div class='social-item-outer'>
   <a class='social-item-box rss-box' href='https://dp-bbm23.blogspot.com'>
     <div class='counter'>
    0
  </div>
  <span class='social-title'>Subcribers</span>
   </a>
   </div>
    </div>

10. terakhir klik save dan lihat hasilnya pada blog sobat .. apakah social counter sudah terpasang dengan benar ?? jika tidak tampil mungkin ada sebagian kode yang terlewatkan .. coba perhatikan kembali bagian kode mana yang tertinggal / yang terhapus ..

Catatan :

perhatikan semua link yang berada pada kode HTML tersebut .. sobat hanya perlu menambahkan ID / User name di setiap masing - masing sosmed yang sobat punya ..

1. https://www.facebook.com/UserName
2. https://plus.google.com/ID
3. https://www.twitter.com/ID
4. https://dp-bbm23.blogspot.com/Link RSS Feed Blog Sobat

Silahkan sobat ganti semua pada tanda yang saya kasih warna merah .. dengan user name / ID media sosial sobat dan bagian link RSS blog sobat ganti dengan link RSS blog sobat

Cara Membuat Tombol Share WhatsApp Tanpa JavaScript
DP BBM 23 - Cara Membuat Tombol Share WhatsApp Tanpa JavaScript - selamat pagi dan selamat berjumpa kembali sahabat blog DP BBM 23 semuanya .. setelah waktu lalu membahas dan berbagi mengenai beberapa untaian Kata Kata Ucapan Hari Kemerdekaan Indonesia 17 Agustus 2017 p...View More

Nah, itulah tadi guys pembahasan kita pada kesempatan kali ini yang dapat admin blog DP BBM 23 sampaikan mengenai Cara Memasang Widget Social Counter Keren Pada Blogspot .. gimana sangat mudah simple dan keren bukan hasilnya ?? dan terimakasih bagi sobat yang sudah meluangkan waktunya membaca dari awal sampai akhir .. semoga bermanfaat ?? selamat siang selamat menunaikan ibadah sholat jum'at dan sampai jumpa kembali !!!



Before you continue reading, it is necessary to underline that what is written is only a reference! so if there are errors in words and delivery methods, please understand! and below the recommendation article for you!


Content Disclaimer!

  • I as the owner of "BlogCaraOcha" thank you to all loyal readers, and those who accidentally stopped by here.

    And I apologize if there are many advertisements on the homepage or in the post.

    After "BlogCaraOcha" is accepted as a Google publisher, Google automatically places all advertisements.

  • If the content on "BlogCaraOcha" has similarities with other sites or blogs, it only provides a reference to each other by spreading the word in a simple article.

    With the aim, all internet visitors can easily and freely which if the article is easy to understand.

    In addition, so that readers can easily find what is on the search, with content that can provide content in surfing the internet!

  • All images posted in the article are not 100% owned by "BlogCaraOcha" but are taken from Google Search.

    So if there are similarities with the images on other sites, it is only for illustration only (to decorate the storyline as outlined in the article).

    For some of the images here, they are purely self-created, with the same purpose as illustration only.

    However, if there are inappropriate images and ask to be removed, please provide more detailed information via the contact at "BlogCaraOcha"

  • For content that discusses the product review or tutorial, if there are errors, please be advised that it may be an error in typing words or lacking in detail reviewing.

    So if there are typos and results that are not appropriate, can provide input where the location of the error or lack, so that the content is immediately deleted or corrected.

    But before submitting, try to see between the date / year the post was published with the current date / year.

    Because it could be other times what the written policy has changed.
    • '