Memasang Emoticon pada Kotak Komentar Blogger Versi Dua

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIZseer7KphDm4J-SLsZ_EY4hxmtFhleM_DEFnKChYo7lX3D5Qv-8TcKnI-STEg8S4u-_MGehf3iJUEO5GUtJk7D8WmSBVnufSehxt7PwDVt3spnAeh8JohAflu6VEjN_YWm04g36EjU8/s1600-h/emoticon_v2_t4belajarblogger.JPG"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5421134232166306754" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIZseer7KphDm4J-SLsZ_EY4hxmtFhleM_DEFnKChYo7lX3D5Qv-8TcKnI-STEg8S4u-_MGehf3iJUEO5GUtJk7D8WmSBVnufSehxt7PwDVt3spnAeh8JohAflu6VEjN_YWm04g36EjU8/s200/emoticon_v2_t4belajarblogger.JPG" style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 200px; height: 110px;" /></a>Kalau kemarin-kemarin kita sudah membahas <a href="http://t4belajarblogger.blogspot.com/2009/12/membuat-emoticon-di-kotak-komen-blogger.html" target="_blank">cara memasang emoticon pada kotak komentar postingan blogger</a> (dah lama sekali sih), dan kali ini bisa dikatakan sebagai lanjutannya atau versi dua atau apa lah terserah teman2 mau menamakannya apa. Sebenarnya dari tata cara pemasangannya sama2 aja, hanya saja bedanya nih...jumlah emoticon pada pembahasan kita kali ini <span style="font-weight: bold;"><blink>lebih banyak</blink></span> dari pada emoticon yang kemarin2 itu. Wohoooo...jadi lebih mantep kan, tatkala para pengunjung blog kita ingin mengekspresikan emosinya...wuohohoho <img alt="mantep" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkiuH1Vxu8CE_AAr2wGhvx30YbO2xp1zsBWP8QJMWYBf1fWlmvJ5LaQEVGR4IX0b4aLiE15bwKDbGlonHdebXRIw29X5g2_CyrwL-EplQuUCAhT1yRZzGE1OXllChOEA45at1Awxh3rIBH/s128/t4belajarblogger80.gif" style="width: 37px; height: 31px;" /><a name='more'></a><br /><br />Sebelumnya, walau emoticon ini hasil oprak-aprik saya sendiri...namun masih menggunakan gaya/style emoticon bikinannya mas <a href="http://pinginbelajar.blogspot.com/2009/04/emoticon-di-kotak-komentar.html" target="_blank">Uda</a>. Maslahnya bingung mau bikin gaya seperti apa, sebelumnya sih kepikiran ingin bikin dengan gaya sendiri, yaitu emoticon dengan gaya <a href="http://t4belajarblogger.blogspot.com/2009/11/membuat-tombol-hide-show-spoiler.html" target="_blank">spoiler</a> lalu untuk menambah emoticon pada kotak komen, para pengunjung tinggal mengkliknya (gak ada kopi-pastean), sampai2 gara2 terlalu semanggat saya juga dah download sampai 130-an lebih emoticon + cartoon lucu lainnya, wal akhir itu semua gagal dilaksanaken...maslahnya waktu buat bikin model yg satu ini memang butuh kesabaran n waktu yg super luang. Yah, sebagai penggantinya saya bikin yg satu ini aja lah, hanya membutuhkan waktu yg relatif sedikit (dibanding yg tadi). Dan sekali lagi thanks yo mas <a href="http://pinginbelajar.blogspot.com/2009/04/emoticon-di-kotak-komentar.html" target="_blank">Uda</a>, dah memberi inpirasi yg benar2 bermanfaat.<br /><br />Yohooo...kembali ke tutorial. Jumlah emoticon kali ini sampai 54 buah emoticon (yg kemarin 36 buah), teman2 bisa melihatnya pada screen shot berikut<br /><div><div style="margin: 5px;"><br /><div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 0px; width: 95px;" value="Tampilkan" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }" type="button"><br /></div><br /><div style="border: 0px inset ; margin: 0px; padding: 6px;" class="alt2"><br /><div style="display: none;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://t4bb-demo.blogspot.com/2009/12/blog-post.html"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5421139938713882434" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3UnL_jM0OgWLJ2eyavsKno607ucLowxtqQfcjxhA3vwPEfUvu6SvZ8GnHo6Ics9eoMlSiheS-vnVkMSR-rlQYN3kLgTo3k3K0Qkib6El_QpGsC0hG_otC4AUh6XaMs6z_a4L1JIu8l4c/s400/emoticon_v202_t4belajarblogger.JPG" style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 397px; height: 400px;" /></a></div></div></div></div><br />Bagaimana...mantapkan? Bagi teman2 yang tertarik buat masang emoticon tersebut ke blognya, silahkan diperaktekkan langkah2 berikut ini...<br /><br />Login dulu ke blogger, lalu klik Tata Letak/Layout >> Klik Edit HTML (dan <span style="color: rgb(255, 0, 0);">jangan lupa</span> untuk mencentang kotak expand widget templet)<br /><br />Lalu letakkan kode script berikut tepat di atas kode tag <span style="color: rgb(102, 102, 0);"></body></span><br /><br /><p class="alert"><script src='http://sites.google.com/site/t4belajarblogger/js_t4belajarblogger/emoticonplus-v2.js' type='text/javascript'/></p><br /><br /><br /><br />Selanjutnya langkah terakhir...yaitu letakkan kode berikut di atas kode: <span style="color: rgb(102, 102, 0);"><b:if cond='data:post.embedCommentForm'> </span><br /><br /><br /><p class="alert"><div style='overflow:auto; width:100%px; height:200px; padding:5px 5px 5px 5px; background:#FFFFFF;'><br /><center><b><br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhknmWOIHMaBF6BKcz0QF7fECff4qPpe5sPOxECG2beygWpVcANXgAiAcHVkqgBRKxY_ta-Ybm0xMhXLRDb_r9v_hmqrhPHegNJpwATdRngrYOoVf_ROayqy1vbtDEbjSpzR7cApwsMruVF/s128/t4belajarblogger36.gif'/>:10<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguVhG-svopU8lxjej0xvdQoun4cyq8eL57W7cQxLWrFmEKKxVuERTzDAoUsWlZTXdh8ZvSQpk_9dSHxCltVR72kvYOFHLSFm2C3HFDtfGurAxopeNpvZKe9tnP2GQeIiaM9vwT1QPPhLw0/s128/t4belajarblogger37.gif'/>:11<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4uzQd0WjQ_xRndlEWErpf3H0Ht212cZ8kugVdHcueD0eaADIYxmnLrVvtuMFtbmE6fOnivxIoBcQpCw0uqSQbKdPPXgtq28-A8V5lba5TZvUr9Paw4iPtUN8IttgNmg2OJCe3sjCiYecL/s128/t4belajarblogger38.gif'/>:12<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRq0pfsxA-ZvKEJ9RcglCj6xcBeHnn4enIZ_7h4t_dDL02vY8Jtr4BMR-IVAybUoki0ewPUDERSFwEISOA3jnD32jCDezgtCNcRuIu6Mflw05vziXNAkYztJJ0xQ438_D1ZG0DF3u13Eqg/s128/t4belajarblogger39.gif'/>:13<br /><br/><br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5_5m8CVyqkw1B86Eorl9TDRr6jAjgw9llqHEm4Sn2cv-nrdNLXEfUY6NcTY6qVHQ-4VpzJQJmehyphenhyphenORwkTf-QJkp3pKx71UVx1Nah1hQduFwsU4IV5LtTRB51rF5gQm7kJChmv8BalJ058/s128/t4belajarblogger40.gif'/>:14<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRWCNgPfgdh1TE2FACIkSga-GiEwKytFew2kAzmD7VewKWZYWj-sqoGsvLiiJW5z-JT-WaSUASFjRx8lnznTYtWz_znSiXRzZa6klTy3SgOEd66ohnG81dI6mJ1MY0gPuELcSJ-CA3rbR-/s128/t4belajarblogger41.gif'/>:15<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinaBOVsUdNJKGZkmX0c1j21qJbVqk_YvyyUWm8NKnhuIGvI3x6hyphenhyphenLPo0X4YKHpXTnVAQ1VCdRxD773k64ZYrsVYvTKBYd0ZeaVvLjbip7WiUpiMsRtfYw_Ot4i64EcrtJgh9Ekt5ASQ_TC/s128/t4belajarblogger42.gif'/>:16<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBzKB-eCpb_0VX5LNAovzmUBzudPrFDuNB-4TEglu6sUhD2KK2KhVppTp45ABc0AxQIFOMO5trU5w_23aJWSrHXKWzp5Ry-Z82lzyMYjMhALAg_gb_NTdpm5lYOMiwFcAFE3olq4w39Dst/s128/t4belajarblogger43.gif'/>:17<br /><br/><br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6_550rbuL4B5Vz8gcxgq8nAgDeON9PmQKjDah637v5UJ9l2m3jAOlY3KFLtGDaQ65RXF_OGp1l7GgysnsxV2tqVEV2LQ7FbNOLZKX3mvm-RWxL9f1Rfc0wxhBs-KhvlA4VxzGwExLwbM6/s128/t4belajarblogger44.gif'/>:18<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT4hWYb3rrWRvCCB4DvQ2TyEZM5y4ZU-BQelrTStmw7F1vYVgxYWrbgU6KjwjlT0_gAGv9A36yvDkkaiccSCbFVbYlIIjgWEQvkW019O5-9aqqHFNUtV8_6oHuQww3XbTlC2950I5aYrpC/s128/t4belajarblogger45.gif'/>:19<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLlQaUK6WoOr5odxpVm1eNEHBY0S4mTydlwM1yJI97UhBoBnBngh21LbDIzjQ2wNsMOMKG5N9aXmRlquq6IQdWcmD6xBIUlHV54KWeu6qwpiyWnpJilfnSKioyT7DRBK7X_2dDQ3Vuhzfn/s128/t4belajarblogger46.gif'/>:20<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUc0p1YB2-QVJBUqlxor72kAXzrekO63yHryRVT0QQNcRCqBu-sqVG9t35RFdiD38LHS-ek5A7Xlwy8hVLg5apz4pf7_dsCDkrS_TLw3qAgadP1OluPv2zFo4raAldS7wVluuUkV1A_54E/s128/t4belajarblogger47.gif'/>:21<br /><br/><br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjosxmxbwJzZ80zYLlq88q0GkoBNbkKa9vQBCe90wxH9RUz_YiYLGcE0IKH2TbokUiV-Pkk_jvgIt1eJz6Bd3jCTLOmjQy7QONaJ9Wazn4bSqrI_XIlQRYLIZ8Da3CWuZz4XCUF_Gmi8PAX/s128/t4belajarblogger48.gif'/>:22<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitC8ZdZdP4Nx15E35it-YTK_8mkIEbTNbMRe9V3oksIUT2NehLKGBAQs8HrILaK9Neuc0mZ9b0vbZGa_KTh6TsZo_9SB_bC_xZo76A7uNcHBP00kPZah1-eeYGYBai73q9LnFcdz57Abwv/s128/t4belajarblogger49.gif'/>:23<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieJ6cKMde0IHH-hPO7ch5n1fz8pOPDDLWICc29-YDL4GVr_70SNvLiHxB5jpTyYaQ_UMobD1PRI54Zs-RsbIRCe0nswt_ycVcv5rSuVIVvGc_SnwQt7wrgGzbzs8r0EML3bGZQjot5-2wj/s128/t4belajarblogger50.gif'/>:24<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir3okiXk-q5Dp2n6aJqwPd8Lbte4rqo3L-ZrIGbiiQd1QjC7gNuZAGfvwC0HrmFT_td4SvYcpUByn6c7jijlMKFKIjUIP3cqRl3fjlz1AlKnXbtovtpLgWZ_l2boLE2gMP5i4pV8iS8ePF/s128/t4belajarblogger51.gif'/>:25<br /><br/><br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo179urelhvu6jPk51MFkHsS079yyfDfJIh3UpyTO8YUO7x1L0IDRkA8j8VYUHz6X_nxQnEOQNflY77-7i093UqEp_0pTZnKsNwsyQLwblscUwT7_C4Px-Bwryv0mhhOev5s4pDQpNtDQM/s128/t4belajarblogger52.gif'/>:26<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif5WaChbmHzzKx_156IsuTgc1dYPu134Hm9-C0ZZ4gJl9fHAqCUo0POaRf-qCfWYYizo2yfIjcL4h2B2XqXQoe_chfXmOlXBQ9KdDxcgqp4t0zCKJy7fcIMcAm2M4ef9sgsxhOKbE8DUsD/s128/t4belajarblogger53.gif'/>:27<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9De_2oYAIHEpR5Wtutnwie3tEvWQ3zdsh_ADExgEZkKgeVmbCIGMWxl0s-IbPlpfJI7wGROdmXyT9g3zLvBQComCfCtUaWDswjefBtcmBwvwygy4vKHpq4cLKgAgtwacoQXRpRq2Ky28j/s128/t4belajarblogger54.gif'/>:28<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc6eJd5pzXzzA8GbS5cQMjPbtXPzq_aMQEoe7DDnDSaKNpOJpMOIoUd10l7lW_NnxtaTvRdWnNUI0l79hbo8x66tMdUrbH4zFnhfx8l5Af2Fvk5-hRZBK-GhsUtwO3WtcPxcI2qIpSyqzJ/s128/t4belajarblogger55.gif'/>:29<br /><br/><br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqxLBlIk1kKUmKIXPrS6y42Q5cj3wJLkYtex4uZefAfFX5Uj6JSbuMro7bwJwfJTNYpU89BnG2pFuboFKBla-YL23qEZ_PG1Auspre1NlbDR_m171i0VZLdPLcO3q-5gatWvC6RdRi2215/s128/t4belajarblogger56.gif'/>:30<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuGLyDUTRx9yIH0EqUzpQb8s4XFRjE8O3RnzO9WQzGvQy09t-kkn2Ps9oOIT-aYpbG07p0mFuuPOx7_Crmo9TBlMVJvbCOE8gVpeqrEqN1-jeJpM9dLLaIi62gRLAQtn-5izyHAO1ZVg1v/s128/t4belajarblogger57.gif'/>:31<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6VcnFfuBy3NbNpUAI6kqaMF6r_zNBKeYdnBD5JRFEEmARct-PGt6d2AUS1ZyaLm5RApRWQs-gl8LBjmUrhgaj3CH6ZJqbXewq-a0LDe9dTEXHGyj8DI7Jcjg-KS9P4DVEzUeMumZIFJ7Y/s128/t4belajarblogger58.gif'/>:32<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGdwvwSB1ZNCkF7xVCOy_Pjj0pipc4d3Ogx94oF8LqVH-MN9MXDl17hUuh-HZaZllIAtJS0MKtYm7iIEbu6vUKT85cph9QqInCfHHXHJomuKxgwqrhVec3BUZ1pyz-N5KHhUHB2MT75jwf/s128/t4belajarblogger59.gif'/>:33<br /><br/><br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBC6-GXGYzZvF2FPhTG_dLoXMCi5nx-phkLFagCHFDT8aqYtqxH9QFJbuqm1t8ukhC0xmiOai-98jTmAvvqbdaE2V7Nhg0meiMt-T3KDmcDoia1r9m7DN9nF6Jncx2whHOedYXySMp92w0/s128/t4belajarblogger60.gif'/>:34<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOKLSmwZz8xxtdKEpef5xuiQYZsJUVbyT-ZpImAE136xdIu2TPcbmkzfLnHjuFyChmoPzkiLi_GQCXHz9hMa6T0KkDL4faT-lKBkb_cy3_3c4A552mWsmzIWw2nR7ifS0pWHwXuJzeOMej/s128/t4belajarblogger61.gif'/>:35<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_ON1_I-siNE10AICG-1HEaCrRgMLdtg49XZnXZhUHfhTYtk8KzFm2sk7uNpCJN3t69zH6EXbM8mMwQCuM5nWZynxjY3nqwndd8mOQfv1Xd7wNZAu0ZKsK2lLBvGhGFEUVZoO9GFWOVMpD/s128/t4belajarblogger62.gif'/>:36<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQPZyAP4H7PyAmBZGq93FnCl8Tc_gQxmfW8HtoN1B_7509_4nPydbAhfs5mXhqyl36YZEQX752mU87gLs4zriqAYfXjGC7_-r4TvmzI-WAYZ0f1su_MBLtEE5c70ETL0jB6a1e98tig7X8/s128/t4belajarblogger63.gif'/>:37<br /><br/><br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAvdqNJ8CObG_bd4fSi-BdbS5AhqeP5B6hAaBj1uhNplR_-w0dahOcgH0CTnhaTDZv7Zh-OcSl0qAowYKTdaMMrstn1vh56Q8B3gmB25Fw_AZ_9v9bZcZhJV62ML9kHBSALayViZnC_4WW/s128/t4belajarblogger64.gif'/>:38<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp90Ak3sUZRBAzHksqXreNalUlnKoUAoOlNY4htHlasAc_XHlE9_22UlBJ_GLT6FQW2LalpWsu0T7xZasUMunTw5UhStb63veAVEi0RGHItK5CIChE_kWbPn8QiGknHe2Irzrw8dnIjvHQ/s128/t4belajarblogger65.gif'/>:39<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXW9Y_ownxSEdIcqMxGxM2aAFsnnK2mj1NCcHP90WQSBUJeHEB9qphuGZsscGcH0qOAE_k7OY8atbfzObYv_-NF9_8YOLDhSuu_FvLZ1YLl-MnE89fpJS8mxXgc5E_Ij0Zw2LlwjwM8GAy/s128/t4belajarblogger66.gif'/>:40<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPe-RRz8xbXSGprjs8moYrsaoAK-qoTo9gKRRlqRzt_ZCFCEmyKQGZbkbme2StkiIlHB8tQC_b_7J4mUflDCCjCWD3Qh7EmKhA-rZUOVZVgt_Opd8rd-tEAIKJ-tcIklOskC6ynvvOgpEp/s128/t4belajarblogger67.gif'/>:41<br /><br/><br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKyuRr5EvbzJ8kLH5OLzXRN3gBdC9I9_YFQVe0iT4Jo6N2-Mz93io2oL1GoHOZGksgx2fLzKTRJC7lQEUWS6oAtluCLuSIWOXPo8AiF8ZIAQwahQ6wAO0lmqvl1UMtVZTwpnCfndv__ibR/s128/t4belajarblogger68.gif'/>:42<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcdIbQDYy3YlfCLQxUwB9QjIOnmoZZqDAHBxnpepi7dijsiFXrwAaWDPB8WJ66ZgMvwJFDPnd1iB8Vlex_O_-sTMEkZiQgtit5fODbSWXeef-quLrzq7ldNb9LMKipRFUJJoH3hEzsG9n6/s128/t4belajarblogger69.gif'/>:43<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7hdG_TzZV45oPZb96HGlRxkdoJQMMNMn98gbjTZfSJalwmyTHKgPGGhZ7XfpElGH4w9F-08s9EWyD9chRrwsuRx8KIC74Df5EWTJ6_L-VmSsjiGWKB_uaxxOG5Z9_SOEnka4_C-n6rwj2/s128/t4belajarblogger70.gif'/>:44<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_HOnwmPPnExuJocZrbKuvb4CrHUzNLnKrlCl0pSr4aLXKBjUTDYhlChOQohdkHJ9pMAlXYpTZxpOmK6bGx3tri0Jxf8M4sk8T12KFZg-7WsGiztgH9w5QTXzVutd0rKM5tpagM_4ptKCQ/s128/t4belajarblogger71.gif'/>:45<br /><br/><br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT9F5QAdlUZeqEPYVkLAkjPjgeuhRapoDSoYXfOWo9dAgai263I7qi3_O9ByhUMR_IHM1i08wMWD2ESbXRBpiPamYe2Qm722cJXRpYAvLm1WTBEhL9Iq-CwSB0-QFKiaWudejjBqsPFcwo/s128/t4belajarblogger72.gif'/>:46<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyonoXo8tnEN20z3l_331Q8ZxGOmY2hNRFIkAk7jg6dpozruw1xvubbJHPdijwWK2LOuSBd3-sds3It1fek1cjg01cZINOUdU0jTPkn-AHX8h8jD8UDiQQnpbao6w7JkvcYxQjz0quQK7G/s128/t4belajarblogger73.gif'/>:47<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCA3l0L429csYQjVW7dsddvz17xCZXbTQF4wHtSXSiZc6Qf0R3XF-BdunwYbTXoEwEU0jhAtojU1rIaefWMiELni4TGAchL5Wjin3p8gdnRrykVIfuwjJPSjL90nfCJIAdD3qF9PDUhDxo/s128/t4belajarblogger74.gif'/>:48<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgafgCgSeyhWOBxb9hb7ashA4FW1LVp_ZQ8GE1tRL6tuPVFcwstAJFtfAymDfGE34bLtpUgytYqx73S3FL8iBl48Lg4H8A4I3wkZyIM9ddpOKi5F-eBqsME2xpz-ol6n6IFexS30dh5f4BK/s128/t4belajarblogger75.gif'/>:49<br /><br/><br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHzmdXK5VGfRgNMuE8NKX1AJ8iwxu5h64llZHbuEZGsf8-brYxzp2jAa9XnXBd8dvYXe2k5vf5OWD-OWb6rQfKQUq636b-plTj1fZ31noV5RmyMCuLSdZB3ImUY-VeswoWLdBnZxTYJjcz/s128/t4belajarblogger76.gif'/>:50<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTAwKROQ6SOlTLjrvSmisLBb1-n7mswAb9GBLj4rWeV3fRSMi9LRIH0Dmga17nGiIh5b0BuZPufprdYQBhNMgoCN1HfPweN260ZwC43qFowwS5JxaEu1TOy-yy4cZtb1G3acrkkp7B-vVP/s128/t4belajarblogger77.gif'/>:51<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii0cCtPUwyeuyAw-wSHSn8wNbtNGYZ3trcfy7XW8MjDPf65a7jqVKFKxbpu1avKZP2SHgKpLrIm9amSB_bqAszlwr2uF1fjl-pkif9OgDZXzBmPrI1_EmfQeaIRnlfTHgjbeXSqzsRORvw/s128/t4belajarblogger78.gif'/>:52<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7r7svbkur7aNFhxQ-0t3JUyhoNMITV1GPfO6cKeF20LzHRG6ZYh3VZuUzwkttohj7wgZ8jBiSCkCIjKd9jgg1sFptY_Wc2NBCA-6Z86Y0IwbgpK-coA1PkTBCGthyphenhyphenr_pnLq2gF6pwpsiZ/s128/t4belajarblogger79.gif'/>:53<br /><br/><br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkiuH1Vxu8CE_AAr2wGhvx30YbO2xp1zsBWP8QJMWYBf1fWlmvJ5LaQEVGR4IX0b4aLiE15bwKDbGlonHdebXRIw29X5g2_CyrwL-EplQuUCAhT1yRZzGE1OXllChOEA45at1Awxh3rIBH/s128/t4belajarblogger80.gif'/>:54<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJhx2bgS4hqvbNqfka4mAcKpzXd0psLUN5DlH2ncbR4oQo9WChVtZJVm9qUHimS1S-KOOnd2mnKoVqYwWexhEd9RZD0Ee_9h6uhaysq2s7XKs_u48zR4rpfsz7UYaAujd6MSiyzbndBgfg/s128/t4belajarblogger81.gif'/>:55<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik0aSVE9jKKKwL_yaQgYg8nvZh5ubfi8eb2oNzW9hezbw6WrzSD5n3ncmZHkv06warnThb-CjPUo_V1sGZDJL0Lfg9deyDI-BzZvdYkyjee2cmVA-Wa9BFM2D8ENPUkJtHYhpU6JALEMD9/s128/t4belajarblogger82.gif'/>:56<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqD8A-dZwekz73ea5NaF8zLK0P8wdSw5AH1VwrkLJhcXGJvcPbvQwSZC9MojXp1utGgY3L6vkaLygpYGo5Er3oe5i1wA_yUMMiLwXEZ4bfNOpiK_FJCD69gLD_ooHSMOFnbOwBn7mHGg9i/s128/t4belajarblogger83.gif'/>:57<br /><br/><br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidSrwcgKn9qVfUOpUD1PH39iBrhG-kHR2pKN0k5BhMXhZmz-qFmnHOMEkyGs3_UjJTxHgmVxreKXMEmdvye7R4FoD_LlzlmWMZD6-UAIDiqN-7ipsIEha2YOmiwfBuOW1TE5e-xl8JEhWQ/s128/t4belajarblogger84.gif'/>:58<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVU6uJ8sRCAnhLLfwrUkvN3M296MSveAyLoHd4TICMOrkIdr-Fseqca3fqSiAl4U13FL4qRt69H7XvXJHA1Aqo_QvgDTLbQnmIYP8i5Qdwnhtt-fBPkChSVXILyqSuSLyBRMxi_GvZ-nfh/s128/t4belajarblogger85.gif'/>:59<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmPMnPsIM0XVUdvkeamC1Ij1woVIOp3HOi0ALmcfFXfhxVcjxDuV_IBcndZpoqGNqTU145QJJNnjGAmoYly85PhU1Sv849zhPyTavtAgh1sFVUVtwvopZ02d0GpEFKQaWWJts5ilY40NV6/s128/t4belajarblogger86.gif'/>:60<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1-JMECszJEy1zuQHq8PKl1wzflaAwfJN9fi-HiKFYTydLgopFOJwBA4-Ov_YskDwcMH2R-SqpfVOfV1xBpSxFsV-cLF2nQ6UYhPo_fSrKGKL8Zqc8C1vAt7V3FlL7hYmMP-FlqYLxwIhG/s128/t4belajarblogger87.gif'/>:61<br /><br/><br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtm9bSTP7hyphenhyphenwfcWM59Wah-Gl8qFMYlZ_1DKrVM9xY5ar8P5ZrlAMzv1dXx2MNEgOXaoCz88FQwYD8INxju6OuDW-e3H8A00Up3CUafeKNWTfInhiNo0voJjTZbZ2TqH10gNR4DoubXRIFZ/s128/t4belajarblogger88.gif'/>:62<br /><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNT9Gd71ePoOiFQQGJYLxss7IRXeNzkeJEF3Scz1LZUPBTSopPHkFtntpuwia1SugSjMKxAssM1Fm4bEh5mf_3JFbmJEvOe_SU23caZzJQMo-kyYYL7lQhf0608m3p8jacMXxtARQru_sd/s128/t4belajarblogger89.jpg'/>:63<br /></b></center><br /></div></p><br /><br /><br /><br /><br />Dah itu jangan lupa klik simpan template...<br /><br /><br />Gampang tooo...coba sekarang lihat tuh hasilnya di blognya tman2, sekalian nyoba bikin komen sendiri buat testing awal.<br /><br />Kalau ada maslah atau pertanyaan, langsung saja diposting pertanyaan teman2 di kolom komentar, atau bisa juga <a href="http://t4belajarblogger.blogspot.com/2009/12/contact-admin.html" target="_blank">kontak admin</a> (bagi tman2 yg gak mau pertanyaan dilihat yg lain ==> tapi saya balasnya agak lama lho)...dah dulu ya<br /><br /><br />Semoga Bermanfaat []<br /><br /><span style="font-weight:bold;">Tags: Cara memasang emoticon untuk blogspot, cara memasang emoticon untuk blogger, memasang emoticon di komentar, cara pasang emoticon dengan kode, HTML emoticon ,kode script emoticon, emoticon versi dua</span>

Memasang Emoticon pada Kotak Komentar Blogger Versi Dua

Kalau kemarin-kemarin kita sudah membahas cara memasang emoticon pada kotak komentar postingan blogger (dah lama sekali sih), dan kali ini ...

+ Read more »

Memasang Navigasi Halaman Posting Ala Google

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkQsRR1FWRQ-mcn5ixiRIl6nnYrQm_ITnTw0URd5PsCeD0pG08tUb68Ew0dMygoaXVtA7dn5qJvJ6nKRC2KLm0N61a4UuQ_XXgv93BxI_Q2IhUAUV5eTU3B5wmEYyYzGBCwHr6eX8Fv0M/s1600-h/navigasi_halaman_ala_google_t4belajarblogger.JPG"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5420314082331098290" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkQsRR1FWRQ-mcn5ixiRIl6nnYrQm_ITnTw0URd5PsCeD0pG08tUb68Ew0dMygoaXVtA7dn5qJvJ6nKRC2KLm0N61a4UuQ_XXgv93BxI_Q2IhUAUV5eTU3B5wmEYyYzGBCwHr6eX8Fv0M/s200/navigasi_halaman_ala_google_t4belajarblogger.JPG" style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 200px; height: 31px;" /></a>Kalau kemarin2 kita sudah membahas <a href="http://t4belajarblogger.blogspot.com/2009/12/cara-memasang-navigasi-halaman-posting.html" target="_blank">cara memasang fitur navigasi halaman</a> biasa (bertombol), nah sekarang waktunya kita membahas cara memasang navigasi halaman ala <span style="font-weight: bold;"><span style="color: rgb(51, 51, 255);">G</span><span style="color: rgb(255, 0, 0);">o</span><span style="color: rgb(255, 153, 0);">o</span><span style="color: rgb(51, 51, 255);">g</span><span style="color: rgb(0, 153, 0);">l</span><span style="color: rgb(255, 0, 0);">e</span></span>. Seperti yang telah teman2 ketahui, bagaimana bentuk dan wajah navigasi halaman google, pasti sederhana dan menarik, yang kemudian memilki corak warna-warni yang semisal dengan logonya (Google). Bagi teman-teman yang tertarik untuk menampilkan navigasi halaman ala Google ke dalam blognya, monggo bisa diperaktekkan melalui langkah2 yang akan kita bahas dalam postingan kali ini.<a name='more'></a><br /><br />Sebagai gambaran, berikut ini adalah navigasi halaman asli milik Google<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrdqRc_BoPi8J9wp3p_sbclNYQanHR5DKLyFY0BxvGLwdbcNTexwCUwEksB_d-05G8m2ufRN3bCfnV32uInJjpEPS2cd_aCjzGEDZhGPw_EsyE1_AFuJSbtESiWLTP15AQPXIr6DUIgF0/s1600-h/navigasi_halaman_ala_google02_2_t4belajarblogger.JPG"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5420317275263428002" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrdqRc_BoPi8J9wp3p_sbclNYQanHR5DKLyFY0BxvGLwdbcNTexwCUwEksB_d-05G8m2ufRN3bCfnV32uInJjpEPS2cd_aCjzGEDZhGPw_EsyE1_AFuJSbtESiWLTP15AQPXIr6DUIgF0/s320/navigasi_halaman_ala_google02_2_t4belajarblogger.JPG" style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 85px;" /></a><br /><br />Lalu yang di bawah ini adalah (gambaran) navigasi halaman yang terpasang di blog kita<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3KuMB4R-lReRzoyROVRmY-2_vhsJd8hscDYNY7kFVaY2LyZ_0YJZUZFEcxi1ee7mMhuVIRjDUg02kxH0HKuGmgZbSmeHvEQbNGP6HHK_MzwgRHmWATPrIpAGb2vVZ0o8FzGky6KmW8N8/s1600-h/navigasi_halaman_ala_google03_t4belajarblogger.JPG"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5420318282811219042" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3KuMB4R-lReRzoyROVRmY-2_vhsJd8hscDYNY7kFVaY2LyZ_0YJZUZFEcxi1ee7mMhuVIRjDUg02kxH0HKuGmgZbSmeHvEQbNGP6HHK_MzwgRHmWATPrIpAGb2vVZ0o8FzGky6KmW8N8/s320/navigasi_halaman_ala_google03_t4belajarblogger.JPG" style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 241px;" /></a><br /><br />Ok, cuap2nya kita sudahi. Langkah pembuatannya seperti biasa, sekarang silahkan login dulu ke akun blogger, lalu klik Tata Letak >> Edit HTML (Expand widget templet-nya gak usah dicentang)<br /><br />Selanjutnya letakkan kode berikut di atas kode tag <span style="color: rgb(102, 102, 0);">]]></b:skin></span><br /><br /><br /><p class="alert">#nav a,#nav a:visited,.blk a{color:#000}<br />#nav a{display:block}<br />#nav .b a,#nav .b a:visited{color:#20c}<br />#nav .i{color:#a90a08;font-weight:bold}<br />.csb,.ss{background:url(http://sites.google.com/site/t4belajarblogger/gambar/nav_logo_ala_google.png) no-repeat 0 0;height:26px;display:block}<br />.ss{background-position:0 -88px;position:absolute;left:0;top:0}<br />.cps{height:18px;overflow:hidden;width:114px}<br />.mbi{width:13px;height:13px;background-position:-91px -74px;margin-right:3px}<br />#nav td{padding:0;text-align:center}</p><br /><br /><br />Lalu letakkan kode berikut tepat di atas kode tag <span style="color: rgb(102, 102, 0);"></body></span><br /><br /><p class="alert"><script type='text/javascript'><br /><br />var home_page_url = location.href;<br /><br /><br />var pageCount=10;<br />var displayPageNum=6;<br />var upPageWord ='Previous';<br />var downPageWord ='Next';<br /><br /><br />function showpageCount(json) {<br />var thisUrl = home_page_url;<br />var htmlMap = new Array();<br />var thisNum = 1;<br />var postNum=1;<br />var itemCount = 0;<br />var fFlag = 0;<br />var eFlag = 0;<br />var html= '';<br />var upPageHtml ='';<br />var downPageHtml ='';<br /><br /><br /><br />htmlMap[htmlMap.length]='/';<br />postNum++;<br /><br />for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {<br /><br /><br />var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);<br />timestamp = encodeURIComponent(timestamp1);<br />var title = post.title.$t;<br /> if(thisUrl.indexOf(timestamp)!=-1 ){<br /> thisNum = postNum;<br /> }<br /><br /> postNum++;<br /> htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&amp;max-results='+pageCount;<br /><br />}<br /><br />var banyaknomer = htmlMap.length;<br />if (json.feed.entry.length % pageCount == 0){<br />var banyaknomer = htmlMap.length -1 ;<br />postNum=postNum-1;<br />};<br /><br /><br />for(var p =0;p&lt; banyaknomer;p++){<br />if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){<br /> if(fFlag ==0 &amp;&amp; p == thisNum-2){<br /> if(thisNum==2){<br /> upPageHtml = '&lt;a href=&quot;/&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';<br /> }else{<br /> upPageHtml = '&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';<br /> }<br /><br /> fFlag++;<br /> }<br /><br /> if(p==(thisNum-1)){<br /> if(p==0){<br /> html += '&lt;span class=&quot;csb&quot; style=&quot;background-position: -26px 0pt; width: 18px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';<br /> }else{<br /> html += '&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';<br /> }<br /> }else{<br /> if(p==0){<br /> html += '&lt;td&gt;&lt;a href=&quot;/&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;1&lt;/a&gt;&lt;/td&gt;';<br /><br /> }else{<br /> html += '&lt;td&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+ (p+1) +'&lt;/a&gt;&lt;/td&gt;';<br /> }<br /> }<br /><br /> if(eFlag ==0 &amp;&amp; p == thisNum){<br /> downPageHtml = '&lt;td class=&quot;b&quot;&gt; &lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -76px 0pt; margin-right: 34px; width: 66px;&quot;&gt;&lt;/span&gt;'+ downPageWord +'&lt;/a&gt;&lt;/td&gt;';<br /> eFlag++;<br /> }<br />}<br />}<br /><br />if(thisNum&gt;1){<br />html = ''+upPageHtml+' '+html +' ';<br />}<br />html2 = '&lt;table id=&quot;nav&quot; style=&quot;margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;&quot; align=&quot;center&quot;&gt;&lt;tbody&gt;&lt;tr valign=&quot;top&quot;&gt;&lt;td class=&quot;b&quot;&gt;Page ('+(postNum-1)+') &lt;/td&gt;&lt;td class=&quot;b&quot;&gt;';<br />html3 = '&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;';<br />html = html2+html;<br /><br />if(thisNum&lt;(postNum-1)){<br />html += downPageHtml;<br />}else{<br />html += '&lt;td class=&quot;b&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -76px 0pt; width: 42px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;';<br />}<br /><br /><br /><br />if(postNum==1) postNum++;<br />html += html3+ '&lt;/div&gt;';<br /><br /><br />var pageArea = document.getElementsByName(&quot;pageArea&quot;);<br />var blogPager = document.getElementById(&quot;blog-pager&quot;);<br /><br />if(postNum &lt;= 2){<br />html ='';<br />}<br /><br />for(var p =0;p&lt; pageArea.length;p++){<br />pageArea[p].innerHTML = html;<br />}<br /><br /><br />if(pageArea&amp;&amp;pageArea.length&gt;0){<br />html ='';<br />}<br /><br />if(blogPager){<br />blogPager.innerHTML = html;<br />}<br /><br /><br />}<br /><br /><br />function showpageCount2(json) {<br /><br />var thisUrl = home_page_url;<br />var htmlMap = new Array();<br />var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;<br />var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;<br />thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;<br />var thisNum = 1;<br />var postNum=1;<br />var itemCount = 0;<br />var fFlag = 0;<br />var eFlag = 0;<br />var html= '';<br />var upPageHtml ='';<br />var downPageHtml ='';<br /><br /><br /><br />var labelHtml = '&lt;a href=&quot;/search/label/'+thisLable+'?&amp;max-results='+pageCount+'&quot;&gt;';<br />var thisUrl = home_page_url;<br /><br />htmlMap[htmlMap.length]=labelHtml;<br />postNum++;<br /><br />for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {<br />var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);<br />timestamp = encodeURIComponent(timestamp1);<br /><br /><br />var title = post.title.$t;<br /><br /> if(thisUrl.indexOf(timestamp)!=-1 ){<br /> thisNum = postNum;<br /> }<br /><br /> if(title!='') postNum++;<br /> htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&amp;max-results='+pageCount;<br /> <br />itemCount++;<br />}<br /><br />var banyaknomer = htmlMap.length;<br />if (json.feed.entry.length % pageCount == 0){<br />var banyaknomer = htmlMap.length -1 ;<br />postNum=postNum-1;<br />};<br /><br />for(var p =0;p&lt; banyaknomer;p++){<br />if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){<br /> if(fFlag ==0 &amp;&amp; p == thisNum-2){<br /> <br /> <br /> <br /> if(thisNum==2){<br /> upPageHtml = labelHtml +'&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';<br /> }else{<br /> upPageHtml = '&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';<br /> }<br /><br /> fFlag++;<br /> }<br /><br /><br /><br /><br /><br /> if(p==(thisNum-1)){<br /> if(p==0){<br /> html += '&lt;span class=&quot;csb&quot; style=&quot;background-position: -26px 0pt; width: 18px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';<br /> }else{<br /> html += '&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;'; <br /> }<br /> }else{<br /> if(p==0){<br /> html = '&lt;td&gt;'+labelHtml+'&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;1&lt;/a&gt;&lt;/td&gt;';<br /> }else{<br /> html += '&lt;td&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+ (p+1) +'&lt;/a&gt;&lt;/td&gt;';<br /> }<br /> }<br /><br /><br /> if(eFlag ==0 &amp;&amp; p == thisNum){<br /> downPageHtml = '&lt;td class=&quot;b&quot;&gt; &lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -76px 0pt; margin-right: 34px; width: 66px;&quot;&gt;&lt;/span&gt;'+ downPageWord +'&lt;/a&gt;&lt;/td&gt;';<br /> eFlag++;<br /> }<br />}<br />}<br /><br /><br /><br /><br />if(thisNum&gt;1){<br />if(!isLablePage){<br /> html = ''+upPageHtml+' '+html +' ';<br />}else{<br /> html = ''+upPageHtml+' '+html +' ';<br />}<br />}<br /><br />html2 = '&lt;table id=&quot;nav&quot; style=&quot;margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;&quot; align=&quot;center&quot;&gt;&lt;tbody&gt;&lt;tr valign=&quot;top&quot;&gt;&lt;td class=&quot;b&quot;&gt;Page ('+(postNum-1)+') &lt;/td&gt;&lt;td class=&quot;b&quot;&gt;';<br />html3 = '&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;';<br />html = html2+html;<br /><br />if(thisNum&lt;(postNum-1)){<br />html += downPageHtml;<br />}else{<br />html += '&lt;td class=&quot;b&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -76px 0pt; width: 42px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;';<br />}<br /><br />if(postNum==1) postNum++;<br />html += html3+ '&lt;/div&gt;';<br /><br />var pageArea = document.getElementsByName(&quot;pageArea&quot;);<br />var blogPager = document.getElementById(&quot;blog-pager&quot;);<br /><br />if(postNum &lt;= 2){<br />html ='';<br />}<br /><br />for(var p =0;p&lt; pageArea.length;p++){<br />pageArea[p].innerHTML = html;<br />}<br /><br />if(pageArea&amp;&amp;pageArea.length&gt;0){<br />html ='';<br />}<br /><br />if(blogPager){<br />blogPager.innerHTML = html;<br />}<br /><br /><br />}<br /><br /><br /></script><br /><br /><script type='text/javascript'><br /><br />var thisUrl = home_page_url;<br />if (thisUrl.indexOf(&quot;/search/label/&quot;)!=-1){<br /> if (thisUrl.indexOf(&quot;?updated-max&quot;)!=-1){<br /> var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?updated-max&quot;));<br /> }else{<br /> var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?&amp;max&quot;));<br /> }<br />}<br /><br />var home_page = &quot;/&quot;;<br />if (thisUrl.indexOf(&quot;?q=&quot;)==-1 &amp;&amp; thisUrl.indexOf(&quot;.html&quot;)==-1){<br /> if (thisUrl.indexOf(&quot;/search/label/&quot;)==-1){ <br /> document.write('&lt;script src=&quot;'+home_page+'feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot; &gt;&lt;\/script&gt;')<br /> }else{document.write('&lt;script src=&quot;'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&amp;callback=showpageCount2&amp;max-results=99999&quot; &gt;&lt;\/script&gt;')<br /> }<br />}<br /></script></p><br /><br /><br /><br />Klik Simpan Template.<br /><br /><br />Silahkan lihat hasil kerjaan anda. Kalau navigasi halamannya kok gak bisa muncul...berarti ada satu kemungkinan besar penyebabnya, yaitu postingan anda masih terlalu sedikit untuk menggunakan fitur navigasi. Oleh karena itu bagi teman2 blogger yang ingin menggunakan trik ini, disarankan untuk memilki jumlah postingan dgn jumlah minimal 15-21 ke atas...<br /><br />Wah...itu kok kode yang harus di taruh di atas kode tag <span style="color: rgb(102, 102, 0);"></body></span> kok panjang sekali...? Iya sob, memang panjang. Tapi kan gampang to, tinggal kopi lalu paste di atas kode tag <span style="color: rgb(102, 102, 0);"></body></span> miliknya anda (gitu aja kok repot, hohoho^). Jangan khawatir maslah trik ini dapat bekerja atau tidak. Karena kalau gak dapat bekerja, pasti gak saya posting (lihat bikinan saya di <del>T4bb-demo.blogspot.com</del> <span style="font-weight: bold;"><span style="color: rgb(255, 0, 0);font-size:130%;" >Maaf</span>, blog demo telah saya hapus. InsyaAllah fungsi akan terus bekerja, thanks</span>).<br /><br />Kalau ada maslah atau pertanyaan mengenai navigasi halaman ala google, silahkan post pertanyaannya teman2 di halaman komentar, ntar saya jawab. Atau bisa juga nanya lewat form kontak admin, dah dulu ya...<br /><br /><br /><br /><br /><br />Semoga Bermanfaat []<br /><br /><span style="font-weight: bold;">Tags: Cara membuat navigasi seperti Google, memasang halaman dengan nomor seperti google, navigasi halaman HTML, script navigasi halaman Google</span><br /><br />Sumber Trik: <a href="http://www.abu-farhan.com/2009/09/page-navigation-for-blogger-with-google-style/" target="_blank">Abu Farhan</a><br />Tutorial Style: <a href="http://t4belajarblogger.blogspot.com/" target="_blank">Iqbal</a>

Memasang Navigasi Halaman Posting Ala Google

Kalau kemarin2 kita sudah membahas cara memasang fitur navigasi halaman biasa (bertombol), nah sekarang waktunya kita membahas cara memasan...

+ Read more »

Cara Memasang Navigasi Halaman Posting

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGnFIzheEDAGlQji7oTK8O3YUeqby06vYJE34A58hwticY_3-85SYplNn7PuESDQNIBefFdzETU29iRs0EaSf8eqpglk6gKSawYOPGsi2BVrui65Ojnpq-QLqmqVpQhgcV8VyHYUrXTJM/s1600-h/navigasi_halaman_posting_t4belajarblogger.JPG"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5420043996329368642" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGnFIzheEDAGlQji7oTK8O3YUeqby06vYJE34A58hwticY_3-85SYplNn7PuESDQNIBefFdzETU29iRs0EaSf8eqpglk6gKSawYOPGsi2BVrui65Ojnpq-QLqmqVpQhgcV8VyHYUrXTJM/s200/navigasi_halaman_posting_t4belajarblogger.JPG" style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 178px; height: 32px;" /></a>Sebelumnya, teman2 ada yang belum tahu apa itu navigasi halaman? Navigasi halaman yaitu fitur yang berfungsi sebagai rel untuk menuju ke halaman selanjutnya maupun ke halaman sebelumnya. Mungkin teman2 akan lebih jelas lagi kalau teman2 langsung pergi ke halaman google.com sekarang juga dan coba perhatikan angka2 halaman yg berada pada bagian paling bawah halaman google search tersebut.<a name='more'></a> Nah, nomor2 halamn tersebutlah yang dinamakan navigasi halaman. Sebenarnya pihak blogger telah menyediakan fitur ini di blog kita sejak awal, akan tetapi bentuk navigasinya sederhana sekali yaitu berbentuk tulisan "Posting lama", "posting lebih baru", dll maka dari itu bagi teman2 yg ingin menampilkan blognya lebih ekspresif lagi maka bisa juga diterapkan trik yg satu ini.<br /><br />Contoh tampilan<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWw0w0f8wZMxK62u4eAq2lhbpYnOzM4Kwgnomk84Quq8GHSSzP4z4sBqCIIVz8VFwFSmR_Qb7bu9g5Qn0LS8_-bOtrY24yL0whyLKDe5pFgI4vMQzZy_5PbQfzL776KKiWlMHmIAdK8KI/s1600-h/navigasi_halaman_posting_t4belajarblogger.JPG"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5420044983010610514" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWw0w0f8wZMxK62u4eAq2lhbpYnOzM4Kwgnomk84Quq8GHSSzP4z4sBqCIIVz8VFwFSmR_Qb7bu9g5Qn0LS8_-bOtrY24yL0whyLKDe5pFgI4vMQzZy_5PbQfzL776KKiWlMHmIAdK8KI/s320/navigasi_halaman_posting_t4belajarblogger.JPG" style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 227px;" /></a><br /><br />Cara membuatnya silahkan login dulu ke akun blogger, lalu klik tata letak >> Edit HTML ("expand widget templet" gak usah dicentang)<br /><br />Selanjutnya letakkan kode berikut di atas tag <span style="color: rgb(102, 102, 0);">]]></b:skin></span><br /><br /><p class="alert">.showpageArea a {<br />text-decoration:underline;<br />}<br />.showpageNum a {<br />text-decoration:none;<br />border: 1px solid #cccccc;<br />margin:0 3px;<br />padding:3px;<br />}<br />.showpageNum a:hover {<br />border: 1px solid #cccccc;<br />background-color:#cccccc;<br />}<br />.showpagePoint {<br />color:#333;<br />text-decoration:none;<br />border: 1px solid #cccccc;<br />background: #cccccc;<br />margin:0 3px;<br />padding:3px;<br />}<br />.showpageOf {<br />text-decoration:none;<br />padding:3px;<br />margin: 0 3px 0 0;<br />}<br />.showpage a {<br />text-decoration:none;<br />border: 1px solid #cccccc;<br />padding:3px;<br />}<br />.showpage a:hover {<br />text-decoration:none;<br />}<br />.showpageNum a:link,.showpage a:link {<br />text-decoration:none;<br />color:#333333;<br />}</p><br /><br /><br />Lalu letakkan kode berikut di atas kode tag <span style="color: rgb(102, 102, 0);"></body></span><br /><br /><p class="alert"><b:if cond='data:blog.pageType != &quot;item&quot;'><br /><script type='text/javascript'><br /><span style="color: rgb(255, 0, 0);">var pageCount=5;</span><br /><span style="color: rgb(255, 102, 0);">var displayPageNum=5;</span><br /><span style="color: rgb(0, 153, 0);">var upPageWord =&#39;Previous&#39;;</span><br /><span style="color: rgb(51, 51, 255);">var downPageWord =&#39;Next&#39;;</span><br /></script><br /><script src='http://sites.google.com/site/t4belajarblogger/js_t4belajarblogger/blogger_navpage.js' type='text/javascript'/><br /></b:if></p><br /><br /><br />Klik simpan template. Sekarang silahkan untuk melihat hasilnya di blog anda...<br /><br /><br /><span style="font-weight: bold;">Bagian2 yang bisa teman2 atur antara lain</span><br /><br /><span style="color: rgb(255, 0, 0);">var pageCount=5;</span> = Fungsinya untuk mengatur jumlah halaman postingan yang berada di dalam satu tampilan ketika teman2 mengklik next atau pun nomor halaman.<br /><br /><span style="color: rgb(255, 102, 0);">var displayPageNum=5;</span> = Junmlah angka/nomor halaman yang tampil pada fitur navigasi halaman.<br /><br /><span style="color: rgb(0, 153, 0);">var upPageWord =&#39;Previous&#39;;</span> = Untuk tulisan "Previous" bisa teman2 ganti dengan kata2 lain seperti "sebelumnya" atau apa saja yg semisal.<br /><br /><span style="color: rgb(51, 51, 255);">var downPageWord =&#39;Next&#39;;</span> = Sama halnya dengan kata Previous, kata "next" juga bisa teman2 ganti dengan kata2 lain seperti "selanjutnya" atau apa saja yg semisal.<br /><br /><br />--------------------------------------------------<br /><span style="font-size:130%;"><span style="font-weight: bold; color: rgb(255, 0, 0);">NB</span></span>:<br /><br />Untuk menerapkan trik ini, usahakan jumlah postingan teman2 di atas 10 buah postingan atau lebih.<br />--------------------------------------------------<br /><br /><br /><br />Semoga Bermanfaat []<br /><br /><span style="font-weight:bold;">Tags: membuat navigasi halaman, cara membuat navigasi untuk blogspot, agar blog blogger punya navigasi, cara mudah membuat navigasi, membuat navigasi dengan HTML, script navigasi Blogger</span>

Cara Memasang Navigasi Halaman Posting

Sebelumnya, teman2 ada yang belum tahu apa itu navigasi halaman? Navigasi halaman yaitu fitur yang berfungsi sebagai rel untuk menuju ke hal...

+ Read more »

Menampilkan Avatar Para Komentator Postingan

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSEHssZ04-ZbCEzR5976ff9KA6ajV9O1WKFFPYhHu-_gz52293UJlUBpbTKrjbhSNHigDuXsIcWH4XMX2N_VkhMZ-CISy8GwlN2WYQIusdLZEmGF4zI09_m3HCWUFFN7a4JdMU1b60b-A/s1600-h/avatar_komentator_t4belajarblogger.JPG"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5420026917314151314" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSEHssZ04-ZbCEzR5976ff9KA6ajV9O1WKFFPYhHu-_gz52293UJlUBpbTKrjbhSNHigDuXsIcWH4XMX2N_VkhMZ-CISy8GwlN2WYQIusdLZEmGF4zI09_m3HCWUFFN7a4JdMU1b60b-A/s200/avatar_komentator_t4belajarblogger.JPG" style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 91px; height: 91px;" /></a>Bagi teman2 blogger yang blognya tidak bisa menampilkan avatar/foto para komentatornya, maka bisa menggunakan trik ini. Seperti yang telah teman2 ketahui, bahwa tidak semua blog dapat menampilkan foto/avatar para komentatornya, kemungkinan besar hal itu terjadi dikarenakan kode templatenya tidak memilki kode berinisialkan "avatarIndentClass" (berikut teman2 akan mengetahuinya). Sebagai contohnya saja blog saya ini, sebelumnya avatar para komentatornya tidak muncul. Akan tetapi sekarang sudah saya edit beberapa kode yg berhubungan dengan data comment, akhirnya bisa muncul tuh avatar2nya(khusus yg komen dgn Akun google/blogger).<a name='more'></a><br /><br />Berikut tampilan sebelum pengeditan template<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsWOB3Ni_agjfdBLrf7S9TAFVrIVQQeZQTKfThrmqykD-GRX6w_66A6sOrpZjTr6LBRRw9IIp_YrCnc-7rvnx1qmA-H9mVlMe2knAAD3HDMuqKXQICFHD6svozoQLoTNaDH0xNB_aiN6Y/s1600-h/sebelum_edit_avatar_komentator_t4belajarblogger.JPG"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5420028958808100706" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsWOB3Ni_agjfdBLrf7S9TAFVrIVQQeZQTKfThrmqykD-GRX6w_66A6sOrpZjTr6LBRRw9IIp_YrCnc-7rvnx1qmA-H9mVlMe2knAAD3HDMuqKXQICFHD6svozoQLoTNaDH0xNB_aiN6Y/s320/sebelum_edit_avatar_komentator_t4belajarblogger.JPG" style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 284px;" /></a><br /><br />Setelah pengeditan jadinya seperti berikut ini<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK1EwqfUiqFKujV2dBGf2-8z-Ow3tFCBddpufGQ9fNZ8PzKrFtwYj9nc90OLoQoLDSWu-eiWY99_zxm3bkNFyHkFjVK64bNBdSHdGeZw9ws_oiZvCyLmKHbAtWD0mH7Gv99ENURahGBjg/s1600-h/setelah_edit_avatar_komentator_t4belajarblogger.JPG"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5420029701831204674" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK1EwqfUiqFKujV2dBGf2-8z-Ow3tFCBddpufGQ9fNZ8PzKrFtwYj9nc90OLoQoLDSWu-eiWY99_zxm3bkNFyHkFjVK64bNBdSHdGeZw9ws_oiZvCyLmKHbAtWD0mH7Gv99ENURahGBjg/s320/setelah_edit_avatar_komentator_t4belajarblogger.JPG" style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 258px;" /></a><br /><br />Bagi teman2 yang ingin memperaktekkannya, monggo diikuti langkah2 berikut<br /><br /><span style="color: rgb(255, 0, 0);font-size:130%;" ><span style="font-weight: bold;">1</span></span>. Login ke akun blogger >> Tata Letak >> Lalu Edit HTML (download template -untuk mencegah adanya kesalahan-) >> dan jangan lupa untuk mencentang kotak "expand widget templet"<br /><br /><span style="color: rgb(255, 0, 0);font-size:130%;" ><span style="font-weight: bold;">2</span></span>. Cek apakah kode berikut ada di dalam kode templatenya teman2?<br /><br /><p class="alert"><dl expr:class='data:post.avatarIndentClass' id='comments-block'></p><br /><br />Kalau memang ada dibiarkan saja, tapi kalau nggak ada silahkan untuk mencari kode berikut:<br /><br /><span style="color: rgb(255, 0, 0);"><dl id='comments-block'></span><br /><br />Ganti kode di atas dengan kode berikut (kode yg kita cek tadi, namun gak ada)<br /><br /><span style="color: rgb(102, 102, 0);"><dl expr:class='data:post.avatarIndentClass' id='comments-block'></span><br /><br /><br /><br /><span style="color: rgb(255, 0, 0);font-size:130%;" ><span style="font-weight: bold;">3</span></span>. Langkah selanjutnya yaitu cari kode <span style="color: rgb(102, 102, 0);"><a expr:name='data:comment.anchorName'/></span><br /><br />kalau sudah ketemu, ganti dengan kode berikut<br /><br /><p class="alert"><b:if cond='data:comment.favicon'><br /><img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/><br /></b:if><br /><a expr:name='data:comment.anchorName'/><br /><b:if cond='data:blog.enabledCommentProfileImages'><br /><div expr:class='data:comment.avatarContainerClass'><br /><data:comment.authorAvatarImage/><br /></div><br /></b:if></p><br /><br /><br />Simpan hasil kerjaan anda.<br /><br /><br /><span style="color: rgb(255, 0, 0);font-size:130%;" ><span style="font-weight: bold;">NB</span></span>:<br /><br />Kalau ternyata kode <span style="color: rgb(102, 102, 0);"><a expr:name='data:comment.anchorName'/></span> tidak ditemukan, maka teman bisa menyimpan kode<br /><br /><p class="alert"><b:if cond='data:comment.favicon'><br /><img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/><br /></b:if><br /><a expr:name='data:comment.anchorName'/><br /><b:if cond='data:blog.enabledCommentProfileImages'><br /><div expr:class='data:comment.avatarContainerClass'><br /><data:comment.authorAvatarImage/><br /></div><br /></b:if></p><br /><br />tepat di atas kode <span style="color: rgb(102, 102, 0);"><b:if cond='data:comment.authorUrl'></span><br /><br />dan jangan lupa simpan hasil kerjaan anda.<br /><br /><br />Gampangkan? Kalau memang ada masalah tanya saja gak usah malu2, toh kita lagi sama2 belajar<br /><br /><br /><span style="font-weight: bold; color: rgb(255, 0, 0);"><blink>Perhatian</blink></span>: Jika trik ini tidak berhasil teman2 lakukan, segera cek di halaman pengaturan >> Komentar >> Dan pastikan untuk memilih YA pada opsi "Tampilkan gambar profil dalam komentar?".<br /><br /><br />Semoga Bermanfaat []<br /><br /><span style="font-weight:bold;">Tags: cara menampilkan avatar komentator, menampilkan avatar di komentar, avatar komentar blogspot bisa muncul, agar avatar bisa tampil, bagaimana memunculkan foto komentator</span>

Menampilkan Avatar Para Komentator Postingan

Bagi teman2 blogger yang blognya tidak bisa menampilkan avatar/foto para komentatornya, maka bisa menggunakan trik ini. Seperti yang telah t...

+ Read more »

Memasang Fasilitas Parsing Code ke Dalam Blog Anda

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpp87xzpZRjh2D9M4_xI03L3IS0QQjg0YTtktfYhj8tE_YHVTsrJwWHltoiyPpG9bypzI6qE38c512vMX6s3lx33ZYYXT6BpdxuW3HwGvwuYp5aUFhHlXDNdzZo_Me0i2wT3OkILuIbnw/s1600-h/parsing_html_t4belajarblogger.JPG"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5419881046514901986" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpp87xzpZRjh2D9M4_xI03L3IS0QQjg0YTtktfYhj8tE_YHVTsrJwWHltoiyPpG9bypzI6qE38c512vMX6s3lx33ZYYXT6BpdxuW3HwGvwuYp5aUFhHlXDNdzZo_Me0i2wT3OkILuIbnw/s200/parsing_html_t4belajarblogger.JPG" style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 175px; height: 112px;" /></a>Sekedar info bagi para blogger. Bagi teman2 yang kerjaannya suka memparse alias mengkonver kode HTML, sekarang nggak perlu susah2 lagi pergi ke <a href="http://t4belajarblogger.blogspot.com/2009/12/kumpulan-situs-untuk-memparse-kode-html.html" target="_blank">websitenya orang lain</a>, ya itu masalahnya karena kita sekarang bisa menampilkan fasilitas pemarse/pengkonver kode HTML ke dalam blog kita masing2, bagaimana teman2 tertarikkah? Sebenarnya untuk menampilkan fasilitas ini ke dalam blog kita cukuplah mudah, karena pihak google sendiri sudah menyediakan fasilitas ini untuk para blogger.<a name='more'></a><br /><br />Contoh tampilan form parsing code<br /><br /><script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/102462998830435293579/post-Code.xml&up_grows=1000&up_conv1=1&up_conv2=1&up_conv3=1&up_conv4=1&up_conv5=1&synd=open&w=320&h=200&title=Post-Code%3A+code+converter&border=%23ffffff%7C0px%2C1px+solid+%23595959%7C0px%2C1px+solid+%23797979%7C0px%2C2px+solid+%23898989&output=js"></script><br /><br />Nah, seperti di atas itulah nanti tampilannya. Bagi teman2 yang ingin mencoba cara kerjanya, maka bisa diperaktekkan dengan menggunakan kode berikut ini (kopi-paste kode berikut ke dalam kolom parse ==> lalu klik convert)<br /><br /><span style="color: rgb(102, 102, 0);"><a href="http://t4belajarblogger.blogspot.com/">T4 Belajar Blogger</a></span><br /><br />Pasti nanti hasilnya jadi seperti berikut ini<br /><br /><span style="color: rgb(51, 51, 255);">&lt;a href=&quot;http://t4belajarblogger.blogspot.com/&quot;&gt;T4 Belajar Blogger&lt;/a&gt;</span><br /><br />Bagi teman2 yang tertarik untuk memasang fasilitas parsing kode di atas, teman2 bisa menggunakan kode berikut<br /><br /><p class="alert"><script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/102462998830435293579/post-Code.xml&amp;up_grows=1000&amp;up_conv1=1&amp;up_conv2=1&amp;up_conv3=1&amp;up_conv4=1&amp;up_conv5=1&amp;synd=open&amp;w=320&amp;h=200&amp;title=Post-Code%3A+code+converter&amp;border=%23ffffff%7C0px%2C1px+solid+%23595959%7C0px%2C1px+solid+%23797979%7C0px%2C2px+solid+%23898989&amp;output=js"></script></p><br /><br />Jika teman2 menggunakan kode di atas, maka nanti tampilannya akan seperti milik saya. bagi teman2 yang tidak begitu suka dengan warna tampilan bingkainya, maka bisa diatur sendiri, silahkan surfing langsung ke sumbernya di <a href="http://www.gmodules.com/ig/creator?synd=open&url=http%3A%2F%2Fhosting.gmodules.com%2Fig%2Fgadgets%2Ffile%2F102462998830435293579%2Fpost-Code.xml&lang=en" target="_blank">sini</a>.<br /><br /><br />Semoga Bermanfaat []<br /><br /><span style="font-weight:bold;">Tags: Memasang code converter ke dalam blog, bagaimana pasang code parser ke blogspot, memiliki tool code parser sendiri</span>

Memasang Fasilitas Parsing Code ke Dalam Blog Anda

Sekedar info bagi para blogger. Bagi teman2 yang kerjaannya suka memparse alias mengkonver kode HTML, sekarang nggak perlu susah2 lagi pergi...

+ Read more »

Ayu Oktasari Take Me Out Indonesia Nude Pictures

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9t3-nzpd2muWu2PBD95N5CMZk0EbVuWpEGVbBUL9pZpq05btevmP5vuu4lxQ3Pz0K4NWecCkqP1JMkLAV3RJuIqvuHXetT_kHG_l48sRFgANDQilRb3o4iftv5pK3Z7ROS-zvkfHqRrI/s1600-h/ayu+bugil.JPG"><img alt="Ayu Oktasari Take Me Out Indonesia Nude Pictures " border="0" id="BLOGGER_PHOTO_ID_5419733037912541090" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9t3-nzpd2muWu2PBD95N5CMZk0EbVuWpEGVbBUL9pZpq05btevmP5vuu4lxQ3Pz0K4NWecCkqP1JMkLAV3RJuIqvuHXetT_kHG_l48sRFgANDQilRb3o4iftv5pK3Z7ROS-zvkfHqRrI/s400/ayu+bugil.JPG" style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 272px; height: 400px;" /></a><br />Ayu Oktasari & Yunus aka Egy wins Take Me Out Indonesia Season I and reported will get married soon on June 2010. And how does Egy feel when find out the reality that his future wife, the mother of his future daughter and son is a nude model? I hope it is not make him switch decision. It was her past life, I think...<br /><br />There are 14 pictures. Sorry guys, I only uploaded one picture and should censored it.

Ayu Oktasari Take Me Out Indonesia Nude Pictures

Ayu Oktasari & Yunus aka Egy wins Take Me Out Indonesia Season I and reported will get married soon on June 2010. And how does Egy feel ...

+ Read more »

Install an Icon on Our Corner Blog

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEG3lQd4HqzD8WwKZbdm_LHHu0omJUmyE9y1jGfOwaW3MFcuj8HqzX6oSUbTkVc8FbNVporWmWb_pKNsBUuNfFxGi6vNP8xs3vF_wHBOw-uFtOI0qlvEiNB4D1X5TsYqbCIR8rEihumOg/s1600-h/good_luck_t4belajarblogger.JPG"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5419689752928416018" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEG3lQd4HqzD8WwKZbdm_LHHu0omJUmyE9y1jGfOwaW3MFcuj8HqzX6oSUbTkVc8FbNVporWmWb_pKNsBUuNfFxGi6vNP8xs3vF_wHBOw-uFtOI0qlvEiNB4D1X5TsYqbCIR8rEihumOg/s200/good_luck_t4belajarblogger.JPG" style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 36px; height: 38px;" /></a>Hi bro, i want to talk about "how to install an icon on our corner blog side". You can see about the icon on my blog tooo, look at right bottom of this blog, yes you r right, you will see a cute icon with word GoOd LucK. to make it in our blog is very2 easy, we just need for simple steps<a name='more'></a><br /><br />Login to your blogger account, n than choose layout option, Click edit HTML<br /><br />Find tag <span style="color: rgb(102, 102, 0);">]]></b:skin></span> n than replace it with following code<br /><br /><p class="alert">#corner {<br />position:fixed;_position:absolute;bottom:0px; left:0px;<br />clip:inherit;<br />_top:expression(document.documentElement.scrollTop+<br />document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }<br />]]></b:skin></p><br /><br /><br />The last step, place following code before tag <span style="color: rgb(102, 102, 0);"></body></span><br /><br /><p class="alert"><div id="corner"><br /><a href="http://t4belajarblogger.blogspot.com"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbAwFoeV87UYXPKo_UILRBFa7uUnbNYTzGES_7fw4QfT8dn81q0FuE5Yst9t1kzgO1yLm6OErSGRa0X0zYuw4fKbLYx5pmTJCW-cK_lTWY3KK4t_wYYKkzT2PYjcWjqfWZLnUE3hmz-K9c/" border="0" /></a><br /></div></p><br /><br /><br />So, dont forgt to save your work. Preview your blog now...how easy?<br /><br />You can to set or customize it, look at the code before tag <span style="color: rgb(102, 102, 0);">]]></b:skin></span>, right...you can replace "bottom" with "top", or "left" with "right"<br /><br />So with the code before tag <span style="color: rgb(102, 102, 0);"></body></span>, you can replace it with any/other widget you want, look at following code:<br /><br /><div id="corner"><br /><span style="color: rgb(255, 0, 0);"><a href="http://t4belajarblogger.blogspot.com"></span><br /><span style="color: rgb(255, 0, 0);"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbAwFoeV87UYXPKo_UILRBFa7uUnbNYTzGES_7fw4QfT8dn81q0FuE5Yst9t1kzgO1yLm6OErSGRa0X0zYuw4fKbLYx5pmTJCW-cK_lTWY3KK4t_wYYKkzT2PYjcWjqfWZLnUE3hmz-K9c/" border="0" /></a></span><br /></div><br /><br />You just need for replace red code, ok friend GoOd LuCK! Any question...dont shame to contact/ask me..<br /><br /><br />hopefully helpful_<br /><br /><span style="font-weight:bold;">Tags: install an icon, corner blog trick, trick to appear an icon on corner, install corner icon with CSS</span>

Install an Icon on Our Corner Blog

Hi bro, i want to talk about "how to install an icon on our corner blog side". You can see about the icon on my blog tooo, look at...

+ Read more »

Membuat Tulisan yang Mengikuti Cursor

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9EQ_UF5EudZ929aVL4lTxZpPGwkQWL9Nr2_DdRPHQX9kOMWsTLJfoeCjB2uU4c2IDNSqO3e8f-_9o0MEGwcPq5gcEmMIGYpCklvVCZrNQK_0eOz9CxJ2W3JnFFfpcEvvVnCNBj17bKtk/s1600-h/cursor_n_text_t4belajarblogger.JPG"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5419678810108693970" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9EQ_UF5EudZ929aVL4lTxZpPGwkQWL9Nr2_DdRPHQX9kOMWsTLJfoeCjB2uU4c2IDNSqO3e8f-_9o0MEGwcPq5gcEmMIGYpCklvVCZrNQK_0eOz9CxJ2W3JnFFfpcEvvVnCNBj17bKtk/s200/cursor_n_text_t4belajarblogger.JPG" style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 21px; height: 36px;" /></a>Mungkin teman2 pernah berkunjung ke suatu blog lalu tiba2 cursornya teman2 diikuti oleh suatu teks. Nah, untuk membuat yang seperti itu sebenarnya gampang sekali, karena kita hanya membutuhkan kode HTML khusus membuat efek tulisan yang mengikuti cursor. Kode HTML yang saya maksud adalah kode berikut ini:<a name='more'></a><br /><br /><p class="alert"><script><br />//mouse<br />//Circling text trail- Tim Tilton<br />//Website: http://www.tempermedia.com/<br />//Visit http://www.dynamicdrive.com for this script and more<br />function cursor_text_circle(){<br />// your message here<br />var msg='<span style="color: rgb(51, 51, 255);">T4 Belajar Blogger</span>'.split('').reverse().join('');<br /><br />var font='Verdana,Arial';<br />var size=<span style="color: rgb(0, 153, 0);">5</span>; // up to seven<br />var color='<span style="color: rgb(255, 102, 0);">#FF9900</span>';<br /><br />// This is not the rotation speed, its the reaction speed, keep low!<br />// Set this to 1 for just plain rotation w/out drag<br />var speed=.3;<br /><br />// This is the rotation speed, set it negative if you want<br />// it to spin clockwise<br />var rotation=-.2;<br /><br />// Alter no variables past here!, unless you are good<br />//---------------------------------------------------<br /><br /><br />var ns=(document.layers);<br />var ie=(document.all);<br />var dom=document.getElementById;<br />msg=msg.split('');<br />var n=msg.length;<br />var a=size*13;<br />var currStep=0;<br />var ymouse=0;<br />var xmouse=0;<br />var props="<font face="+font+" size="+size+" color="+color+">";<br /><br />if (ie)<br />window.pageYOffset=0<br /><br />// writes the message<br />if (ns){<br />for (i=0; i < n; i++)<br />document.write('<layer name="nsmsg'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+msg[i]+'</font></center></layer>');<br />}<br />else if (ie||dom){<br />document.write('<div id="outer" style="position:absolute;top:0px;left:0px;z-index:30000;"><div style="position:relative">');<br />for (i=0; i < n; i++)<br />document.write('<div id="iemsg'+(dom&&!ie? i:'')+'" style="position:absolute;top:0px;left:0;height:'+a+'px;width:'+a+'px;text-align:center;font-weight:normal;cursor:default">'+props+msg[i]+'</font></div>');<br />document.write('</div></div>');<br />}<br />(ns)?window.captureEvents(Event.MOUSEMOVE):0;<br /><br />function Mouse(evnt){<br />ymouse = (ns||(dom&&!ie))?evnt.pageY+20-(window.pageYOffset):event.y; // y-position<br />xmouse = (ns||(dom&&!ie))?evnt.pageX+20:event.x-20; // x-position<br />}<br /><br />if (ns||ie||dom)<br />(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;<br />var y=new Array();<br />var x=new Array();<br />var Y=new Array();<br />var X=new Array();<br />for (i=0; i < n; i++){<br />y[i]=0;<br />x[i]=0;<br />Y[i]=0;<br />X[i]=0;<br />}<br /><br />var iecompattest=function(){<br />return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;<br />}<br /><br />var makecircle=function(){ // rotation properties<br />if (ie) outer.style.top=iecompattest().scrollTop+'px';<br />currStep-=rotation;<br />for (i=0; i < n; i++){ // makes the circle<br />var d=(ns)?document.layers['nsmsg'+i]:ie? iemsg[i].style:document.getElementById('iemsg'+i).style;<br />d.top=y[i]+a*Math.sin((currStep+i*1)/3.8)+window.pageYOffset-15+(ie||dom? 'px' : '');<br />d.left=x[i]+a*Math.cos((currStep+i*1)/3.8)*2+(ie||dom? 'px' : ''); // remove *2 for just a plain circle, not oval<br />}<br />}<br /><br />var drag=function(){ // makes the resistance<br />y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);<br />x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);<br />for (var i=1; i < n; i++){<br />y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);<br />x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);<br /><br />}<br />makecircle();<br />// not rotation speed, leave at zero<br />setTimeout(function(){drag();},10);<br />}<br />if (ns||ie||dom)<br />if ( typeof window.addEventListener != "undefined" )<br />window.addEventListener( "load", drag, false );<br />else if ( typeof window.attachEvent != "undefined" )<br />window.attachEvent( "onload", drag );<br />else {<br />if ( window.onload != null ) {<br />var oldOnload = window.onload;<br />window.onload = function ( e ) {<br />oldOnload( e );<br />drag();<br />};<br />}<br />else<br />window.onload = drag;<br />}<br /><br />}<br />cursor_text_circle();<br /><br /></script></p><br /><br /><br />Nah, kopi-paste kode di atas ke gadget HTML-nya teman2 lalu jangan lupa disimpan. Beberapa bagian yang bisa teman2 ganti yaitu yang berwarna <span style="color: rgb(51, 51, 255);">biru</span> (bisa diganti dengan tulisan apa pun), <span style="color: rgb(0, 153, 0);">hijau</span> (ukuran font), dan <span style="color: rgb(255, 102, 0);">orange</span> (yaitu warna tulisan/font, untuk kode warna bisa dilihat2 di: <a href="http://t4belajarblogger.blogspot.com/2009/11/kumpulan-kode-warna.html" target="_blank">sini</a>)<br /><br /><br /><br /><br />Semoga Bermanfaat []<br /><br />Thanks mas <a href="http://pinginbelajar.blogspot.com/2009/03/membuat-cursor-selalu-diikuti-oleh-text.html" target="_blank">Uda</a>, yang sudah membagi2 ilmunya.<br /><br /><span style="font-weight:bold;">Tags: Agar tulisan mengikuti cursor, trik cursor diikuti oleh tulisan, kode HTML membuat tulisan ikut cursor, script membuat teks ikut cursor</span>

Membuat Tulisan yang Mengikuti Cursor

Mungkin teman2 pernah berkunjung ke suatu blog lalu tiba2 cursornya teman2 diikuti oleh suatu teks. Nah, untuk membuat yang seperti itu sebe...

+ Read more »

Memasang Snap Shots ke Dalam Blog

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeUiLo2BJLvIyD3IE_sdgBIUouUs6k31wLdrNQwivyjeWYqOb_FlaOKvIVbJcz_gI4WfEwBP6j2LqcRQVn__wiaGD73D3L15I4J_TbE85e28wrbqhVB99gTZFaHv_-CyX4W2Ity6Mr-tU/s1600-h/snap_shots_t4belajarblogger.JPG"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5419673360072290466" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeUiLo2BJLvIyD3IE_sdgBIUouUs6k31wLdrNQwivyjeWYqOb_FlaOKvIVbJcz_gI4WfEwBP6j2LqcRQVn__wiaGD73D3L15I4J_TbE85e28wrbqhVB99gTZFaHv_-CyX4W2Ity6Mr-tU/s200/snap_shots_t4belajarblogger.JPG" style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 115px; height: 44px;" /></a>Bagi teman2 yang ingin menampilkan blognya lebih ekspresif dengan tampilan/thumbnails setiap link yang berada di dalam blognya, maka tak ada salahnya untuk mencoba service yang satu ini, snap shots. Untuk membuat snap shot sangat lah gampang, karena kita tinggal menggunakan layanan gratis yang telah disediakan oleh <a href="https://account.snap.com/signup.php" target="_blank">Snap Shots</a>.<br /><br />Berikut contoh tampilannya:<a name='more'></a><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUIP9SXVQRjuidr8t3oNdKxaf_ZRsJfRfZbW440cKAjo9BdtUnZ-Io9mi7vrPuLRDRER2E1UT5E4_TGp_9GGYQOSCZxswsPZ-YHNXRorH-gKvp2t_7LPbDII8iUXmjeHOcNeLAFb3qLmU/s1600-h/iqbal_in_snap_shot_t4belajarblogger.JPG"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5419673603613373442" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUIP9SXVQRjuidr8t3oNdKxaf_ZRsJfRfZbW440cKAjo9BdtUnZ-Io9mi7vrPuLRDRER2E1UT5E4_TGp_9GGYQOSCZxswsPZ-YHNXRorH-gKvp2t_7LPbDII8iUXmjeHOcNeLAFb3qLmU/s400/iqbal_in_snap_shot_t4belajarblogger.JPG" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 305px; height: 400px;" /></a><br /><br /><br />Nah, bagaimana teman2 tertarikkah? Seperti yang telah kita ketahui bahwa ketika seseorang (kita atau para pengunjung) menyorot suatu link yang berada di dalam blog kita, maka secara otomatis akan muncul thumbnails/screen shot dari halaman tujuan link tersebut. Untuk mempersingkat waktu, bagi teman2 yang benar2 tertarik untuk mencoba fitur gratis yang satu ini, maka bisa lngsung untuk mengunjungi situs asli Snap shots di <a href="https://account.snap.com/signup.php" target="_blank">sini</a>. Nanti teman2 tinggal mengisi beberapa data seperti URL blog, email, banner, lalu nanti teman2 bisa langsung memasang gadget-nya langsung melalui sistem install/pasang yang telah disediakan oleh snap shots (kalau teman2 ingin memasang secara manual juga bisa). Youpz selamat mencoba...<br /><br />Semoga Bermanfaat []<br /><br /><span style="font-weight:bold;">Tags: memasang snap shots untuk blogger, cara mudah pasang snap shots, bagaimana memasang snap shots blogger, agar blog blogger memiliki snap shots</span>

Memasang Snap Shots ke Dalam Blog

Bagi teman2 yang ingin menampilkan blognya lebih ekspresif dengan tampilan/thumbnails setiap link yang berada di dalam blognya, maka tak ada...

+ Read more »

CSSكيفية كتابة العربية ب

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinCAq_FGiBaWUHX9M5jNWQyq4ahuXJt3oRQ4CjejjLKT2YaysnDrIf2u504XuhmHueS9wk4a54uhDsY4etteybFXSXxNVym0frcV5VxgehC4IXoJODQ45Ofpgj7HpzKsK2iH4oVUcJjpI/s1600-h/alarabiyah_css_t4belajarblogger.JPG"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5419536250487157522" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinCAq_FGiBaWUHX9M5jNWQyq4ahuXJt3oRQ4CjejjLKT2YaysnDrIf2u504XuhmHueS9wk4a54uhDsY4etteybFXSXxNVym0frcV5VxgehC4IXoJODQ45Ofpgj7HpzKsK2iH4oVUcJjpI/s200/alarabiyah_css_t4belajarblogger.JPG" style="margin: 0pt 0pt 10px 10px; float: right; cursor: pointer; width: 168px; height: 200px;" /></a><div style="text-align: right;" class="arabic">قد يكون صاحب المدونة, يريد كتابة العربية في مدونته. و لكن فيها المشكلة أي المشكلة في مظهر كتابته. طيب, إذا كنت صاحب المدونة المقصود حي نزيل هذه مشكلاتنا جماعة و ستكون سهولة في كتابتنا إن شاء الله<br /></div><br /><p style="text-align: right;">CSS<span class="arabic">و كيفية كتابة العربية ب</span></p><div style="text-align: right;"><br /></div><p style="text-align: right;" class="arabic">أي كما يلى</p><br /><a name='more'></a><br /><br /><p style="text-align: right;"><a href="http://blogger.com/" target="_blank">Blogger.com</a><span class="arabic">إذهب إلى</span></p><br /><br /><p style="text-align: right;">:LAYOUT<span class="arabic">ثم اختر التخطيط أو</span></p><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQxHnCNubbcj5AZIkJ-elZ8074FJANCvuSudwQzuAKsoEWu_rPyyqyu5mLRurryZL0EfF6DvfqEpPuovleBAqUGsmub4YAG7O-zn_27EkitHjOusHczRAVSTpn_KuvPOPc1hYTXHgfqGM/s1600-h/alarabiyah_kitabah_bee_css01_t4belajarblogger.JPG"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5419522171289565074" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQxHnCNubbcj5AZIkJ-elZ8074FJANCvuSudwQzuAKsoEWu_rPyyqyu5mLRurryZL0EfF6DvfqEpPuovleBAqUGsmub4YAG7O-zn_27EkitHjOusHczRAVSTpn_KuvPOPc1hYTXHgfqGM/s200/alarabiyah_kitabah_bee_css01_t4belajarblogger.JPG" style="margin: 0pt 0pt 10px 10px; float: right; cursor: pointer; width: 200px; height: 26px;" /></a><br /><br /><br /><p style="text-align: right;">:HTML<span class="arabic">ثم اختر تحرير</span></p><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhccfhN67Ah9SgXrE_g8Tia3Ogwmo9EU6ivnuv-EP-GCvoq3LBwOOK5RDVGK05pyvWIUxidtkh-_uKqz45cPzwWxbo9_Bb-WL6PackN7G4s4gh5Ho6MNiQuvIMwI372yBImx0pAtgSki7Y/s1600-h/alarabiyah_kitabah_bee_css02_t4belajarblogger.JPG"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5419522797278283346" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhccfhN67Ah9SgXrE_g8Tia3Ogwmo9EU6ivnuv-EP-GCvoq3LBwOOK5RDVGK05pyvWIUxidtkh-_uKqz45cPzwWxbo9_Bb-WL6PackN7G4s4gh5Ho6MNiQuvIMwI372yBImx0pAtgSki7Y/s200/alarabiyah_kitabah_bee_css02_t4belajarblogger.JPG" style="margin: 0pt 0pt 10px 10px; float: right; cursor: pointer; width: 200px; height: 29px;" /></a><br /><br /><br /><p style="text-align: right;"><span style="color: rgb(102, 102, 0);">]]></b:skin></span><span class="arabic">ضع الرمز يلى قبل أو فوق رمز </span></p><br /><br /><p class="alert">.arabic {font-family: Traditional Arabic;font-size: 18px;direction:rtl;line-height: 200% ;font-weight: bold;}</p><br /><br /><p style="text-align: right;">!<span class="arabic">ثم حفظ قالبك</span></p><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFjTZwXf7orlPt75Oa9hqkiUR1VEi5qlOPy2bS0pkh3eBICfiFOjkNBLYUphkhnT2Lg_v-q2GuxUL_L5VLHxigwZtNXXTtxoYJ5tj7Gmwqvdk7lYxzsMqQigfFka_LQBRjzRmnuWblNx8/s1600-h/alarabiyah_kitabah_bee_css03_t4belajarblogger.JPG"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5419535304781698722" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFjTZwXf7orlPt75Oa9hqkiUR1VEi5qlOPy2bS0pkh3eBICfiFOjkNBLYUphkhnT2Lg_v-q2GuxUL_L5VLHxigwZtNXXTtxoYJ5tj7Gmwqvdk7lYxzsMqQigfFka_LQBRjzRmnuWblNx8/s200/alarabiyah_kitabah_bee_css03_t4belajarblogger.JPG" style="margin: 0pt 0pt 10px 10px; float: right; cursor: pointer; width: 77px; height: 31px;" /></a><br /><br /><br /><p style="text-align: right;">:<span class="arabic">إذا تريد أن تكتب رسالة جديدة, واجب لك أن تستعمل الرمز يلى</span></p><br /><br /><p style="text-align: right;">"div"<span class="arabic">ب</span></p><br /><p style="text-align: right;">:<span class="arabic">الرمز</span></p><br /><p class="alert"><div class="arabic">بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم</div></p><br /><p style="text-align: right;">:<span class="arabic">النتيجة</span></p><br /><div class="arabic">بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم</div><br /><br /><p style="text-align: right;">"p"<span class="arabic">ب</span></p><br /><p style="text-align: right;">:<span class="arabic">الرمز</span></p><br /><p class="alert"><p class="arabic">بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم</p></p><br /><p style="text-align: right;">:<span class="arabic">النتيجة</span></p><br /><p class="arabic">بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم</p><br /><br /><p style="text-align: right;">"span"<span class="arabic">ب</span></p><br /><p style="text-align: right;">:<span class="arabic">الرمز</span></p><br /><p class="alert"><span class="arabic">بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم</span></p><br /><p style="text-align: right;">:<span class="arabic">النتيجة</span></p><br /><span class="arabic">بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم</span><br /><br /><p style="text-align: right;">و الكتابة الاتينية "span"<span class="arabic">ب</span></p><br /><p style="text-align: right;">:<span class="arabic">الرمز</span></p><br /><p class="alert"><p>Latin Text<span class="arabic">بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم</span></p></p><br /><p style="text-align: right;">:<span class="arabic">النتيجة</span></p><br /><p>Latin Text<span class="arabic">بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم</span></p><br /><br /><br /><p style="text-align: right;" class="arabic">كما رأيت في الأمثلة السابقة قد وجدنا الرموز النوعية, و لكن فيها النتائج بوجه واحد. ولذالك اختر اي رمز تريد.</p><br /><br /><br /><p style="text-align: right;" class="arabic">مع النجاح</p><br /><br /><br /><br /><br /><br /><p style="text-align: left;"><span class="arabic"><a href="http://www.abu-farhan.com/2009/07/cara-menampilkan-tulisan-arab-dengan-css/" target="_blank">أبو فرحان</a> :</span><span class="arabic">مصدر</span></p>

CSSكيفية كتابة العربية ب

قد يكون صاحب المدونة, يريد كتابة العربية في مدونته. و لكن فيها المشكلة أي المشكلة في مظهر كتابته. طيب, إذا كنت صاحب المدونة المقصود حي نزيل ...

+ Read more »

How to Create Bubble Tooltips with CSS?

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYUVwQc_jluVuRlNUAa9qQBEMPhQD2wl_FZ8pZemmASV2Wes35kTq3CfNzEvorVMSePkLit1VuIXQEIlE_EefgIeD59qZypY3h7daaQ3YEHI3jVDN_v5O0WoZ1XeoiUiLQm8L2vInM_LA/s1600-h/bubble_tooltips_t4belajarblogger.JPG"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5419491545240777506" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYUVwQc_jluVuRlNUAa9qQBEMPhQD2wl_FZ8pZemmASV2Wes35kTq3CfNzEvorVMSePkLit1VuIXQEIlE_EefgIeD59qZypY3h7daaQ3YEHI3jVDN_v5O0WoZ1XeoiUiLQm8L2vInM_LA/s200/bubble_tooltips_t4belajarblogger.JPG" style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 200px; height: 121px;" /></a>Avoid cross-browser javascript when you can use css to make tooltips with less code. Honestly you were going to use css to style your tooltips anyway right? Your probably already have most of this code in your css already too. Besides that if you have an advanced site in the first place you probably have enought javascript already.<br /><br />Also with the IE hack for the :hover state, you can do this with elements besides anchors.<br /><br />If you dont like how it allows you to hover over the tooltip also then you can adjust the padding and top to separate the tool tip from the link.<a name='more'></a><br /><br /><blink><a href="http://trentrichardson.com/examples/csstooltips/" target="_blank">View Demo here!!!</a></blink><br /><br /><br />To create it we just need for the simple steps<br /><br />Login to your blogger account >> n than choose layout option >> click Edit HTML n don't forget to download template complete (don't be lazy, OK)<br /><br />So, replace tag <span style="color: rgb(102, 102, 0);">]]></b:skin></span> with following code<br /><br /><p class="alert">/*---------- bubble tooltip -----------*/<br />a.tt{<br /> position:relative;<br /> z-index:24;<br /> color:#3CA3FF;<br /> font-weight:bold;<br /> text-decoration:none;<br />}<br />a.tt span{ display: none; }<br /><br />/*background:; ie hack, something must be changed in a for ie to execute it*/<br />a.tt:hover{ z-index:25; color: #aaaaff; background:;}<br />a.tt:hover span.tooltip{<br /> display:block;<br /> position:absolute;<br /> top:0px; left:0;<br /> padding: 15px 0 0 0;<br /> width:200px;<br /> color: #993300;<br /> text-align: center;<br /> filter: alpha(opacity:90);<br /> KHTMLOpacity: 0.90;<br /> MozOpacity: 0.90;<br /> opacity: 0.90;<br />}<br />a.tt:hover span.top{<br /> display: block;<br /> padding: 30px 8px 0;<br />background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU0VM0el-zJya54VRzI84tCVi1-786ITlUtEImGR6JaaWr3FewE0BqnBr12f7_Y9wU8K2D3sCB69jlPX6ZXvdjicBM-1-9G9p2X68rjkGB3OkkTjICmK5qbz-AVGgSoNUhKVEirRwbXlw/) no-repeat top;<br />}<br />a.tt:hover span.middle{ /* different middle bg for stretch */<br /> display: block;<br /> padding: 0 8px;<br />background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPV44w8PXzzFY_1vZggU87toccFMKb-3bFzBZAwYEOQiRRYnMK470IV-HTjohN0cIXhTNldPI9P8nyVnXO0OyfKvrvGh1hh-ntz0fcT-p39wh2IYYhxz6rSLpAsyl4wUTYVFoQMXePdgg/) repeat bottom;<br />}<br />a.tt:hover span.bottom{<br /> display: block;<br /> padding:3px 8px 10px;<br /> color: #548912;<br />background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU0VM0el-zJya54VRzI84tCVi1-786ITlUtEImGR6JaaWr3FewE0BqnBr12f7_Y9wU8K2D3sCB69jlPX6ZXvdjicBM-1-9G9p2X68rjkGB3OkkTjICmK5qbz-AVGgSoNUhKVEirRwbXlw/) no-repeat bottom;<br />}<br />]]></b:skin></p><br /><br /><br />N than save your template<br /><br />The last step, when you want to post a new entri you must use the folowing code<br /><br /><p class="alert"><a href="<span style="color: rgb(51, 51, 255);">URL Link here!!!</span>" class="tt"><span style="color: rgb(0, 153, 0);">Link Text</span><span class="tooltip"><span class="top"></span><span class="middle"><span style="color: rgb(255, 0, 0);">ToolTips Message</span></span><span class="bottom"></span></span></a></p><br /><br /><br />Make it easy, n goOd LuCk for you....if you hv any question you can contact me<br /><br /><br /><br /><br /><br /><br />Trick Source: <a href="http://trentrichardson.com/2006/12/02/css-bubble-tooltips/" target="_blank">Trentrichardson.com</a><br /><br />Tutorial Style inspired by: <a href="http://kolom-tutorial.blogspot.com/2009/12/css-bubble-tooltips.html" target="_blank">Kang Rohman style</a><br /><br /><span style="font-weight:bold;">Tags: how to create bubble tooltips, making bubble tooltips, bubble tooltips with CSS, simple step to create bubble tooltips</span>

How to Create Bubble Tooltips with CSS?

Avoid cross-browser javascript when you can use css to make tooltips with less code. Honestly you were going to use css to style your toolti...

+ Read more »

Trik Menyembunyikan Link yang Berada di Balik Banner

Trik ini berguna bagi teman2 yang ingin link di balik banner iklannya tidak muncul ketika para pengunjung menyorotnya, mungkin untuk menghindari pikiran para pengunjung seperti "wah situs ini lagi...bosan ah", oleh karena itu...trik ini dianjurkan bagi teman2 yang bergelut dalam dunia bisnis online (terutama ketika menggunakan banner afiliasi). Tapi sebelum teman2 memperaktekkan trik ini, berjanjilah untuk tidak menyelipkan link yang gak seronoh OK...<a name='more'></a><br /><br />Sebagai gambaran singkat, teman2 bisa membandingkan kedua banner berikut ini (disorot yaaa...)<br /><br />Banner 1<br /><br /><div style="text-align: center;"><a target="_blank" href="http://t4belajarblogger.blogspot.com/"><img alt="t4belajarblogger.blogspot.com" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbAwFoeV87UYXPKo_UILRBFa7uUnbNYTzGES_7fw4QfT8dn81q0FuE5Yst9t1kzgO1yLm6OErSGRa0X0zYuw4fKbLYx5pmTJCW-cK_lTWY3KK4t_wYYKkzT2PYjcWjqfWZLnUE3hmz-K9c/" /></a></div><br /><br />Banner 2<br /><br /><div style="text-align: center;"><a onclick="window.open('http://t4belajarblogger.blogspot.com/'); return false;" target="_blank" style="cursor: pointer;"><img alt="t4belajarblogger.blogspot.com" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbAwFoeV87UYXPKo_UILRBFa7uUnbNYTzGES_7fw4QfT8dn81q0FuE5Yst9t1kzgO1yLm6OErSGRa0X0zYuw4fKbLYx5pmTJCW-cK_lTWY3KK4t_wYYKkzT2PYjcWjqfWZLnUE3hmz-K9c/" style="cursor: pointer;" /></a></div><br /><br /><br />Seperti perbedaan yang telah teman2 dapatkan, pada banner 1 ketika disorot maka link tujuan banner tersebut akan kelihatan (lihat: di bagian kiri bawah browser ==> <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo0dFQFDFbYAroBZEzIlOYLHkqsaatruPrmDv8FYjDJkkaRIQIsEcUjRG0hc_Igvx0Z1B7aBGpg1c5-nD55AODKjYH9v-yglqsJEyGniYEuIBZykNUzVwqNeFYip66ZKwIZrB_fms7aY0/s1600-h/menyembunyikan_link_t4belajarblogger.JPG"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5419483244478614418" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo0dFQFDFbYAroBZEzIlOYLHkqsaatruPrmDv8FYjDJkkaRIQIsEcUjRG0hc_Igvx0Z1B7aBGpg1c5-nD55AODKjYH9v-yglqsJEyGniYEuIBZykNUzVwqNeFYip66ZKwIZrB_fms7aY0/s200/menyembunyikan_link_t4belajarblogger.JPG" style="cursor: pointer; width: 193px; height: 27px;" /></a>). Akan tetapi lain halnya dengan banner 2, walau teman2 sorot tuh banner gak bakalan kelihatan link tujuannya. Oleh karena itu, inilah yang membuat para pengunjung menjadi penasaran...untuk menjawab rasa penasaran yang ia alami, mau gak mau dia (kemungkinan besar) akan mengkliknya...hehehe kena' deh...<img alt="kenadeh" src="http://img162.imageshack.us/img162/6028/pinginbelajar3.gif" style="width: 42px; height: 27px;" /><br /><br />Nah, bagi teman2 yang tertarik untuk membuat banner semacam itu, maka bisa diterapkan melalui kode berikut<br /><br /><p class="alert"><a onclick="window.open('<span style="color: rgb(51, 51, 255);">http://t4belajarblogger.blogspot.com/</span>'); return false;" target="_blank" style="cursor: pointer;"><img src="<span style="color: rgb(0, 153, 0);">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbAwFoeV87UYXPKo_UILRBFa7uUnbNYTzGES_7fw4QfT8dn81q0FuE5Yst9t1kzgO1yLm6OErSGRa0X0zYuw4fKbLYx5pmTJCW-cK_lTWY3KK4t_wYYKkzT2PYjcWjqfWZLnUE3hmz-K9c/</span>" alt="t4belajarblogger.blogspot.com" border="0" style="cursor: pointer;"/></a></p><br /><br />Sudah itu letakkan di mana saja yg teman2 inginkan (saran:sidebar). Cara meletakkan kode tersebut seperti biasa: Login ke blogger, tata letak, lalu pilih tambah gadget HTML.<br /><br />Silahkan disesuaikan dengan link tujuan serta link banner-nya teman2 -perhatikan pada bagian yang telah ditandai dengan warna <span style="color: rgb(51, 51, 255);">biru</span> (link tujuan) dan <span style="color: rgb(0, 153, 0);">hijau</span> (link gambar/banner)-<br /><br /><br />Semoga Bermanfaat []<br /><br /><span style="font-weight:bold;">Tags: cara menyembunyikan link, link di balik gambar tidak muncul, agar link tidak ketahuan, trik meningkatkan iklan afiliasi, kode HTML menyembunyikan link, menyembunyikan link dengan script</span>

Trik Menyembunyikan Link yang Berada di Balik Banner

Trik ini berguna bagi teman2 yang ingin link di balik banner iklannya tidak muncul ketika para pengunjung menyorotnya, mungkin untuk menghin...

+ Read more »

Ayu Azhari Ran For Vice-Regent of Sukabumi

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxhyUo1gaD9Vn4BjcRjvCeWwF73KrbI9u6FCm7zJcxuEtZvxkUuzvYf9EBp6S6X6tAVURzneb3W1hdlwiEOsCEmJawsqSuVbWOhYdbucqUdmUbqZOsRmFCC3Hm5RWgQAeMQGa3S17ocG0/s1600-h/ayu_azhari_21.jpg"><img alt="Ayu Azhari Ran For Vice-Regent of Sukabumi" border="0" id="BLOGGER_PHOTO_ID_5419411009166250434" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxhyUo1gaD9Vn4BjcRjvCeWwF73KrbI9u6FCm7zJcxuEtZvxkUuzvYf9EBp6S6X6tAVURzneb3W1hdlwiEOsCEmJawsqSuVbWOhYdbucqUdmUbqZOsRmFCC3Hm5RWgQAeMQGa3S17ocG0/s400/ayu_azhari_21.jpg" style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 265px;" /></a><br />This is seriously right! It is not just a HOAX. Ayu Azhari ran for Vice-Regent of Sukabumi. So... if Ayu Azhari win...then people of Sukabumi will get their sexy <span style="font-style: italic;">wakil bupati</span>. And will join another celebrities who now rule as a regional leader! And (maybe) as she win her siblings like <a href="http://blogartis.blogspot.com/2008/12/foto-telanjang-sarah-azhari-rahma.html">Sarah and Rahma Azhari</a> will open their business in Sukabumi. OMG! My country is getting more and more crazy!!! Forgive us Lord!!!!

Ayu Azhari Ran For Vice-Regent of Sukabumi

This is seriously right! It is not just a HOAX. Ayu Azhari ran for Vice-Regent of Sukabumi. So... if Ayu Azhari win...then people of Sukabum...

+ Read more »

Menampilkan Top Komentator ke dalam Blog

Jika teman-teman ingin mengetahui secara langsung siapa yang paling banyak berkomentar ke blognya teman2 maka teman2 bisa menggunakan cara yang ingin kita bahas kali ini, yaitu cara "menampilkan top komentator". Fitur top komentator ini bisa kita tampilkan di bagian mana saja yang kita inginkan ke dalam blog kita, namun biasanya para blogger menampilkannya pada bagian sidebar blog.<a name='more'></a><br /><br />Preview<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBpXnM2vTjy6wD0YDN49mgbSUp30y8721TGnvP-gOKAqims-SkRzwjTS0DUzTQiFBH6Si7VtQLOHMbpunthHGbPCo_hKZ36AbgakvEjTHE0fzVvT3cU92ViXBTIAqX5nnMf33JaTjzkUU/s1600-h/top_komentator_t4belajarblogger.JPG"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5418784646710440162" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBpXnM2vTjy6wD0YDN49mgbSUp30y8721TGnvP-gOKAqims-SkRzwjTS0DUzTQiFBH6Si7VtQLOHMbpunthHGbPCo_hKZ36AbgakvEjTHE0fzVvT3cU92ViXBTIAqX5nnMf33JaTjzkUU/s400/top_komentator_t4belajarblogger.JPG" style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 172px; height: 163px;" /></a><br /><br />Untuk membuatnya sangat mudah, teman2 hanya membutuhkan kode HTML berikut yang kemuadian harus di taruh ke dalam gadget HTMLnya teman2<br /><br /><p class="alert"><script type="text/javascript"><br />function pipeCallback(obj) {<br />document.write("<ul>");<br />var i;<br />for (i = 0; i < obj.count ; i++)<br />{<br />var href = "'" + obj.value.items[i].link + "'";<br />var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";<br />document.write(item);<br />}<br />document.write("</ul>");<br />}<br /></script><br /><script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&<br />_id=a55cb97ebb368bb1b89b7f6bdeb35336&filter=<span style="color: rgb(255, 0, 0);">Iqbal</span>&url=http%3A%2F%2F<span style="color: rgb(51, 51, 255);">t4belajarblogger</span><span style="color: rgb(51, 51, 255);">.blogspot.com</span>&num=<span style="color: rgb(0, 153, 0);">10</span>" type="text/javascript"></script></p><br /><br /><br />Yang perlu teman2 ganti yaitu link blog saya yang berwarna biru, lalu nama yang tidak akan tampil dalam fitur top komentator dan biasanya yaitu si admin blog (ex: Iqbal ==> warna merah), dan jumlah top komentator yang ingin ditampilkan (ijo).<br /><br /><br />Semoga Bermanfaat []<br /><br /><span style="font-weight:bold;">Tags: bagaimana menampilkan top komentator, kode HTML menampilkan top komentar, script komentator teratas, cara mudah menampilkan top komentator, agar top komentator muncul</span>

Menampilkan Top Komentator ke dalam Blog

Jika teman-teman ingin mengetahui secara langsung siapa yang paling banyak berkomentar ke blognya teman2 maka teman2 bisa menggunakan cara y...

+ Read more »

Download Template Read More untuk Blogger

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxrjcI-gvjjLEmGsg6PI7FCyq4fWHobXaIycByG-upUPhJoJCGCg7t8PPZesUkYltvZWkyQd0-rSKd1SbEzMgLged4UaXCmdbjB8h5pAqCajcSwJXUz31rf7_cewEdQnpWKM6y88ALQlQ/s1600-h/preview_chucky_software2iqbal_t4belajarblogger.JPG"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5418525417573031202" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxrjcI-gvjjLEmGsg6PI7FCyq4fWHobXaIycByG-upUPhJoJCGCg7t8PPZesUkYltvZWkyQd0-rSKd1SbEzMgLged4UaXCmdbjB8h5pAqCajcSwJXUz31rf7_cewEdQnpWKM6y88ALQlQ/s200/preview_chucky_software2iqbal_t4belajarblogger.JPG" style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 200px; height: 112px;" /></a>Kali ini kita selingi pembahasan kita tentang tutorial blogger dengan maslah template (biar gak jenuh OK). Ketika surfing di internet mengenai template unik dan gratis tidak sengaja saya temukan template yang memang menurut saya benar2 unik dan layak kita gunakan, selain memang statusnya sebagai template gratis. Judul postingan di atas hanyalah bahasa bikinan saya, nama asli template yang ingin kita bahas bukan template Read More ataupun "Read More Template" akan tetapi Chucky template. Template ini asli bikinan <a href="http://topwpthemes.com/" target="_blank">topwpthemes</a> yang kemudian dikonver oleh <a href="http://www.anshuldudeja.com/" target="_blank">anshuldudeja</a> dan <a href="http://www.best2know.info/" target="_blank">ritesh</a> menjadi template blogger.<a name='more'></a><br /><br />Begitu saya mendapatkan template chucky ini, saya langsung menggunakannya pada blog saya yang beralamatkan di <del>Software2iqbal.blogspot.com</del> (<span style="font-weight: bold; color: rgb(255, 0, 0);">Update</span>: <span style="font-weight: bold; font-style: italic;">blog demo telah dihapus, fungsi insyaAllah akan terus berjalan</span>). Beberapa pertimbangan saya menggunakan template chucky, karena tampilan postingan kita otomatis berbentuk read more (ini alasan kenapa saya memberi judul postingan ini seperti di atas), dengan kata lain kita tidak perlu lagi menerapkan trik read more ke dalam postingan kita. Lalu alasan lainnya lagi karena warna template tersebut (biru) benar2 cocok untuk tema blog saya (software gratis dan tutorial), selain itu juga warna header blog saya tersebut berwarna biru (walau digerogoti oleh semut hehehe...), yaaaah...singkat kata template chucky ini so nice dah...<br /><br />Bagi teman2 yang tertarik untuk menggunakan template tersebut silahkan di-download melalui link berikut (silahkan pilih):<br /><br />1. <a href="http://sites.google.com/site/t4belajarblogger/template/Chucky_Template.zip" target="_blank">Link 1</a> (Google site)<br /><br />2. <a href="http://www.anshuldudeja.com/2009/08/chucky-theme-blogger-template.html" target="_blank">Link 2</a> (anshuldeja)<br /><br /><br />Semoga Bermanfaat []<br /><br /><span style="font-weight: bold;">Tags: template read more blogger, template read more otomatis, template unik read more, download template read more</span>

Download Template Read More untuk Blogger

Kali ini kita selingi pembahasan kita tentang tutorial blogger dengan maslah template (biar gak jenuh OK). Ketika surfing di internet mengen...

+ Read more »

Memunculkan Kotak Komentar di Bawah Entri

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOW66ebMWi0uoN5FCGBnUpwVIcdZ3ZK64KbQbQwbf6fSdNpRsjb2bzBdId7FuPlcsxlZk3o7otRamh0ItR6M6zctEHCvAnm_-A8x-5_bvsQNwLunYvoHOD_V3WOQFbN83v7f3jkXJ2d3E/s1600-h/kotak_komen_bawah_entri_t4belajarblogger.JPG"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5418515732181181282" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOW66ebMWi0uoN5FCGBnUpwVIcdZ3ZK64KbQbQwbf6fSdNpRsjb2bzBdId7FuPlcsxlZk3o7otRamh0ItR6M6zctEHCvAnm_-A8x-5_bvsQNwLunYvoHOD_V3WOQFbN83v7f3jkXJ2d3E/s200/kotak_komen_bawah_entri_t4belajarblogger.JPG" style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 183px; height: 152px;" /></a>Beberapa template gratisan yang bukan template classic (yang disediakan oleh blogger) terkadang memilki beberapa masalah yang mungkin bisa membuat kita agak risih, diantaranya template tersebut tidak mendukung pemunculan kotak komen di bawah entri/postingan. Memang untuk template classic cara mensettingnya cukup mudah, tinggal pergi ke halaman pengaturan, komentar, lalu kita bisa mensetting bagaimana format kotak komen yang kita inginkan. Postingan ini saya buat berdasar pengalaman saya sebelumnya terhadap template lama saya (sebelum template yg sekarang ini), jadi saya berharap bagi teman2 yang mengalami hal yang sama dapat terselesaikan maslahnya melalui sharing tutorial kali ini.<a name='more'></a><br /><br />Seperti biasa, silahkan teman2 login/masuk dulu ke akun blogger, lalu klik tata Letak. Sesampai di tata letak klik Edit HTML, dan jangan lupa untuk mengklik kotak expand widget templet (jangan lupa men-download template untuk wanti2, kali aja ada kesalahan dalam memperaktekkan instruksi).<br /><br />Selanjutnya carilah kode berikut<br /><br /><p class="alert"><b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if></p><br /><br />Kalau sudah ketemu, ganti kode di atas dengan kode berikut<br /><br /><p class="alert"><b:if cond='data:post.embedCommentForm'> <b:include data='post' name='comment-form'/> <b:else/> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if> </b:if></p><br /><br />Simpan template teman2, dan sekarang silahkan untuk melihat tampilan kotak komen tman2. Perlu diingat, bahwa sebelum melakukan trik di atas ada baiknya teman2 pergi ke halaman pengaturan dulu lalu pilih komentar, dan setting letak kotak komen dengan opsi disemat di bawah entri.<br /><br />Selain itu, teman2 juga bisa menggunakan trik kedua (apabila trik di atas tidak manjur). Yang mungkin trik ini sudah pernah saya bahas dalam postingan yang berjudul <a href="http://t4belajarblogger.blogspot.com/2009/12/masalah-seputar-kotak-komentar-posting.html" target="_blank">Masalah Seputar Kotak Komentar</a>.<br /><br />Kembali ke halaman Tata letak/layout, jangan lupa klik expand widget template.<br /><br />cari kode berikut Ini<br /><br /><p class="alert"><p class='comment-footer'><br /><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><br /><data:postCommentMsg/></a><br /></p><br /></b:if></p><br /><br />Lalu ganti kode di atas dengan kode berikut<br /><br /><p class="alert"><p class='comment-footer'><br /><b:if cond='data:post.embedCommentForm'><br /><b:include data='post' name='comment-form'/><br /><b:else/> <b:if cond='data:post.allowComments'><br /><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><br /><data:postCommentMsg/></a><br /></b:if> </b:if> </p> </b:if></p><br /><br />Klik Simpan template<br /><br /><br />Jika tman2 memilki masalah lain yang berkaitan dengan kotak komen ini, mungkin jawabannya bisa ditemukan di postingan saya yang berjudul <a href="http://t4belajarblogger.blogspot.com/2009/12/masalah-seputar-kotak-komentar-posting.html" target="_blank">Masalah Seputar Kotak Komentar</a>. Sekian saja doeloe...<br /><br /><br />Semoga Bermanfaat []<br /><br /><span style="font-weight:bold;">Tags: agar kotak komentar di bawah postingan, kotak komentar di bawah entri, membuat form komentar muncul di bawah, cara setting kotak komentar, kotak komentar muncul di akhir entri</span>

Memunculkan Kotak Komentar di Bawah Entri

Beberapa template gratisan yang bukan template classic (yang disediakan oleh blogger) terkadang memilki beberapa masalah yang mungkin bisa m...

+ Read more »

Membuat Tulisan Arab pada Blog dengan CSS

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHf8KAA6fgMZWI31gVNlzyg-NzArwQxJEv6Y7huCEkHTm8y4K1z2cjgvPA2jCAqy4L51GCAplGuNP7Tt9wMfcpyLvd0qhH6qSY5Eep44mnLa5bvDkrZMuRPlaLhyphenhyphen-RGgYvZiGTQ_xITo4/s1600-h/membuat_tulisan_arab_t4belajarblogger.JPG"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5418014853971303410" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHf8KAA6fgMZWI31gVNlzyg-NzArwQxJEv6Y7huCEkHTm8y4K1z2cjgvPA2jCAqy4L51GCAplGuNP7Tt9wMfcpyLvd0qhH6qSY5Eep44mnLa5bvDkrZMuRPlaLhyphenhyphen-RGgYvZiGTQ_xITo4/s200/membuat_tulisan_arab_t4belajarblogger.JPG" style="margin: 0pt 0pt 10px 10px; float: right; cursor: pointer; width: 168px; height: 200px;" /></a>Mungkin beberapa rekan blogger ada yang ingin mencoba menulis tulisan Arab di Blognya, seperti basmalah, hamdalah, atau juga syahadatain. Terlepas dari itu semua saya yakin pasti sudah ada yang mencobanya, namun alhasil tidak sesuai dng keinginan kita alias gak bagus2 amat, dan alternatif terakhirnya tidak menggunakan font akan tetapi gambar. Sedangkan beberapa rekan Blogger yang memilki blog dengan tema pembahasan yang bersifat agama serta dakwah islami mau tidak mau si admin blog tersebut pasti akan menyisipkan dalil2 yag bersumber dari qur'an dan hadits, dan mayoritas yg kita dapatkan dalil2 tersebut hanya berupa terjemahannya saja. Dan satu lagi yang paling saya yakini bahwa rekan blogger yg memilki tema dakwah islami tersebut benar2 ingin menampilkan tulisan Arab di Blognya, namun karena alasan tadi... niat bagus tersebut terelakkan. Oleh karena itu bagi rekan2 blogger yg ingin menulis tulisan Arab di blognya, sekarang gak perlu susah lagi, karena kita akan men-sharing-nya bersama2 dalam postingan kali ini.<a name='more'></a><br /><br />Oh iya, trik yang ingin kita bahas ini saya dapatkan dari blognya <a href="http://www.abu-farhan.com/2009/07/cara-menampilkan-tulisan-arab-dengan-css/" target="_blank">Abu Farhan</a>, di mana judul asli postingan beliau adalah "Cara menampilkan Tulisan Arab dengan CSS", jadi postingan di blog saya ini hanya bersifat pengulangan saja. Sebelumnya terima kasih kepada Rekan Abu Farhan yang telah membagi2 ilmunya.<br /><br />Ya' langsung saja. Sekarang silahkan teman2 login dulu ke akun bloggernya masing2, kemudian klik Tata Letak, klik Edit HTML<br /><br />Lalu letakkan kode berikut di atas kode tag <span style="color: rgb(102, 102, 0);">]]></b:skin></span><br /><br /><p class="alert">.arabic {font-family: Traditional Arabic;font-size: 18px;direction:rtl;line-height: 200% ;font-weight: bold;}</p><br /><br />Klik Simpan template<br /><br />Silahkan bagi teman2 yang ingin mengatur font arabnya, maka bisa di atur pada bagian "font-family:" di sana kita dapatkan font arab dengan jenis "Traditional Arabic", nah bagi teman2 yg ingin menggantinya maka bisa juga diganti dengan font Arab dgn jenis "Arabic Transparent", dll (untuk lebih lanjut lihat pada Ms.Word). Dan untuk mengatur ukuran font, maka teman2 bisa mengaturnya pada bagian "font-size:", nilai "18px" bisa teman2 sesuaikan dengan keinginan masing2<br /><br />Selanjutnya yang harus teman2 lakukan ketika memosting yaitu menggunakan kode2 berikut ini (silahkan pilih)<br /><br /><br /><span style="font-size:130%;"><span style="font-weight: bold;"><span style="color: rgb(255, 102, 0);">1</span>. Menggunakan "div"</span></span><br /><br />Kode:<br /><br /><p class="alert"><div class="arabic">بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم</div></p><br /><br />Hasil:<br /><br /><div class="arabic">بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم</div><br /><br /><br /><span style="font-weight: bold;font-size:130%;" ><span style="color: rgb(255, 102, 0);">2</span>. Menggunakan "p"</span><br /><br />Kode:<br /><br /><p class="alert"><p class="arabic">بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم</p></p><br /><br />Hasil:<br /><br /><p class="arabic">بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم</p><br /><br /><br /><span style="font-weight: bold;font-size:130%;" ><span style="color: rgb(255, 102, 0);">3</span>. Menggunakan "span"</span><br /><br />Kode:<br /><br /><p class="alert"><span class="arabic">بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم</span></p><br /><br />Hasil:<br /><br /><span class="arabic">بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم</span><br /><br /><br /><span style="font-weight: bold;font-size:130%;" ><span style="color: rgb(255, 102, 0);">4</span>. Menggunakan "span" ==> Tulisan latin+Arab</span><br /><br />Kode:<br /><br /><p class="alert"><p>Tulisan Latin<span class="arabic">بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم</span></p></p><br /><br />Hasil:<br /><br /><p>Tulisan Latin<span class="arabic">بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم</span></p><br /><br /><br /><br />Bagaimana teman2, gampangkan? Seperti yang tlah teman2 perhatikan, walau kode dalam pemostingan beda2 namun menghsilkan wujud yang sama, oleh karena itu terserah teman2 mau make kode yang mana. Dengan hadirnya trik ini terus terang saja memotivasi saya untuk melanjutkan menulis tutorial blogging di blogger yang saya buat dengan <a href="http://t4belajarblogger.blogspot.com/2009/12/arabic-blogger-tutorial.html" target="_blank">versi bahasa Arab</a>, memang baru dikit sih. Tapi dengan adanya trik ini membuat saya merasa lebih mudah membuat postingan tutorial blogger dengan bahasa Arab. Untuk saat ini tutorial blogger Arab yg baru saya bikin berjudul <p><a href="http://t4belajarblogger.blogspot.com/2009/12/bloggercom.html">Blogger.com<span class="arabic">كيفية إنشاء بلوق في</span></a></p> (cara membuat blog di blogger.com), dengan harapan bisa sharing dengan siapa pun (termasuk bule Inggris n Arab), kemampuan bahasa yang minim pun tetap saja PD, yg penting bisa sharing dulu...n than maslah bahasa akan bisa ala biasa...dah dulu yooo... GoOd LuCk~<br /><br />Semoga Bermanfaat []<br /><br /><span style="font-weight:bold;">Tags: membuat tulisan arab dengan CSS, gaya tulisan Arab CSS, trik menulis arab untuk Blogger, cara mudah membuat Arab CSS blogspot</span>

Membuat Tulisan Arab pada Blog dengan CSS

Mungkin beberapa rekan blogger ada yang ingin mencoba menulis tulisan Arab di Blognya, seperti basmalah, hamdalah, atau juga syahadatain. Te...

+ Read more »