Kamu punya channel Youtube sendiri dan masih membutuhkan banyak viewer, coba manfaatkan channel media sosial yang kamu miliki. Terutama yang memiliki peluang untuk bisa mengarahkan mereka yang selama ini menjadi follower atau fans untuk diantar kesana.
Jika kamu memiliki cukup banyak follower di twitter ataupun Instagram, katakanlah diatas 1000, jangan sungkan untuk mulai menyebarkan kutipan atau penggalan video atau sertakan alamat link video terkini atau terbaru dari channel kamu. Akan bagus juga penyebarannya jika kita sertakan alamat URL channel Youtube di biodata sebagai pelengkap alamat rumah web pribadi.
Untuk kamu yang memiliki blog, baik di blogspot, yakni blogger, kamu bisa menampilkan di bilah sisi atau sidebar agar bisa tayang baik saat diakses di halaman beranda atau juga di tautan yang spesifik. Mengapa yang popular lebih baik, karena kita ingin mengikuti alur algoritma Youtube tanpa perlu ada kecurigaan yang berlebih.
Jangan lupa untuk dikombinasikan dengan fitur autoplay agar video kita bisa langsung diputar dan perhitungan waktu tonton di channel kita juga mulai bertambah.
Sudah tentu hapal kan bagimana cara untuk mendapatkan link youtube dari video yang ingin kita tambahkan di sidebar?
1. Tuju laman channel Youtube milik kamu, dan cari video yang ingin kita sertakan atau embedded.
2. Klik 'Share' di bawah video yang kita lihat/
3. Saat 'Share a link' pilih bagian Embed
4. Salin/Copy kode HTML yang muncul.
5. Tempel/Paste di sisi bilah atau sidebar yang telah kita siapkan dengan pilihan HTML/Javascript.
6. Tambahkan ?autoplay=1 tepat di belakang ID video, sehingga hasilnya seperti :
Kode bawaan:
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/[Video ID]” frameborder=”0″ allowfullscreen></iframe>”,
Dan kode setelah ditambahkan “?autoplay=1”:
<iframe width=”560″ height=”315″ src=” https://www.youtube.com/embed/[Video ID]I?&autoplay=1″ frameborder=”0″ allowfullscreen></iframe>
Simpan dan publikasikan!
Tampilkan postingan dengan label HTML. Tampilkan semua postingan
Tampilkan postingan dengan label HTML. Tampilkan semua postingan
Autoplay Embedded Youtube Video Iframe on Sidebar
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
Read More Tak Perlu Lagi Manual di Blogspot
Banyak yang menganggap tanggal kmarin begitu istimewa. Dengan kombinasi angka menjadi 090909, saat itu banyak bertebaran pesan di akun Twitter perihal kejadian-kejadian yang banyak terjadi di sana. Mulai dari Ulang Tahun Presiden SBY, penuhnya rumah sakit yang ingin melunasi keinginan ibu-ibu agar bisa di operasi cesar agar anaknya mudah dikenali kelahirannya, hingga kejutan dari Blogger nih.
Apa itu? Mendekati Ulang tahunnya ke 10, blogspot meyediakan fitur baru dalam versi draftnya berupa summary alias pemotongan post secara mudah dan praktis. Tak perlu lagi memasukan kode-kode javascript dan HTML lainnya. Praktis? benar sih, tapi knapa lama banget ya, hingga nunggu 10 tahun! atau memang dirasa tak perlu pake sumary, karena blogspot mengajak agar irit menulis kata di posting :D, sekalian aja posting di mikroblog Twitter aja kalo gitu ya :D
Apa itu? Mendekati Ulang tahunnya ke 10, blogspot meyediakan fitur baru dalam versi draftnya berupa summary alias pemotongan post secara mudah dan praktis. Tak perlu lagi memasukan kode-kode javascript dan HTML lainnya. Praktis? benar sih, tapi knapa lama banget ya, hingga nunggu 10 tahun! atau memang dirasa tak perlu pake sumary, karena blogspot mengajak agar irit menulis kata di posting :D, sekalian aja posting di mikroblog Twitter aja kalo gitu ya :D
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
HTML : Moving Title on Title Bar
Bila menginginkan title atau judul yang terpajang di bagian title bar pada browser bergerak maka kita perlu bantuan javascript untuk mewujudkannya. Tak pula marquee. Sebab marquee hanya punya kuasa ketikan berada di dalam <body>.
Untuk memformat title agar bergerak, kita bisa melakukan editing di bagian Edit HTML.
Berikut petunjuknya disesuaikan dengan tipe skin pada blogspot.
A. Untuk tipe layout.
Masuk ke bagian Edit HTML, dan lakukan hal berikut :
1. Hapus : <title><data:blog.pageTitle/></title>
2. Gantikan dengan :
<b:include data='blog' name='all-head-content'/>
<script language='JavaScript'>
var txt="<data:blog.pageTitle/>";
var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
</script>
3. Klik pratinjau untuk melihat hasilnya.
4. Simpan bisa sudah berfungsi dengan baik.
B. Untuk tipe Template :
1. Hilangkan : <title><$BlogPageTitle$></title>
2. Gantikan dengan :
<script language='JavaScript'>
var txt="<$BlogPageTitle$>";
var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
</script>
3. Klik Pratinjau untuk memastikan pengaruhnya.
4. Simpan.
Catatan tambahan :
Untuk memberikan spasi pada saat pemunculan title yang mengandung dua kata lalu memberikan renggang agar tak menempel, bisa edit bagian :
var txt="<data:blog.pageTitle/>";
menjadi :
var txt="<data:blog.pageTitle/>"+' ';
Untuk memformat title agar bergerak, kita bisa melakukan editing di bagian Edit HTML.
Berikut petunjuknya disesuaikan dengan tipe skin pada blogspot.
A. Untuk tipe layout.
Masuk ke bagian Edit HTML, dan lakukan hal berikut :
1. Hapus : <title><data:blog.pageTitle/></title>
2. Gantikan dengan :
<b:include data='blog' name='all-head-content'/>
<script language='JavaScript'>
var txt="<data:blog.pageTitle/>";
var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
</script>
3. Klik pratinjau untuk melihat hasilnya.
4. Simpan bisa sudah berfungsi dengan baik.
B. Untuk tipe Template :
1. Hilangkan : <title><$BlogPageTitle$></title>
2. Gantikan dengan :
<script language='JavaScript'>
var txt="<$BlogPageTitle$>";
var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
</script>
3. Klik Pratinjau untuk memastikan pengaruhnya.
4. Simpan.
Catatan tambahan :
Untuk memberikan spasi pada saat pemunculan title yang mengandung dua kata lalu memberikan renggang agar tak menempel, bisa edit bagian :
var txt="<data:blog.pageTitle/>";
menjadi :
var txt="<data:blog.pageTitle/>"+' ';
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
HTML : Post Title Marquee in Blogger's Layout
Marquee? siapa yang tak kenal efek yang dihasilkannya. Kode HTML marquee memang sering digunakan untuk menyulap tampilan teks atau gambar untuk lebih aktif bergerak. Manjur untuk menghilangkan kesan monoton.
Nah kali ini edittag ingin berbagi untuk menyetingnya di layout blogger. Bagian yang ingin digerakkan adalah pada judul postingan.
Untuk itu ikuti prosedur berikut :
Klik subtab edit HTML pada bagian Template. Atau bila kita memulainya dari dasboard maka langkahnya adalah klik tautan Layout, lalu klik Edit HTML. Bila sudah tiba disini, centanglah kotak Expand Template Widget. Tunggu sesaat agar dimuat semua kode XMLnya.
Lalu coba cari kode berikut :
<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
Lalu kita akan memasang kode marquee di bagian depan title. Karena keterbatasan ruangan disini, maka yang kiranya layak digunakan adalah atribut direction left atau right. Hingga akan termuat kode lengkapnya menjadi berikut :
<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<marquee direction='left'><h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3></marquee>
</b:if>
Tentu ada catatan ringan nih, semoga ingat akan ketentuan marquee di postingan sebelumnya akan kebutuhan teknis penggunaan marquee di browser. Contoh bisa dilihat disini.
Postingan terkait :
- Masalah teknis penggunaan Marquee.
- Atribut HTML pada Marquee.
Kabarkan ke teman blog ini
Free Tell-a-Friend by Bravenet.com
Nah kali ini edittag ingin berbagi untuk menyetingnya di layout blogger. Bagian yang ingin digerakkan adalah pada judul postingan.
Untuk itu ikuti prosedur berikut :
Klik subtab edit HTML pada bagian Template. Atau bila kita memulainya dari dasboard maka langkahnya adalah klik tautan Layout, lalu klik Edit HTML. Bila sudah tiba disini, centanglah kotak Expand Template Widget. Tunggu sesaat agar dimuat semua kode XMLnya.
Lalu coba cari kode berikut :
<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
Lalu kita akan memasang kode marquee di bagian depan title. Karena keterbatasan ruangan disini, maka yang kiranya layak digunakan adalah atribut direction left atau right. Hingga akan termuat kode lengkapnya menjadi berikut :
<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<marquee direction='left'><h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3></marquee>
</b:if>
Tentu ada catatan ringan nih, semoga ingat akan ketentuan marquee di postingan sebelumnya akan kebutuhan teknis penggunaan marquee di browser. Contoh bisa dilihat disini.
Postingan terkait :
- Masalah teknis penggunaan Marquee.
- Atribut HTML pada Marquee.
Kabarkan ke teman blog ini
Free Tell-a-Friend by Bravenet.com
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
HTML : Create Dropdown Menu
Tampilan blogroll berupa dropdown memang jitu untuk memangkas ruang blog yang tersisa. Dengan wujudnya yang praktis, hanya perlu mengklik opsi dari alamat-alamat blog teman , maka kita bisa melemparkan halaman ke alamat URL yang dituju.
Sayangnya widget bawaan blogger untuk mengumpulkan alamat URL teman belum dibekali dengan kemampuan ini. Baru sebatas tampilan widget arsip yang bisa diolah tampilanya menjadi dropdown.
Untuk itu kita bisa saja mencantumkan kode dropdown ke dalam wadah widget HTML/Javascript sebagai berikut :
<select name="archivemenu" onchange="document.location.href=this.optionsthis.selectedIndex].value;">
<option selected>- Pilihlah -</option>
<option value="[alamat URL]">nama blog1</option>
<option value="[alamat URL]">nama blog2</option>
<option value="[alamat URL]">nama blog3</option>
</select>
Contoh :
"document.location.href=this.options[this.selectedIndex].value;">
Hanya memang kelemahanya kita mesti menuliskan satu persatu alamat URL bila ada penambahan. Alternatif lain untuk menghemat buka tutup akses widget adalah dengan menggunakan layanan dari Oggix akan Link Manager. Meski masih terhitung memasukan kodenya ke dalam widget HTML/Javascript, namun untuk menambahkan alamat URL kita bisa melakukannya dalam dasbor Oggix. Tentu ini akan lebih irit bila kita masih aktif menggunakan layanan dari Oggix. Semisal layanan Shoutbox tak berbayarnya. Jadi sekali kita balas sapaan melalui shoutbox kita juga bisa memasukan alamat URL teman dan menampilkan menu dropdown sekaligus. Wah...cocok nih buat yang kepincut dengan alamat blog teman baru dan berniat memasukan daftar temannya sekaligus.
Jadi bila kita sudah masuk log ke dalam Oggix, tuju Menu Manage Link, masuk ke submenu Settings, pada daftar isian selanjutnya kita akan menemukan kolom Type. Pilih opsi Dropdown. Lalu Save. Untuk memasukan alamat URL teman, kita buka submenu Manage Link (masih dalam menu utama Manage Link). Masukan nama, alamat URL dan deskripsi blognya. Bila selesai tekan Save. Lalu untuk mendapatkan kode HTML kita tuju menu Install Manage Link, lalu salin kode yang sudah dibuat secara otomatis disitu.
Bila sudah disalin maka pasang pada elemen halaman dengan pilihan HTML/Javascript (layout->penambahan elemen halaman->tambahkan elemen halaman->HTML/Javascript).
Nah, serta merta akan muncul blogroll dalam wujud dropdown disana.
Tag : blogger horizontal drop down menu.
Kabarkan ke teman blog ini
Free Tell-a-Friend by Bravenet.com
Sayangnya widget bawaan blogger untuk mengumpulkan alamat URL teman belum dibekali dengan kemampuan ini. Baru sebatas tampilan widget arsip yang bisa diolah tampilanya menjadi dropdown.
Untuk itu kita bisa saja mencantumkan kode dropdown ke dalam wadah widget HTML/Javascript sebagai berikut :
<select name="archivemenu" onchange="document.location.href=this.optionsthis.selectedIndex].value;">
<option selected>- Pilihlah -</option>
<option value="[alamat URL]">nama blog1</option>
<option value="[alamat URL]">nama blog2</option>
<option value="[alamat URL]">nama blog3</option>
</select>
Contoh :
"document.location.href=this.options[this.selectedIndex].value;">
Hanya memang kelemahanya kita mesti menuliskan satu persatu alamat URL bila ada penambahan. Alternatif lain untuk menghemat buka tutup akses widget adalah dengan menggunakan layanan dari Oggix akan Link Manager. Meski masih terhitung memasukan kodenya ke dalam widget HTML/Javascript, namun untuk menambahkan alamat URL kita bisa melakukannya dalam dasbor Oggix. Tentu ini akan lebih irit bila kita masih aktif menggunakan layanan dari Oggix. Semisal layanan Shoutbox tak berbayarnya. Jadi sekali kita balas sapaan melalui shoutbox kita juga bisa memasukan alamat URL teman dan menampilkan menu dropdown sekaligus. Wah...cocok nih buat yang kepincut dengan alamat blog teman baru dan berniat memasukan daftar temannya sekaligus.
Jadi bila kita sudah masuk log ke dalam Oggix, tuju Menu Manage Link, masuk ke submenu Settings, pada daftar isian selanjutnya kita akan menemukan kolom Type. Pilih opsi Dropdown. Lalu Save. Untuk memasukan alamat URL teman, kita buka submenu Manage Link (masih dalam menu utama Manage Link). Masukan nama, alamat URL dan deskripsi blognya. Bila selesai tekan Save. Lalu untuk mendapatkan kode HTML kita tuju menu Install Manage Link, lalu salin kode yang sudah dibuat secara otomatis disitu.
Bila sudah disalin maka pasang pada elemen halaman dengan pilihan HTML/Javascript (layout->penambahan elemen halaman->tambahkan elemen halaman->HTML/Javascript).
Nah, serta merta akan muncul blogroll dalam wujud dropdown disana.
Tag : blogger horizontal drop down menu.
Kabarkan ke teman blog ini
Free Tell-a-Friend by Bravenet.com
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
HTML : Marquee Issue
Untuk memasang Marquee memang banyak panduan yang bisa membantu. Atribut penyertanyapun juga dengan mudah kita temukan melalui Google. Mulai dari menjalankan dari arah yang berbeda, menata interval waktunya sampai menghentikan pergerakan saat mouse mengampiri teks yang diselimuti tauatan ke alamat web.
Bila hendak memasangnya dengan mode layout (type template terbaru blogger) kita pun mendapati elemen halaman HTML/Javascript untuk menampung kode marquee. Namun kali ini arahkan perhatian bukan pada cara pemasangan, tapi kepada efek yang dihasilkan pada perambah yang berbeda. Ambil 2 perambah yang cukup banyak penggunanya. Yakni IE (Internet Explorer dan Firefox.)
Coba gunakan atribut direction horizontal (baik ke arah kanan maupun kiri : marquee direction=right/left) pada marquee yang kita pakai. Saat memasukan kodenya melalui Menambah ELement Halaman (Add Page Elements) bisa jadi hasil yang kita lihat akan berbeda di kedua perambah tadi. IE akan memperlakukan kode marquee secara sempurna. Sangat berbeda hasilnya bila kita simak di Firefox. Kode tak dijalankan secara sempurna. Boro-boro marqueenya jalan, malah kita tak menemukan tampilan teks yang diapit oleh marquee. Hilang tanpa bekas. Kemanakah teks yang mestinya berjalan itu?
Sekarang coba kita lakukan langkah yang sama seperti diatas, namun kali ini kita ubah arahnya secara vertical (marquee direction=up/down). Hasilnya akan jauh memuaskan. Baik di IE maupun Firefox keduanya berjalan normal.
Kedua hasil percobaan tadi membuktikan bahwa penggunaan Element Halaman (Page Elemen) berjenis HTML/Javascript yang diberlakukan oleh Layout Blogger hanya mengijinkan kode HTMLyang seutuhnya valid. Dalam artian bahwa kode HTML yang diterima hanya bisa dijalankan dengan sempurna bila kode HTML telah disetujui oleh konsorsium yang beranggotakan para pengembang perambah di dunia. Lalu bila kita kembali ke masalah marquee, kode ini sebenarnya ekstensi tak resmi yang diperkenalkan pihak Microsoft selaku pengembang perambah IE. Tak heran 'kan, bila kita sering menemukan kejanggalan marquee pada perambah selain IE.
Jadi bila kita memaksa hendak menggunakan kode marquee, lebih baik gunakan arah secara vertikal. Ini akan lebih aman dibuka di perambah yang berbeda. Namun bila memungkinkan 'sih jangan gunakan kode marquee terlalu sering. Marquee memang salah satu trik jitu untuk memaksimalkan penampilan yang kaya akan efek animasi. Tapi juga sering dianggap mengganggu oleh pembaca yang lain. Jadi berhati-hatilah bermain dengan kode ini.
Tag : marquee, vertikal marquee, horisontal marquee, vertical marquee, horizontal marquee.
Kabarkan ke teman blog ini
Free Tell-a-Friend by Bravenet.com
Bila hendak memasangnya dengan mode layout (type template terbaru blogger) kita pun mendapati elemen halaman HTML/Javascript untuk menampung kode marquee. Namun kali ini arahkan perhatian bukan pada cara pemasangan, tapi kepada efek yang dihasilkan pada perambah yang berbeda. Ambil 2 perambah yang cukup banyak penggunanya. Yakni IE (Internet Explorer dan Firefox.)
Coba gunakan atribut direction horizontal (baik ke arah kanan maupun kiri : marquee direction=right/left) pada marquee yang kita pakai. Saat memasukan kodenya melalui Menambah ELement Halaman (Add Page Elements) bisa jadi hasil yang kita lihat akan berbeda di kedua perambah tadi. IE akan memperlakukan kode marquee secara sempurna. Sangat berbeda hasilnya bila kita simak di Firefox. Kode tak dijalankan secara sempurna. Boro-boro marqueenya jalan, malah kita tak menemukan tampilan teks yang diapit oleh marquee. Hilang tanpa bekas. Kemanakah teks yang mestinya berjalan itu?
Sekarang coba kita lakukan langkah yang sama seperti diatas, namun kali ini kita ubah arahnya secara vertical (marquee direction=up/down). Hasilnya akan jauh memuaskan. Baik di IE maupun Firefox keduanya berjalan normal.
Kedua hasil percobaan tadi membuktikan bahwa penggunaan Element Halaman (Page Elemen) berjenis HTML/Javascript yang diberlakukan oleh Layout Blogger hanya mengijinkan kode HTMLyang seutuhnya valid. Dalam artian bahwa kode HTML yang diterima hanya bisa dijalankan dengan sempurna bila kode HTML telah disetujui oleh konsorsium yang beranggotakan para pengembang perambah di dunia. Lalu bila kita kembali ke masalah marquee, kode ini sebenarnya ekstensi tak resmi yang diperkenalkan pihak Microsoft selaku pengembang perambah IE. Tak heran 'kan, bila kita sering menemukan kejanggalan marquee pada perambah selain IE.
Jadi bila kita memaksa hendak menggunakan kode marquee, lebih baik gunakan arah secara vertikal. Ini akan lebih aman dibuka di perambah yang berbeda. Namun bila memungkinkan 'sih jangan gunakan kode marquee terlalu sering. Marquee memang salah satu trik jitu untuk memaksimalkan penampilan yang kaya akan efek animasi. Tapi juga sering dianggap mengganggu oleh pembaca yang lain. Jadi berhati-hatilah bermain dengan kode ini.
Tag : marquee, vertikal marquee, horisontal marquee, vertical marquee, horizontal marquee.
Kabarkan ke teman blog ini
Free Tell-a-Friend by Bravenet.com
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
HTML : HTML Entity
Terkadang kita ingin menyalin kode HTML dalam sebuah postingan untuk sekedar memberitahu kode yang bisa dipasang untuk memasang ikon Yahoo! Messenger. Berharap kode yang dimasukan bisa muncul dan dengan mudah bisa disalin oleh pengunjung, namun yang didapat malah tak sesuai keinginan. Kode yang dimasukan malah sudah terlanjur berubah menjadi ikon Yahoo!, wah sepertinya ada yang salah nih dengan pemasangan kodenya.
Lalu bagaimana memasang kode HTML di dalam postingan agar sesuai dengan kehendak? Untuk keperluan ini sudah waktunya kita berkenalan dengan istilah entitas HTML. Atau bila masih tak familiar, mungkin istilah HTML entity jauh lebih asing lagi :D.
Untuk apa perlu bersingungan dengan istilah ini? sebagai gambaran umum saja, kode HTML merupakan kode yang erat kaitanya dengan perambah (browser). Kode HTML laiknya kode perintah yang bisa dimengerti oleh majikannya, dalam hal ini bisa berupa Internet Explorer, Mozilla atau Opera. Sesaat setelah kode ini dibaca (lebih tepatnya dieksekusi) maka kode ini akan berubah haluan menjadi sajian yang lebih mudah dimengerti. Misalnya bila kita ketikan <B>huruf tebal</B> maka kata tersebut akan disulap menjadi huruf tebal. Nah disini bisa dengan jelas kita lihat bahwa kata "huruf tebal" diatas adalah dua hal yang berbeda. Bagian yang pertama menggunakan entitas HTML agar dimunculkan kode HTML dasar, sedang bagian kedua adalah hasil yang telah dibaca oleh perambah.
Jadi bisa dimengerti kan? Untuk itu bagi yang ingin menampilkan kode HTML yang masih belum dieksekusi oleh perambah, kita perlu bantuan entitas HTML. Berikut adalah beberapa contoh dari mereka (kolom pertama adalah hasil, kolom kedua adalah entitasnya) :
" : "
< : $lt;
> : $gt;
Untuk info lebih lanjut mengenai hal ini bisa tuju alamat : http://www.w3schools.com/tags/ref_entities.asp
Atau (ada cara lain yang tak kalah asyiknya untuk dicoba) adalah menggunakan textarea. Dengan bantuan ini bisa saja kita tak perlu repot-repot mengganti kode dengan substitusinya dari entitas HTML, jadi cukup mengapit kode HTML yang akan ditampilkan dengan menempatkanya diantara <textarea> dan <textarea>.
Misalnya . Lebih mudah mana :).
Bila kita memiliki kode yang panjang, dan kliatanya repot bila harus menggantinya satu persatu, gunakan bantuan Notepad dengan fitur "Find and Replace", atau "Replace". Masukan kode yang ingin diganti di kolom atas, dan masukan kata penggantinya di bagian bawah.
Kabarkan ke teman blog ini
Free Tell-a-Friend by Bravenet.com
Lalu bagaimana memasang kode HTML di dalam postingan agar sesuai dengan kehendak? Untuk keperluan ini sudah waktunya kita berkenalan dengan istilah entitas HTML. Atau bila masih tak familiar, mungkin istilah HTML entity jauh lebih asing lagi :D.
Untuk apa perlu bersingungan dengan istilah ini? sebagai gambaran umum saja, kode HTML merupakan kode yang erat kaitanya dengan perambah (browser). Kode HTML laiknya kode perintah yang bisa dimengerti oleh majikannya, dalam hal ini bisa berupa Internet Explorer, Mozilla atau Opera. Sesaat setelah kode ini dibaca (lebih tepatnya dieksekusi) maka kode ini akan berubah haluan menjadi sajian yang lebih mudah dimengerti. Misalnya bila kita ketikan <B>huruf tebal</B> maka kata tersebut akan disulap menjadi huruf tebal. Nah disini bisa dengan jelas kita lihat bahwa kata "huruf tebal" diatas adalah dua hal yang berbeda. Bagian yang pertama menggunakan entitas HTML agar dimunculkan kode HTML dasar, sedang bagian kedua adalah hasil yang telah dibaca oleh perambah.
Jadi bisa dimengerti kan? Untuk itu bagi yang ingin menampilkan kode HTML yang masih belum dieksekusi oleh perambah, kita perlu bantuan entitas HTML. Berikut adalah beberapa contoh dari mereka (kolom pertama adalah hasil, kolom kedua adalah entitasnya) :
" : "
< : $lt;
> : $gt;
Untuk info lebih lanjut mengenai hal ini bisa tuju alamat : http://www.w3schools.com/tags/ref_entities.asp
Atau (ada cara lain yang tak kalah asyiknya untuk dicoba) adalah menggunakan textarea. Dengan bantuan ini bisa saja kita tak perlu repot-repot mengganti kode dengan substitusinya dari entitas HTML, jadi cukup mengapit kode HTML yang akan ditampilkan dengan menempatkanya diantara <textarea> dan <textarea>.
Misalnya . Lebih mudah mana :).
Bila kita memiliki kode yang panjang, dan kliatanya repot bila harus menggantinya satu persatu, gunakan bantuan Notepad dengan fitur "Find and Replace", atau "Replace". Masukan kode yang ingin diganti di kolom atas, dan masukan kata penggantinya di bagian bawah.
Kabarkan ke teman blog ini
Free Tell-a-Friend by Bravenet.com
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
HTML : Marquee
Sajian teks yang tampil secara aktraktif tentu akan sangat menyegarkan. Tentu kita pernah melihat tampilan teks yang berjalan dari bawah ke atas. Atau pula tampilan banner yang berjalan dari bawah ke atas. Sangat memesona dan mengundang perhatian pengunjung.
Semua berkat dukungan teknis Marquee dalam kode HTML. Ya, dengan kata marquee ini kita bisa menjalankan teks maupun gambar sesuai dengan keinginan kita. Menggunakannya pun semenyenangkan melihatnya.
Berikut adalah beberapa kode marquee dasar yang bisa kita gunakan :
<marquee direction=left>teks berjalan ke kiri </marquee>
<marquee direction=up>teks berjalan ke atas </marquee>
Keterangan : Untuk mendapatkan efek yang berbeda, kita bisa mengganti 'left' ke 'right' agar teks berjalan ke kanan, atau gantilah 'up' dengan 'down' agar teks berjalan ke bawah.
Marquee juga memiliki atribut lain untuk melengkapi hasil yang bisa ditampilkan.
Misalnya : onmouseover="this.stop()" onmouseout="this.start()"
<marquee direction=up onmouseover="this.stop()" onmouseout="this.start()"><a href="#">link1</a><br><a href="#">link2</a> </marquee>
Dengan menyelipkan atribut diatas didalam marquee, maka saat teks yang berjalan didekati oleh mouse, maka teks akan tertahan (stop) dan saat mouse maka teks akan kembali berjalan. Sangat membantu bila kita menyertakan tautan (link) di dalam marquee agar mudah dikendalikan pengunjung.
Ok, selamat beranimasi sederhana.
Tag : kode html marquee, marquee.
Semua berkat dukungan teknis Marquee dalam kode HTML. Ya, dengan kata marquee ini kita bisa menjalankan teks maupun gambar sesuai dengan keinginan kita. Menggunakannya pun semenyenangkan melihatnya.
Berikut adalah beberapa kode marquee dasar yang bisa kita gunakan :
<marquee direction=left>teks berjalan ke kiri </marquee>
<marquee direction=up>teks berjalan ke atas </marquee>
Keterangan : Untuk mendapatkan efek yang berbeda, kita bisa mengganti 'left' ke 'right' agar teks berjalan ke kanan, atau gantilah 'up' dengan 'down' agar teks berjalan ke bawah.
Marquee juga memiliki atribut lain untuk melengkapi hasil yang bisa ditampilkan.
Misalnya : onmouseover="this.stop()" onmouseout="this.start()"
<marquee direction=up onmouseover="this.stop()" onmouseout="this.start()"><a href="#">link1</a><br><a href="#">link2</a> </marquee>
Dengan menyelipkan atribut diatas didalam marquee, maka saat teks yang berjalan didekati oleh mouse, maka teks akan tertahan (stop) dan saat mouse maka teks akan kembali berjalan. Sangat membantu bila kita menyertakan tautan (link) di dalam marquee agar mudah dikendalikan pengunjung.
Ok, selamat beranimasi sederhana.
Tag : kode html marquee, marquee.
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
HTML : Good Meta tag Description
Berikut adalah salah satu contoh sukses pemilik blog memasang kata kunci pada pemindai mesin pencari Google.
Pada tanggal 13 Mei 2007 lalu, Syafiq Baktir, sang pemilik blog iwanfalsmania mendapati deksripsi berikut akan keberadaan blognya di mesin pencari Google :
Kepada 'Iwan Fals' yang telah mewarnai jiwa dan semangat bangsa yang terus terpuruk ini, aku nantikan selalu tajam lirik dan kegarangan lagu - lagumu. ...
www.iwanfalsmania.blogspot.com/ - 136k - Tembolok - Laman sejenis
Satu hal yang merisaukan dari penangkapan ini adalah deskripsi blognya. Kurang mendukung penjelasan akan keberadaan blognya yang kaya akan konten salah satu legenda musik Indonesia. Sangat berbeda bila menemukannya pada mesin pencari Yahoo dengan hasil berikut :
Pemberian deskripsi yang menopang keberadaan blog memang sangat efektif untuk memberi kesan positif bagi pencari informasi melalui mesin pencari. Jadi tak salah bila pemiliknya ingin menemukan kata yang tepat untuk menggantikan deskripsi blognya yang ditangkap mesin pencari.
Dan cara yang paling tepat untuk memberikan informasi kepada mesin pencari adalah melalui penggunaan meta tag. Seperti yang pernah dibahas sebelumnya, mesin pencari akan menelusuri konten suatu situs/blog berurut dari informasi yang tertulis di bagian awal sebuah halaman. Ini tentu sangat menguntungkan dengan pemasangan meta tag yang diposisikan dibagian HEAD. Dengan begitu, pemasangan meta description :
akan sangat mungkin mendapati hasil yang berbeda pada deskripsi blog hasil pencarian saat ini yang menjadi :
Iwan Fals
Iwan Fals Mania Unofficial Site - Tentang Iwan Fals.
www.iwanfalsmania.blogspot.com/ - 139k - Tembolok - Laman sejenis
Sangat memuaskan hasilnya. Selamat Bang Syafiq!
Pada tanggal 13 Mei 2007 lalu, Syafiq Baktir, sang pemilik blog iwanfalsmania mendapati deksripsi berikut akan keberadaan blognya di mesin pencari Google :
Kepada 'Iwan Fals' yang telah mewarnai jiwa dan semangat bangsa yang terus terpuruk ini, aku nantikan selalu tajam lirik dan kegarangan lagu - lagumu. ...
www.iwanfalsmania.blogspot.com/ - 136k - Tembolok - Laman sejenis
Satu hal yang merisaukan dari penangkapan ini adalah deskripsi blognya. Kurang mendukung penjelasan akan keberadaan blognya yang kaya akan konten salah satu legenda musik Indonesia. Sangat berbeda bila menemukannya pada mesin pencari Yahoo dengan hasil berikut :
iwan fals unofficial site ... Semoga media tentang Iwan Fals yang sangat sederhana ini dapat memberi manfaat bagi kita semua. ...
www.iwanfals mania.blogspot.com - 139k - Cached - More from this sitePemberian deskripsi yang menopang keberadaan blog memang sangat efektif untuk memberi kesan positif bagi pencari informasi melalui mesin pencari. Jadi tak salah bila pemiliknya ingin menemukan kata yang tepat untuk menggantikan deskripsi blognya yang ditangkap mesin pencari.
Dan cara yang paling tepat untuk memberikan informasi kepada mesin pencari adalah melalui penggunaan meta tag. Seperti yang pernah dibahas sebelumnya, mesin pencari akan menelusuri konten suatu situs/blog berurut dari informasi yang tertulis di bagian awal sebuah halaman. Ini tentu sangat menguntungkan dengan pemasangan meta tag yang diposisikan dibagian HEAD. Dengan begitu, pemasangan meta description :
'Iwan Fals Mania Unofficial Site - Tentang Iwan Fals'dengan meta keywords : 'Iwan Fals'akan sangat mungkin mendapati hasil yang berbeda pada deskripsi blog hasil pencarian saat ini yang menjadi :
Iwan Fals
Iwan Fals Mania Unofficial Site - Tentang Iwan Fals.
www.iwanfalsmania.blogspot.com/ - 139k - Tembolok - Laman sejenis
Sangat memuaskan hasilnya. Selamat Bang Syafiq!
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
HTML : Table Cases on HTML Template
Pernah diperlihatkan 2 blog dengan template yang sama secara hampir berbarengan dengan kondisi yang berantakan? belum? wah edittag jelas lebih beruntung bila begitu :D. Pagi ini jelas pemandangan yang di luar kebiasaan. Dua blog dengan dua pemilik yang berbeda. Kebetulankah? anggap saja begitu. Namun pertanyaan lebih meruncing ke kondisi blognya yang berantakan.
Salah satu blog memunculkan shoutbox milik Oggix yang merangsak begitu saja posisinya hingga bertengger bukan di kolom sidebar maupun di kolom utama. Yang lainnya hampit serupa, namun nasibnya jauh lebih baik dari yang pertama. Hanya saja setiap kali pemiliknya memindahkan fitur online-albumnya di tengah-tengah kolom sidebar yang muncul justru berada di kolom teratas di bagian sidebar.
Untuk mendapatkan kejelasan mengenai kondisi ini, edittag mendapatkan salinan dari masing-masing blog yang bermasalah tadi. Lalu ketahuanlah biang penyebab semua ini. Yakni penggunaan table yang masih kental oleh salah satu penyedia template blogger terkemuka. Penggunaan tabel di saat-saat sekarang mungkin lebih pantas untuk ditanya dengan realita saat ini. Mestinya penggunaan CSS jauh lebih moderat dan menguntungkan dari sisi pemeliharaan. Tak perlu direpotkan dengan penulisan kode-kode seperti tr dan td berulang kali. Boros baris (kesan umum yang ditangkap para tukang HTML). Penggunaan table juga membutuhkan ketelitian yang lebih, apalagi bagi mereka yang masih minim pengetahuan dasar HTML. Biasanya mereka yang tak kuat dengan HTML dasar menyerahkan urusan edit table dengan editor HTML untuk membantu pekerjaanya. Tentu harus ada program yang harus diinstal terlebih dulu. Masih terhitung merepotkan.
Bagaimana bila yang sudah terlanjur menggunakan pemakaian table di templatenya. Sarannya tetap dan akan selalu : berhati-hati dan selalu siapkan cadangan sebelum mengedit file templatenya. Masih terlalu umum? ok, ada baiknya praktek salah satu kesalahan yang sering ditemukan. Menyoal ke permasalan di atas dimana penempatan online-albumnya tak tunduk pada keinginan pemiliknya.
Padahal menurut pengakuan pengeditnya, kode yang dipasang sudah mengikuti urutan sesuai yang diinginkan. Namun ada hal yang terlupa dan berimbas sangat jelas. Yakni kealpaanya menulis kode <td> dan penutupnya </td>. Untuk itu ada tips untuk memasukan kode HTML dalam tabel.
1. Bila memasukan kode di bagian yang sudah mengusung tabel didalamnya (misalnya kode dari penyedia shoutbox), selalu ketikan tag pembuka(<>) dan penutupnya (</>) diawal, lalu selipkan kode yang ingin kita masukan. Ini untuk menghindari kealpaan menutup tag.
2. Ikuti alur pemasangan tag <tr> dan <td> pada kolom yang akan kita edit. Bila templatenya menggunakan dua kolom pada satu baris, salin kedua kolom pada baris tersebut lalu kita masukan kodenya mengikuti alur yang digunakan sebelumnya.
3. Pastikan tak ada kode yang masih dibiarkan terbuka. Misalnya </a> hanya ditulis </a.
4. Gunakan spasi untuk mengurutkan baris <tr> dengan baris </tr> dibawahnya. Hingga nantinya akan lebih mudah mengontrol tag <td> diantaranya.
5. Pastikan jumlah <tr> sama denan jumlah </tr>,dan <td> dengan </td>.
Selamat mencoba.
Hasil penangkapan Google :
- Berada di urutan ke3 dengan kata kunci "table template HTML" di Google Israel pada 10 Juli 2007.
Salah satu blog memunculkan shoutbox milik Oggix yang merangsak begitu saja posisinya hingga bertengger bukan di kolom sidebar maupun di kolom utama. Yang lainnya hampit serupa, namun nasibnya jauh lebih baik dari yang pertama. Hanya saja setiap kali pemiliknya memindahkan fitur online-albumnya di tengah-tengah kolom sidebar yang muncul justru berada di kolom teratas di bagian sidebar.
Untuk mendapatkan kejelasan mengenai kondisi ini, edittag mendapatkan salinan dari masing-masing blog yang bermasalah tadi. Lalu ketahuanlah biang penyebab semua ini. Yakni penggunaan table yang masih kental oleh salah satu penyedia template blogger terkemuka. Penggunaan tabel di saat-saat sekarang mungkin lebih pantas untuk ditanya dengan realita saat ini. Mestinya penggunaan CSS jauh lebih moderat dan menguntungkan dari sisi pemeliharaan. Tak perlu direpotkan dengan penulisan kode-kode seperti tr dan td berulang kali. Boros baris (kesan umum yang ditangkap para tukang HTML). Penggunaan table juga membutuhkan ketelitian yang lebih, apalagi bagi mereka yang masih minim pengetahuan dasar HTML. Biasanya mereka yang tak kuat dengan HTML dasar menyerahkan urusan edit table dengan editor HTML untuk membantu pekerjaanya. Tentu harus ada program yang harus diinstal terlebih dulu. Masih terhitung merepotkan.
Bagaimana bila yang sudah terlanjur menggunakan pemakaian table di templatenya. Sarannya tetap dan akan selalu : berhati-hati dan selalu siapkan cadangan sebelum mengedit file templatenya. Masih terlalu umum? ok, ada baiknya praktek salah satu kesalahan yang sering ditemukan. Menyoal ke permasalan di atas dimana penempatan online-albumnya tak tunduk pada keinginan pemiliknya.
Padahal menurut pengakuan pengeditnya, kode yang dipasang sudah mengikuti urutan sesuai yang diinginkan. Namun ada hal yang terlupa dan berimbas sangat jelas. Yakni kealpaanya menulis kode <td> dan penutupnya </td>. Untuk itu ada tips untuk memasukan kode HTML dalam tabel.
1. Bila memasukan kode di bagian yang sudah mengusung tabel didalamnya (misalnya kode dari penyedia shoutbox), selalu ketikan tag pembuka(<>) dan penutupnya (</>) diawal, lalu selipkan kode yang ingin kita masukan. Ini untuk menghindari kealpaan menutup tag.
2. Ikuti alur pemasangan tag <tr> dan <td> pada kolom yang akan kita edit. Bila templatenya menggunakan dua kolom pada satu baris, salin kedua kolom pada baris tersebut lalu kita masukan kodenya mengikuti alur yang digunakan sebelumnya.
3. Pastikan tak ada kode yang masih dibiarkan terbuka. Misalnya </a> hanya ditulis </a.
4. Gunakan spasi untuk mengurutkan baris <tr> dengan baris </tr> dibawahnya. Hingga nantinya akan lebih mudah mengontrol tag <td> diantaranya.
5. Pastikan jumlah <tr> sama denan jumlah </tr>,dan <td> dengan </td>.
Selamat mencoba.
Hasil penangkapan Google :
- Berada di urutan ke3 dengan kata kunci "table template HTML" di Google Israel pada 10 Juli 2007.
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
HTML : Image and Align Atribut
Bagi sebagian penulis blog, mengedit postingan melalui pencantuman kode-kode HTML memang mengurangi kenyamanan. Beruntunglah bagi pengguna Blog*spot dengan adanya 2 pilihan menu editor yakni [Edit HTML] dan [Compose].
Pilihan pertama begitu akrab bagi mereka yang gemar menuliskan secara manual kode-kode HTML maupun CSS di dalamnya. Sedang pilihan [Compose] sangat cocok bagi mereka yang ingin mendapatkan hasil instan dalam pengolahan tulisannya.
Berbeda dengan pengguna Blogsome maupun Wordpress yang minim dukungan editor WYSIWYG (What You See Is What You Get) maka pengetahuan dasar HTML sangat membantu.
Berikut adalah salah satu masalah yang jamak ditemukan penggunanya saat menempatkan gambar dalam postingan. Gambar menjadi materi yang terpisah dengan teks pengapitnya. Seperti contoh berikut :
Nah agar tampilan menjadi lebih baik laiknya tampilan yang biasa kita lihat di surat kabar, dimana materi gambar dan teks menyatu, gunakan kode HTML berikut untuk melengkapi tag img src.
Gambar pertama menyisakan kode berikut di HTMLnya :
<img src="gambarku.jpg" alt="berdekatan" >
Untuk itu lengkapi hingga menjadi berikut dalam editornya :
<img src="gambarku.jpg" alt="berdekatan" hspace="6" vspace="4" align="left">
Cukup tambahkan dengan teks yang tertulis merah. Hspace dan Vspace bisa ditambahkan untuk memberikan ruang yang lebih lega bagi gambar dan teks pengapitnya. Hingga tampilan bisa menjadi berikut :
Pilihan pertama begitu akrab bagi mereka yang gemar menuliskan secara manual kode-kode HTML maupun CSS di dalamnya. Sedang pilihan [Compose] sangat cocok bagi mereka yang ingin mendapatkan hasil instan dalam pengolahan tulisannya.
Berbeda dengan pengguna Blogsome maupun Wordpress yang minim dukungan editor WYSIWYG (What You See Is What You Get) maka pengetahuan dasar HTML sangat membantu.
Berikut adalah salah satu masalah yang jamak ditemukan penggunanya saat menempatkan gambar dalam postingan. Gambar menjadi materi yang terpisah dengan teks pengapitnya. Seperti contoh berikut :
Nah agar tampilan menjadi lebih baik laiknya tampilan yang biasa kita lihat di surat kabar, dimana materi gambar dan teks menyatu, gunakan kode HTML berikut untuk melengkapi tag img src.
Gambar pertama menyisakan kode berikut di HTMLnya :
<img src="gambarku.jpg" alt="berdekatan" >
Untuk itu lengkapi hingga menjadi berikut dalam editornya :
<img src="gambarku.jpg" alt="berdekatan" hspace="6" vspace="4" align="left">
Cukup tambahkan dengan teks yang tertulis merah. Hspace dan Vspace bisa ditambahkan untuk memberikan ruang yang lebih lega bagi gambar dan teks pengapitnya. Hingga tampilan bisa menjadi berikut :
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
Web : Resize Oggix Preferences part 2
Serupa dengan niatan sebelumnya untuk memberikan tampilan shoutbox dari Oggix agar terlihat berbeda dan lebih mudah untuk menyesuikan dengan template/layout di Blog*spot, kali ini kita akan mengubahnya ke arah yang berbeda. Semoga masih ingat dengan trik HTML di tulisan sebelumnya dengan mengganti lebar shoutbox Oggix, kali ini kita akan menggantinya secara vertikal.
Yah, kita akan mengganti ketinggian shoutbox Oggix agar pas di blog yang menyisakan lahan sempit di sidebar-nya. Terbilang merepotkan di mata pengunjung, namun sangat tepat bila kita ingin menggabungkan dengan background gambar yang memiliki ukuran tinggi tertentu (melalui CSS).
Ok, akan lebih mudah bila ada visualiasi dari rencana kita kali ini.
Berikut adalah contoh tampilan shoutbox Oggix bawaan :
Dan kita berencana untuk menampilkanya menjadi :
Untuk itu kita bisa mengedit sedikit kode yang diberikan Oggix sebelum dipasang di blog. Kode yang perlu kita edit adalah di bagian :
<iframe border="0" frameborder="0" src="http://www.oggix.com/shout/show/?oggixid=35819&type=1&smileys=1" scrolling="yes" width="200" name="shout" noresize>
Dalam kode ini kita selipkan tag HTML height="200" (atau sesuaikan angkanya dengan keinginan) hingga menjadi :
<iframe border="0" frameborder="0" height="200" src="http://www.oggix.com/shout/show/?oggixid=35819&type=1&smileys=1" scrolling="yes" width="200" name="shout" noresize>
Setelah selesai, kita bisa memasukan ke template/layout blog kita.
Yah, kita akan mengganti ketinggian shoutbox Oggix agar pas di blog yang menyisakan lahan sempit di sidebar-nya. Terbilang merepotkan di mata pengunjung, namun sangat tepat bila kita ingin menggabungkan dengan background gambar yang memiliki ukuran tinggi tertentu (melalui CSS).
Ok, akan lebih mudah bila ada visualiasi dari rencana kita kali ini.
Berikut adalah contoh tampilan shoutbox Oggix bawaan :
Dan kita berencana untuk menampilkanya menjadi :
Untuk itu kita bisa mengedit sedikit kode yang diberikan Oggix sebelum dipasang di blog. Kode yang perlu kita edit adalah di bagian :
<iframe border="0" frameborder="0" src="http://www.oggix.com/shout/show/?oggixid=35819&type=1&smileys=1" scrolling="yes" width="200" name="shout" noresize>
Dalam kode ini kita selipkan tag HTML height="200" (atau sesuaikan angkanya dengan keinginan) hingga menjadi :
<iframe border="0" frameborder="0" height="200" src="http://www.oggix.com/shout/show/?oggixid=35819&type=1&smileys=1" scrolling="yes" width="200" name="shout" noresize>
Setelah selesai, kita bisa memasukan ke template/layout blog kita.
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
HTML : Closing TITLE Tag and Internet Explorer
Saat tampilan blog tak lagi mampu dipandang di Microsoft Internet Explorer (IE), ada baiknya memperhatikan kode di template Anda. Kali ini cukup fokuskan ke bagian HTML untuk lebih mempersempit pencarian permasalahan.
Postingan ini sekaligus menjawab beberapa pertanyaan yang sempat masuk berulang kali. Dengan harapan agar sang pemilik blog lebih peduli dan lebih mengenali kode HTML yang sering diulik tatkala memasang atribut atau aksesoris blognya.
Bila blog Anda tampil seperti apa yang semestinya di perambah Mozilla atau Opera namun hasilnya berbanding terbalik dengan melihatnya di Microsoft Internet Explorer (bila tidak menyebut tak tampak sama sekali), ada baiknya pastikan variabel <$BlogPageTitle$> ini muncul lengkap dengan sintak HTML di depan dan belakangnya, seperti tertampil berikut ini :
<title><$BlogPageTitle$></title>
Bila <$BlogPageTitle$> tak diapit oleh <title> dan </title> maka ini jelas akan memicu IE untuk menghentikan perambah membaca kode dibawahnya. Dan tentu sangat penting mengingat posisi sintak tadi berada di posisi bagian atas di kode HTML yang kita miliki. Hasilnya tentu akan menjadi jendela kosong tanpa ada postingan sama sekali. Untuk itu jelas pastikan bahwa ada sintak pembuka dan penutup seperti yang terlihat diatas.
Memang penyebab ini bukan satu-satunya obat yang mujarab bila keluhan tak tampilnya Blog di IE, namun ada baiknya memastikan bahwa Anda tak ketinggalan menyematkan kode diatas di blog Anda.
Catatan penangkapan Google:
- Berada di posisi ke-10 dengan kata kunci '' pada 25 April 2007 di Google Indonesia.
Postingan ini sekaligus menjawab beberapa pertanyaan yang sempat masuk berulang kali. Dengan harapan agar sang pemilik blog lebih peduli dan lebih mengenali kode HTML yang sering diulik tatkala memasang atribut atau aksesoris blognya.
Bila blog Anda tampil seperti apa yang semestinya di perambah Mozilla atau Opera namun hasilnya berbanding terbalik dengan melihatnya di Microsoft Internet Explorer (bila tidak menyebut tak tampak sama sekali), ada baiknya pastikan variabel <$BlogPageTitle$> ini muncul lengkap dengan sintak HTML di depan dan belakangnya, seperti tertampil berikut ini :
<title><$BlogPageTitle$></title>
Bila <$BlogPageTitle$> tak diapit oleh <title> dan </title> maka ini jelas akan memicu IE untuk menghentikan perambah membaca kode dibawahnya. Dan tentu sangat penting mengingat posisi sintak tadi berada di posisi bagian atas di kode HTML yang kita miliki. Hasilnya tentu akan menjadi jendela kosong tanpa ada postingan sama sekali. Untuk itu jelas pastikan bahwa ada sintak pembuka dan penutup seperti yang terlihat diatas.
Memang penyebab ini bukan satu-satunya obat yang mujarab bila keluhan tak tampilnya Blog di IE, namun ada baiknya memastikan bahwa Anda tak ketinggalan menyematkan kode diatas di blog Anda.
Catatan penangkapan Google:
- Berada di posisi ke-10 dengan kata kunci '' pada 25 April 2007 di Google Indonesia.
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
HTML : Input Search Form to Blogger (Renewal)
Tips ini terhitung pembaruan dari tips sebelumnya untuk tujuan yang sama. Yakni menambahkan form pencarian ditempat yang bisa kita atur penempatannya. Bisa di bawah header, di sidebar, di footer atau bagian manapun yang sekiranya pantas untuk dipasang. Googlepun bahkan memasang form pencarian di bagian header dan footer, kenapa kita tidak?
Kode HTML berikut menjadi pemecahan kode sebelumnya yang memakan 11 baris. Namun jangan ditanya hasilnya, sangat menawan. Tak lagi ditemukan jawaban pada laman google, tapi langsung ditampilkan dengan tampilan blog pribadi. Seakan pencarinya mendapatkan langsung hasilnya, laiknya pencarian internal di website terkenal.
Berikut kodenya :
<form action="http://blogku.blogspot.com/search" method="get">
<input name="q" size="15" type="text">
<input value="Cari" name="submit" type="submit">
</form>
Ingat, ubah alamat http://blogku.blogspot.com dengan alamat yang relevan, yakni blog kita. Pasang dibagian manapun sesukanya. Terima kasih untuk navbar terbaru milik blogger akan pencapain yang lebih baik ini. Sangat cocok untuk mereka yang sering melenyapkan bagian navbar namun ingin tetap mendapatkan form pencarian di blognya secara relevan.
Kode HTML berikut menjadi pemecahan kode sebelumnya yang memakan 11 baris. Namun jangan ditanya hasilnya, sangat menawan. Tak lagi ditemukan jawaban pada laman google, tapi langsung ditampilkan dengan tampilan blog pribadi. Seakan pencarinya mendapatkan langsung hasilnya, laiknya pencarian internal di website terkenal.
Berikut kodenya :
<form action="http://blogku.blogspot.com/search" method="get">
<input name="q" size="15" type="text">
<input value="Cari" name="submit" type="submit">
</form>
Ingat, ubah alamat http://blogku.blogspot.com dengan alamat yang relevan, yakni blog kita. Pasang dibagian manapun sesukanya. Terima kasih untuk navbar terbaru milik blogger akan pencapain yang lebih baik ini. Sangat cocok untuk mereka yang sering melenyapkan bagian navbar namun ingin tetap mendapatkan form pencarian di blognya secara relevan.
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
HTML : Marquee on Edittag New Year Edition
Guna menyanggupi permintaan kode marquee yang digunakan untuk tampilan edittagdi edisi tahun baru, berikut kode HTML yang digunakan :
keterangan : ganti alamatfilegambar dengan URL file gambar.
hasil marquee diatas akan tampil sempurna bila dibuka dengan monitor beresolusi diatas 800*600, namun bila ingin ditampilkan aman di resolusi tersebut, cukup sesuaikan marquee di barisan terbawah dengan mengganti angka left: 873px; dengan angka dibawah 800.Kode marquee ini tidak berjalan sempurna di perambah Opera ,namun baik bila dibuka menggunakan IE, FF dan Netscape.
Kode diatas akan memunculkan 10 gambar dengan posisi berbeda sesuai dengan posisi x absolut dna kemudian akan meluncur kebawah.
Pemasangan di blogger lama cukup mudah.Cukup buka template lalu pasang kode ini di posisi header atau main.Untuk blogger baru edit di bagian Lay Out lalu pilih submenu edit HTML, dan pasang kode tadi dibagian content.Untuk tampilan di blogger baru bisa dilihat disini.Sila dicoba.
Kasus di edittag, dengan template blogger lama, pemasangan kode disalin setelah kode
<!-- Begin #main -->
<div id="main"><div id="main2">
Untuk Blogger baru dengan Layout, pemasangan kode dipasang setelah kode berikut :
<div class='content'>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 358px; top: 60px; width: 25px; height: 450px;" scrollamount="3"></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 135px; top: 52px; width: 25px; height: 300px;" scrollamount="4">
<img src="alamatfilegambar"/></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 441px; top: 55px; width: 25px; height: 250px;" scrollamount="5"><img src="alamatfilegambar"/></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 498px; top: 53px; width: 25px; height: 370px;" scrollamount="6"><img src="alamatfilegambar"/></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 800px; top: 51px; width: 25px; height: 340px;" scrollamount="7"><img src="alamatfilegambar"/></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 390px; top: 55px; width: 25px; height: 70px;" scrollamount="2"><img src="alamatfilegambar"/></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 50px; top: 55px; width: 25px; height: 50px;" scrollamount="3"><img src="alamatfilegambar"/></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 749px; top: 54px; width: 25px; height: 203px;" scrollamount="2"><img src="alamatfilegambar"/></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 325px; top: 52px; width: 25px; height: 300px;" scrollamount="3"><img src="alamatfilegambar"/></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 600px; top: 49px; width: 25px; height: 330px;" scrollamount="2"><img src="alamatfilegambar"/></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 873px; top: 52px; width: 25px; height: 351px;" scrollamount="3"><img src="alamatfilegambar"/></marquee>
keterangan : ganti alamatfilegambar dengan URL file gambar.
hasil marquee diatas akan tampil sempurna bila dibuka dengan monitor beresolusi diatas 800*600, namun bila ingin ditampilkan aman di resolusi tersebut, cukup sesuaikan marquee di barisan terbawah dengan mengganti angka left: 873px; dengan angka dibawah 800.Kode marquee ini tidak berjalan sempurna di perambah Opera ,namun baik bila dibuka menggunakan IE, FF dan Netscape.
Kode diatas akan memunculkan 10 gambar dengan posisi berbeda sesuai dengan posisi x absolut dna kemudian akan meluncur kebawah.
Pemasangan di blogger lama cukup mudah.Cukup buka template lalu pasang kode ini di posisi header atau main.Untuk blogger baru edit di bagian Lay Out lalu pilih submenu edit HTML, dan pasang kode tadi dibagian content.Untuk tampilan di blogger baru bisa dilihat disini.Sila dicoba.
Kasus di edittag, dengan template blogger lama, pemasangan kode disalin setelah kode
<!-- Begin #main -->
<div id="main"><div id="main2">
Untuk Blogger baru dengan Layout, pemasangan kode dipasang setelah kode berikut :
<div class='content'>
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
HTML : Please Insert Message
Tentu menyebalkan menemukan banyak spam yang masuk ke shoutbox tanpa disadari.Bukan saja karena pesan yang tanpa jelas yang masuk dan membuat penuh kotak teriak ini, namun juga membuat kita mesti menyiapkan energi tambahan untuk melenyapkannya.Bukan pemandangan yang indah tentunya bila pesan-pesan tersebut diselipi dengan iklan obat-obatan misalnya, namun juga kadang ajakan untuk bergabung dengan program yang tak jelas manfaatnya.
Bagi pengguna layanan Oggix pasti sudah paham dengan upaya anti-spamnya.Namun bila kita perhatikan memang saat ini banyak juga yang memodifikasi spamnya mengikuti layanan yang tersedia.Bila kita bicarakan mengenai layanan Oggix kita bisa dengan mudah mengetahui bahwa alamat URL lengkap dengan http://-nya akan dengan sera merta dianggap sebagai spam bila kita isikan dibagian pesan.Dan dengan itu pula maka pesanpun tak akan tersimpan dengan sendirinya.Salah satu cara yang terbilang aman saat ini, hingga....
Tadi malam kotak teriak edittag juga dihujani rentetan pesan yang bisa dianggap spam.Salah satu trik yang digunakan adalah dengan mengisi kolom Nama dan Web URL dan membiarkan kolom Message tak terisi.Terhitung lebih sopan memang, namun justru kekosongan pesan itu yang sangat menggangu.Akan lebih mudah kita mendefinisikan bila pesan tersebut adalah spam bila menyuarakan iklan atau pesan sponsor lainnya.Pengunjungpun tak perlu ragu untuk menghiraukannya, namun bila tidak? jelas menggangu..
Untuk itu kita bisa menggunakan trik javascript yang memvalidasi kolom tertentu harus terisi, artinya bila kosong maka pesan tidak akan diproses.Berikut langkah pemasangan dan kodenya :
1.Pasang kode berikut diatas </HEAD>
<script language="JavaScript" type="text/javascript">
function checkform ( form )
{
if (form.comment.value == "") {
alert( "Maaf banget teman, pesan tetep harus kudu diisi" );
form.comment.focus();
return false ;
}
return true ;
}
</script>
2. Salin kode berikut :
onsubmit="return checkform(this);"
dan gabungkan dengan form yang ada pada Oggix, yakni cari bagian <form name="shoutsmileysFrame" blablabla..
Untuk lebih jelasnya bisa diandaikan contoh berikut :
Kode asal dari Oggix yang memuat kode <form name="shoutsmileysFrame" :
<form name="shoutsmileysFrame" id="shou" method="post" action="http://www.oggix.com/shout/post/" target="shout">
Hingga setelah dimodifikasi menjadi :
<form name="shoutsmileysFrame" id="shou" method="post" action="http://www.oggix.com/shout/post/" target="shout" onsubmit="return checkform(this);">
Setelah itu simpan, dan berikan percobaan.
Dengan ini semoga relatif lebih mempersulit spam yang masuk.
Bagi pengguna layanan Oggix pasti sudah paham dengan upaya anti-spamnya.Namun bila kita perhatikan memang saat ini banyak juga yang memodifikasi spamnya mengikuti layanan yang tersedia.Bila kita bicarakan mengenai layanan Oggix kita bisa dengan mudah mengetahui bahwa alamat URL lengkap dengan http://-nya akan dengan sera merta dianggap sebagai spam bila kita isikan dibagian pesan.Dan dengan itu pula maka pesanpun tak akan tersimpan dengan sendirinya.Salah satu cara yang terbilang aman saat ini, hingga....
Tadi malam kotak teriak edittag juga dihujani rentetan pesan yang bisa dianggap spam.Salah satu trik yang digunakan adalah dengan mengisi kolom Nama dan Web URL dan membiarkan kolom Message tak terisi.Terhitung lebih sopan memang, namun justru kekosongan pesan itu yang sangat menggangu.Akan lebih mudah kita mendefinisikan bila pesan tersebut adalah spam bila menyuarakan iklan atau pesan sponsor lainnya.Pengunjungpun tak perlu ragu untuk menghiraukannya, namun bila tidak? jelas menggangu..
Untuk itu kita bisa menggunakan trik javascript yang memvalidasi kolom tertentu harus terisi, artinya bila kosong maka pesan tidak akan diproses.Berikut langkah pemasangan dan kodenya :
1.Pasang kode berikut diatas </HEAD>
<script language="JavaScript" type="text/javascript">
function checkform ( form )
{
if (form.comment.value == "") {
alert( "Maaf banget teman, pesan tetep harus kudu diisi" );
form.comment.focus();
return false ;
}
return true ;
}
</script>
2. Salin kode berikut :
onsubmit="return checkform(this);"
dan gabungkan dengan form yang ada pada Oggix, yakni cari bagian <form name="shoutsmileysFrame" blablabla..
Untuk lebih jelasnya bisa diandaikan contoh berikut :
Kode asal dari Oggix yang memuat kode <form name="shoutsmileysFrame" :
<form name="shoutsmileysFrame" id="shou" method="post" action="http://www.oggix.com/shout/post/" target="shout">
Hingga setelah dimodifikasi menjadi :
<form name="shoutsmileysFrame" id="shou" method="post" action="http://www.oggix.com/shout/post/" target="shout" onsubmit="return checkform(this);">
Setelah itu simpan, dan berikan percobaan.
Dengan ini semoga relatif lebih mempersulit spam yang masuk.
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
HTML : Adding Sound to Blog
Mestinya mendapati blog yang menyertakan suara yang otomatis dimainkan saat blog dibuka menghasilkan kesan yang menyenangkan dan seru.Namun tidak oleh sebagian pengguna internet lainnya.
Mungkin awal-awal kebangkitan web banyak sekali kita dapatkan pemilik website pribadi yang mencantumkan lagunya dalam webnya.Tujuanya tak lain agar webnya akan semakin kaya dengan materi yang disuguhkan.Bila kita lihat kondisi sekarang, banyak pengakses web atau blog yang juga asyik mendengarkan lagu melalui player yang tersedia di PCnya.Jadi bisa kita bayangkan bila ketika asyik berseluncur ke blog teman tiba-tiba kita mendapati suara yang masuk tanpa kita kehendaki.Sungguh menggangu kan?
Lain bila keinginan menempatkan suara di blog menjelma menjadi sebuah pertanyaan.Karena secara teknis HTML sangat mendukung.
Berikut beberapa tag HTML yang bisa kita gunakan untuk menempatkan file suara di blog kita :
<embed src="yourmusicfile.mid" autostart="true" loop="true"
width="2" height="0">
</embed>
Tag tersebut bisa dikenali oleh perambah Netscape, begitu juga dengan IE 3.0 dan versi terbarunya.
<bgsound src="yourmusicfile.mid" loop="infinite">
Tag ini dikenali oleh Mozilla, Opera dan semua versi IE.
Dan karena sifatnya yang tidak saling melemahkan, terkadang menempatkan tag keduanya ke dalam template blog kita juga bukan hal yang tabu dilakukan.Seperti tag berikut :
<embed src="yourmusicfile.mid" autostart="true" loop="true"
width="2" height="0">
</embed>
<noembed>
<bgsound src="yourmusicfile.mid" loop="infinite">
</noembed>
Ada pula beberapa blog yang menempatkan tag dengan lebih santun, seperti :
<a href="yourmusicfile.mid">Play background music</a>
Dengan begitu pengunjung lebih memiliki pilihan untuk mendengarkan suara yang kita tawarkan.Hasilnya keinginan pemilik blog dan kenikmatan pengunjung bisa saling melengkapi.Kode seperti tersebut diatas bisa kita dapatkan di song2play.com
Semoga berguna.
Info terkini (09 Maret 07): Layanan serupa yang juga patut untuk dicoba adalah dari http://imeem.com. Disini kita bahkan diperkenankan membuat daftar lagu (play list) yang bisa ditampilkan secara bersamaan.
Catatan penangkapan Google :
- Berada di posisi ke-1 dengan kata kunci 'pasang lagu di blogs' di Google Indonesia pada tanggal 4 Mei 2007.
- Berada di posisi ke-2 dengan kata kunci 'backsound code for web' di Google Indonesia pada tanggal 16 April 2007.
- Berada di posisi ke-6 dengan kata kunci 'html backsound' di Google Jerman pada tanggal 29 April 2007.
- Berada di posisi ke-3 dengan kata kunci 'backsound code for web' di Google Indonesia pada tanggal 22 April 2007.' di Google Indonesia pada tanggal 16 April 2007.
- Berada di posisi ke-2 dengan kata kunci ' code html' di Google Indonesia pada tanggal 22 April 2007.' di Google Indonesia pada tanggal 25 April 2007.
Mungkin awal-awal kebangkitan web banyak sekali kita dapatkan pemilik website pribadi yang mencantumkan lagunya dalam webnya.Tujuanya tak lain agar webnya akan semakin kaya dengan materi yang disuguhkan.Bila kita lihat kondisi sekarang, banyak pengakses web atau blog yang juga asyik mendengarkan lagu melalui player yang tersedia di PCnya.Jadi bisa kita bayangkan bila ketika asyik berseluncur ke blog teman tiba-tiba kita mendapati suara yang masuk tanpa kita kehendaki.Sungguh menggangu kan?
Lain bila keinginan menempatkan suara di blog menjelma menjadi sebuah pertanyaan.Karena secara teknis HTML sangat mendukung.
Berikut beberapa tag HTML yang bisa kita gunakan untuk menempatkan file suara di blog kita :
<embed src="yourmusicfile.mid" autostart="true" loop="true"
width="2" height="0">
</embed>
Tag tersebut bisa dikenali oleh perambah Netscape, begitu juga dengan IE 3.0 dan versi terbarunya.
<bgsound src="yourmusicfile.mid" loop="infinite">
Tag ini dikenali oleh Mozilla, Opera dan semua versi IE.
Dan karena sifatnya yang tidak saling melemahkan, terkadang menempatkan tag keduanya ke dalam template blog kita juga bukan hal yang tabu dilakukan.Seperti tag berikut :
<embed src="yourmusicfile.mid" autostart="true" loop="true"
width="2" height="0">
</embed>
<noembed>
<bgsound src="yourmusicfile.mid" loop="infinite">
</noembed>
Ada pula beberapa blog yang menempatkan tag dengan lebih santun, seperti :
<a href="yourmusicfile.mid">Play background music</a>
Dengan begitu pengunjung lebih memiliki pilihan untuk mendengarkan suara yang kita tawarkan.Hasilnya keinginan pemilik blog dan kenikmatan pengunjung bisa saling melengkapi.Kode seperti tersebut diatas bisa kita dapatkan di song2play.com
Semoga berguna.
Info terkini (09 Maret 07): Layanan serupa yang juga patut untuk dicoba adalah dari http://imeem.com. Disini kita bahkan diperkenankan membuat daftar lagu (play list) yang bisa ditampilkan secara bersamaan.
Catatan penangkapan Google :
- Berada di posisi ke-1 dengan kata kunci 'pasang lagu di blogs' di Google Indonesia pada tanggal 4 Mei 2007.
- Berada di posisi ke-2 dengan kata kunci 'backsound code for web' di Google Indonesia pada tanggal 16 April 2007.
- Berada di posisi ke-6 dengan kata kunci 'html backsound' di Google Jerman pada tanggal 29 April 2007.
- Berada di posisi ke-3 dengan kata kunci 'backsound code for web' di Google Indonesia pada tanggal 22 April 2007.' di Google Indonesia pada tanggal 16 April 2007.
- Berada di posisi ke-2 dengan kata kunci '
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
HTML : Need Print Version?
Jangan pernah meremehkan pengunjung.
Itu yang pertama kali tertancap di ingatanku mengetahui ada pengunjung edittag yang masih menggunakan cara menyimpan file HTML ke hardisk lokal untuk dibuka kembali.Berikut kutipan yang terekam di log :
Pastinya saat menyimpan file HTML materi gambar menjadi hal yang paling banyak memakan tempat di hardisk.Karena semua file dalam satu halaman, termasuk header, icon, banner pun tak urung memenuhi space komputernya.Padahal tak semua gambar tersebut relevan dengan postingan yang didapati.
Untuk itu tak salah bila dalam edisi mendatang edittag akan melengkapi dengan mode cetak di setiap postingan agar pengunjung bisa menyimpan filenya menjadi lebih ringan dan juga memudahkan pada saat hendak dicetak(seperti terlihat pada beberapa postingan terahir dibawah ini...).Lets see what i can do....
Berikut kode yang bisa dipasang:
1. Pada bagian CSS masukan kode berikut :
#noprint {display: none;}
// Hide unwanted elements
body {background:fff; color:000;}
// Black text on White background
a {text-decoration: underline; color:00f;}
//Underline Hyperlinks in blue
}
2. Pada bagian HTML (dalam body) masukan kode berikut :
<a href="javascript:window.print()">Print Page</a>
Itu yang pertama kali tertancap di ingatanku mengetahui ada pengunjung edittag yang masih menggunakan cara menyimpan file HTML ke hardisk lokal untuk dibuka kembali.Berikut kutipan yang terekam di log :
Pastinya saat menyimpan file HTML materi gambar menjadi hal yang paling banyak memakan tempat di hardisk.Karena semua file dalam satu halaman, termasuk header, icon, banner pun tak urung memenuhi space komputernya.Padahal tak semua gambar tersebut relevan dengan postingan yang didapati.
Untuk itu tak salah bila dalam edisi mendatang edittag akan melengkapi dengan mode cetak di setiap postingan agar pengunjung bisa menyimpan filenya menjadi lebih ringan dan juga memudahkan pada saat hendak dicetak(seperti terlihat pada beberapa postingan terahir dibawah ini...).Lets see what i can do....
Berikut kode yang bisa dipasang:
1. Pada bagian CSS masukan kode berikut :
#noprint {display: none;}
// Hide unwanted elements
body {background:fff; color:000;}
// Black text on White background
a {text-decoration: underline; color:00f;}
//Underline Hyperlinks in blue
}
2. Pada bagian HTML (dalam body) masukan kode berikut :
<a href="javascript:window.print()">Print Page</a>
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
HTML : HTML Code and HTML Template
Berbeda dengan perilaku browser yang dulu sangat dipengaruhi oleh TABLE untuk menyusun tampilan halaman sebuah web ataupun blog, kini dengan perkembangan yang lebih menjanjikan CSS mampu mengambil alih semua fungsi penempatan serta pengubahan format tampilan dalam file HTML.
Coba perhatikan template-template baku yang disertakan oleh Blogger.Semuanya tak menyisakan tag TABLE didalamnya.Dengan bantuan CSS tampilan menjadi semakin mudah direka dan dibentuk menjadi tampilan yang lebih manis.Tak hanya disitu, blogger juga mempersilahkan penggunanya untuk mengaduk-aduk serta mengedit bagian CSS agar lebih disesuaikan dengan sekehendaknya.Akan lebih mudah membandingkannya bila kita telah mengetahui skema pembentukan tampilan di TABLE.Tentu tag-tag seperti <tr> atau <td> menjadi hal yang sangat menyita waktu untuk menyusunnya.Secara garis besarnya TABLE membagi bagian-bagian dalam halaman HTML berdasarkan jumlah kolom dan baris.Tak ayal bagi yang ingin membuat tampilan lebih detail,rincian jumlah TABLE pun semakin melonjak.
Berbeda dengan CSS.Analogi kolom dan baris diubahnya menjadi beberapa bagian yang telah ditentukan lebarnya berdasarkan pixel.Atribut penyertanyapun semakin beragam.Maka tak heran banyak yang memilih menggunakan CSS dibandingkan TABLE yang memakan waktu loading lebih lama karena banyaknya tag yang harus dijabarkan.
Sedihnya hingga kini masih ada beberapa penyedia layanan template gratis untuk blogger yang bersikukuh dengan tag TABLE.Selain rentan akan tag yang korup, mereka cenderung lebih sulit untuk diedit bila kita sering mengutak atik susunan tautan didalamnya.Terlebih layanan shout oggix juga menyertakan tag TABLE yang sangat panjang.Bila tidak berhati-hati dalam penyusunannya bisa dipastikan tampilanpun jauh dari rapi.Untuk itu ada baiknya bagi yang mengalami kejanggalan dengan tampilan cek terlebih dahulu jumlah kolom dan baris dengan cara memastikan jumlah <td> sama banyaknya dengan jumlah </td> begitupun dengan jumlah tag tr dan TABLE.Gunakan editor yang memudahkan untuk menemukan jumlah ini.Seperti dreamweaver, frontpage dan editor lainnya.Setelah dipastikan jumlahnya tak mengalami perbedaan, baiknya pula di back up agar saat save dalam template blogger kita masih memiliki cadangan tag yang benar agar hasilnyapun sempurna.
Coba perhatikan template-template baku yang disertakan oleh Blogger.Semuanya tak menyisakan tag TABLE didalamnya.Dengan bantuan CSS tampilan menjadi semakin mudah direka dan dibentuk menjadi tampilan yang lebih manis.Tak hanya disitu, blogger juga mempersilahkan penggunanya untuk mengaduk-aduk serta mengedit bagian CSS agar lebih disesuaikan dengan sekehendaknya.Akan lebih mudah membandingkannya bila kita telah mengetahui skema pembentukan tampilan di TABLE.Tentu tag-tag seperti <tr> atau <td> menjadi hal yang sangat menyita waktu untuk menyusunnya.Secara garis besarnya TABLE membagi bagian-bagian dalam halaman HTML berdasarkan jumlah kolom dan baris.Tak ayal bagi yang ingin membuat tampilan lebih detail,rincian jumlah TABLE pun semakin melonjak.
Berbeda dengan CSS.Analogi kolom dan baris diubahnya menjadi beberapa bagian yang telah ditentukan lebarnya berdasarkan pixel.Atribut penyertanyapun semakin beragam.Maka tak heran banyak yang memilih menggunakan CSS dibandingkan TABLE yang memakan waktu loading lebih lama karena banyaknya tag yang harus dijabarkan.
Sedihnya hingga kini masih ada beberapa penyedia layanan template gratis untuk blogger yang bersikukuh dengan tag TABLE.Selain rentan akan tag yang korup, mereka cenderung lebih sulit untuk diedit bila kita sering mengutak atik susunan tautan didalamnya.Terlebih layanan shout oggix juga menyertakan tag TABLE yang sangat panjang.Bila tidak berhati-hati dalam penyusunannya bisa dipastikan tampilanpun jauh dari rapi.Untuk itu ada baiknya bagi yang mengalami kejanggalan dengan tampilan cek terlebih dahulu jumlah kolom dan baris dengan cara memastikan jumlah <td> sama banyaknya dengan jumlah </td> begitupun dengan jumlah tag tr dan TABLE.Gunakan editor yang memudahkan untuk menemukan jumlah ini.Seperti dreamweaver, frontpage dan editor lainnya.Setelah dipastikan jumlahnya tak mengalami perbedaan, baiknya pula di back up agar saat save dalam template blogger kita masih memiliki cadangan tag yang benar agar hasilnyapun sempurna.
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
HTML : Input Search Form to Blogger
Tahukah Anda bila blogger menyertakan form pencarian ke dalam blog kita?Inilah salah satu keunggulan yang diberikan blogger dalam layanan blognya.Kelebihan ini dipadukan dengan piranti navbar yang muncul dibagian paling atas blog kita.Artinya ruang pribadi milik blogger yang biasanya disebut papan iklan oleh beberapa pengguna blogger dimaksimalkan dengan fungsi yang sangat relevan.
Ini juga menjadi salah satu inovasi blogger setelah menyertakan iklan di navbarnya.Berikut tampilan navbar yang lama :
Bandingkan dengan saat ini? praktis dan powerful kan?
Nah karena posisi dan bentuknya yang sangat blogger itulah keberadaannya sering diabaikan.Untuk itu ada baiknya pula bila form pencarian kita masukan ke dalam sidebar agar lebih familiar dan bermanfaat.
Berikut kodenya :
Hanya perlu mengganti <$BlogURL> dengan URL blog kita.
Semoga membantu.
Info terkini : Kode diatas menyesuaikan dengan navbar di blogger lama. Karena perubahan teknologi navbar, maka kode diatas diperbarui di sini :
http://edittag.blogspot.com/...html
Ini juga menjadi salah satu inovasi blogger setelah menyertakan iklan di navbarnya.Berikut tampilan navbar yang lama :
Bandingkan dengan saat ini? praktis dan powerful kan?
Nah karena posisi dan bentuknya yang sangat blogger itulah keberadaannya sering diabaikan.Untuk itu ada baiknya pula bila form pencarian kita masukan ke dalam sidebar agar lebih familiar dan bermanfaat.
Berikut kodenya :
<FORM METHOD="GET" ACTION="http://search.blogger.com">
<INPUT TYPE="hidden" name="ie" value="UTF-8" />
<INPUT TYPE="hidden" name="ui" value="blg" />
<INPUT TYPE="hidden" name="scoring" value="d" />
<INPUT TYPE="hidden" name="num" value="10" />
<INPUT TYPE="hidden" name="x" value="0" />
<INPUT TYPE="hidden" name="y" value="0" />
<INPUT TYPE="hidden" name="bl_url" value="<$BlogURL>" />
<INPUT TYPE="text" NAME="as_q" style="width: 100px;" />
<INPUT TYPE="submit" value="Search!" />
</FORM>
Hanya perlu mengganti <$BlogURL> dengan URL blog kita.
Semoga membantu.
Info terkini : Kode diatas menyesuaikan dengan navbar di blogger lama. Karena perubahan teknologi navbar, maka kode diatas diperbarui di sini :
http://edittag.blogspot.com/...html
Blog ini diupdate seminggu dua kali. Jika kamu merasa konten blog ini bermanfaat, silahkan subscribe melalui klik ikuti blog ini atau bubuhkan email ke link di bawah ini..
Langganan:
Postingan (Atom)
Postingan Populer
-
Nokia Indonesia merilis varian Asha terbaru. Seri untuk kelas bawah ini hadir dengan sentuhan baru. Terutama dari segi kemudahan berbagi fil... -
Setelah kita memiliki blog tentu yang perlu dilakukan selanjutnya adalah mengelola dan mempublikasinya. Mengelola berarti selalu melakukan p... -
Seakan diingatkan oleh Mbak Hanan karena di blog saya belum pernah menulis tentang bagaimana membuat link read more disetiap postingan blog...