Cara Memasang Widget Social Counter Keren Pada Blogspot - DP BBM 23

Kumpulan DP BBM Lucu | Bagus | Keren | Kocak | Galau | Romantis | DLL yang Diambil Dari Berbagai Sumber

Breaking

Post Top Ad

Post Top Ad

Friday, August 18, 2017

Cara Memasang Widget Social Counter Keren Pada Blogspot

DP BBM 23 adalah sebuah blog gratis, yang menyajikan seputar kata - kata, DP BBM, AdSense, Blogger, Tutorial, Windows 10, ISO, Theme Wind0ws 10, etc! dan sobat saat ini sedang membuka halaman Cara Memasang Widget Social Counter Keren Pada Blogspot, jika suka jangn sungkan untuk klik, like, share dan subcribe ya gaes!


Loading...

Baca Juga



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 ..


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 ..


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("http://4.bp.blogspot.com/-L1iBWk1cut4/VGsgavLj62I/AAAAAAAAEFU/1x3e5PzTSK8/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 !!!


thumbnail Title : Cara Memasang Widget Social Counter Keren Pada Blogspot
Posted by : Ocha Rocker
Published : 2017-08-18T04:27:00+01:00
Rating : 90.5%
Reviewer : 9.998 Votes


Post Top Ad

Loading...