Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Cara Modifikasi Widget Google+ Badge Pada Blog

Modifikasi Widget Google+ Badge Pada Blog Cara Modifikasi Widget Google+ Badge Pada Blog – untuk memasang widget badge Google+ dengan modifikasi yang simple supaya tampilan lama dari widget Google+ yang sudah terpasang di blog anda terlihat lebih menarik bisa dilakukan dengan cara yang mudah. Dengan menambahkan sedikit custom style CSS maka widget Google+ pun siap terpasang dan mempercantik widget pada sidebar blog. Untuk memodifikasi widget Google+ ini terdapat 2 pilihan yang nantinya dapat anda gunakan yang kiranya serasi untuk diterapkan kedalam blog. Pada tampilan pertama dengan 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. Untuk tampilan lengkapnya bisa dilihat pada demo yang terdapat dibawah kode. Supaya tidak berlama-lama, berikut adalah tutorial Cara Modifikasi Widget Google+ Badge Pada Blog:

1. Login ke akun blogger.
2. Copy pilihan kode berikut ini.
Style 1:
<style>
.googlefaceblogevolutions {
width: 280px;
height: 160px;
border-radius: 3px;
position: relative;
background: #52E052;
padding: 10px;
}
.googlefaceblogevolutions,.googlefaceblogevolutions:before,.googlefaceblogevolutions:after {
background: #52E052;
border: 1px solid #00ff00;
}
.googlefaceblogevolutions:before,.googlefaceblogevolutions:after {
position: absolute;
content: "";
bottom: -3px;
left: 2px;
right: 2px;
height: 1px;
border-top: none;
}
.googlefaceblogevolutions:after {
left: 4px;
right: 4px;
bottom: -5px;
box-shadow: 0 0 2px #00ff00;
}
</style>
<div class="googlefaceblogevolutions">
<div style="height:155px;overflow:hidden">
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/104093787575230359634" 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>
Demo

Style 2:
<style>
.googlefaceblogevolutions {
width: 280px;
height: 105px;
border-radius: 3px;
position: relative;
background: #52E052;
padding: 10px;
}
.googlefaceblogevolutions,.googlefaceblogevolutions:before,.googlefaceblogevolutions:after {
background: #52E052;
border: 1px solid #00ff00;
}
.googlefaceblogevolutions:before,.googlefaceblogevolutions:after {
position: absolute;
content: "";
bottom: -3px;
left: 2px;
right: 2px;
height: 1px;
border-top: none;
}
.googlefaceblogevolutions:after {
left: 4px;
right: 4px;
bottom: -5px;
box-shadow: 0 0 2px #00ff00;
}
</style>
<div class="googlefaceblogevolutions">
<div style="height:155px;overflow:hidden">
<div class="g-person" data-href="//plus.google.com/104093787575230359634" 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>
Demo

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

3. Selanjtunya tinggal memasang kedalam widget blog dan langkahnya seperti biasa, klik Tata Letak > Tambah Widget > HTML/Javascript lalu paste kode tersebut kemudian klik Simpan.

Berlangganan artikel via email

50 Response to "Cara Modifikasi Widget Google+ Badge Pada Blog"

baru lagi neh,,keren mas

Balas

mantep mas, terima kasih atas infonya :)

Balas
avatar
Anonymous

Mantap bin keren nih mas totorial Cara Modifikasi Widget Google+ Badge Pada Blognya, makasih udah berbagi :)

Balas
avatar
Anonymous

Style 2 cakep tuch mas andes, apalagi kalau ada foto profil ane. Wuiiih, tambah cakep. hehehe

Balas

Aku belum pasang widget G+ di Blog ku Mas, tapi ini tutor yang bermanfaat jika nanti pasang widget G+, terima kasih sharenya Mas..

Balas
avatar
Anonymous

Muantabs... kapan2 mau modifikasi punyaku yg di sidebar itu...

Balas

ew.. habis tadarus langsung apdet ya?! :D ..cakep tp belum sempet utak-atik widget lagi.

Balas

paten gan, makasih bangeet buat tutornya. memang keren G+ widget, tapi gk keren google plus nya hehe

Balas

keren juga yah .....makin cakep tampilannya.

Balas

muncul lagi nih tutor barunya,hadeuhhhh,,,selalu bikin guwe penasaran saja nih ,,,

Balas

iyah yah kaya yg punya tutornya keren heuheuheu

Balas

biar saja yg utak atiknya Miz

Balas

Mas HeQris..pasang versi mobilenya yg type biasa aja mendingan... :)

Balas

Sama sama mas Anthonie.. :)

Balas

Tinggal ganti doang kok mas :)

Balas

Kalo sy emang blm ketarik..sampe skrng.. :)

Balas

Dari pd penasaran..langsung tester dong kang...

Ntar malah gak bisa tidur loh...hehe :)

Balas

Yg baru komen juga keren dong.. :)

Balas

Keren mas Andes tutorialnya...
Mav baru bisa hadir nih... :)

Balas

Walau jadi memperbanyak source, tapi jadi lebih kompleks mas! Ada css, js, dan satu tag lencana disana. Script nya oke nih, karena sudah dilengkapi atribut kelas g-plus dan data-, otomatis badge nya valid HTML 5. Belum lagi sudah ada pemuatan JavaScript Asinkron disana.

Sedikit tambahan mas, saya denger2 kalau sudah menggunakan tombol +1 di blog/web, gak perlu lagi menambahkan script plusone.js kembali. Cukup menambahkan tag g:plus! :)

Balas
avatar
Anonymous

Bisa jadi bakal lebih trend nih ntar daripada widget follower biasa. :D

Balas
avatar
Anonymous

itu di css nya ditaruh di ]]> kah mas :D

Balas

tak bantuin utak atik ya?

Balas

aku baru komen berarti aku yang paling cakep ya

Balas

Makin manteb nih mas followernya

Balas

kalo gak bisa tidur..mendingan nunggu sahur sajalah :-)

Balas

memang asyik kalo berkunjung di blog super ini, banyak ilmu yang bisa diperoleh...luarbiasa :-)

Balas

makasih juga mas Budi hehe...

Balas

yang keren yang komen terakhir yah hehe...

Balas
avatar
Anonymous

sambil nunggu sahur mendingan ngeblog yah mas...

Balas

gak apa-apa mas Budi lama yang nggak muncul...

Balas
avatar
Anonymous

Keren deh pokoknya yah mas tutorialnya, selalu baru dan fresh bikin seger selalu :)

Balas
avatar
Anonymous

Makin keren aja nih .

Balas

mantap mas ! :) , sangat membangun kualitas desain dalam sebuah template ..

terima kasih telah berbagi mas

Balas

Dari tadi masih nongkrong dimari nie, semoga aja mas andes ga ngambek isi blognya ane ubek2 terus nie...seru sih banyak tutorial menarik sekalian mo dipraktekin buat blog ane yg masih acakadut.... :D

Balas

wah keren mas widget Google+ nya hehehe :D saya sudah coba pasang di blog saya. Thanks ya ^^

Balas

Thanks artikel modifikasi widget google,...

Balas

Thanks artikel

Balas

Terima kasih Yah Mas Budi dan Mas Anthonie atas kunjunganya
Semoga Widget ini bermanfaat buat anda semua nya
Jangan lupa Bonus nya apa aja deh hhhhh

Balas

Datang lagi Mas Ande simak artikel yang bermanfaat ini tentang
Widget foolower Google + makasih Mas Ande :)

Balas
avatar
Anonymous

Segeran mana sama Vitamin C Nya Mas Anthonie yah Mas? hhhh

Balas

ijin share aja mas

Balas

Keren Mas.Saya Ambil Dulu Ya Script ya :)

Balas
avatar
Anonymous

thanks gaan, keren sekaali

Balas

Makasih gan tutorialnya.. setelah lama mencari akhirnya nemu dimari. widgetnya pun udah saya pajang.. ditunggu kunjungannya di http://www.dvodca.com

Balas

sudah saya copas di gadget blog saya
semoga bermanfaat.
saya tunggu kunjungannya di http://noer-dien.blogspot.com/

Balas

klo sekaligus gmna gan? menampilkan pto profil, followers dan tombol plusone nya? d tambahin apa aja?

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Cara Modifikasi Widget Google+ Badge Pada Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode