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

Modifikasi Widget Follower Blog Valid HTML5

Widget Follower Blog Valid HTML5 Modifikasi Widget Follower Blog Valid HTML5 – untuk membuat widget follower blog agar valid HTML5 sebenarnya tidak susah dan bisa di bilang simple. Namun pada tutorial ini bukan hanya sekedar untuk valid HTML5 saja yang akan saya bahas, melainkan untuk memodifikasi tampilan widget follower blog agar menjadi lebih menarik dan terlihat rapi dengan kondisi valid HTML5. Custom widget follower ini nantinya tidak berbeda pada tutorial yang sudah pernah saya bahas sebelumnya yakni tepatnya pada artikel yang berjudul modifikasi widget like box facebook dan modifikasi widget google+ follower. Seperti itulah nantinya hasil dari modifikasi widget follower blog, cukup menarik bukan. Namun cara penerapannya ke dalam blog agak sedikit berbeda dengan modifikasi widget facebook like box dan modifikasi widget google+ follower tersebut, karena pada kedua widget tersebut seluruh kodenya baik itu CSS maupun HTML langsung di terapkan kedalam widget oleh sebab itulah yang menyebabkan munculnya beberapa jumlah error pada saat validasi HTML5 di W3C. Maka dari itu untuk modifikasi widget follower blog agar valid HTML5 maka perlu memisahkan CSS dan menaruhnya kedalam template blog. Untuk lebih jelasnya, berikut tutorial untuk Modifikasi Widget Follower Blog Valid HTML5.

1. Login ke akun blogger.
2. Selanjutnya pada template pilih Edit HTML.
3. Copy kode berikut ini lalu taruh di atas kode ]]></b:skin>
.widget-follower { width: 280px; height: 140px; border-radius: 3px; position: relative; background: #E9FBE9; padding: 0px 0px 15px 0px; margin:0px auto 10px auto; } 
.widget-follower,.widget-follower:before,.widget-follower:after { background: #E9FBE9; border: 1px solid #52E052; }
.widget-follower:before,.widget-follower:after { position: absolute; content: &quot;&quot;; bottom: -3px; left: 2px; right: 2px; height: 1px; border-top: none; }
.widget-follower:after { left: 4px; right: 4px; bottom: -5px; box-shadow: 0 0 2px #52E052; }
4. Copy kode berikut ini lalu pasang ke widget HTML/Javascript.
<div class="widget-follower">
<div style="height:150px;overflow:hidden;">
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<div id="div-7w5ths5ahnit"></div>
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#52e052';
skin['ENDCAP_BG_COLOR'] = '#52e052';
skin['ENDCAP_TEXT_COLOR'] = '#000000';
skin['ENDCAP_LINK_COLOR'] = '#000000';
skin['ALTERNATE_BG_COLOR'] = '#transparent';
skin['CONTENT_BG_COLOR'] = '#transparent';
skin['CONTENT_LINK_COLOR'] = '#e9fbe9';
skin['CONTENT_TEXT_COLOR'] = '#000000';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#000000';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#000000';
skin['CONTENT_HEADLINE_COLOR'] = '#000000';
skin['NUMBER_ROWS'] = '2';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
 { id: 'div-7w5ths5ahnit',
   site: '10916685731781888212' },
  skin);
</script>
</div>
</div>
Keterangan:
Ganti tulisan warna merah dengan ID widget follower blog anda.

5. Terakhir tinggal klik Simpan dan lihat hasilnya.

Dari tutorial diatas maka widget follower blog sudah terlihat cukup menarik dan pastinya valid HTML5. Namun apabila ingin membuat ketiga widget tersebut tampil berurutan pada satu ruang widget, antara widget follower blog, widget google+ follower dan widget facebook like box maka anda perlu menambahkan sedikit kode lagi kemudian menaruhnya tepat di bawahnya kode point 4 di atas. Agar lebih mudah copy saja kode berikut ini, lalu ganti ID masing-masing dan taruh di bawah kode widget follower point 4 di atas.
<div class="widget-follower" style="height:100px;">
<div style="height:150px;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>

<div class="widget-follower" style="height:145px;">
<div style="height:150px;overflow:hidden;">
<div class="fb-like-box" data-href="http://www.facebook.com/andestyle" data-width="292" data-show-faces="true" data-stream="false" data-header="false" data-show_border="false"></div>
</div>
</div>
Dari kode di atas, widget facebook like box juga sudah valid HTML5. Demikian akhir dari tutorial sederhana untuk Modifikasi Widget Follower Blog Valid HTML5, sekian dan selamat mencoba karena hal tersusah adalah salah satu hal yang tidak pernah dicoba.

Berlangganan artikel via email

56 Response to "Modifikasi Widget Follower Blog Valid HTML5"

kalau widget follower saya ditaruh di footer mas, apakah caranya tetep sama nggak perlu dirubah yah mas? Makasih :)

Balas

kalau saya pasang di blog saya kira2 berantakan nggak ya ...???

Balas

sama aja mas Anthoni :)

Balas

kalo kang Ucup pasangnya sambil ngamuk2 pasti berantakan kang :)

Balas

blog saya udah pada diamankan gambarnya, masih hitung2an takut nambah loading blog :D
makasih mas buat tutornya

Balas

dengan begitu blog kita akan lebih seo ya mas, kerena dengan valid HTML 5, mesin searcah akan lebih mudah meng index blog kita

Balas

langsung praktik

Balas

kan bawa palu untuk diperbaiki

Balas

coba dulu ah, nanti kalau berantakan cs nya jaga 24 jam gak ya ?

Balas

Widget follower sy masih ori nih mas...blm pernah di utak itik....
Jd pingin juga ..sih biar keliat lebih menarik :)
Nanti deh...nunggu waktu senggangnya ada..thx njeh :)

Balas

Perlengkapan P3K nya....jgn lupa kebawa... :)

Balas

Tenang mas...cs nya 3 shift kok :)

Balas

Wah blog saya sudah tak pasang widget Blogger Follower warna pink mas hehehe :D
Mau ganti lagi sudah pusing mas soalnya harus edit HTML Template lagi hehehe :D

Balas

Kalau widget follower bawaan blogger itu loading nya lama mas. Jadi perlu di modifikasi ya mas andes? biar kelihatan lebih keren mas bud hehe :D

Balas

hehehe berarti yang jaga gantian ya mas bud hehehe :)

Balas

Yang penting pas saat pasang widget ini, jangan sambil ngantuk ya kang hehe :D

Balas

Berdo'a dulu mas sebelum pasang widget ini, supaya lancar dan berhasil hehe :D

Balas

berarti ada shif malam juga nih, bisa tidur dong , hehe

Balas

kalau udah Valid kayak gini jadi top dech mas Andes :)

Balas

wah keren mas.. lebih kelihatan berwarna gitu ya hasilnya..? bisa di serasiin sama template blog nya nih mas. hehehehe

Balas

hasilnyas sungguh luar biasa. keren dan menarik. terimakasih.

Balas

Wah keren mas widget follower valid html5, sekarang perlahan2 widget bawaan blogger bisa di modifikasi jadi valid html5

Balas

Ntar klu berantakan, bisa dibenerin tuh bawa aja ke salon template wkwkwk biar diribonding

Balas

Wah.. kayaknya soal kode2 begini Mas Andes ga pening ya??

Balas

ilmunya biar tak simpen ya kang...soalnya baru ngorek daleman blog, tuh hasilnya juga belom sepenuhnya bagus tuh....suwer deh.... ;o)

Balas

hehe warna apapun boleh mbak tergantung kesukaan masing2 :)

Balas

lumayanlah mas buat asesoris :)

Balas

terimakasih pak kunjungannya :)

Balas

belajar dari blognya mas virlyz juga :)

Balas

patut dicoba nih sob,,,

Balas

Ternyata widget Blogger Follower saya masih tetep sama mas, sama-sama masih berat loading nya. Saya dulu ambil script dari Blog Aizza. Katanya valid HTML5 getu. Kalau widget dari Mas Andes kira-kira gimana ya loading nya? hehe :)

Balas

sama aja mbak, kan pake js google friend connect juga :)

Balas

lagi males utak-atik anu.. bm dulu .

Balas

anunya jangan sering di utak atik gawat kalo ketahuan mang yono :)

Balas

sama masih belajar bang :)

Balas

keren buat mas andes paling pinter dalam mengotak atik blog , :)

Balas

Baca doa, wudhu, cuci tangan dulu yang, bersih biar
Gak kesrimped masang widget nya yah Mbak Rin..?

Balas

keren mas
idzin follow mas blog-nya

Balas

wah saya baru baca artikel yang satu ini mas,
izin praktek ya mas,
sangat membantu

Balas

sama kalau pegel-pegel bisa dipijet sekalian yah mas :)

Balas

yang penting berdoa dan berusaha kan intinya yah hehe...

Balas

bagus bagus bagus....
pengen nyoba mas....

Balas

silahkan mas boleh di coba

Balas

mas andes, kalau nyari ID widget follower caranya gimana :)

Balas

buka aja blognya kang ucup lalu tekan CTRL+U kemudian gunakan CTRL+F cari judul widgetnya, misal judul widget follower blognya kang ucup Blogger Friends ntar scroll dikit kebawah pasti nemuin kodenya

Balas

siip mas. teng kyu :)

Balas

Maaf Mas sebelumnya, CSS pada widget followers Mas Andes ini
Setelah saya cex di W3C masih ada Warning, di semua elemen css
Contoh di bawah ini.

.widget-follower { width: 280px; height: 140px; border-radius: 3px; position: relative; background: #E9FBE9; padding: 0px 0px 15px 0px; margin:0px auto 10px auto; }
.widget-follower,.widget-follower:before,.widget-follower:after { background: #E9FBE9; border: 1px solid #52E052; }
.widget-follower:before,.widget-follower:after { position: absolute; content: ""; bottom: -3px; left: 2px; right: 2px; height: 1px; border-top: none; }
.widget-follower:after { left: 4px; right: 4px; bottom: -5px; box-shadow: 0 0 2px #52E052; }


Apakah tidak apa-apa? atau bisa jadi error validasi CSS3
Atau Mas Andes di sulap lagi biar gak terdetek Warning
Contoh screnshoot di bawah ini :
http://3.bp.blogspot.com/-YFlV1luhJrA/UmXkyQZ7yKI/AAAAAAAADyo/VA9KtWJCrFA/s1600/widget+followers.jpg

Balas

terimakasih kang karrys koreksinya :) hapus saja kode ini kang
content: "";
itu yang masih keliatan di screenshot, lainnya belom saya koreksi lagi..

Balas

mengambil id widget followernya dimana mas\ ? ? ?

Balas

di blog sampean klik CTRL+U mas lalu cari kode yang mirip diatas seperti biasa pake CTRL+F biar lebih mudah

Balas

Makasih mas Andes.. ijin pakai salam kenal juga

Balas

boleh juga nih buat belajar valid memvalidkan widget, makasih informasinya

Balas

Tutorial keren mas. Saya coba praktikkan ya...? Terima kasih...

Balas

wah ko saya pasang tetep error ya nggak valid HTML5

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 "Modifikasi Widget Follower Blog Valid HTML5" ini bermanfaat, share ke jejaring sosial.
Konversi Kode