Cara Pasang dan Memodifikasi Widget Google+ Badge Pada Blog

Cara Pasang dan Memodifikasi Widget Google+ Badge Pada Blog
Cara Pasang dan Memodifikasi Widget Google+ Badge Pada Blog

Cara Pasang dan Memodifikasi Widget Google+ Badge Pada Blog,Anaktimor17 Blog - Widget Google+ sangat banyak mamfaatnya untuk para blogger termasuk saya. Nah dalam pembahsan kali ini, untuk memodifikasi widget google+ badge
ada 2 pilihan yg dapat di gunakan. Untuk tampilan yg pertama saya gunakan gaya seperti widget Google+ lama yakni dengan adanya thumbnail foto dari follower Anda dan yang kedua hanya menampilkan profil foto Google+ dan data jumlah follower Anda. anda tertarik untuk memasang-nya ?? Silahkan ikuti dengan seksama langkah" di bawah ini:

Cara Pasang dan Memodifikasi Widget Google+ Badge Pada Blog

1. Masuk ke akun blogger Anda >> Tata Letak >> Tambah Widget HTML/Java Script ( pastikan widgetnya di pasang di sidebar blog)
2. Copy salah satu style yang Anda suka :

STYLE 1

 <style>
.googleanaktimorblog {
width: 280px;
height: 105px;
border-radius: 3px;
position: relative;
background: #52E052;
padding: 10px;
}
.googleanaktimorblog,.googleanaktimorblogs:before,.googleanaktimorblog:after {
background: #52E052;
border: 1px solid #00ff00;
}
.googleanaktimorblog:before,.googleanaktimorblog:after {
position: absolute;
content: "";
bottom: -3px;
left: 2px;
right: 2px;
height: 1px;
border-top: none;
}
.googleanaktimorblog:after {
left: 4px;
right: 4px;
bottom: -5px;
box-shadow: 0 0 2px #00ff00;
}
</style>
<div class="googleanaktimorblog">
<div style="height:155px;overflow:hidden">
<div class="g-person" data-href="//plus.google.com/112136672487238015009" data-theme="dark" data-layout="landscape" data-showcoverphoto="false" data-rel="author"></div>

<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</div>
</div>






STYLE 2

 <style>
.googleanaktimorblog {
width: 280px;
height: 160px;
border-radius: 3px;
position: relative;
background: #52E052;
padding: 10px;
}
.googleanaktimorblog,.googleanaktimorblog:before,.googleanaktimorblog:after {
background: #52E052;
border: 1px solid #00ff00;
}
.googleanaktimorblog:before,.googleanaktimorblog:after {
position: absolute;
content: "";
bottom: -3px;
left: 2px;
right: 2px;
height: 1px;
border-top: none;
}
.googleanaktimorblog:after {
left: 4px;
right: 4px;
bottom: -5px;
box-shadow: 0 0 2px #00ff00;
}
</style>
<div class="googleanaktimorblog">
<div style="height:155px;overflow:hidden">
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/112136672487238015009" data-source="blogger:blog:followers" data-width="300">
</div>
<script type="text/javascript">
(function() {
window.___gcfg = {'lang': 'en'};
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</div>
</div>

DEMONYA



NB: Untuk tinggi lebar dan warna silahkan Anda sesuaikan sendiri dengan yang di inginkan.
Ubah 112136672487238015009 dan ganti dengan ID Google+ anda.


Selamat mencoba, dan Happy Blogging !!


Comments

Post a Comment

۝ Peraturan dalam berkomentar :

☛ UpsS,. Budayakan berkomentar sesudah membaca artikel sob.
☛ Dilarang Menghina, Promosi (Iklan), Menyelipkan Link Aktiv, dsb.
☛ Dilarang berkomentar berbau Porno, Spam, Sara, Politic, Profokasi.
☛ Berkomentarlah yang Sopan,Bijak, dan Sesuai Artikel (Dilarang OOT)
☛ Saya sangat berterima kasih atas semua yang mau berkomentar diblog saya.
☛ Saya PASTI akan berkunjung balik ke blog Sobat yang sudah mau berkomentar di sini.

☭ Copyright © 2014 - 2015 - Anaktimor17 Blog® by Markus Kono ✓

Popular posts from this blog

Contoh Surat Lamaran Kerja di Indomaret Terbaru 2018

Cara Melamar Kerja PT. Musashi Auto Parts Indonesia 2019

Cara Melamar Kerja di PT Astra Honda Motor Secara Online