ProBlogiz

Pengertian iFrame Toolbar sebenarnya sebuah rangka (frame) dengan menggunakan menubar atau toolbar yang muncul di bagian atas halaman web/blog. Sesuai namanya iframe akan seperti elemen/dokumen HTML, yang terpisah dengan konten frame. iFrame Toolbar bekerja dengan menggunakan jQuery, mirip seperti sticky top menubar, saat Anda scroll browser.

Penggunaan iFrame Toolbar sering dijumpai diblog/website seperti situs-situs Free Template, social network sites (facebook), search engines, dan lainnya. Atau pada saat Anda klik sebuah tommbol demo yang mengarahkan/redirect ke tab baru, disana akan terlihat iframe toolbar di bagian atas halaman demo.

iFrame Toolbar
iframe toolbar screenshot



Bagi sobat Blogger, iFrame Toolbar ini juga dibutuhkan sebagai penunjang halaman demo / blog demo yang telah Anda buat. Keuntungannya, dapat membantu meningkatkan pageview blog Anda, setiap kali seseorang mengklik link-link blog utama yang ditambahkan pada iFrame toolbar, atau pembaca Anda dapat kembali ke situs Anda dengan klik pada link Home.

Pada tutorial ini, saya akan membahas cara Membuat iFrame Toolbar dengan Blogger Template. Jadi kita akan membuat sebuah blog baru di blogger, dan menggunakannya sebagai iFrame Toolbar. Sebenarnya, Anda juga dapat meng-host / upload di server sendiri, dengan free hosting seperti Github, untuk Google Drive atau Dropbox sepertinya tidak bisa. ( Untuk membuatnya dan upload di Github akan dibahas artikel selanjutnya)

Langkah Membuat iFrame Toolbar dengan Blogger Template 

1. Buat Blog Baru 

Pada Dasbor Blogger, silahkan buat blog simple/sederhana, beri nama blog baru Anda,eg: "http://mydemo.blogspot.com"
Untuk lebih detail tentang blog baru lihat di Cara Membuat Blog di Blogger

2. Donwload File (xml)

iFrame Toolbar ini berupa file xml, yang disesuaikan dengan blogger. Ukuran sizenya kurang lebih 11kb.
Download filenya dibawah ini:
Download

3. Upload File 

Kembali ke Blog Baru yang telah dibuat, buka Template > klik tombol Cadangkan/Pulihkan > Pilih: Unggah template dari file di hard drive Anda.
Klik tombol Choose File.
Setelah upload berhasil, klik lihat Blog, jika tampilan sesuai dengan Demo diatas berarti template iframe telah berhasil.

 So, sekarang blog baru Anda telah berubah dari Simple Blogger Template menjadi iFrame Toolbar Template (ini cuma istilah saya saja).
Bagaimana cara penerapan iframe ini menjadi template demo untuk blog Anda? Kita lanjutkan ke langkah berikut.

Penerapan iFrame Toolbar untuk Blog Demo 

Pada dasarnya, iframe ini bukan sebagai main page dari halaman posting atau halaman demo, ini hanya sebagai penunjang dari blog utama Anda. Dari toolbar pengunjung akan diberi opsi Back To Post (kembali ke Blog Utama), menggunakan kotak pencarian dengan tujuan Blog Utama, sosial icon, opsi label atau link-link url dari Blog Utama.
Untuk mengarahkan url Demo misalnya dengan iframe sebagai parameter, anda hanya menggunakan parameter :"?iframe=URL"

Contoh:
http://iframetool.blogspot.com/?iframe=http://target.blogspot.com/

ket :
http://iframetool.blogspot.com/ : blog iframetoolbar yang baru dibuat
http://target.blogspot.com/ : alamat blog/halaman yang dijadikan target
?iframe= : parameter untuk redirect blog sebagai frame

Untuk contoh demo diatas, saya memakai link dengan parameter sebagai berikut:
http://problogiz-demo.blogspot.com/?iframe=http://mydemopro.blogspot.com/2012/12/accordian-style-slider-dengan-css3.html

Ini berarti sebagai target tujuan untuk memasang iframe toolbar di url :http://mydemopro.blogspot.com/2012/12/accordian-style-slider-dengan-css3.html

Setiap Anda ingin menempatkan iframe toolbar di halaman blog atau Url yang diinginkan, gunakan iframe sebagai parameter seperti diatas.

Sekian dulu sobat semoga artikel ini bisa membantu, silahkan tanyakan bagi yang menemui kesulitan untuk Membuat iFrame Toolbar dengan Blogger Template


Read More

Eror Validasi HTML5

Artikel ini dibuat sebagai kelanjutan dari artikel Validasi HTML/XHTML dan HTML5 Problogiz yang lalu, Kumpulan Eror Validasi HTML dan Solusinya. Tidak mungkin tentunya, membahas masalah error validasi yang begitu banyak hanya dalam satu posting artikel, kalau pun iya pasti akan tidak efisien. Memang sejak direkomendasikan W3C, kandidat html masa depan-HTML5, semakin banyak pelaku, pengembang website/blog yang lebih peduli mengenai HTML Semantic atau struktural element HTML5 yang baru.

Bagi pengguna bloggger/blogspot yang menggunakan template berbasis HTML5 banyak menemui kesalahan-kesalahan validasi mark-up HTML, jika di cek di Validator Test seperti W3C Validator. Ini karena memang blogspot belum sepenuhnya support HTML5, ini dapat Anda temui di comment/threaded comments blogger system, maupun eksternal CSS Reset Stylesheet Blogger juga menyumbangkan error di HTML5 Validasi. Pengguna blogspot boleh bersyukur sekarang ada pengganti System Commenting yang Valid HTML5 seperti Google Plus Commenting System (Komentar Google Plus), yang dapat Anda implementasikan di blog.

Bagi yang masih suka menggunakan sistem Komentar Blogger ( khususnya Threaded Comment Blogger) juga tidak perlu bingung lagi, karena fitur ini mungkin penyumbang kesalahan terbanyak, sekarang Anda dapat memasangnya fitur tersebut tanpa ada pesan kesalahan dari validator. Anda dapat melihat tutorialnya di Blog.Kangismet, tentang Blogger Threaded Comments Hack V.3, yang dapat diterapkan di blog Anda (khusus threaded comment bukan single).

Pada Kumpulan Eror Validasi HTML dan Solusinya Part 1 ada banyak pengunjung yang menanyakan atau memberi solusi pada eror-eror validasi HTML5 yang mereka temui. Kali di bagian dua, saya mencoba sharing beberapa solusi dari kesalahan markup atau semantik yang dididapat dari berbagai sumber seperti dari www.stackoverflow.com.

Kumpulan Eror Validasi HTML dan Solusinya Part 2

1. Error Threaded Commenting Blogger

Mungkin Anda pernah menemui kesalahan berikut jika mengaktifkan threaded komentar blogspot:
Bad value for attribute src on element iframe:
Must be non-empty. …t='410' id='comment-editor' name='comment-editor' src='' width='100%'>

Bad value 100% for attribute width on element iframe:Expected a digit but saw % instead.
…t='410' id='comment-editor' name='comment-editor' src='' width='100%'>

The allowtransparency attribute on the iframe element is obsolete.Use CSS instead. 
…t='410' id='comment-editor' name='comment-editor' src='' width='100%'>

The frameborder attribute on the iframe element is obsolete.Use CSS instead. 
…t='410' id='comment-editor' name='comment-editor' src='' width='100%'>

Contoh eror-eror diatas sebagian yang mungkin Anda temui, contoh diatas menunjukkan kesalahan ada di
id='comment-editor'
ini semua di fitur threaded komentar, kurang lebih seperti ini:

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' scrolling='no' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>

Solusinya:

allowtransparency='true', frameborder='0' scrolling='no' width='100%' style='display: none' src='' , atribut pada iframe sudah ditinggalkan di HTML5, jadi hapus semua kode-kode itu.

Jangan lupa pasang css berikut ditemplate:

iframe{ border:none; overflow:hidden } 
img{ border:none }

◉ Cari kode untuk comment-editor-src :

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

Ganti semua dengan kode yang baru berikut:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'> <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src'/> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src'/> </b:if>

Anda juga akan menemukan kesalahan seperti ini:

The name attribute is obsolete. Consider putting an id attribute on the nearest container instead.
<a name='comment-form'></a>

Attribut name juga tidak valid di html5 (usang)

Solusinya:

◉ Ganti <a name='comment-form'></a> dengan yang baru ini:

<a href='#comment-form'>

sumber: http://blog.kangismet.net/2013/09/tips-membuat-halaman-posting-valid-html5.html


Sampai tahap ini validasi untuk sematik HTML sudah valid, namun belum dibagian script threaded-nya, kurang lebih sebagain contoh error di bagian ini:

Attribute kind not allowed on element div at this point.
 <div id='bc_0_29C' kind='c'><div id='bc_0_29CT'><div id='bc_0_28T' class='comme…

Attribute kind not allowed on element li at this point.
 … id='bc_0_5B' class='comment' kind='b'><div class='avatar-image-container'><im…

An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
…AAAAAAyI/nr3cnCjbw7A/s512-c/photo.jpg'></img></div><div id='c66438150893583827…

Attribute kind not allowed on element div at this point
…_0_5M' class='comment-header' kind='m'><cite class='user'><a rel='nofollow' hr… </div>

Semakin banyak komentar visitor maka semakin banyak pula eror semacam ini.
Untuk memperbaiki eror tersebut Anda bisa menerapkan hack threaded comment blogger valid html5 beserta style-nya, di tutorial Kang Ismet di alamat berikut:

http://blog.kangismet.net/2013/09/blogger-threaded-comments-hack-v3.html


Baik sobat, sementara cukup di Validasi HTML5 Threaded Comment Blogger, selanjutnya akan ada update-update baru untuk eror-eror yang lainnya di postingan ini.

Read More

Simbol Bintang/Star Entitas HTML atau Star Symbol HTML Entities juga tool kode HTML dari Problogiz untuk membantu sobat menampilkan simbol-simbol bintang ke website/blog Anda atau dapat dirender oleh browser. Seperti sebelumnya Tool Entitas HTML Simbol Icon, dan HTML Arrow Simbol Entitas, tool ini juga sangat membantu menampilkan karakter-karakter / simbol yang tidak tersedia di keybord PC atau laptop Anda.

Contoh :
Kode HTML
&#9733;
akan menampilkan simbol bintang seperti ini ★

HTML Star Symbol Entities

&#9733;

&#9734;

&#10017;

&#10018;

&#10019;

&#10020;

&#10021;

&#10022;

&#10023;

&#10024;

&#10025;

&#10026;

&#10027;

&#10028;

&#10029;

&#10030;

&#10031;

&#10032;

 


Recource: : www.developphp.com


Read More

HTML Arrow Simbol Entitas dan Direction Simbol Entitas adalah kode HTML (hex code) yang digunakan untuk menampilkan simbol-simbol panah atau Arrow Icon di website/blog. Dengan tool ini Anda dapat memilih simbol-simbol arrow atau simbol arah yang diperlukan, yang tidak dapat Anda temukan di tombol keybord. Sebagai contoh misalnya Anda ingin menampilkan style list
ol
,
ul
, yang berbeda seperti dibawah ini:

Icon Symbols / Ikon Simbol
Arrow Symbols / Panah Simbol
Star Symbols / Bintang Simbol

Kode simbol diatas seperti ini:
&#9755;

Berikut referensi kode HTML Entitas untuk simbol-simbol Arrow dan Direksi


&#8592;

&#8593;

&#8594;

&#8595;

&#8596;

&#8597;

&#8598;

&#8599;

&#8600;

&#8601;

&#8602;

&#8603;

&#8604;

&#8605;

&#8606;

&#8607;

&#8608;

&#8609;

&#8610;

&#8611;

&#8612;

&#8613;

&#8614;

&#8615;

&#8616;

&#8617;

&#8618;

&#8619;

&#8620;

&#8621;

&#8622;

&#8623;

&#8624;

&#8625;

&#8626;

&#8627;

&#8628;

&#8629;

&#8630;

&#8631;

&#8632;

&#8633;

&#8634;

&#8635;

&#8636;

&#8637;

&#8638;

&#8639;

&#8640;

&#8641;

&#8642;

&#8643;

&#8644;

&#8645;

&#8646;

&#8647;

&#8648;

&#8649;

&#8650;

&#8651;

&#8652;

&#8653;

&#8654;

&#8655;

&#8656;

&#8657;

&#8658;

&#8659;

&#8660;

&#8661;

&#8662;

&#8663;

&#8664;

&#8665;

&#8666;

&#8667;

&#8668;

&#8669;

&#8670;

&#8671;

&#8672;

&#8673;

&#8674;

&#8675;

&#8676;

&#8677;

&#8678;

&#8679;

&#8680;

&#8681;

&#8682;

&#9650;

&#9651;

&#9652;

&#9653;

&#9654;

&#9655;

&#9656;

&#9657;

&#9658;

&#9659;

&#9660;

&#9661;

&#9662;

&#9663;

&#9664;

&#9665;

&#9666;

&#9667;

&#9668;

&#9669;

&#9754;

&#9755;

&#9756;

&#9757;

&#9758;

&#9759;

&#10136;

&#10137;

&#10138;

&#10139;

&#10140;

&#10141;

&#10142;

&#10143;

&#10144;

&#10145;

&#10146;

&#10147;

&#10148;

&#10149;

&#10150;

&#10151;

&#10152;

&#10153;

&#10154;

&#10155;

&#10156;

&#10157;

&#10158;

&#10159;

&#10160;

&#10161;

&#10162;

&#10163;

&#10164;

&#10165;

&#10166;

&#10167;

&#10168;

&#10169;

&#10170;

&#10171;

&#10172;

&#10173;

&#10174;



Recource: : www.developphp.com


Read More

Entitas HTML / HTML Entities adalah kode HTML yang dibuat untuk membuat/render sebuah simbol di website. Kita tahu tidak semua simbol dapat diterapkan untuk menampilkan sumber kode dikarenakan keterbatasan karakter pada keybord kita. Sebagai contoh jika Anda ingin menampilkan karakter-karakter khsusus dalam website/blog, seperti simbol icon telepon misalnya, yaitu dengan cara menggunakan entitas HTML

&#9742;
sehingga akan muncul icon ☎

Sebenaranya ada ribuan entitas HTML yang digunakan secara universal, namun saya akan berbagi yang umum saja, yang sering digunakan dan lebih dikenali oleh beberapa mayor browser. Dan juga tentu menggunakan hex code daripada menggunakan keyword key disebabkan browser compliance yang lebih baik. Misalnya ada beberapa keyword key yang gagal dirender oleh Internet Explorer, sedangkan versi kode hex simbol bekerja di semua browser.

Ada 3 macam HTML Entities yang akan saya bagikan bagi sobat Blogger yang membutuhkan untuk kali ini, yaitu:

  1. Icon Symbols / Ikon Simbol
  2. Arrow Symbols / Panah Simbol
  3. Star Symbols / Bintang Simbol
Klik untuk melihat:
Entitas HTML Arrow Simbol dan
Entitas HTML Star Simbol

ICON SYMBOLS / IKON SIMBOL

Berikut referensi entitas HTML Simbol Ikon

&#9760;

&#9761;

&#9762;

&#9763;

&#9764;

&#9765;

&#9766;

&#9767;

&#9768;

&#9769;

&#9770;

&#9771;

&#9772;

&#9773;

&#9774;

&#9775;

&#9728;

&#9729;

&#9730;

&#9731;

&#9732;

&#9742;

&#9743;

&#9784;

&#9785;

&#9786;

&#9787;

&#9788;

&#9789;

&#9790;

&#9812;

&#9813;

&#9814;

&#9815;

&#9816;

&#9817;

&#9818;

&#9819;

&#9820;

&#9821;

&#9822;

&#9823;

&#9824;

&#9825;

&#9826;

&#9827;

&#9828;

&#9829;

&#9830;

&#9831;

&#9832;

&#9833;

&#9834;

&#9835;

&#9836;

&#9837;

&#9838;

&#9839;

&#9985;

&#9986;

&#9987;

&#9988;

&#9989;

&#9990;

&#9991;

&#9992;

&#9993;

&#9996;

&#9997;

&#9998;

&#9999;

&#10000;

&#10001;

&#10002;

&#10003;

&#10004;

&#10005;

&#10006;

&#10007;

&#10008;

&#10009;

&#10010;

&#10011;

&#10012;

&#10013;

&#10014;

&#10015;

&#10016;

&#10033;

&#10034;

&#10035;

&#10036;

&#10037;

&#10038;

&#10039;

&#10040;

&#10041;

&#10042;

&#10043;

&#10044;

&#10045;

&#10046;

&#10047;

&#10048;

&#10049;

&#10050;

&#10051;

&#10052;

&#10053;

&#10054;

&#10055;

&#10056;

&#10057;

&#10058;

&#10059;

&#9670;

&#9671;

&#9672;

&#9673;

&#9674;

&#9675;

&#9676;

&#9677;

&#9678;

&#9679;

&#9680;

&#9681;

&#9682;

&#9683;

&#9684;

&#9685;

&#9686;

&#9687;

&#9688;

&#9689;

&#9690;

&#9691;

&#9692;

&#9693;

&#9694;

&#9695;

&#9696;

&#9697;

&#9698;

&#9699;

&#9700;

&#9701;

&#9702;

&#9703;

&#9704;

&#9705;

&#9706;

&#9707;

&#9708;

&#9709;

&#9710;

&#9711;



Recource: : www.developphp.com


Read More

Google+ Followers

Submit email Anda, dapatkan update artikel:


Like Me

artikel terbaru

|Copyright © 2013| Problogiz |All Rights Reserved|