tag:blogger.com,1999:blog-85058617991813831892024-03-12T16:11:21.389-07:00Misteri Blogger PemulaSimple Blog Tutorial, HTML CSS, Jquery, Javascript, Tips Tricks Blogger, Free Template, Bisnis OnlineIhsanul Hudahttp://www.blogger.com/profile/00973343987877850614noreply@blogger.comBlogger28125tag:blogger.com,1999:blog-8505861799181383189.post-74011195101459434322011-02-07T00:49:00.000-08:002011-02-07T01:15:06.720-08:00Mengganti Link Read More Dengan Gambar<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN0LBjV1R3JoofyEb9uJMjJJmt26G2PzvA6ynQf8KoeVADC8H9BHey4aoIEpRPHoCZylwEPbT-tZ3HTUR59Bs0aBa8XDdT9ZLE76uJn-ZuLjdSTm4l0h5YBtUHdRrd_RkKacSHgY4wAkI/s1600/customize-read-more-1-L.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="mengganti link read more dengan gambar blogger" border="0" height="238" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN0LBjV1R3JoofyEb9uJMjJJmt26G2PzvA6ynQf8KoeVADC8H9BHey4aoIEpRPHoCZylwEPbT-tZ3HTUR59Bs0aBa8XDdT9ZLE76uJn-ZuLjdSTm4l0h5YBtUHdRrd_RkKacSHgY4wAkI/s320/customize-read-more-1-L.jpg" width="320" /></a></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Sebelumnya saya telah jelaskan pada postingan terdahulu bagaimana membuat read more atau baca selengkapnya pada blogger. Jika anda ingin membacanya kembali silakan klik link ini <a href="http://oilink.blogspot.com/2011/01/cara-membuat-read-more-blogger.html" target="_blank">Cara Membuat Read More Blogger</a>, karena pada postingan tersebut ada keterkaitan dengan postingan yang akan saya sajikan kali ini. Baiklah, jika kita lihat biasanya di penghujung pemotongan artikel suatu blog dapat anda temukan link yang bertuliskan read more atau baca selengkapnya. Sebagai contoh coba anda lihat link read more pada blog saya yang <a href="http://insanshalih.blogspot.com/" target="_blank">ini</a>. Pada blog tersebut ada link yang bertuliskan baca selengkapnya, tapi di sampingnya juga terdapat sebuah gambar icon read more. Saya akan jelaskan saja cara mengganti tulisan link read more dengan gambar dan untuk selanjutnya terserah anda, apakah tulisan read more benar-benar mau diganti atau hanya ditambahkan gambar icon di samping tulisan tersebut. </span></div><div style="font-family: Georgia,"Times New Roman",serif;"><br />
</div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Berikut penjelasan singkat untuk <a href="http://oilink.blogspot.com/2011/02/mengganti-link-read-more-dengan-gambar.html">mengganti link read more dengan gambar </a>atau icon pada blogger:</span></div><div style="text-align: justify;"><span style="font-size: small;"><span style="font-family: Georgia,"Times New Roman",serif;">1. Seperti biasa Log in terlebih dahulu ke account blogger anda, kemudian pilih menu <acronym title="Tata Letak">Design</acronym> > <acronym title="Edit HTML Blogger">Edit HTML</acronym>, jangan lupa untuk centang <acronym title="Checklist kotak kecil di samping tulisan ini">Expand Widget Templates</acronym> dan temukan kode yang ditandai di bawah ini:</span></span></div><blockquote><span style="font-size: small;"><span style="font-family: Georgia,"Times New Roman",serif;"><b:if cond='data:blog.pageType != "item"'></span></span><br />
<span style="font-size: small;"><span style="font-family: Georgia,"Times New Roman",serif;"><a expr:href='data:post.url'><code><span style="color: red;">Read More...</span></code></a></span></span><br />
<span style="font-size: small;"><span style="font-family: Georgia,"Times New Roman",serif;"></b:if></span></span></blockquote><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">2. Bagaimana? Sudah dapat? Ganti tulisan <code><span style="color: red;">Read More...</span></code> dengan kode ini:</span></div><pre class="code"><span style="font-size: small;"><img border="0" src="<span style="color: red;">http://urlgambarreadmorebloggeranda.com</span>"/ ></span></pre><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Atau ganti tulisan </span><span style="font-size: small;">yang ditandai berwarna merah di atas dengan url gambar read more anda. Anda juga dapat gunakan gambar yang telah saya sediakan berikut, </span><span style="font-size: small;">silakan dipilih salah satu:</span></div><br />
<table><tbody>
<tr> <td><img alt="membuat read more blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV14gGV2rd2iSZF-bwL_YYZ0tAcaiRdoptnZ-rUIoimAzRNRcPJjk3mWLGeFzc-BmMIugjE9l7RM3gXJVb83NGsxf21_8dL_Oa6DLp86PXFe4FVXLGz1VrC4MoudJJ2HoXwzL2O5NrzxE/s1600/readmore.gif" /></td> <td><img alt="icon gambar read more blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYxUQqZVw4Q5jrztY6Rj5tDiIgL8CgXYwX1A6HKXvKNt3ZOlsyiZchTr4hE6PqW9PPDrprKzkH8JQSBzYgF0h-9M1UHKsrMjYn8aQ23FbqelJQ9fosCeiKQcaJUE-bSTdiReRh3cDzF_E/s1600/more+button.gif" /></td> <td><img alt="read more blogger dengan gambar icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZeFVR_MMrigvybN_qg2XcBVs9pC2ndgrUbu44A_QOptolphCiAzc3tPXsnxDFywlWT49lHwAibIFLcW49A3b90ebkhmnSjh77k7s7ZTx6iYTEGpB2Xkl85Ehx7EwBeXRaIpuv9sr3p8I/s1600/readmore.png" /></td> <td><img alt="tulisan link read more blogger dengan gambar" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhBh1ykH4DFB7ua0v_1NkYwYwyV8Vp5FDFbNLoZ3awGly96WLWTfhwBmcaOmI0mLxr5OdyD8RYwEDRpUb75_L4Vnx11upPELmUuKx6tKikFX8qv1UTx3Od9ySTR0ZxsvgEn-yQTeq_elg/s1600/read+more+arrow.png" /></td> </tr>
</tbody></table><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><pre class="code"><span style="font-size: small;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV14gGV2rd2iSZF-bwL_YYZ0tAcaiRdoptnZ-rUIoimAzRNRcPJjk3mWLGeFzc-BmMIugjE9l7RM3gXJVb83NGsxf21_8dL_Oa6DLp86PXFe4FVXLGz1VrC4MoudJJ2HoXwzL2O5NrzxE/s1600/readmore.gif"/ ></span>
<span style="font-size: small;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYxUQqZVw4Q5jrztY6Rj5tDiIgL8CgXYwX1A6HKXvKNt3ZOlsyiZchTr4hE6PqW9PPDrprKzkH8JQSBzYgF0h-9M1UHKsrMjYn8aQ23FbqelJQ9fosCeiKQcaJUE-bSTdiReRh3cDzF_E/s1600/more+button.gif"/ ></span>
<span style="font-size: small;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZeFVR_MMrigvybN_qg2XcBVs9pC2ndgrUbu44A_QOptolphCiAzc3tPXsnxDFywlWT49lHwAibIFLcW49A3b90ebkhmnSjh77k7s7ZTx6iYTEGpB2Xkl85Ehx7EwBeXRaIpuv9sr3p8I/s1600/readmore.png"/ ></span>
<span style="font-size: small;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhBh1ykH4DFB7ua0v_1NkYwYwyV8Vp5FDFbNLoZ3awGly96WLWTfhwBmcaOmI0mLxr5OdyD8RYwEDRpUb75_L4Vnx11upPELmUuKx6tKikFX8qv1UTx3Od9ySTR0ZxsvgEn-yQTeq_elg/s1600/read+more+arrow.png"/ ></span></pre><span style="font-size: small;">3. Langkah akhir tinggal klik <b>Save Template</b> dan lihat hasilnya.</span></div>Ihsanul Hudahttp://www.blogger.com/profile/00973343987877850614noreply@blogger.com4tag:blogger.com,1999:blog-8505861799181383189.post-91801199234249519922011-02-06T22:25:00.000-08:002011-02-06T22:48:38.657-08:00Membuat Text Area<div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Apa itu text area? Definisinya sudah sangat jelas, biar lebih jelas lagi saya paparkan definisi singkat dan fungsi dari penggunaan text area pada blogger. Text area adalah tempat yang disiapkan untuk menyimpan tulisan dengan membentuk area. Biasanya text area ini digunakan untuk menyimpan <a href="http://oilink.blogspot.com/search/label/Html%20Css">kode HTML </a>atau bisa juga text lain dengan tujuan untuk mempemudah pengunjung menyalin apa yang ada di dalam text area tersebut. Contoh penggunaan text area biasanya sebagai tempat kode link banner yang siap untuk disalin oleh pengunjung, atau bisa juga pesan admin kepada pengunjung.</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><br />
<div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Berikut kode untuk membuat text area:</span></div><pre class="code"><span style="font-size: small;"><p align="center"><textarea name="code" rows="5" cols="20"><span style="color: red;">masukkan text atau kode HTML anda di sini</span></textarea></p> </span></pre><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><blockquote><span style="font-size: small;"> rows="5" /*<span style="color: red;">Menunjukkan tinggi text area. </span>/*</span><br />
<span style="font-size: small;"> cols="20" /*<span style="color: red;">Menunjukkan lebar text area.</span> /*</span></blockquote><span style="font-size: small;">Contoh penerapannya langsung: </span><br />
<pre class="code"><span style="font-size: small;"><p align="center"><textarea name="code" rows="5" cols="20"><span style="color: red;"><a href="http://oilink.blogspot.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8GqAZCKfqMEb9ASCBvArmjRsu6kPOgKcpOvDPI3k4a-860K4UMQk2-Xwdjh6kN0f2p4Lu39wO5wJ9_07QlBSCyhzKmXJURW3uiEWFM2h4J4elPHcxCtASltiVICUjyEXyA9uuL3Eh3mM/s1600/Link+Orang+Indonesia.gif" border="0" alt="Blogspot Tutorial" /></a></span></textarea></p> </span></pre><span style="font-size: small;">Maka hasilnya menjadi:</span><br />
<div align="center"><textarea cols="20" name="code" rows="5"><a href="http://oilink.blogspot.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8GqAZCKfqMEb9ASCBvArmjRsu6kPOgKcpOvDPI3k4a-860K4UMQk2-Xwdjh6kN0f2p4Lu39wO5wJ9_07QlBSCyhzKmXJURW3uiEWFM2h4J4elPHcxCtASltiVICUjyEXyA9uuL3Eh3mM/s1600/Link+Orang+Indonesia.gif" border="0" alt="Cara membuat text area" /></a></textarea></div><span style="font-size: small;"><br />
Ada cara lain yang lebih memudahkan pengunjung untuk mendapatkan kode HTML yang disediakan oleh kita yaitu dengan memberikan variasi penambahan tombol </span><span style="font-size: small;">Select</span><span style="font-size: small;"> All atau </span><span style="font-size: small;">Highlight</span><span style="font-size: small;"> All. Hanya ikuti langkah mudah berikut untuk mengubah <a href="http://oilink.blogspot.com/2011/02/membuat-text-area.html">kode text area dengan Select All atau Highlight All.</a></span><br />
<pre class="code"><span style="font-size: small;"><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All"></div><p align="center"><textarea style="width: 300px; height: 150px" name="txt" rows="100" wrap="virtual" cols="55"></span><span style="font-size: small;"><span style="color: red;">masukkan text atau kode HTML anda di sini</span></span><span style="font-size: small;"></textarea></p></form></span></pre></div><blockquote><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"><div align="center"> /*<span style="color: red;">Menunjukkan posisi tombol Select All.</span>/*<br />
value="Select All" /*<span style="color: red;">Tulisan yang akan muncul di tombol dan dapat diganti terserah anda seperti Highlight All.</span> /*</span></div></blockquote><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Contoh penerapannya langsung: </span><br />
<pre class="code"><span style="font-size: small;"><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All"></div><p align="center"><textarea style="width: 300px; height: 150px" name="txt" rows="100" wrap="virtual" cols="55"><a href="http://oilink.blogspot.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8GqAZCKfqMEb9ASCBvArmjRsu6kPOgKcpOvDPI3k4a-860K4UMQk2-Xwdjh6kN0f2p4Lu39wO5wJ9_07QlBSCyhzKmXJURW3uiEWFM2h4J4elPHcxCtASltiVICUjyEXyA9uuL3Eh3mM/s1600/Link+Orang+Indonesia.gif" border="0" alt="Blogspot Tutorial" /></a></textarea></p></form></span></pre><span style="font-size: small;">Maka hasilnya menjadi:</span><br />
<form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All" /></div><div align="center"><textarea cols="55" name="txt" rows="100" style="height: 150px; width: 300px;" wrap="virtual"><a href="http://oilink.blogspot.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8GqAZCKfqMEb9ASCBvArmjRsu6kPOgKcpOvDPI3k4a-860K4UMQk2-Xwdjh6kN0f2p4Lu39wO5wJ9_07QlBSCyhzKmXJURW3uiEWFM2h4J4elPHcxCtASltiVICUjyEXyA9uuL3Eh3mM/s1600/Link+Orang+Indonesia.gif" border="0" alt="Cara membuat text area highlight all atau select all" /></a></textarea></div></form><span style="font-size: small;"> </span><br />
<span style="font-size: small;">Bagaimana? Siap untuk bertukar link <a href="http://oilink.blogspot.com/2011/02/membuat-text-area.html">menggunakan text area</a> ini dengan sahabat blogger lain. Selamat mencoba.</span><span style="font-size: small;"><br />
</span></div></div>Ihsanul Hudahttp://www.blogger.com/profile/00973343987877850614noreply@blogger.com2tag:blogger.com,1999:blog-8505861799181383189.post-14334634290564761012011-02-03T02:12:00.000-08:002011-02-07T00:08:26.039-08:00Script Tombol Bookmark This<div class="separator" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em; text-align: center;"><img alt="cara membuat tombol link script bookmark this" border="0" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrZdDpft7zT9gClFssK9fB1ONrYR5Z18KVf8JEEzDRVnDnLbPowH16rUwgs_OqVwAqGV8tz3KoxBHD2uxgvyJXTuaZjKn1P5i044_9wPnr_Jot1v3Y_w0eppuAaYq_h7q47jf9qiLfVmk/s320/bookmark-this-blog.jpg" width="320" /></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Beberapa hari tidak update gatal rasanya tangan ini untuk menulis. Pada hari ini saya akan sharing tutorial sederhana yang dirasanya fungsi tombol ini sangat penting untuk dibuat pada menu blog anda yaitu <a href="http://oilink.blogspot.com/2011/02/script-tombol-bookmark-this.html">cara membuat script bookmark</a>. Mungkin anda sudah sangat paham dan mengetahui fungsi tombol ini apabila digunakan pada blog anda. Fungsi dari tombol script ini adalah untuk memerintahkan browser agar menyimpan alamat blog atau situs tersebut pada daftar bookmark browser yang digunakan. Meskipun biasanya pada menu browser internet yang kita gunakan terdapat tombol bookmark ini namun apa salahnya jika kita tambahkan tombol ini pada blog kita. Keuntungan dari script ini adalah untuk mengingat dan memudahkan pengunjung ketika ingin mengakses kembali blog kita, sehingga dapat mempertahankan pengunjung melakukan kunjungan rutin. </span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"><br />
Berikut cara membuat script tombol bookmark this pada blogger: </span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">1. Log in ke account blogger anda, kemudian pilih menu <acronym title="Tata Letak">Design</acronym> > <acronym title="Edit HTML Blogger">Edit HTML</acronym>, lalu temukan kode <code></head></code>. </span><br />
<span style="font-size: small;">2. Tambahkan <a href="http://oilink.blogspot.com/search/label/Javascript">Javascript </a>berikut di atas kode tadi:</span><br />
<pre class="code"><span style="font-size: small;"><script type='text/javascript'>
function bookmarksite(title,url){if (window.sidebar)
window.sidebar.addPanel(title, url, &quot;&quot;); else if(window.opera &amp;&amp; window.print){var elem = document.createElement(&#39;a&#39;);
elem.setAttribute(&#39;href&#39;,url); elem.setAttribute(&#39;title&#39;,title); elem.setAttribute(&#39;rel&#39;,&#39;sidebar&#39;); elem.click();}
else if(document.all)
window.external.AddFavorite(url, title);}
</script> </span></pre>3. Save Template<br />
<br />
Untuk melengkapi fungsi script di atas selanjutnya anda harus membuat tombol atau link bookmark. Ada 2 opsi yang dapat anda buat dan keduanya pula dapat dibuat dengan bersamaan pada satu halaman blog:<br />
1. Text link:<br />
<pre class="code"><a href="javascript:bookmarksite('Nama Blog', 'URL Blog')">Bookmark blog ini!</a> </pre>2. Image link:<br />
<pre class="code"><a href="javascript:bookmarksite('Nama Blog', 'URL Blog')"><img src="http://urlgambarbookmarkanda.com" border="0"/></a></pre>Note:<br />
Jika nama blog anda terdapat tanda kutip misalnya Ihsanul Huda's Blog, maka tambahkan <span style="color: red;">backslashed </span>(<span style="color: red;">\</span>) pada Javascript linknya, sehingga untuk contohnya menjadi:<br />
<pre class="code"><a href="javascript:bookmarksite('Ihsanul Huda\'s Blog', 'http://insanshalih.blogspot.com/')">Bookmark blog ini!</a> </pre><br />
Tombol link bookmark dapat anda pasang dimana saja baik di postingan ataupun gadget blogger anda. Silakan dicoba.</div>Ihsanul Hudahttp://www.blogger.com/profile/00973343987877850614noreply@blogger.com6tag:blogger.com,1999:blog-8505861799181383189.post-65768724138105717252011-01-31T06:24:00.000-08:002011-01-31T07:08:05.487-08:00Membuat Signature Dibawah Posting Blog<div style="text-align: justify;"><div style="text-align: justify;"><span style="font-size: small;"><span style="font-family: Georgia,"Times New Roman",serif;">Coba anda lihat di bawah kiri postingan ini, ada signature pemiliknya bukan? Signature ini memang tidak saya letakkan secara permanen di setiap postingan blog, hanya terdapat di postingan ini. Tetapi jika anda menginginkan gambar signature tersebut tampil di setiap halaman blog, untuk itulah postingan ini saya buat untuk membahas bagaimana cara membuat signature tersebut. Tujuan membuat signature di bawah posting blog ini tidak hanya untuk menunjukkan identitas nama pemiliknya saja, tetapi agar postingan blog anda lebih memiliki karakter seperti signature pada buku-buku yang pernah anda baca pasti juga mencantumkan signature penulisnya. </span></span></div><br />
<div style="text-align: justify;"><span style="font-family: Georgia,"Times New Roman",serif;">Baiklah, langkah selanjutnya anda harus memiliki gambar signaturenya terlebih dahulu yang bisa anda dapatkan di situs resminya <a href="http://mylivesignature.com/" target="_blank" title="membuat signature blog">mylivesignature</a>. </span><span style="font-size: small;"><span style="font-family: Georgia,"Times New Roman",serif;"> </span></span></div><br />
<div style="text-align: justify;"><span style="font-size: small;"><span style="font-family: Georgia,"Times New Roman",serif;">Setelah anda buat gambar signature pada situs tersebut silakan upload gambarnya di image file hosting favourite seperti <a href="http://picasa.google.com/">picasa</a>, <a href="http://photobucket.com/">photobucket</a>, <a href="http://imageshack.us/">imageshack</a>, etc. Kemudian ambil URL gambarnya lalu ikuti langkah berikut:</span></span><br />
<span style="font-size: small;"><span style="font-family: Georgia,"Times New Roman",serif;">1. Seperti biasa login ke account blogger, kemudian pilih menu <acronym title="Tata Letak">Design</acronym> > <acronym title="Edit HTML Blogger">Edit HTML</acronym>, jangan lupa untuk centang <acronym title="Checklist kotak kecil di samping tulisan ini">Expand Widget Templates</acronym> dan carilah kode berikut:</span></span><br />
<pre class="code"><span style="font-size: small;"><span style="font-family: Georgia,"Times New Roman",serif;"><div class='post-footer-line post-footer-line-1'></span></span></pre><span style="font-size: small;"><span style="font-family: Georgia,"Times New Roman",serif;">Kalo belum ketemu yang ini juga boleh:</span></span><br />
<pre class="code"><span style="font-size: small;"><span style="font-family: Georgia,"Times New Roman",serif;"><p class='post-footer-line post-footer-line-1'></span></span></pre><span style="font-size: small;"><span style="font-family: Georgia,"Times New Roman",serif;">Kalo masih belum ketemu juga coba cari yang ini:</span></span><br />
<pre class="code"><span style="font-size: small;"><span style="font-family: Georgia,"Times New Roman",serif;"><data:post.body/></span></span></pre><span style="font-size: small;"><span style="font-family: Georgia,"Times New Roman",serif;">2. Tambahkan kode ini tepat di salah satu kode yang telah disebutkan di atas tadi: </span></span><br />
<pre class="code"><span style="font-size: small;"><span style="font-family: Georgia,"Times New Roman",serif;"><b:if cond='data:blog.pageType == "item"'></span></span>
<span style="font-size: small;"><span style="font-family: Georgia,"Times New Roman",serif;"><img src='<span style="color: red;">http://urlgambarsignatureanda.com</span>' style='border:0px;'/></span></span>
<span style="font-size: small;"><span style="font-family: Georgia,"Times New Roman",serif;"></b:if></span></span></pre><span style="font-size: small;"><span style="font-family: Georgia,"Times New Roman",serif;">Ganti URL berwarna merah tersebut dengan URL gambar signature yang telah diupload tadi. </span></span><br />
<span style="font-size: small;"><span style="font-family: Georgia,"Times New Roman",serif;">3. Klik Save Settings dan lihat hasilnya. Selamat berkreasi dengan gambar signature blog anda.</span></span><br />
<br />
<div class="separator" style="clear: both; text-align: left;"><img alt="buat signature di bawah posting blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7LjeM62Xi-CPndPKQD1Blv1JD0-Saw0wDSTjmb-plTwn-mv9kAjp0khavsHtKWkGhLJLe8eOWItuKWpDPYB8Sz73dRpADygIuq_8sQLPJcRHJoWhXvuYJy5jdEyOjNizsqCldvyI4oAk/s1600/Ihsanul+Huda.png" /></div></div></div>Ihsanul Hudahttp://www.blogger.com/profile/00973343987877850614noreply@blogger.com3tag:blogger.com,1999:blog-8505861799181383189.post-65520085183571750892011-01-28T22:30:00.000-08:002011-01-31T02:20:40.535-08:00Cara Mudah Membuat Menu Navigasi Horizontal Ajaib<div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"></span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><b><span style="font-size: small;">Apa itu tombol navigasi? </span></b></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"><br />
</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Tombol navigasi adalah tombol yang digunakan oleh pembaca blog untuk memudahkan mereka dalam menjamah dan mendapatkan berbagai informasi yang tersedia pada blog tersebut. Tombol navigasi ini biasanya berada di atas header blog atau di bawahnya, atau biasa juga pada bagian sidebar blog yang biasa dikenal dengan sebutan Menu Navigasi Vertical. Pada postingan terdahulu telah dijelaskan bagaimana cara membuat navigasi juga, yaitu navigasi breadcrumb tapi fungsi dan peletakan navigasi ini berbeda dengan navigasi yang akan saya jelaskan sekarang. Navigasi Breadcrumb tersebut terletak di atas posting blog, jika anda lupa atau hanya sekedar ingin mengetahuinya lebih lanjut apa itu navigasi breadcrumb bisa dibaca kembali di <a href="http://oilink.blogspot.com/2011/01/navigasi-breadcrumb.html">Cara Membuat Menu Navigasi Breadcrumb</a>. </span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"><br />
</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Baiklah kita fokus kembali pada topic utama judul postingan ini. Berikut langkah-langkah yang harus anda ikuti untuk membuat menu navigasi horizontal pada blogger:</span></div><div style="text-align: justify;"><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">1. Seperti biasa login ke account blogger, kemudian pilih menu <acronym title="Tata Letak">Design</acronym> > <acronym title="Elemen Halaman">Page Element</acronym>, lalu <acronym title="Tambah Gadget">Add a Gadget</acronym>. </span></div><div style="text-align: justify;"><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">2. Masukkan kode berikut pada HTML/Javascript gadget anda:</span></div><div style="text-align: justify;"><br />
</div><div style="background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYh7g76RBTgfVo7rm_rUiBnidypp-lkE8SNr8olRYK3mNWqtuCg3L0fj8h91EJXL8FCFK7fsLyDPB7vR-bGgQHrk8xZRbYyNLIF_4b130_hIZLCkBbvjKAbi-mw9OHhqbYsuBOThZsMfWa/") repeat-y scroll left top transparent; border: 1px solid rgb(4, 4, 180); font-family: Georgia,Times New Roman,serif; height: 200px; overflow: auto; padding: 5px 5px 5px 35px; width: 553px;"><div style="text-align: left;"><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><style type="text/css">.menulink{ text-decoration:none;color:#ffffff;font-size:13px;} </style><font face="Arial, helvetica, sans-serif"> </span></div><div style="text-align: left;"><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><table border="2" <span style="color: red;">width="620" height="28"</span> style="border-collapse:collapse" cellpadding="" cellspacing="0" bordercolor="#ffffff"><tr> </span></div><div style="text-align: left;"><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><td align="center" bgcolor="#505D7A" onmouseover="style.backgroundColor='#5D6B8D'" onmouseout="style.backgroundColor='#505D7A'" onclick="javascript:location.<span style="color: blue;">href='#'"><a href="#"</span> class="menulink" onmouseover="style.color='#f0f0f0'" onmouseout="style.color='#E0E55C'">Link 1</a> </td> </span></div><div style="text-align: left;"><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><td align="center" bgcolor="#505D7A" onmouseover="style.backgroundColor='#5D6B8D'" onmouseout="style.backgroundColor='#505D7A'" onclick="javascript:location.<span style="color: blue;">href='#'"> <a href="#"</span> class="menulink" onmouseover="style.color='#f0f0f0'" onmouseout="style.color='#E0E55C'">Link 2</a></td> </span></div><div style="text-align: left;"><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><td align="center" bgcolor="#505D7A" onmouseover="style.backgroundColor='#5D6B8D'" onmouseout="style.backgroundColor='#505D7A'" onclick="javascript:location.<span style="color: blue;">href='#'"> <a href="#"</span> class="menulink" onmouseover="style.color='#F0F0F0'" onmouseout="style.color='#E0E55C'">Link 3</a></td> </span></div><div style="text-align: left;"><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><td align="center" bgcolor="#505D7A" onmouseover="style.backgroundColor='#5D6B8D'" onmouseout="style.backgroundColor='#505D7A'" onclick="javascript:location.<span style="color: blue;">href='#'"><a href="#"</span> class="menulink" onmouseover="style.color='#F0F0F0'" onmouseout="style.color='#E0E55C'">Link 4</a></td> </tr> </table></font></span></div></div><br />
<div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Hasilnya menjadi:</span><br />
<style type="text/css">
.menulink{ text-decoration:none;color:#ffffff;font-size:13px;}
</style><span style="font-family: Arial,helvetica,sans-serif;"> <br />
<br />
<table border="2" bordercolor="#ffffff" cellpadding="" cellspacing="0" height="28" style="border-collapse: collapse; width: 620px;"><tbody>
<tr> <td align="center" bgcolor="#505d7a" onclick="javascript:location.href='#'" onmouseout="style.backgroundColor='#505D7A'" onmouseover="style.backgroundColor='#5D6B8D'"><a class="menulink" href="#" onmouseout="style.color='#E0E55C'" onmouseover="style.color='#f0f0f0'">Link 1</a> </td> <td align="center" bgcolor="#505d7a" onclick="javascript:location.href='#'" onmouseout="style.backgroundColor='#505D7A'" onmouseover="style.backgroundColor='#5D6B8D'"><a class="menulink" href="#" onmouseout="style.color='#E0E55C'" onmouseover="style.color='#f0f0f0'">Link 2</a></td> <td align="center" bgcolor="#505d7a" onclick="javascript:location.href='#'" onmouseout="style.backgroundColor='#505D7A'" onmouseover="style.backgroundColor='#5D6B8D'"><a class="menulink" href="#" onmouseout="style.color='#E0E55C'" onmouseover="style.color='#F0F0F0'">Link 3</a></td> <td align="center" bgcolor="#505d7a" onclick="javascript:location.href='#'" onmouseout="style.backgroundColor='#505D7A'" onmouseover="style.backgroundColor='#5D6B8D'"><a class="menulink" href="#" onmouseout="style.color='#E0E55C'" onmouseover="style.color='#F0F0F0'">Link 4</a></td> </tr>
</tbody></table></span><br />
<br />
<span style="font-size: small;">Anda dapat memberikan variasi warna dan pengaturan kode CSS lain agar terlihat lebih indah seperti: </span><br />
<style type="text/css">
.menulink{ text-decoration:none;color:#ffffff;font-size:13px;}
</style><span style="font-family: Arial,helvetica,sans-serif;"> <br />
<br />
<table border="2" bordercolor="#ffffff" cellpadding="" cellspacing="0" height="28" style="border-collapse: collapse; width: 620px;"><tbody>
<tr> <td align="center" bgcolor="#2ad02a" onclick="javascript:location.href='#'" onmouseout="style.backgroundColor='#2AD02A'" onmouseover="style.backgroundColor='#37FF37'"><a class="menulink" href="#" onmouseout="style.color='#000000'" onmouseover="style.color='#f0f0f0'">Link 1</a> </td> <td align="center" bgcolor="#c61a37" onclick="javascript:location.href='#'" onmouseout="style.backgroundColor='#C61A37'" onmouseover="style.backgroundColor='#F64D69'"><a class="menulink" href="#" onmouseout="style.color='#000000'" onmouseover="style.color='#f0f0f0'">Link 2</a></td> <td align="center" bgcolor="#a6c137" onclick="javascript:location.href='#'" onmouseout="style.backgroundColor='#A6C137'" onmouseover="style.backgroundColor='#CDEF45'"><a class="menulink" href="#" onmouseout="style.color='#000000'" onmouseover="style.color='#F0F0F0'">Link 3</a></td> <td align="center" bgcolor="#af3511" onclick="javascript:location.href='#'" onmouseout="style.backgroundColor='#AF3511'" onmouseover="style.backgroundColor='#EE4F1E'"><a class="menulink" href="#" onmouseout="style.color='#000000'" onmouseover="style.color='#F0F0F0'">Link 4</a></td> </tr>
</tbody></table></span><br />
<br />
<span style="font-size: small;">Berikut keterangan kode penting yang harus anda ganti: </span><br />
<blockquote style="font-family: Georgia,"Times New Roman",serif;"><span style="color: black; font-size: small;"><code><span style="color: red;">width="620" height="28"</span></code> /*Sesuaikan dengan ukuran lebar main-wrapper blog anda dan ubah juga tinggi menu tab sesuai selera anda. /*</span></blockquote></div><blockquote><div style="color: blue; font-family: Georgia,"Times New Roman",serif; text-align: justify;"><code><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">href='<span style="color: red;">#</span>'"> <a href="<span style="color: red;">#</span>"</span></code><span style="color: black;"> /*Tanda "<span style="color: red;">#</span>" ini anda ubah sesuai dengan url blog yang anda inginkan. /*</span></div></blockquote><div style="color: blue; font-family: Georgia,"Times New Roman",serif; text-align: justify;"><blockquote><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><span style="color: black;">Pengaturan warna saya rasa anda sudah mngerti, lihat saja kata <span style="color: red;">color </span>pada kode CSS. Jika anda ingin dengan mudah menentukan warna yang anda inginkan, saya sudah membuatkannya kode warna slider tab. Silakan check kode warna yang anda inginkan di <a href="http://oilink-webtools.blogspot.com/2011/01/kode-warna-html-lengkap.html" target="_blank" title="Kode Warna Lengkap HTML"><blink>sini</blink></a> atau pilihan fasilitas kode warna lainnya melalui label warna berdasarkan kategori di <a href="http://oilink-webtools.blogspot.com/search/label/HTML%20Color%20Codes" target="_blank" title="HTML Color Codes"><blink>sini</blink></a>. </span></span></blockquote><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><span style="color: black;">Demikian sharing tutorial <a href="http://oilink.blogspot.com/2011/01/cara-mudah-membuat-menu-navigasi.html" title="membuat menu navigasi horizontal blogger">cara mudah membuat menu navigasi horizontal</a> pada blogger.</span></span><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><span style="color: black;"> Ohya, apakah anda masih bingung mengapa judul postingan ini diganti dan dimana letak keajaiban menu navigasi horizontalnya? Coba anda hover atau sorot link menu pada tab navigasi, seolah-olah warna link tersebut menyala dan berubah warna setelah kita sentuh dengan mouse arrow kita. Mungkin ini hanya berlaku di postingan ini, semoga juga berlaku pada gadget blogger anda ketika mencobanya. Akhirnya <a href="http://oilink.blogspot.com/">misteri blogger pemula</a> mengenai tutorial <a href="http://oilink.blogspot.com/2011/01/cara-mudah-membuat-menu-navigasi.html">membuat menu navigasi horizontal</a> telah terpecahkan dengan segala keajaiban yang ada di sini. </span></span><img border="0" src="http://www.shoutmix.com/smileys/tongue.gif" /><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><span style="color: black;"> </span></span><br />
<br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><span style="color: black;">Selamat mencoba dan semoga anda puas dengan hasil yang anda buat. </span></span></div>Ihsanul Hudahttp://www.blogger.com/profile/00973343987877850614noreply@blogger.com13tag:blogger.com,1999:blog-8505861799181383189.post-34449055212020437392011-01-28T09:52:00.000-08:002011-01-28T19:46:59.437-08:00Cara Memenggal Artikel Blogger<div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Secara default, artikel atau postingan blogger ditampilkan secara keseluruhan di halaman homepage. Hal ini dapat mengganggu kenyamanan pembaca apabila artikel yang ditampilkan cukup panjang. Apalagi jika kita menampilkan jumlah postingan yang cukup banyak sekaligus di halaman homepage blog. Untuk mengatasinya kita dapat memotongnya, atau mempersingkatnya, atau lebih akrab dalam dunia blog dikatakan membuat read more blogger. Selain itu dengan <a href="http://oilink.blogspot.com/2011/01/cara-membuat-read-more-blogger.html">membuat read more pada blogger</a> ini akan membuat pembaca semakin penasaran karena belum selesai mereka membaca postingan anda tapi malah dipotong. Baiklah, simak saja langsung penjelasannya.</span><br />
<br />
<span style="font-size: small;">Caranya ikuti langkah berikut: <br />
1. Seperti biasa login ke account blogger, kemudian pilih menu <acronym title="Tata Letak">Design</acronym> > <acronym title="Edit HTML Blogger">Edit HTML</acronym>, jangan lupa untuk centang <acronym title="Checklist kotak kecil di samping tulisan ini">Expand Widget Templates</acronym> dan carilah kode </span>berwarna merah <span style="font-size: small;">berikut: </span><br />
<pre class="code" style="color: red;"><data:post.body/></pre>Biasanya kode tersebut dapat anda temukan tepat di bawah kode:<br />
<pre class="code"><div class='post-body entry-content'></pre>2. Setelah dapat, ganti hanya kode berwarna merah di atas sehingga menjadi seperti ini:<br />
<pre class="code" style="color: red;"><b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Read More...</a>
</b:if>
</pre>Berikut screenshotnya jika anda masih bingung:<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6xr9WREVgiZ-im8A0pFWGLtUUcq99d1zzm_eeozHWKuiNWZhQengCM6DtS_HffRQxFtMM01JdXwkG6WTL9mT0xHFkFasuc53khFN8a09uPI46-dymun10sobVNOvf_MBWFbZfmulyXpg/s1600/read+more+blogger.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="cara membuat read more blogger" border="0" height="173" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6xr9WREVgiZ-im8A0pFWGLtUUcq99d1zzm_eeozHWKuiNWZhQengCM6DtS_HffRQxFtMM01JdXwkG6WTL9mT0xHFkFasuc53khFN8a09uPI46-dymun10sobVNOvf_MBWFbZfmulyXpg/s320/read+more+blogger.JPG" title="membuat artikel selengkapnya di blogger" width="320" /></a></div></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Untuk tulisan <b>Read More...</b> dapat anda ubahsesuaikan sendiri, misalnya menjadi <b>Baca Selengkapnya</b>.</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">5.<acronym title="Simpan Template"> Save Template</acronym> hasil pengeditan.</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">6. Langkah selanjutnya setelah mengedit HTML, kemudian pilih menu <b>Setting </b>lalu pilih <b>Formatting.</b></span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">7. </span><span style="font-size: small;">Masukkan kode berikut</span><span style="font-size: small;"> pada kotak <b>Post Template</b>:</span><br />
<pre class="code"><span class="fullpost">
</span></pre><span style="font-size: small;">8. Klik <b>Save Settings</b>.</span><br />
<br />
<span style="font-size: small;">Terakhir adalah hal penting agar fungsi <a href="http://oilink.blogspot.com/search/label/Read%20More">read more blogger</a> dapat berjalan dengan baik yaitu pada saat anda akan mulai menulis artikel, letakkan paragraf yang akan tampil dengan menyisipkan kode <code><span class="fullpost"></code> pada paragraf yang akan dipotong dan kode <code></span></code> di akhir paragraf tersebut yang akan dipotong. Simpan hasil pengeditan dan lihat hasilnya. Sekarang artikel blog anda sudah dipenggal.</span></div>Ihsanul Hudahttp://www.blogger.com/profile/00973343987877850614noreply@blogger.com0tag:blogger.com,1999:blog-8505861799181383189.post-56389325268202590972011-01-27T19:45:00.000-08:002011-01-27T19:48:23.093-08:00Cara Menghilangkan Tanda Obeng Blogger<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikBre23cN5u2n-J-dOVqaiPPON2nDFjHVCcqJNepRpZVSb8d4fHOVh_6OcUr7QshhLdLmYalO4OnGeUUB3GvYUuRAvd2b4OvCEhoc6vkbPP9V-HpQf233unQRKeVnS4REjG9X32nurI5U/s1600/quick+edit.JPG" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="menghilangkan tanda obeng dan tang widget blogger" border="0" height="189" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikBre23cN5u2n-J-dOVqaiPPON2nDFjHVCcqJNepRpZVSb8d4fHOVh_6OcUr7QshhLdLmYalO4OnGeUUB3GvYUuRAvd2b4OvCEhoc6vkbPP9V-HpQf233unQRKeVnS4REjG9X32nurI5U/s320/quick+edit.JPG" title="cara menghilangkan tanda obeng atau tang di blogger" width="320" /></a></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Tanda obeng atau tang ini merupakan salah satu fasilitas yang diberikan oleh Blogger untuk mempercepat proses pengeditan. Dengan tersedianya tanda obeng atau tang yang muncul pada blog ini sebenarnya sangat berguna karena tidak semua pengeditan dapat dilakukan pada menu Edit HTML Blogger. Hal ini juga sebenarnya bukanlah masalah, karena tanda tersebut hanya akan muncul pada saat sedang login di account blog. Apabila sign out dari account, maka tanda itu hilang dan tidak akan muncul kembali. Mungkin bagi sebagian blogger hal ini tidak begitu mengganggu karena dengan adanya icon obeng dan tang justru memudahkan kita untuk mempercepat pengeditan tapi jika anda bersikeras tetap ingin menghilangkannya tidak jadi persoalan karena sekarang anda bisa ikuti langkah berikut ini untuk menghilangkan tanda obeng dan tang di blogger: </span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><br />
</div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Untuk <a href="http://oilink.blogspot.com/2011/01/cara-menghilangkan-tanda-obeng-blogger.html">menghilangkan tanda obeng dan tang</a> tersebut, maka ada beberapa cara yang akan saya jelaskan, yaitu:<br />
1. Dengan menghilangkan tanda centang pada setting posting blog yang disediakan Blogger. </span><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSO-yqnYOoXJn2BDh3YuPjIkry2clexRNiJNzAjLhlmZlK9KlFHaw6GCdiSJActJ0Gl2meURvZ4l-mtG6z-88jo3tq0MrN8e6kS4EwBBQvd9d0ysXh5BHnF9iXCK2k8JkbKSHgj4IoGJY/s1600/quick+edit+html.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="cara hilangkan tanda obeng blogger" border="0" height="115" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSO-yqnYOoXJn2BDh3YuPjIkry2clexRNiJNzAjLhlmZlK9KlFHaw6GCdiSJActJ0Gl2meURvZ4l-mtG6z-88jo3tq0MrN8e6kS4EwBBQvd9d0ysXh5BHnF9iXCK2k8JkbKSHgj4IoGJY/s320/quick+edit+html.JPG" title="hilangkan tanda obeng dan tang" width="320" /></a></div><span style="font-size: small;">Berikut petunjuknya: <br />
Log in account Blogger, lalu pilih <acronym title="Tata Letak">Design</acronym> > <acronym title="Elemen Halaman">Page Element</acronym>, kemudian klik <acronym title="Edit Widget">Edit</acronym> pada contoh kolom widget Blog Posts, seperti yang terlihat pada gambar di atas:</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNpQ9UuBFTcu9ya-mJmEqFb39u8AsosYFCzUePsSGuv9oUGLclET_0xMSTPhgdsrOcWEEE2BDihRMzWHOaABN0089NsWSIzLNSoMsjSMXOZX_uyMDyXIIFRERiSqXm-6Zo3mhn-S1dm18/s1600/show+quick+editing.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="show quick editing" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNpQ9UuBFTcu9ya-mJmEqFb39u8AsosYFCzUePsSGuv9oUGLclET_0xMSTPhgdsrOcWEEE2BDihRMzWHOaABN0089NsWSIzLNSoMsjSMXOZX_uyMDyXIIFRERiSqXm-6Zo3mhn-S1dm18/s320/show+quick+editing.JPG" width="303" /></a></div><span style="font-size: small;">Setelah Anda klik Edit, maka akan terbuka halaman baru dan hasilnya akan muncul seperti gambar di atas. Anda hanya perlu menghilangkan tanda centang pada menu <acronym title="Tunjukkan Pengeditan Cepat">Show Quick Editing</acronym>. Setelah Anda hilangkan tanda centang pada menu Tunjukkan Pengeditan Cepat, lalu simpan.<br />
<br />
Note: Cara ini kurang efektif karena jarang berhasil dan anda dapat gunakan cara lain untuk menghilangkan tanda ini secara permanen namun bisa dimunculkan kembali bila Anda menginginkannya.<br />
<br />
2. Memasukkan script atau kode html pada menu Edit HTML untuk menghilangkan tanda obeng atau tang blogger. Caranya adalah dengan mengikuti langkah-langkah sebagai berikut:<br />
<br />
Seperti biasa login ke account blogger, kemudian pilih menu <acronym title="Tata Letak">Design</acronym> > <acronym title="Edit HTML Blogger">Edit HTML</acronym>, dan carilah kode berikut <code>]]></b:skin></code>. Tambahkan kode berikut tepat diatas kode yang telah disebutkan tadi, setelah ditambahkan langsun <acronym title="Simpan Template Blogger">Save Template</acronym> dan lihatlah hasilnya.<br />
<pre class="code">.quickedit {display:none;}</pre>Note: Bila anda ingin menampilkan kembali tanda obeng dan tang tersebut pada blog, anda hanya perlu menghapus kode html diatas. </span></div><br />
<div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Lakukan langkah-langkah di atas dengan benar sesuai dengan petunjuk yang ada dan lihat hasilnya, kini tanda obeng atau tang dapat dihilangkan. Selamat mencoba.<br />
</span></div>Ihsanul Hudahttp://www.blogger.com/profile/00973343987877850614noreply@blogger.com4tag:blogger.com,1999:blog-8505861799181383189.post-84575146589633640002011-01-26T00:02:00.000-08:002011-01-26T00:46:54.673-08:00Tahun Copyright Berganti Otomatis<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje8vrk89US_eLR-l-upLGJSHNYli0mZvton8HtXZi9QPsXC-SQSSKRyNJHgyHvSduuI3HTjx-hEmgin_uJvTX3-BEGj9mGGRb8RscT5mCf0G2dgYu_3MpzZHmZWZ9XtQVLJ9z6JlZJy4Y/s1600/web+content+copyright.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="membuat tahun copyright blog berganti otomatis" border="0" height="219" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje8vrk89US_eLR-l-upLGJSHNYli0mZvton8HtXZi9QPsXC-SQSSKRyNJHgyHvSduuI3HTjx-hEmgin_uJvTX3-BEGj9mGGRb8RscT5mCf0G2dgYu_3MpzZHmZWZ9XtQVLJ9z6JlZJy4Y/s320/web+content+copyright.jpg" title="tahun copyright berganti otomatis" width="320" /></a></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Ketika membuat sebuah website atau juga blog, biasanya di bagian footer ditampilkan Copyright ©, disertai tahun pertama kali web tersebut mulai online sampai tahun saat sekarang. Memang keberadaan copyright di bagian footer ini sering diabaikan namun paling tidak kita sebagai pemilik blog sudah berusaha untuk melindungi hasil karya ciptaannya. Dalam dunia blog tentu kita tidak menginginkan apabila hasil kerja keras kita disalin kembali tanpa persetujuan dari kita. Dengan memasang copyright di bagian footer setidaknya kita mempunyai <a href="http://oilink.blogspot.com/search/label/Hak%20Cipta">hak atas kepemilikan konten blog</a>. Dan bagi siapa saja yang ingin memilikinya tentu harus meminta persetujuan dari pemiliknya. Bagi yang belum tau untuk <a href="http://oilink.blogspot.com/2011/01/tahun-copyright-berganti-otomatis.html">mengganti tahun copyright secara otomatis</a> pada tutorial sharing ini, mungkin setiap berganti tahun akan mengubahnya secara manual. Kalo seperti itu, meskipun setahun sekali tetap saja agak merepotkan. Padahal kalo bisa membuatnya secara otomatis kenapa tidak dicoba untuk membuatnya berganti sacara otomatis. </span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><br />
</div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Biasanya Copyright yang terpasang di bagian footer memiliki susunan seperti ini:</span></div><br />
<code><span style="font-size: small;">Copyright © </span>| <span style="font-size: small;">2010 Misteri Blogger Pemula</span></code><br />
<br />
<div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Angka 2010 menandakan blog tersebut mulai diterbitkan.</span><br />
<br />
<span style="font-size: small;">Susunan seperti di atas tidaklah mutlak, tetapi masih bisa dikreasikan dengan tahun pada saat sekarang. Sehingga bentuk tampilannya menjadi:</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><br />
</div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><code><span style="font-size: small;">Copyright © </span>| <span style="font-size: small;">2011 Misteri Blogger Pemula</span></code></div><br />
<div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Atau pula dikreasikan menjadi:</span><span style="font-size: small;"><br />
</span></div><br />
<div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><code><span style="font-size: small;">Copyright © </span>| <span style="font-size: small;">2010-2011 Misteri Blogger Pemula</span></code></div><br />
<div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Angka 2010 akan secara otomatis berganti seiring dengan pergantian tahun. Berikut ini script yang berfungsi untuk membuat tahun pada copyright menjadi berganti otomatis:</span><br />
<blockquote><span style="font-size: small;"> <script language="JavaScript"></span><br />
<span style="font-size: small;"> <!--</span><br />
<span style="font-size: small;"> today=new Date();</span><br />
<span style="font-size: small;"> y0=today.getFullYear();</span><br />
<span style="font-size: small;"> </script></span><br />
<span style="font-size: small;"> <center>Copyright © 2009-<script language="JavaScript"></span><br />
<span style="font-size: small;"> <!--- Hide from old browsers</span><br />
<span style="font-size: small;"> document.write(y0);</span><br />
<span style="font-size: small;"> // end hiding ---></span><br />
<span style="font-size: small;"> </script> <a href="http://oilink.blogspot.com"> Misteri Blogger Pemula </a></center> </span></blockquote></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Jika anda hendak membuatnya, masukkan script di atas di bagian footer blog anda atau gadget HTML/Javascript. Silakan ganti angka 2010 dengan tahun pertama kali website atau blog dibuat, sertakan nama dan alamat URL web atau blog anda.<br />
</span></div>Ihsanul Hudahttp://www.blogger.com/profile/00973343987877850614noreply@blogger.com4tag:blogger.com,1999:blog-8505861799181383189.post-72865536761842312962011-01-22T19:08:00.000-08:002011-01-22T19:33:23.507-08:00Desktop Computer Template<div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Desktop Computer Template adalah template blogger gratis yang didesain dengan tema windows vista ultimate. Bagi anda pecinta windows vista ultimate maka template ini adalah pilihan tepat untuk anda gunakan pada blog anda. </span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><br />
</div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><acronym title="Fitur Template"><span style="font-size: small;">Screenshot </span></acronym></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><img alt="free template" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNRTZG7KUmaY1cqnEP0HqVjwaczzAErHIrLpvoj_8dL3HapMVy6ULXyNY314ncLmq5aheAYq_QeyzDhYtUTQKLuCeWqa_RwZahzhgZElkhlbod-yPcZrRMubvcyHgEov4O-k41RHo_Htw/s400/desktop+computer.JPG" style="border: 3px solid rgb(173, 173, 173);" title="desktop computer template for free" width="400" /></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"></div><br />
<div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><acronym title="Fitur Template"><span style="font-size: small;">Live Demo</span></acronym><br />
<br />
<div class="view_demo"><a href="http://demo-desktopcomputer.blogspot.com/" target="_blank">Live Demo Template</a>Want to see it in action?</div><br />
<span style="font-size: small;">Berikut beberapa fitur dan spesifikasi template yang akan anda dapatkan: </span><br />
<br />
<div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><div style="color: #351c75;"><span style="font-size: small;"><span style="color: #351c75;">1. Two Columns Layout Template</span></span></div><br />
<div style="color: #351c75;"><span style="font-size: small;"><span style="color: #351c75;">2. Dark Colour Template</span><br />
<span style="color: black;"> Tidak perlu dijelaskan, anda akan merasa nyaman dengan tampilan template yang tidak terlalu mencolok di mata. Dengan warnanya yang gelap akan membuat mata anda sejuk. </span></span></div><br />
<div style="color: #351c75;"><span style="font-size: small;">3. Highlight Subscribe Button and Easy Add menu Links </span></div></div></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJEE7DHYv7ox9fecLT81NyrWED2DXKjSPukFFbPC3ghnlHTFo6tspaRCWVv7wLMiZ_5ClRy4LitDZrHU5rlB8ODIBFUngEbya1qIbjhtzjH4cDoUZhhruf4rNbVZYDOcRTAp7Q5ZgDv6U/s1600/highlight+subscribe+button.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="43" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJEE7DHYv7ox9fecLT81NyrWED2DXKjSPukFFbPC3ghnlHTFo6tspaRCWVv7wLMiZ_5ClRy4LitDZrHU5rlB8ODIBFUngEbya1qIbjhtzjH4cDoUZhhruf4rNbVZYDOcRTAp7Q5ZgDv6U/s320/highlight+subscribe+button.JPG" width="320" /></a></div><br />
<span style="font-size: small;">Tombol subscribe yang menyala ketika mouse diarahkan membuat pengunjung penasaran untuk mengkliknya dan juga easy add menu links yang sangat mudah untuk ditambahkan memiliki fungsi yang hampir sama dengan tombol subscribe tersebut. Untuk menambahkan link hanya dengan mengedit gadget bottom navigation menu pada page element blogger anda.<span style="color: red;"> </span><span style="color: red;"> </span></span><br />
<br />
<div style="color: #351c75;"><span style="font-size: small;">4. Auto Read More Function With Thumbnail</span><br />
<div style="color: black;">Anda tidak perlu lagi khawatir dan direpotkan dengan read more with thumbnail yang bermasalah dengan page statis.</div></div><br />
<div style="color: #351c75;"><span style="font-size: small;">5. Tab Menu Icons </span></div></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF5beEblVCvWkAa6lX0VS-ZKLsdum0ROA7pAVUeoUikaLY-CzO_LCz162waV55omLfP5uXI_4PW49V5F7_NcsHrOvoHY6dFY04TkbMC-gdE_uc_InIAeTxAkw5-On0RzUsB6O9XCysoYc/s1600/tab+menu+icons.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="110" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF5beEblVCvWkAa6lX0VS-ZKLsdum0ROA7pAVUeoUikaLY-CzO_LCz162waV55omLfP5uXI_4PW49V5F7_NcsHrOvoHY6dFY04TkbMC-gdE_uc_InIAeTxAkw5-On0RzUsB6O9XCysoYc/s320/tab+menu+icons.JPG" width="320" /></a></div><br />
<span style="font-size: small;">Icon cobalts dioleskan pada tampilan desktop windows vista ultimate membuat template ini terasa semakin manis. </span><br />
<br />
<div style="color: #351c75;"><span style="font-size: small;">6. Time Reload </span></div></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiohLoF82CcQB1JEh0dpWjsmKSgBhUkUXHRF7kM2rTLsUAlOA1qk1xVTgDnNXMTBF78YLjS6rmu1lIxK7vBeByV0hf5aHB1mkV9rw1jM6LP_qU8cFqzFu7f36tzZra8Cska6hyt4jAF0Bo/s1600/reload+time+clock.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiohLoF82CcQB1JEh0dpWjsmKSgBhUkUXHRF7kM2rTLsUAlOA1qk1xVTgDnNXMTBF78YLjS6rmu1lIxK7vBeByV0hf5aHB1mkV9rw1jM6LP_qU8cFqzFu7f36tzZra8Cska6hyt4jAF0Bo/s1600/reload+time+clock.JPG" /></a></div><br />
<span style="font-size: small;">Waktu yang akan ditampilkan pada bar ketika page direload ketika itu pula, jadi anda ataupun pengunjung dapat mengetahui pada jam berapa page blog tersebut diakses. </span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><br />
</div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Untuk mendownload Desktop Computer Template secara gratis, untuk sementara saya telah simpan file ini di Ziddu file hosting. Silakan anda dapatkan template ini dengan mendownload melalui link ini <a href="http://www.ziddu.com/download/13508827/DesktopComputer.rar.html" target="_blank">http://www.ziddu.com/download/13508827/DesktopComputer.rar.html</a>. Dan Hotfile.com one click file hosting di link <a href="http://hotfile.com/dl/98828595/6f3e643/Desktop_Computer.rar.html" target="_blank">http://hotfile.com/dl/98828595/6f3e643/Desktop_Computer.rar.html</a> ini.</span></div>Ihsanul Hudahttp://www.blogger.com/profile/00973343987877850614noreply@blogger.com15tag:blogger.com,1999:blog-8505861799181383189.post-43828009118679019552011-01-20T10:14:00.000-08:002011-01-20T16:09:13.539-08:00Disable Seleksi Mouse<div style="text-align: right;"><div style="text-align: justify;"><span style="font-size: small;"><span style="font-family: Georgia,"Times New Roman",serif;">Masih berlanjut menangani permasalahan hak cipta, yang baru saja dibahas pada postingan sebelumnya tentang tutorial memasukkan script <a href="http://oilink.blogspot.com/2011/01/disable-klik-kanan-blog.html" style="color: red;">disable klik kanan blog</a>. Sekarang kita beralih meluncur ke tutorial menghilangkan fungsi seleksi mouse computer pada halaman web. Mendisable (biar agak bule sedikit) atau menghilangkan fungsi seleksi mouse bisa jadi merupakan cara yang paling efektif untuk melindungi isi blog dari copy paste si Plagiator ganteng itu. </span></span><br />
<br />
<span style="font-size: small;"><span style="font-family: Georgia,"Times New Roman",serif;">Memang artikel yang disalin sembarangan dalam arti sama persis akan menjadi duplikat konten yang nantinya akan dianggap remeh dan dibenci oleh google. Google setelah mengeluarkan kebijakan barunya tidak lagi memerhatikan pagerank atau backlink yang tinggi karena pagerank atau backlink yang rendahpun bisa saja memiliki traffic yang lebih tinggi. Untuk mendapatkan traffic yang tinggi dan mematuhi peraturan baru google tersebut bukanlah cara yang instant, dan tentu kita harus kreatif membuat konten yang unik. Bagaimana bisa membuat konten yang unik apabila konten yang kita miliki harus disalin ulang sama persis oleh pihak lain sehingga dianggap duplikat konten dan dimarahi google? Terlebih lagi konten yang disalin ulang tersebut tidak memberikan backlink sebagai sumber referensi konten. Saya tidak begitu menganjurkan penggunaan kode ini karena yang saya tau pada umumnya dari pengalaman blogwalking melihat blog yang menggunakan kode ini terlihat sepi juga mendapatkan hujatan dari pengunjung meski tidak semua, tetapi saya juga pernah terdampar di blog yang menggunakan kode antiplagiator ini memiliki traffic cukup tinggi dilihat dari alexa dan hitstatsnya. Apapun resikonya nanti tetap pada sikap dan keyakinan anda serta kembali pada keputusan anda menggunakan script ini.</span></span><br />
<br />
<span style="font-size: small;"><span style="font-family: Georgia,"Times New Roman",serif;">Baiklah, berikut praktek sederhana menonaktifkan seleksi mouse pada halaman web blog:</span></span><br />
<span style="font-size: small;"><span style="font-family: Georgia,"Times New Roman",serif;">1. Masuk ke dalam kustomisasi blog lalu klik tab <b>Design </b>> <b>Edit HTML</b>.</span></span><br />
<span style="font-size: small;"><span style="font-family: Georgia,"Times New Roman",serif;">2. Temukan bagian kode <code><body></code>.</span></span></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWX65sNyrohFTwMHJkAHDh3FLXDt_cM_UyamIlj1K0Tc1fa413LRIrYeng3B8z9-NxPkwc9EKmusRJRG7hIbxDq8CHxFDvY0ldOqW-UAJQyuukSF1YTh1uGOVR2pdW6JmFjEX9OQ9jtAs/s1600/Disable+seleksi+mouse.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="66" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWX65sNyrohFTwMHJkAHDh3FLXDt_cM_UyamIlj1K0Tc1fa413LRIrYeng3B8z9-NxPkwc9EKmusRJRG7hIbxDq8CHxFDvY0ldOqW-UAJQyuukSF1YTh1uGOVR2pdW6JmFjEX9OQ9jtAs/s400/Disable+seleksi+mouse.JPG" width="400" /></a></div><div style="text-align: justify;"><span style="font-size: small;"><span style="font-family: Georgia,"Times New Roman",serif;">3. Ubah kode tersebut menjadi:</span></span><br />
<span style="font-size: small;"><pre class="code"><span style="font-family: Georgia,"Times New Roman",serif;"><body onmousedown=”return false” oncontextmenu=”return false” onselectstart=”return false” ></span></pre><span style="font-size: small;"><span style="font-family: Georgia,"Times New Roman",serif;">4. Save template dan lihat hasilnya pada halaman blog anda.</span></span><br style="font-family: Georgia,"Times New Roman",serif;" /><span style="font-size: small;"><span style="font-family: Georgia,"Times New Roman",serif;">5. Selamat mencoba.</span></span> </span></div></div>Ihsanul Hudahttp://www.blogger.com/profile/00973343987877850614noreply@blogger.com3tag:blogger.com,1999:blog-8505861799181383189.post-63270033446666856772011-01-20T09:11:00.000-08:002011-01-20T10:34:03.155-08:00Disable Klik Kanan Blog<div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Bicara mengenai hak cipta, tentu anda tidak ingin apabila isi blog anda disalin habis-habisan begitu saja sembarangan oleh pihak lain apalagi tidak mencantumkan referensi artikel tersebut. Bagaimana cara mencegah atau setidaknya mempersulit agar hal ini tidak terjadi? Salah satu cara melakukan copy paste artikel web adalah dengan menggunakan klik kanan mouse lalu pilih copy. </span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcSwds6RnVsftmV4IJ1Pi622UMcSWNPt6JgBj0qMd0GOTpyfvCRmfS2vZ5R07k0rKvBxQ1QXx0yOtPdge4LMCghqBwtczo7Aqk6VT-Z0WY5cfhzdCk5rg9uW-OhHCLsgQ6gQjIHUxE3Uo/s1600/disable+klik+kanan.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="110" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcSwds6RnVsftmV4IJ1Pi622UMcSWNPt6JgBj0qMd0GOTpyfvCRmfS2vZ5R07k0rKvBxQ1QXx0yOtPdge4LMCghqBwtczo7Aqk6VT-Z0WY5cfhzdCk5rg9uW-OhHCLsgQ6gQjIHUxE3Uo/s320/disable+klik+kanan.JPG" width="320" /></a></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Anda dapat mencegahnya dengan menggunakan script berikut:<br />
<pre class="code"><script>
var message="<span style="color: red;">Maaf, klik kanan tidak diperbolehkan!</span>";
///////////////////////////////////
function clickIE4(){if (event.button==2){alert(message);return false;}}
function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message);return false;}}}
if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;}
else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;}
document.oncontextmenu=new Function("alert(message);return false")
</script></pre>Masukkan script tersebut ke dalam gadget HTML/Javascript blog anda. Kemudian periksa halaman blog anda dan anda akan melihat kotak dialog pesan yang muncul ketika melakukan klik kanan mouse. Pesan tersebut dapat anda ubah sesuaikan sendiri dengan mengganti kalimat yang ditandai warna merah pada script di atas. </span><br />
<br />
<span style="font-size: small;">Script ini bukan satu-satunya cara yang handal untuk mencegah copy paste karena kita masih bisa melakukannya dengan hanya meminta bantuan keyboard untuk menekan tombol <code>ctrl + c</code> atau pilih menu <code>edit > copy</code> pada menu browser Mozilla anda. Selamat mencoba.</span></div>Ihsanul Hudahttp://www.blogger.com/profile/00973343987877850614noreply@blogger.com7tag:blogger.com,1999:blog-8505861799181383189.post-20320210979041177362011-01-18T08:19:00.000-08:002011-01-19T08:48:11.283-08:00Navigasi Breadcrumb<div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Dengan menggunakan navigasi breadcrump pada blog biasanya akan muncul menu tambahan di bagian atas posting blog. Menu tersebut akan ditampilkan dengan format:</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"><br />
<span style="color: red;"> Browse >> Home >> [Nama Label] >> Judul Posting </span></span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><br />
</div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Berikut screenshotnya:</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvYVnuQHmOIrJY7IOo7CdLAITDrtb8yKrhIP-5PckWQ0CHes4tY7hrcUVnblfhi5QlJkF_ah0juVZM6ibepDp2aOYpIjdOOrYDhy_NoZQTOSDcXGy2GJKI9vHCPiAxypoQVSDu-rtxe4g/s1600/navigasi+breadcrump.JPG" title="cara membuat navigasi breadcrumb blogger"><img border="0" height="93" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvYVnuQHmOIrJY7IOo7CdLAITDrtb8yKrhIP-5PckWQ0CHes4tY7hrcUVnblfhi5QlJkF_ah0juVZM6ibepDp2aOYpIjdOOrYDhy_NoZQTOSDcXGy2GJKI9vHCPiAxypoQVSDu-rtxe4g/s400/navigasi+breadcrump.JPG" width="400" /></a></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><br />
</div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Atau lihat saja apa yang ada di atas judul postingan blog ini. Lalu, buat apa kegunaannya? Selain memudahkan navigasi, ada mitos bahwa navigasi breadcrump ini juga dipercaya memudahkan search engine untuk mengindeks posting blog anda lho. Bagaimana itu bisa terjadi? Mari kita pelajari sebentar, dan coba perhatikan tulisan yang ditampilkan. Bukankah tulisan tersebut yang lebih dulu tercrawl? Lihat juga tulisannya, sama dengan judul. Selain itu, navigasi ini membuat postingan bagian awal berserak keyword. Bukankah baik untuk teknik top serp google search? Memang, ini bukan satu-satunya cara yang bisa diandalkan di halaman pertama google, tapi ini pasti ada sedikit pengaruhnya untuk kebaikan blog anda, juga akan terlihat lebih rapi kelihatannya dengan baris susunan navigasi ini. </span><br />
<br />
<span style="font-size: small;">Bagaimana? Mau ya pake navigasi breadcrumb yang imut ini. </span><img border="0" src="http://www.shoutmix.com/smileys/tongue.gif" /></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><br />
</div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Berikut langkah-langkah yang harus anda ikuti untuk membuatnya:<br />
1. Seperti biasa masuk ke dalam kustomisasi blog lalu klik tab Design (Tata Letak) > Edit HTML.<br />
2. Cari bagian <span style="color: red;"><code>]]></b:skin></code></span>, kemudian tambahkan kode di bawah ini di atasnya:<br />
</span></div><blockquote><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">.breadcrumbs{</span><br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">padding:5px 5px 5px 0;</span><br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">margin:0;font-size:95%;</span><br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">line-height:1.4em;</span><br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">border-bottom:4px double #cadaef;</span><br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">}</span></blockquote><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">3. Cari bagian <span style="color: red;"><div class=’post hentry’></span> atau <span style="color: red;"><div class=’post hentry uncustomized-post-template’></span>, kemudian tambahkan kode berikut di atasnya:<br />
</span></div><blockquote><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><b:if cond='data:blog.homepageUrl == data:blog.url'></span><br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><b:else/></span><br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><b:if cond='data:blog.pageType == &quot;item&quot;'></span><br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><div class='breadcrumbs'></span><br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><span style="color: red;">Browse </span>&#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187;</span><br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'></span><br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><a expr:href='data:label.url' rel='tag'><data:label.name/></a></span><br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if></span><br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"></b:loop></span><br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"></b:if> &#187; <data:post.title/></span><br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"></div></span><br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"></b:if></span><br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"></b:if></span></blockquote><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Note: untuk kata <span style="color: red;">Browse </span>dapat anda sesuaikan sendiri, contoh <span style="color: red;">Anda berada di >> <span style="color: black;">atau <span style="color: red;">You are here >>.</span></span></span> </span><br />
<span style="font-size: small;">4. Simpan template dan nikmati hasilnya. Selamat mencoba.<br />
</span></div>Ihsanul Hudahttp://www.blogger.com/profile/00973343987877850614noreply@blogger.com4tag:blogger.com,1999:blog-8505861799181383189.post-40479558026676662102011-01-16T19:53:00.000-08:002011-01-16T23:15:15.271-08:00Template Generator<div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Template Generator merupakan layanan pembuatan template yang dilakukan dengan langkah mudah, seperti wizard. Dengan layanan ini desain template akan terasa lebih mudah dan cepat. Hanya berbekal Blogger Template Generator dibawah ini kita sudah bisa membuat template dinamis secara instan tanpa harus menguasai bahasa pemograman seperti HTML, XML dan CSS. Disini yang kita butuhkan hanya sedikit kreatifitas saja, selebihnya imajinasi kita sendiri yang menentukan hasil akhir dari desain template. Sebenarnya saya tidak terlalu merekomendasikan penggunaan template generator. Selain hasil desain kurang begitu bagus dan pastinya diperlukan pengeditan ulang. Namun, untuk mengobati rasa penasaran anda, perlu kiranya saya berikan contoh praktek pembuatan template dengan template generator ini. </span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><br />
</div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><b><span style="font-size: small;">1. Praktek menggunakan Template Generator </span><span style="font-size: small;">dengan Pimp My Profile</span></b><span style="font-size: small;"><br />
</span></div><span style="font-size: small;"></span><br />
<ul style="font-family: Georgia,"Times New Roman",serif;"><li><span style="font-size: small;">Kunjungi alamat URL situs <b>Pimp My Profile</b> di</span><span style="font-size: small;"> <a href="http://www.pimp-my-profile.com/generators/blogger.php" target="_blank">http://www.pimp-my-profile.com/generators/blogger.php</a></span>.<span style="font-size: small;"> </span></li>
</ul><div style="text-align: center;"><span style="font-size: small;"> </span><img border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrxc6hZlNgc3Ir1E0Ph3kpd-_-rBGCs0FzUGI3W-STCwS7xxXU725ht9ig2hfWryk3fpw9aDNTIH6GafPZLV841i60aWOge291nRGp2WPB9So05Gkabp8RjiaF80k1RAqQn4snOVKSgEk/s320/pimp+my+profile.JPG" width="320" /></div><ul style="font-family: Georgia,"Times New Roman",serif;"><li><span style="font-size: small;">Klik menu <b>Blogger Editor</b> pada bagian Blogger</span></li>
</ul><div style="text-align: center;"><span style="font-size: small;"> </span><img border="0" height="241" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicnkc2bRMeJqVgrqFOZR7yqBqVtysxQgpIXbR4m5dUvEIPRJa3r_bOxClZbDORRWuuGQWLCW5sJ8BCm_SsLPFwdCJgga-r7uZR3bOBjRA6MY7U5gYMWTq_H_iNvBHrNYM5qUZilGfcopI/s320/Blogger+Editor.JPG" width="320" /></div><ul style="font-family: Georgia,"Times New Roman",serif;"><li><span style="font-size: small;">Maka akan muncul ucapan Welcome, lalu klik link <b>Start </b>di bagian bawah.</span></li>
</ul><div style="text-align: center;"><span style="font-size: small;"> </span><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjifbWGPwGanlndRQHLreDeonW0nncCvpOqWBPKm2NeS_9CUuXm-uTYRIs1HYK4zI5Yd21Tl20A4zRx6M7MxRQAd44ERW8wBzg1H6aHWH6kC4vcFrimbc4j1lAOy1H70n75avchcT__K3Y/s320/start+pimp+my+profile.JPG" width="320" /></div><ul style="font-family: Georgia,"Times New Roman",serif;"><li><span style="font-size: small;">Mulai dari pengaturan Background, anda dapat menentukan warna dan gambar background yang akan digunakan.</span></li>
<li><span style="font-size: small;">Lakukan langkah selanjutnya dengan menentukan <b>Tables</b>, <b>Text/Headings</b>, <b>Scrollbars</b>, <b>Graphics</b>, dan akhirnya <b>Finish</b>. Akhiri dengan mengklik tombol “<b>Generate my Code!</b>”.</span></li>
<li><span style="font-size: small;">Salin kode dan masukkan kode tersebut ke dalam template Blogger. Caranya, seperti biasa masuk ke bagian kustomisasi blog, klik tab <b>Design </b>(<b>Tata Letak</b>) > <b>Edit HTML</b>. Hapus semua kode template lama lalu paste kode baru Template Generator.</span></li>
</ul><div style="text-align: center;"><span style="font-size: small;"> </span><img border="0" height="217" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqUG7ke63dpy0Yz7s92tYMZTILJfGnTCVEr2nJZi12LfX60-36BZmCxVk4ms5btCk9SSd3awivT6HXT9XKGX_n_s7O6L57AANUi7i5whn-zFTBEtES_WfE_d_Va0XMeMuBeW5PHnjn8lA/s320/Copy+Template+Generate+my+Code%2521.JPG" width="320" /></div><ul style="font-family: Georgia,"Times New Roman",serif;"><li><span style="font-size: small;"><b>Simpan </b>dan lihat hasilnya pada halaman blog anda.</span></li>
</ul><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"> Selain menggunakan layanan Template Generator di atas, sebagai alternative gunakan layanan lain di bawah ini:<br />
<br />
<b> 2. <a href="http://psyc.horm.org/#PsycHo%21" target="_blank">PsycHo - psychogenesis</a></b><br />
<br />
Melalui situs ini anda dapat merancang blogger template sendiri mulai dari header hingga footer. Tentu anda tidak diharuskan memiliki pengetahuan lebih tetang HTML, cukup mengaturnya langsung melalui beberapa setting yang tesedia. Seperti yang dikatakan pembuatnya, waktu yang dihabiskan untuk mendesain sebuah template hanya kurang dari 10 menit.<br />
<br />
<b> 3. <a href="http://www.pagecolumn.com/1_col_generator.htm" target="_blank">Page Column Layout Generator</a></b><br />
<br />
Generator ini menyediakan berbagai macam pililhan column, mulai dari generator untuk template 1 column bahkan sampai 5 columns juga tersedia. Beberapa fitur lain yang disediakan diantaranya:</span><br />
<ul><li style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;"> Liquid design, no tables, no javascript, pure layers and css.</span></li>
<li style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;"> Visual layout and backgroud color design, WYSIWYG</span></li>
<li style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;"> Cross browser compatibility</span></li>
<li><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"> Compact CSS code, reduce 25% of length</span></li>
</ul><span style="font-size: small;"><b> 4. <a href="http://e-infotainment.com/trixapps/trixtg/" target="_blank">Trix Blogspot Template Generator</a></b><a href="http://e-infotainment.com/trixapps/trixtg/"> </a></span><br />
<br />
<span style="font-size: small;">TrixTG v1 merupakan sebuah tool untuk membantu desain template Blogspot. Hasilnya sama saja tidak jauh berbeda dengan template generator lainnya dan tidak sebagus yang diharapkan, tetapi fungsi-fungsi atau layanan yang disediakan oleh generator template ini cukup baik.<br />
<br />
Hanya ini saja Template Generator yang saya ketahui, semoga hasilnya memuaskan ya dan selamat mengutak atik template. <br />
</span></div>Ihsanul Hudahttp://www.blogger.com/profile/00973343987877850614noreply@blogger.com7tag:blogger.com,1999:blog-8505861799181383189.post-29342768698048290042011-01-16T01:40:00.000-08:002011-01-19T15:58:13.156-08:00Widget Recent Posts Blogger<div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihupk47fIhCKi0TwY85cjMssuhiRY-QDbDitgkcBtH8bkCw0oTgHiZaDMiBvDnnjvMJUibNpOfjVRoKNDjRaQbV6Re_jTZRHlSNB1sxOQwSBAvIgrCUmqCW1wZHhDb9sRcP6vgdR28ueA/s1600/recent+posts.JPG" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihupk47fIhCKi0TwY85cjMssuhiRY-QDbDitgkcBtH8bkCw0oTgHiZaDMiBvDnnjvMJUibNpOfjVRoKNDjRaQbV6Re_jTZRHlSNB1sxOQwSBAvIgrCUmqCW1wZHhDb9sRcP6vgdR28ueA/s320/recent+posts.JPG" width="279" /></a></div><span style="font-size: small;">Jika widget ini digunakan atau ditempatkan di halaman utama blogger, menurut saya kurang efektif karena blog posts pada halaman utama tersebut sudah berderet link-link postingan blogger anda (recent posts). Alangkah baiknya jika penggunaan widget recent posts ini ditempatkan pada halaman postingan blogger anda. Untuk tricknya agar dapat disetting penempatan widget di halaman yang anda tuju dapat anda dapatkan di <a href="http://oilink.blogspot.com/2011/01/menampilkan-widget-pada-halaman.html" target="_blank">sini</a>. Jadi tujuannya adalah agar pengunjung dapat melihat kembali postingan apa yang terdapat di homepage blog anda dan dapat dilihat kembali di sidebar postingan yang sedang dibaca pengunjung. Ya lumayanlah untuk meningkatkan pageviews blogger anda ketika pengunjung tersebut telah selesai membaca dan ingin beralih ke postingan yang telah tersedia di sidebar blog anda. Bukankah asyik jika pengunjung berlama-lama di blog anda dan ini tentunya dapat meningkatkan alexa ranking juga lho.</span><br />
<br />
<div class="view_demo"><a href="http://demo-oilink.blogspot.com/" target="_blank">Live Demo</a>Klik untuk melihat demo langsung Widget Recent Posts</div><span style="font-size: small;"> <br />
Langkah selanjutnya anda hanya tinggal copas kode berikut dan masukkan pada halaman gadget javascript blogger anda:</span><br />
<blockquote><div style="text-align: left;"><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><script language="JavaScript"></span><span style="font-size: small;"><br style="font-family: Georgia,"Times New Roman",serif;" /></span><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">imgr = new Array();</span><span style="font-size: small;"><br style="font-family: Georgia,"Times New Roman",serif;" /></span><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfu3w7ddiISaSNQj-P9XAC9Rnc7qstT1Q0e7UZzWn2jg3wrRcGea1BYaFEGes2VNuWGRNzPd-HqhkUKM_sV4Xdj1Z4eFIOGqGgIbUfrIAeWPoZx11UqcPrJRjttWOGJsiC-wGlwSKSnjbH/s400/feedreader_2.jpg";</span><span style="font-size: small;"><br style="font-family: Georgia,"Times New Roman",serif;" /></span><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfu3w7ddiISaSNQj-P9XAC9Rnc7qstT1Q0e7UZzWn2jg3wrRcGea1BYaFEGes2VNuWGRNzPd-HqhkUKM_sV4Xdj1Z4eFIOGqGgIbUfrIAeWPoZx11UqcPrJRjttWOGJsiC-wGlwSKSnjbH/s400/feedreader_2.jpg";</span><span style="font-size: small;"><br style="font-family: Georgia,"Times New Roman",serif;" /></span><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfu3w7ddiISaSNQj-P9XAC9Rnc7qstT1Q0e7UZzWn2jg3wrRcGea1BYaFEGes2VNuWGRNzPd-HqhkUKM_sV4Xdj1Z4eFIOGqGgIbUfrIAeWPoZx11UqcPrJRjttWOGJsiC-wGlwSKSnjbH/s400/feedreader_2.jpg";</span><span style="font-size: small;"><br style="font-family: Georgia,"Times New Roman",serif;" /></span><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfu3w7ddiISaSNQj-P9XAC9Rnc7qstT1Q0e7UZzWn2jg3wrRcGea1BYaFEGes2VNuWGRNzPd-HqhkUKM_sV4Xdj1Z4eFIOGqGgIbUfrIAeWPoZx11UqcPrJRjttWOGJsiC-wGlwSKSnjbH/s400/feedreader_2.jpg";</span><span style="font-size: small;"><br style="font-family: Georgia,"Times New Roman",serif;" /></span><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfu3w7ddiISaSNQj-P9XAC9Rnc7qstT1Q0e7UZzWn2jg3wrRcGea1BYaFEGes2VNuWGRNzPd-HqhkUKM_sV4Xdj1Z4eFIOGqGgIbUfrIAeWPoZx11UqcPrJRjttWOGJsiC-wGlwSKSnjbH/s400/feedreader_2.jpg";</span><span style="font-size: small;"><br style="font-family: Georgia,"Times New Roman",serif;" /></span><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">showRandomImg = true;</span><span style="font-size: small;"><br style="font-family: Georgia,"Times New Roman",serif;" /></span><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">boxwidth = 298;</span><span style="font-size: small;"><br style="font-family: Georgia,"Times New Roman",serif;" /></span><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">cellspacing = 8;</span><span style="font-size: small;"><br style="font-family: Georgia,"Times New Roman",serif;" /></span><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">borderColor = "#ffffff";</span><span style="font-size: small;"><br style="font-family: Georgia,"Times New Roman",serif;" /></span><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">bgTD = "#000000";</span><span style="font-size: small;"><br style="font-family: Georgia,"Times New Roman",serif;" /></span><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">thumbwidth = 40;</span><span style="font-size: small;"><br style="font-family: Georgia,"Times New Roman",serif;" /></span><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">thumbheight = 40;</span><span style="font-size: small;"><br style="font-family: Georgia,"Times New Roman",serif;" /></span><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">fontsize = 12;</span><span style="font-size: small;"><br style="font-family: Georgia,"Times New Roman",serif;" /></span><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">acolor = "#666";</span><span style="font-size: small;"><br style="font-family: Georgia,"Times New Roman",serif;" /></span><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">aBold = true;</span><span style="font-size: small;"><br style="font-family: Georgia,"Times New Roman",serif;" /></span><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">icon = " ";</span><span style="font-size: small;"><br style="font-family: Georgia,"Times New Roman",serif;" /></span><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">text = "comments";</span><span style="font-size: small;"><br style="font-family: Georgia,"Times New Roman",serif;" /></span><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">showPostDate = false;</span><span style="font-size: small;"><br style="font-family: Georgia,"Times New Roman",serif;" /></span><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">summaryPost = 40;</span><span style="font-size: small;"><br style="font-family: Georgia,"Times New Roman",serif;" /></span><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">summaryFontsize = 10;</span><span style="font-size: small;"><br style="font-family: Georgia,"Times New Roman",serif;" /></span><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">summaryColor = "#666";</span><span style="font-size: small;"><br style="font-family: Georgia,"Times New Roman",serif;" /></span><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">icon2 = " ";</span><span style="font-size: small;"><br style="font-family: Georgia,"Times New Roman",serif;" /></span><span style="color: blue; font-family: Georgia,"Times New Roman",serif; font-size: small;">numposts = 5;</span><span style="font-size: small;"><br style="font-family: Georgia,"Times New Roman",serif;" /></span><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">home_page = "<span style="color: red;">http://oilink.blogspot.com/</span>";</span><span style="font-size: small;"><br style="font-family: Georgia,"Times New Roman",serif;" /></span><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"></script></span><span style="font-size: small;"><br style="font-family: Georgia,"Times New Roman",serif;" /></span><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><script src="http://recentpostoilnk.googlecode.com/files/recentpost.js" type="text/javascript"></script></span></div></blockquote><span style="font-size: small;">Silakan ganti url blog yang ditandai dengan warna merah dengan url blog anda, dan untuk jumlah post widgetnya silakan ganti jumlahnya sesuka anda dengan mengubah angka 5 pada kode "</span><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><span style="color: blue;">numposts = 5;</span>"</span><span style="font-size: small;">. Silakan berkreasi sendiri dengan mengganti opsi ukuran, warna, dan lainnya pada kode css sebelumnya. Selamat mencoba kawan.<br style="font-family: Georgia,"Times New Roman",serif;" /> </span></div>Ihsanul Hudahttp://www.blogger.com/profile/00973343987877850614noreply@blogger.com2tag:blogger.com,1999:blog-8505861799181383189.post-2410119588957611992011-01-16T00:55:00.000-08:002011-01-26T00:46:54.673-08:00Menampilkan Widget Pada Halaman Tertentu<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNwiFjC1_C-QeeSztZIDtRDMmqrj6VPT9KudkNT3ItZyv3o3GK1xiuuBzBPmZeeILh9kWPddbYQ9t8_tPWLHARgaoXf-pMyItVzbG60_XXwIuQlEYTJcZdlcPAVR6PK3yW6vZPM_AvMjQ/s1600/widget+halaman+blogger+berbeda.JPG" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNwiFjC1_C-QeeSztZIDtRDMmqrj6VPT9KudkNT3ItZyv3o3GK1xiuuBzBPmZeeILh9kWPddbYQ9t8_tPWLHARgaoXf-pMyItVzbG60_XXwIuQlEYTJcZdlcPAVR6PK3yW6vZPM_AvMjQ/s200/widget+halaman+blogger+berbeda.JPG" width="200" /></a></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Saya jelaskan terlebih dahulu apa yang dimaksud dari halaman tertentu dari judul postingan ini. Platform blogger memiliki halaman-halaman berbeda dimana setiap halaman digunakan untuk menempatkan postingan dengan tujuan tertentu. Selain posting (entri), anda dapat membuat artikel berupa page (laman). Halaman page ini memiliki sifat berbeda dengan posting, diantaranya:</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"></span></div><ol style="font-family: Georgia,"Times New Roman",serif;"><li><span style="font-size: small;">Bersifat static, maksudnya halaman tidak diurutkan berdasarkan waktu.</span></li>
<li><span style="font-size: small;">Halaman banyak digunakan untuk menampilkan informasi tertentu, seperti contact person, about us, sitemap, dan sebagainya.</span></li>
<li><span style="font-size: small;">Biasanya untuk mengakses halaman ini juga anda dapat menambahkan gadget baru yang hanya tampil pada halaman page ini. </span></li>
</ol><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Begini kesimpulannya, setiap halaman yang ada di blogger memiliki karakteristik masing-masing. Berikut saya paparkan saja setiap halaman yang terdapat di blogger secara keseluruhan:</span></div><ol style="font-family: Georgia,"Times New Roman",serif;"><li><span style="font-size: small;">Homepage merupakan halaman utama blog anda, yakni halaman depan blogger.</span></li>
<li><span style="font-size: small;">Archivepage adalah halaman arsip blogger.</span></li>
<li><span style="font-size: small;">Itempage adalah halaman postingan yang diurutkan berdasarkan waktu penulisan.</span></li>
<li><span style="font-size: small;">Indexpage adalah halaman muka, halaman label, dan halaman pencarian.</span></li>
<li><span style="font-size: small;">Staticpage adalah feature baru google yakni halaman yang tidak masuk pada postingan yang telah saya jelaskan tadi.</span></li>
</ol><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Menampilkan widget hanya di Homepage </span></div><blockquote><span style="color: red; font-family: Georgia,"Times New Roman",serif; font-size: small;"><b:if cond='data:blog.url == data:blog.homepageUrl'></span><br style="font-family: Georgia,"Times New Roman",serif;" /><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">..........................</span><br style="font-family: Georgia,"Times New Roman",serif;" /><span style="color: red; font-family: Georgia,"Times New Roman",serif; font-size: small;"></b:if></span></blockquote><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Menampilkan widget selain di Homepage</span></div><blockquote><span style="color: red; font-family: Georgia,"Times New Roman",serif; font-size: small;"><b:if cond='data:blog.url != data:blog.homepageUrl'></span><br style="font-family: Georgia,"Times New Roman",serif;" /><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">..........................</span><br style="font-family: Georgia,"Times New Roman",serif;" /><span style="color: red; font-family: Georgia,"Times New Roman",serif; font-size: small;"></b:if></span></blockquote><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Menampilkan widget hanya di Archivepage</span></div><blockquote><span style="color: red; font-family: Georgia,"Times New Roman",serif; font-size: small;"><b:if cond='data:blog.pageType == &quot;archive&quot;'></span><br style="font-family: Georgia,"Times New Roman",serif;" /><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">..........................</span><br style="font-family: Georgia,"Times New Roman",serif;" /><span style="color: red; font-family: Georgia,"Times New Roman",serif; font-size: small;"></b:if> </span></blockquote><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Menampilkan Widget selain di Archivepages</span></div><blockquote><span style="color: red; font-family: Georgia,"Times New Roman",serif; font-size: small;"><b:if cond='data:blog.pageType != &quot;archive&quot;'></span><br style="font-family: Georgia,"Times New Roman",serif;" /><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">..........................</span><br style="font-family: Georgia,"Times New Roman",serif;" /><span style="color: red; font-family: Georgia,"Times New Roman",serif; font-size: small;"></b:if></span></blockquote><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Menampilkan Widget hanya di Itempages / Postingan</span></div><blockquote><span style="color: red; font-family: Georgia,"Times New Roman",serif; font-size: small;"><b:if cond='data:blog.pageType == &quot;item&quot;'></span><br style="font-family: Georgia,"Times New Roman",serif;" /><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">..........................</span><br style="font-family: Georgia,"Times New Roman",serif;" /><span style="color: red; font-family: Georgia,"Times New Roman",serif; font-size: small;"></b:if> </span></blockquote><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Menampilkan widget selain di Itempages</span></div><blockquote><span style="color: red; font-family: Georgia,"Times New Roman",serif; font-size: small;"><b:if cond='data:blog.pageType != &quot;item&quot;'></span><br style="font-family: Georgia,"Times New Roman",serif;" /><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">..........................</span><br style="font-family: Georgia,"Times New Roman",serif;" /><span style="color: red; font-family: Georgia,"Times New Roman",serif; font-size: small;"></b:if></span></blockquote><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Menampilkan widget hanya di Staticpages</span></div><blockquote><span style="color: red; font-family: Georgia,"Times New Roman",serif; font-size: small;"><b:if cond='data:blog.pageType == &quot;static_page&quot;'></span><br style="font-family: Georgia,"Times New Roman",serif;" /><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">..........................</span><br style="font-family: Georgia,"Times New Roman",serif;" /><span style="color: red; font-family: Georgia,"Times New Roman",serif; font-size: small;"></b:if> </span></blockquote><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Menampilkan widget selain di Staticpages</span></div><blockquote><span style="color: red; font-family: Georgia,"Times New Roman",serif; font-size: small;"><b:if cond='data:blog.pageType != &quot;static_page&quot;'></span><br style="font-family: Georgia,"Times New Roman",serif;" /><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">............................</span><br style="font-family: Georgia,"Times New Roman",serif;" /><span style="color: red; font-family: Georgia,"Times New Roman",serif; font-size: small;"></b:if></span></blockquote><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Menampilkan widget pada URL postingan tertentu</span></div><blockquote><span style="color: red; font-family: Georgia,"Times New Roman",serif; font-size: small;"><b:if cond='data:blog.url == &quot;alamatpostingan&quot;'></span><br style="font-family: Georgia,"Times New Roman",serif;" /><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">..........................</span><br style="font-family: Georgia,"Times New Roman",serif;" /><span style="color: red; font-family: Georgia,"Times New Roman",serif; font-size: small;"></b:if></span></blockquote><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Menampilkan widget selain di URL postingan tertentu</span></div><blockquote><span style="color: red; font-family: Georgia,"Times New Roman",serif; font-size: small;"><b:if cond='data:blog.url != &quot;alamaatpostingan&quot;'></span><br style="font-family: Georgia,"Times New Roman",serif;" /><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">..........................</span><br style="font-family: Georgia,"Times New Roman",serif;" /><span style="color: red; font-family: Georgia,"Times New Roman",serif; font-size: small;"></b:if></span></blockquote><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Sampai di sini apakah anda sudah mengerti maksudnya? Baiklah kawan, akan saya aplikasikan saja penggunaan kode tersebut pada widget yang ingin dimodifikasi agar penempatan widget blogger berbeda dari halaman homepage atau sebaliknya. Berikut contoh kode widget blog saya: </span></div><blockquote><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><b:widget id='HTML1' locked='false' title='' type='HTML'></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"><b:includable id='main'></span><span style="font-size: small;"> </span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><br />
</div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"><span style="color: red;">kode pembuka perubahan widget</span></span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"><!-- only display title if it's non-empty --> </span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"><b:if cond='data:title != &quot;&quot;'> </span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"><h2 class='title'><data:title/></h2> </span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"></b:if> </span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"><div class='widget-content'> </span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"><data:content/> </span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"></div> </span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"><b:include name='quickedit'/></span><span style="font-size: small;"> </span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><br />
</div><div style="color: red; font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">kode penutup perubahan widget</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"></b:includable> </span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"></b:widget></span></div></blockquote><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Kalimat ditandai berwarna merah adalah penempatan kode untuk penampilan widget pada halaman tertentu saja. </span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><br />
</div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Jadi penggunaannya untuk contoh penempatan widget hanya di homepage menjadi:</span></div><blockquote style="font-family: Georgia,"Times New Roman",serif;"><div style="text-align: justify;"><b:widget id='HTML1' locked='false' title='' type='HTML'></div><div style="text-align: justify;"><span style="font-size: small;"><b:includable id='main'></span><span style="font-size: small;"> </span></div><div style="text-align: justify;"><br />
</div><div style="color: red; text-align: justify;"><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><b:if cond='data:blog.url == data:blog.homepageUrl'></span><span style="font-size: small;"> </span></div><div style="text-align: justify;"><span style="font-size: small;"><!-- only display title if it's non-empty --> </span></div><div style="text-align: justify;"><span style="font-size: small;"><b:if cond='data:title != &quot;&quot;'> </span></div><div style="text-align: justify;"><span style="font-size: small;"><h2 class='title'><data:title/></h2> </span></div><div style="text-align: justify;"><span style="font-size: small;"></b:if> </span></div><div style="text-align: justify;"><span style="font-size: small;"><div class='widget-content'> </span></div><div style="text-align: justify;"><span style="font-size: small;"><data:content/> </span></div><div style="text-align: justify;"><span style="font-size: small;"></div> </span></div><div style="text-align: justify;"><span style="font-size: small;"><b:include name='quickedit'/></span><span style="font-size: small;"> </span></div><div style="text-align: justify;"><br />
</div><div style="color: red; text-align: justify;"><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"></b:if> </span></div><div style="text-align: justify;"><span style="font-size: small;"></b:includable> </span></div><div style="text-align: justify;"><span style="font-size: small;"></b:widget></span></div></blockquote><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"> Semoga bermanfaat.</span></div>Ihsanul Hudahttp://www.blogger.com/profile/00973343987877850614noreply@blogger.com4tag:blogger.com,1999:blog-8505861799181383189.post-79572224588104989732011-01-12T05:15:00.000-08:002011-01-27T00:30:29.754-08:00Menambahkan Iklan Melayang<div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmxzdJu0876WpTWMFyyXLTqoPiTD5JUovC6lX8nqciWfXDYOzhs7QASlyzkYWEp2Gl93bxn8BSbH2EHnOwAFEPtmbc-KmbhnPIsqAnSAfDaV8q1_2FZ9d6mb7m2hPFTs7zjdl_wmJjFug/s1600/iklanmelayang.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="243" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmxzdJu0876WpTWMFyyXLTqoPiTD5JUovC6lX8nqciWfXDYOzhs7QASlyzkYWEp2Gl93bxn8BSbH2EHnOwAFEPtmbc-KmbhnPIsqAnSAfDaV8q1_2FZ9d6mb7m2hPFTs7zjdl_wmJjFug/s320/iklanmelayang.jpg" width="320" /></a></div><span style="font-size: small;">Iklan ini cukup unik dan menarik karena dapat bergerak melayang ke atas dan ke bawah mengikuti pergerakan kursor. Bagi pemilik situs yang sedang monetasi situs-situsnya tentu kode yang digunakan untuk membuat iklan melayang ini sangat berguna karena sedikit memaksa pengunjung blog melakukan klik pada iklan yang disediakannya. Mungkin bagi sebagian pengunjung ada yang merasa risih dan terganggu akan kehadiran penerapan kode ini, tapi kembali pada hak pemilik situs apakah tertarik menerapkan kode ini atau tidak karena tidak semua pengunjung merasa terganggu, apalagi jika pengunjung tersebut benar-benar membutuhkan informasi yang diinginkannya dan informasi tersebut dianggap berharga. </span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><br />
</div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Langsung saja ikuti petunjuk singkat di bawah ini kawan, berikut praktek menambahkan iklan melayang di blogger:<br />
1. Seperti biasa masuk ke dalam kustomisasi blog. Klik tab Design (Tata Letak) > Page Element (Elemen Halaman).<br />
2. Tambahkan gadget HTML/JavaScript, lalu masukkan kode iklan di bawah ini:</span><br />
<span style="font-size: small;"><br />
<div style="background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYh7g76RBTgfVo7rm_rUiBnidypp-lkE8SNr8olRYK3mNWqtuCg3L0fj8h91EJXL8FCFK7fsLyDPB7vR-bGgQHrk8xZRbYyNLIF_4b130_hIZLCkBbvjKAbi-mw9OHhqbYsuBOThZsMfWa/") repeat-y scroll left top transparent; border: 1px solid rgb(4, 4, 180); font-family: Georgia,Times New Roman,serif; height: 200px; overflow: auto; padding: 5px 5px 5px 35px; width: 553px;"><style type="text/css"><br />
#gb{<br />
position:fixed;<br />
top:10px;<br />
z-index:+1000;<br />
}<br />
* html #gb{position:relative;}<br />
<br />
.gbcontent{<br />
float:right;<br />
border:2px solid #A5BD51;<br />
background:#ffffff;<br />
padding:10px;<br />
}<br />
</style><br />
<br />
<script type="text/javascript"><br />
function showHideGB(){<br />
var gb = document.getElementById("gb");<br />
var w = gb.offsetWidth;<br />
gb.opened ? moveGB(0, -1500) : moveGB(20-w, 0);<br />
gb.opened = !gb.opened;<br />
}<br />
function moveGB(x0, xf){<br />
var gb = document.getElementById("gb");<br />
var dx = Math.abs(x0-xf) > 10 ? 5: 1;<br />
var dir = xf>x0 ? 1 : -1;<br />
var x = x0 + dx * dir;<br />
gb.style.top = x.toString() + "px";<br />
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}<br />
}<br />
</script><br />
<br />
<div id="gb"><br />
<br />
<div class="gbtab" onclick="showHideGB()"> </div><br />
<br />
<div class="gbcontent"><br />
<br />
<div style="text-align:right"><br />
<a href="javascript:showHideGB()"><br />
.:[Close]:.<br />
</a><br />
</div><br />
<center><br />
<br />
<div style="color: red;"><span style="font-size: large;">Masukan kode iklan atau gambar di sini</span></div><br />
</center><br />
<br />
<script type="text/javascript"><br />
var gb = document.getElementById("gb");<br />
gb.style.center = (30-gb.offsetWidth).toString() + "px";<br />
</script></div></div><br />
<br />
</div><br />
3. Klik tombol Save (Simpan) dan apa yang terjadi?<br />
4. Lihat hasilnya, maka akan muncul iklan melayang di bagian atas. Klik link Close sebanyak dua kali dan iklanpun akan hilang.<br />
5. Selain iklan teks, anda juga dapat memasukkan iklan berupa gambar.<br />
6. Selamat mencoba kawan.<br />
</span></div>Ihsanul Hudahttp://www.blogger.com/profile/00973343987877850614noreply@blogger.com0tag:blogger.com,1999:blog-8505861799181383189.post-33789581234732547192010-12-26T08:48:00.000-08:002011-01-24T16:57:40.429-08:00Sekilas Tentang HTML<div class="separator" style="clear: both; font-family: Georgia,"Times New Roman",serif; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcW0TpKb9Q4HfuIc2C5dTSTR6QN2et2B20EycIh4qBFvhqWgoyS84KRZ_rP1aswU4QhCmD5LdXGl1pZEu3DqvrXpqJWYwET2VSO_GmJqAEEMIRRzSYuMFZXuXu4UZFjY23hC_HlRVg80s/s1600/htmlblogger.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcW0TpKb9Q4HfuIc2C5dTSTR6QN2et2B20EycIh4qBFvhqWgoyS84KRZ_rP1aswU4QhCmD5LdXGl1pZEu3DqvrXpqJWYwET2VSO_GmJqAEEMIRRzSYuMFZXuXu4UZFjY23hC_HlRVg80s/s320/htmlblogger.jpg" width="320" /></a></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">HTML adalah singkatan dari <i>Hyper Text Markup Language</i>. Fungsi HTML di dalam sebuah dokumen world wide web (www), adalah untuk membuat dan mengatur struktur tampilan dokumen tersebut agar bisa dibaca untuk dipublikasikan dan juga untuk menampilkan link atau sambungan ke halaman web lain yang ada di internet dan semua nama file dokumen HTML mempunyai ekstensi html atau htm. Dalam sebuah dokumen HTML anda terdapat tags. Tags adalah penempatan atau nilai format text yang memerintahkan browser untuk menampilkan sebuah dokumen HTML. Saya hanya akan menjelaskan beberapa sintax penting saja sebagai dasar pengetahuan anda untuk membuat template blog. Untuk membuat HTML, anda hanya cukup menggunakan notepad, meskipun sebenarnya sudah banyak software yang memudahkan kita dalam membuat dokumen HTML ini. </span></div><div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;"><br />
<b>Sintax Dasar HTML</b></span></div><div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;"><br />
</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Berikut adalah contoh sebuah struktur dokumen HTML sederhana, tulislah contoh berikut menggunakan notepad kemudian simpanlah dalam format .html dan kemudian buka dalam browser internet favourite anda:</span></div><div style="font-family: Georgia,"Times New Roman",serif;"></div><blockquote style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;"><html> </span><br />
<span style="font-size: small;"> <head><br />
</span><span style="font-size: small;"><title>Test HTML</title></span><br />
<span style="font-size: small;"> </span><br />
<span style="font-size: small;"> </head><br />
<body><br />
Ini hanya test dokumen HTML pertamaku<br />
</body><br />
</html></span></blockquote><div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;">Maka hasilnya adalah:</span></div><div style="font-family: Georgia,"Times New Roman",serif;"><br />
</div><div class="separator" style="clear: both; font-family: Georgia,"Times New Roman",serif; text-align: center;"></div><div style="font-family: Georgia,"Times New Roman",serif;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgprByAaRR_Z5ZCiHyOwxbAXuCTx8XsWgBwTjjqhP5hriNKcfu2W3cLyrHgmFSpP17HnNhsUip9l0n2kVaYsz6iJ6D-mVVQkUlJK63Kn81AaXhH48d6sQeU12E_1hc5iuLAx2QUP4SJTus/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="295" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgprByAaRR_Z5ZCiHyOwxbAXuCTx8XsWgBwTjjqhP5hriNKcfu2W3cLyrHgmFSpP17HnNhsUip9l0n2kVaYsz6iJ6D-mVVQkUlJK63Kn81AaXhH48d6sQeU12E_1hc5iuLAx2QUP4SJTus/" width="400" /> </a></div><br />
<div style="font-family: Georgia,"Times New Roman",serif; text-align: left;"></div><div class="separator" style="clear: both; text-align: justify;"><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">Skrip diatas hanya file HTML yang sangat sederhana</span><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">. Setiap tag HTML selalu diawali tag pembuka dan diakhiri dengan tag penutup. Pada contoh tadi misalnya untuk tag <head>, maka harus diakhiri</span><span style="font-family: Georgia,"Times New Roman",serif;"><span style="font-family: Georgia,"Times New Roman",serif;"> pula dengan tag</span> </head>. Coba perhatikan terdapat tanda "</span><span style="color: red; font-family: Georgia,"Times New Roman",serif;">/</span><span style="font-family: Georgia,"Times New Roman",serif;"><span style="font-family: Georgia,"Times New Roman",serif;">"</span> pada setiap tag penutup. Biasanya pula dapat ditambahkan meta tag content di antara <head> dan </head> seperti yang telah dijelaskan pada pembahasan sebelumnya "<a href="http://oilink.blogspot.com/2010/10/cara-menambahkan-meta-tag-pada-blogger.html">Cara Menambahkan Meta Tag</a>".</span></div><div class="separator" style="clear: both; text-align: justify;"><span style="font-family: Georgia,"Times New Roman",serif;"><br />
</span></div><div class="separator" style="clear: both; font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"><b>URLs</b><br />
<br />
URL merupakan singkatan dari <i>Uniform Resource Locator</i> yang menginformasikan lokasi sebuah file pada www dan juga mengidentifikasikan layanan internet, seperti FTP, www, yang menangani file-file tersebut. Istilah ini juga dipakai untuk menunjukkan suatu tempat yang berisikan informasi di Internet seperti contoh di bawah: </span></div><div class="separator" style="clear: both; font-family: Georgia,"Times New Roman",serif; text-align: justify;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbpRDGL1sxn9mjzAhoJJdT2H-tdguWdpTIaHCvG72Okw5yonepdSbOwVt3IwCOjHvqhq_kV5RlG4bf4iRI-BrMOLI_Qlz55DQfQev31R0QtGQ6cJVvGv1pmZGFXsYC-Sh6DiT26ODBXts/s1600/url.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="35" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbpRDGL1sxn9mjzAhoJJdT2H-tdguWdpTIaHCvG72Okw5yonepdSbOwVt3IwCOjHvqhq_kV5RlG4bf4iRI-BrMOLI_Qlz55DQfQev31R0QtGQ6cJVvGv1pmZGFXsYC-Sh6DiT26ODBXts/s400/url.jpg" width="400" /></a></div><div class="separator" style="clear: both; font-family: Georgia,"Times New Roman",serif; text-align: justify;"><br />
</div><div class="separator" style="clear: both; font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Keterangan: <br />
<span style="color: red;">Protocol </span>adalah metode transfer data dari satu komputer ke komputer lain, antara komputer client dan komputer server. </span></div><br />
<div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;">HTTP <i>(Hyper Text Transfer Protocol)</i></span><i><span style="font-size: small;"> </span></i></div><div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;">Gopher</span><span style="font-size: small;"> </span></div><div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;">FTP</span><span style="font-size: small;"> </span></div><div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;">News</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: left;"></div><div class="separator" style="clear: both; font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"><br />
<span style="color: red;">Network location</span> adalah mesin tempat data tersebut berada.<br />
<span style="color: red;">Path <span style="color: black;">adalah dokumen yang</span></span> menunjukkan di direktori mana dokumen tersebut berada.<br />
<span style="color: red;">File name</span> adalah nama file html yang berada dalam direktori web server.</span></div>Ihsanul Hudahttp://www.blogger.com/profile/00973343987877850614noreply@blogger.com0tag:blogger.com,1999:blog-8505861799181383189.post-48825398079497614282010-12-15T23:58:00.000-08:002011-01-19T16:11:38.039-08:00Ubah Tulisan Newer Older Post Dengan Icon<div style="text-align: justify;"><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"></span></div><div style="text-align: justify;"><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">Ingin mempercantik tampilan navigasi pager blogger? Secara default navigasi blogger terlihat sangat simple, hanya tampak tiga link utama untuk membuka page sebelum atau sesudah postingan yaitu newer post (posting baru), older post (posting lama), dan home untuk kembali ke menu utama blogger. </span><br />
<br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">Berikut tampilan defaultnya: </span></div><div style="text-align: justify;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgexQ3rAQsLhb7csu5NAeZ7YeTCRqQgxDmniHnELAGQPqdzd9TpbnkqwGOFqUP8Ka8pHezQHv5sh2Z8G51d7fUq-hVAJM94lPfldNejgQcKwmVUOMmWmJA9hse3pdMu9mytd-5eCidl1WA/s1600/postinglamapostingbaru.bmp" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgexQ3rAQsLhb7csu5NAeZ7YeTCRqQgxDmniHnELAGQPqdzd9TpbnkqwGOFqUP8Ka8pHezQHv5sh2Z8G51d7fUq-hVAJM94lPfldNejgQcKwmVUOMmWmJA9hse3pdMu9mytd-5eCidl1WA/s400/postinglamapostingbaru.bmp" width="400" /></a></div><div style="text-align: justify;"><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">Karena tampilan seperti itu terlihat sangat membosankn maka saya akan mencoba untuk menyulapnya menjadi:</span></div><div style="text-align: justify;"><br />
</div><div style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS__vngaSSBNnb6rHkGV0OQjO8qN3BPY53yxuZqaIcj_K7sw_jp_C8W5wKqm8ew2EUD0Yr2ufL1piv2g-ddj1NNk6y6wF3RMumtExBerk8nl2Jh-YBNCRk91TxRbO-J8QaLm0_BalUnbw/s1600/iconnewerpost.bmp" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="67" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS__vngaSSBNnb6rHkGV0OQjO8qN3BPY53yxuZqaIcj_K7sw_jp_C8W5wKqm8ew2EUD0Yr2ufL1piv2g-ddj1NNk6y6wF3RMumtExBerk8nl2Jh-YBNCRk91TxRbO-J8QaLm0_BalUnbw/s400/iconnewerpost.bmp" width="400" /></a><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><br />
</span></div><div class="view_demo"><a href="http://miexper.blogspot.com/" target="_blank">View Live Demo</a>Klik untuk melihat langsung animasi iconnya</div><br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">Berikut tricks yang harus anda lakukan untuk menyulap pager blog anda agar terlihat lebih fantastis he he:<br />
1. Login ke Blogger anda, klik Rancangan (Design) → Edit HTML, klik tulisan Download Template Lengkap (Download Full Template) karena hal ini dimaksudkan untuk mengurangi risiko gagal edit apabila terjadi kesalahan pada template, sehingga kita masih punya back up data untuk mengembalikannya seperti semula, kemudian beri tanda centang pada kotak di samping tulisan Expand Widget Templates, kemudian cari kode berikut:<br />
<br />
Tips: untuk mempercepat pencarian kode, anda dapat gunakan tombol (Ctrl + F) atau (F3).</span><br />
<div style="text-align: left;"><blockquote><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><b:includable id='nextprev'></span><br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><div class='blog-pager' id='blog-pager'></span><br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><b:if cond='data:newerPageUrl'></span><br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><span id='blog-pager-newer-link'></span><br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><span style="font-size: large;"><span style="color: red;"><data:newerPageTitle/></span></span></a></span><br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"></span></span><br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"></b:if></span><br />
<br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><b:if cond='data:olderPageUrl'></span><br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><span id='blog-pager-older-link'></span><br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><span style="font-size: large;"><span style="color: red;"><data:olderPageTitle/></span></span></a></span><br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"></span></span><br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"></b:if></span><br />
<br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><b:if cond='data:blog.homepageUrl != data:blog.url'></span><br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><a class='home-link' expr:href='data:blog.homepageUrl'><span style="color: red; font-size: large;"><data:homeMsg/></span></a></span><br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><b:else/></span><br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><b:if cond='data:newerPageUrl'></span><br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><a class='home-link' expr:href='data:blog.homepageUrl'><span style="font-size: large;"><span style="color: red;"><data:homeMsg/></span></span></a></span><br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"></b:if></span><br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"></b:if></span><br />
<br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"></div></span></blockquote><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">Perhatikan tulisan yang berwarna merah:</span> </div><ul><li><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><span style="font-size: large;"><span style="color: red;"><data:newerPageTitle/></span></span> Posting Baru (Newer Post)</span></li>
<li><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"> <span style="color: red; font-size: large;"><data:olderPageTitle/></span> Posting Lama (Older Post)</span></li>
<li><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"> <span style="color: red; font-size: large;"><data:homeMsg/></span> Beranda (Home)</span></li>
</ul><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"> Silakan anda ganti kode-kode tersebut dengan kode berikut, hanya kode yang berwarna merah saja anda gunakan:</span><br />
<ul><li><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><span style="color: red; font-size: small;"><img src="http://lh5.ggpht.com/_MBRYgA9HoRE/TQm9mRjqUGI/AAAAAAAAAIc/G-4toOlq5ZM/leftgreen_arrow_animated2.gif"/></span></span></li>
<li><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"> <span style="font-size: small;"><span style="color: red;"><img src="http://lh5.ggpht.com/_MBRYgA9HoRE/TQm9mXR2nJI/AAAAAAAAAIg/o38dYhEgylw/rightgreen_arrow_animated1.gif"/></span></span></span></li>
<li><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"> <span style="color: red; font-size: small;"><img src="http://lh5.ggpht.com/_MBRYgA9HoRE/TQm9mhiZHXI/AAAAAAAAAIk/jQrbS1DN06M/home.png"/></span></span></li>
</ul><ul></ul><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">2. Klik tombol simpan template (save template) jika sudah selesai utak atik template anda dan lihat hasilnya. Masalah gambar icon anda dapat berkreasi sendiri atau anda juga dapat mencarinya di situs yang menyediakan icon-icon menarik seperti di <a href="http://www.iconarchive.com/">icon archive. </a></span><br />
<span style="font-family: Georgia,"Times New Roman",serif; font-size: small;"><br />
3. Selamat mencoba.</span>Ihsanul Hudahttp://www.blogger.com/profile/00973343987877850614noreply@blogger.com1tag:blogger.com,1999:blog-8505861799181383189.post-967894053371713822010-12-15T07:46:00.000-08:002011-01-26T00:46:54.674-08:00Mengganti Default Favicon Blogger<div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Pada kesempatan ini akan dibahas mengenai pengaturan tampilan blog, yaitu mengubah gambar default favicon blogger agar dapat dikostumisasi sesuai gambar favicon yang anda inginkan. Apa itu favicon? Favicon merupakan icon kecil yang muncul dan dapat dilihat pada web browser ketika pengunjung maupun anda sendiri sebagai pemilik situs tersebut membuka situs web. Secara default, blog yang dibuat blogger akan menampilkan logo <img src="http://www.blogger.com/favicon.ico" />pada bagian favicon.</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"><br />
</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Lalu, mana tutorialnya kapten dan apa yang harus dipersiapkan? Ohya, sabar sabar baiklah langsung saja pada pokok bahasan. Anda terlebih dahulu menyiapkan file gambar yang akan digunakan sebagai favicon. Sebaiknya, ubah pula besar ukuran file gambar agar proses upload nanti dapat berlangsung cepat.</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">1. Kunjungi website Tinypic yang beralamat di www.tinypic.com. Pilih dulu file gambar yang akan diupload dengan klik tombol browse. </span><span style="font-size: small;">Klik file gambarnya lalu klik tombol open. Tentukan konfigurasi upload lalu klik tombol upload now.</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR3HJZyDEFfNTvDAMU_HU7kPFu2KsepPmlBtgeok-u1pNl4LeLBmmap6laK75TQDkG9QIA-AHSIJKLpzM8-5gXQN6Szx3yadsRvNGdqtxhuEf_2c5BzVJhm-1VSyn0YfI1tnS-Ve0NM3c/s1600/favicon.bmp" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="175" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR3HJZyDEFfNTvDAMU_HU7kPFu2KsepPmlBtgeok-u1pNl4LeLBmmap6laK75TQDkG9QIA-AHSIJKLpzM8-5gXQN6Szx3yadsRvNGdqtxhuEf_2c5BzVJhm-1VSyn0YfI1tnS-Ve0NM3c/s320/favicon.bmp" width="320" /></a></div></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">2. Salin url gambarnya dengan seleksi kode di bawah HTML for Websites. Klik kanan dan pilih menu copy. Sebenarnya, anda bisa saja hosting (menyimpan) gambar anda di file image hosting yang lain seperti imageshack, photobucket, atau bahkan di picasa yang dapat anda temukan pada account google anda. </span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">3. Setelah anda log in blogger, klik tab Tata Letak (Design) > Edit HTML.</span><br />
<br />
<div style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLZodUYbxjXe9_Vk-7kstFXeyN-A2SucNLiNXOTwsrEijAz6tAB7CMW2-j6V81qCIAdODvU9L47Qw3ggDdFgGN3igohkxteHeMi9TrA-bMoKBjhszRjzLXYaInuFDGiJw8nVElk6g6sMTo/s1600/editetame.bmp" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="97" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLZodUYbxjXe9_Vk-7kstFXeyN-A2SucNLiNXOTwsrEijAz6tAB7CMW2-j6V81qCIAdODvU9L47Qw3ggDdFgGN3igohkxteHeMi9TrA-bMoKBjhszRjzLXYaInuFDGiJw8nVElk6g6sMTo/s320/editetame.bmp" width="320" /></a><span style="font-size: small;"> </span></div><br />
<div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;">5. </span><span style="font-size: small;">Temukan kode </head> lalu paste kode berikut tepat di bawah kode tadi. </span></div><blockquote style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;"> <link href='(<span style="color: red;">url icon anda</span>)' rel='shortcut icon'/></span></blockquote><div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;">Dalam hal ini, anda hanya perlu menambahkan alamat url gambar iconnya saja, yaitu kode setelah <span style="color: red;">img scr=</span>, sehingga gabungan kodenya akan menjadi:</span></div><blockquote style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;"><link href='<span style="color: red;">http://i51.tinypic.com/2wfl9ty.png</span>' rel='shortcut icon'/></span></blockquote><span style="font-size: small;"><span style="font-family: Georgia,"Times New Roman",serif;">6. Simpan kode yang telah diedit dan lihat hasilnya.</span></span><br />
</div>Ihsanul Hudahttp://www.blogger.com/profile/00973343987877850614noreply@blogger.com0tag:blogger.com,1999:blog-8505861799181383189.post-57601154028073024812010-12-14T00:10:00.000-08:002010-12-14T00:11:31.531-08:00Pendaftaran Blogspot<div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Untuk memulai kehidupan anda menjadi seorang blogger, maka terlebih dahulu menyelesaikan proses pendaftaran dengan langkah yang sangat mudah. Tentunya pendaftaran untuk membuat blog yang disediakan blogger atau blogspot bisa didapatkan secara gratis. Ikuti langkah-langkah pendaftaran sebagai berikut:</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"><br />
1. Silakan kunjungi situs blognya dengan url www.blogger.com atau www.blogspot.com dan setelah itu ciptakan blog anda dengan klik pilihan get started seperti yang dicontohkan pada gambar di bawah ini.</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0cdFS2el94KgJHJ4gcAJBBmX5ahrV2bXTfcMVdA4oyBcn1augt7IvexuzxpYZT0PPB_hBaKATTfnZa_rOB7H4quWB5fP7ZmIdAa_1yZ4ybshjLIvtIH08tSp_XYoHLtd22N0zc7zaFfg/s1600/mulaidaftarblog.bmp" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0cdFS2el94KgJHJ4gcAJBBmX5ahrV2bXTfcMVdA4oyBcn1augt7IvexuzxpYZT0PPB_hBaKATTfnZa_rOB7H4quWB5fP7ZmIdAa_1yZ4ybshjLIvtIH08tSp_XYoHLtd22N0zc7zaFfg/s1600/mulaidaftarblog.bmp" /></a></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">2. Pada halaman berikutnya akan ditampilkan langkah dan form pendaftaran blogger. Untuk membuat blog di blogger anda hanya perlu melakukan tiga langkah mudah, yaitu: membuat akun, memberikan nama blog, dan memilih template blog sesuai selera.</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"><br />
3. Untuk melakukan ketiga langkah di atas, mulai dari mengisi data pada form pendaftaran yang disediakan.</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"></div><div style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi96FuBitOXsc1AhfagZLqpbG0_tycID_Oaidpppq3pK0jOtJ-Jeyrw4VyWpb6DJhUfSRaK-mPTl3Dau8lndqfcvWZbtliiAO2Zuhcdp3iNQzHS4T9HRVRopPheFZifSf6KmgUxivg-T9w/s1600/daftarblog.bmp" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi96FuBitOXsc1AhfagZLqpbG0_tycID_Oaidpppq3pK0jOtJ-Jeyrw4VyWpb6DJhUfSRaK-mPTl3Dau8lndqfcvWZbtliiAO2Zuhcdp3iNQzHS4T9HRVRopPheFZifSf6KmgUxivg-T9w/s1600/daftarblog.bmp" /></a> </div><u><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">Alamat Email</span></u><br />
<div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Masukkan alamat email yang sudah anda miliki. Sebaiknya anda mendaftar dengan menggunakan gmail yang dimiliki google karena akan memudahkan anda dan tidak perlu lagi verifikasi akun nantinya.<br />
<u>Nama Tampilan</u><br />
Masukkan nama anda karena nama tersebut akan muncul di setiap posting blog yang akan digunakan nanti.<br />
Pada isian form selanjutnya hanya tinggal mengikuti instruksi yang tertera pada blogger tersebut karena blogger sudah mendukung bahasa Indonesia yang dapat digunakan dan dimengerti dengan baik.</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFsaZFPbxp2HIe7flVZPEEnl5yuvdhZSACay9ROI7F0M5w6D8bBdP6U4Fo0RYQY2YDeMMvdQlzs9wWTGw8kCL8R_jiy1OqqaNbpLvREy3ZPSUhFWrHQRC6_e0DxJ0a6KCdc9lTTWuJgWQ/s1600/blogdaftar.bmp" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFsaZFPbxp2HIe7flVZPEEnl5yuvdhZSACay9ROI7F0M5w6D8bBdP6U4Fo0RYQY2YDeMMvdQlzs9wWTGw8kCL8R_jiy1OqqaNbpLvREy3ZPSUhFWrHQRC6_e0DxJ0a6KCdc9lTTWuJgWQ/s1600/blogdaftar.bmp" /></a><span style="font-size: small;"> </span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"><br />
4. Pada tahap selanjutnya adalah pemberian nama blog yang akan digunakan. Sebaiknya isi sesuai dengan tema blog yang akan dibuat nanti. Kemudian memilih nama domain blog yang akan digunakan. Hal ini juga penting untuk dipertimbangkan karena nama domain yang baik adalah nama domain yang tidak hanya mudah untuk diingat oleh si pembuat blog saja, tetapi alangkah baiknya nama umum yang mudah diingat oleh semua orang. Dan juga pertimbangkan nama domain dari sisi SEO. Artinya nama domain blog yang singkat sangat baik apabila ditinjau dari sisi SEO tersebut.</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVUQXuKUE2h9tHpfGCOpNxsdYdOTUJZZY_GFk4W56wK2CPh_U6nnMH7V6MTjuvqoo7RHqep3jSAf8odRg97X00wtu_KSVLFl6PNZG17nibHryABmyo384npoAgEUTl2kDUsUKc_-qZgdc/s1600/blogger+Indonesia.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVUQXuKUE2h9tHpfGCOpNxsdYdOTUJZZY_GFk4W56wK2CPh_U6nnMH7V6MTjuvqoo7RHqep3jSAf8odRg97X00wtu_KSVLFl6PNZG17nibHryABmyo384npoAgEUTl2kDUsUKc_-qZgdc/s1600/blogger+Indonesia.jpg" /></a><span style="font-size: small;"> </span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"><br />
5. Pada halaman berikutnya adalah langkah terakhir proses pendaftaran blog, yaitu memilih template. Klik pilihan screenshot template yang anda inginkan kemudian klik tombol lanjutkan.</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><div style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXCEI5TjiXca1zx2fipkJnsl4JAPzLKFT4m1gH08gM3GuW_romreTvn4pc8-v9JEb6Tw49QLDBJKORrw10UxxbVljOGKBhSQhGqE2jJMcJNkTeG0aARigXWubLqvHMnOuDfxy3OApnP-A/s1600/pilih-template.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="257" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXCEI5TjiXca1zx2fipkJnsl4JAPzLKFT4m1gH08gM3GuW_romreTvn4pc8-v9JEb6Tw49QLDBJKORrw10UxxbVljOGKBhSQhGqE2jJMcJNkTeG0aARigXWubLqvHMnOuDfxy3OApnP-A/s320/pilih-template.jpg" width="320" /></a></div><div style="text-align: center;"><br />
</div><span style="font-size: small;">6. Setelah itu akan muncul halaman pemberitahuan bahwa blog yang baru saja anda buat telah berhasil. Setelah blog jadi, maka anda dapat mulai menulis pada sebuah posting pertama yang akan dipublikasikan dalam blog tersebut dengan cara klik tombol mulai blogging.</span></div><div class="separator" style="clear: both; text-align: center;"></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4GBO34RgE4BEv2Q7gYECTUK06wyHM-ayPD06Pe3XQlCQVJ_CChLpafi5wHaI1k4v1Jz31xfdHz6DmyWVnhWF7yOjSevJtahDH-5vZuNxIEay-H7h0wowBOc8oLJ_EssEmSmm2VmJckG0/s1600/mulai-blogging.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4GBO34RgE4BEv2Q7gYECTUK06wyHM-ayPD06Pe3XQlCQVJ_CChLpafi5wHaI1k4v1Jz31xfdHz6DmyWVnhWF7yOjSevJtahDH-5vZuNxIEay-H7h0wowBOc8oLJ_EssEmSmm2VmJckG0/s1600/mulai-blogging.jpg" /> </a></div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: justify;"><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">7. Setelah masuk pada menu posting baru, silakan isi apa saja (disarankan untuk langsung mengisi posting baru anda agar blog tidak terlihat sepi, dan biasanya jika tidak langsung posting akan terjaring robot anti spam milik blogger, dan blog anda akan dilocked). Contoh: hello world. Klik tombol pratinjau (preview) untuk melihat tampilan yang nanti akan muncul di blog, atau klik tombol terbitkan entri (publish post) jika posting anda mau dipublikasikan langsung. </span></div><div class="separator" style="clear: both; text-align: justify;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE8A2NE8fItGs1PpMB7woQYTF0VMLz42eOc88d_Sw4sUJLaB1iMUj5wTvkVIATqo-o-OkUe7fV3has5J26Kejo6NFSy4HJ1ChM96q785Km628X3vewCOavfnQ8u_9PH2KlIfJd8J_RwGc/s1600/posting+blog.bmp" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="269" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE8A2NE8fItGs1PpMB7woQYTF0VMLz42eOc88d_Sw4sUJLaB1iMUj5wTvkVIATqo-o-OkUe7fV3has5J26Kejo6NFSy4HJ1ChM96q785Km628X3vewCOavfnQ8u_9PH2KlIfJd8J_RwGc/s400/posting+blog.bmp" width="400" /></a></div><div class="separator" style="clear: both; text-align: justify;"><br />
</div><div class="separator" style="clear: both; text-align: justify;"><span style="font-family: Georgia,"Times New Roman",serif; font-size: small;">8. Selamat, sekarang anda sudah punya blog. Klik lihat entri (view post) untuk melihat hasil dari apa yang baru saja anda publish.</span></div><div class="separator" style="clear: both; text-align: center;"></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: center;"><span style="font-size: small;"> </span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"></span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"></span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"></span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"></span></div>Ihsanul Hudahttp://www.blogger.com/profile/00973343987877850614noreply@blogger.com1tag:blogger.com,1999:blog-8505861799181383189.post-34325199169908804512010-12-13T07:57:00.000-08:002011-01-24T16:55:15.930-08:00Beberapa Alasan Menjadi Seorang Blogger<div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBXae_wngySmODsdiFliEzUAn3FOkYv4XLor3NpMhF30CUMKevUFlxWb9ukllHPUolFkiM5VbUgHmuvxOCqv-NMTmOTzZIdBm5ZCFylRpLj6-YVWW0d9GnOMYxpIGfC527vH2g3WV9_qw/s1600/mulaingeblog.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBXae_wngySmODsdiFliEzUAn3FOkYv4XLor3NpMhF30CUMKevUFlxWb9ukllHPUolFkiM5VbUgHmuvxOCqv-NMTmOTzZIdBm5ZCFylRpLj6-YVWW0d9GnOMYxpIGfC527vH2g3WV9_qw/s200/mulaingeblog.jpg" width="200" /></a></div><span style="font-size: small;"><span id="goog_501408395"></span><span id="goog_501408396"></span>Jika ada yang beranggapan bahwa kegiatan ngeblog terlalu menyita banyak waktu, maka persepsi tersebut kembali pada individu masing-masing. Bagaimana kita dapat membagi waktu kita untuk ngeblog. Jangan sampai dengan ngeblog dapat mengganggu pekerjaan utama kita. Saya sarankan pergunakan leisure anda untuk ngeblog dengan kembali pada niat awal anda ngeblog. Namun jika ada pula yang masih bertanya-tanya manfaat dari kegiatan blogging dan apa untungnya menjadi seorang blogger? Berikut saya paparkan beberapa alasan saya secara pribadi ketika memutuskan untuk belajar menjadi seorang blogger (curhat mode: on):</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><br />
</div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><b><span style="font-size: small;">1. Blogging Melatih Kita Mahir Menulis</span></b></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Jelas, manfaat besar sangat terasa didapat oleh kalangan blogger mengenai hal ini. Ada orang yang pintar berbicara tetapi ketika menuangkannya dalam bentuk tulisan terasa sulit untuk diungkapkan dengan mempertimbangkan kaidah atau gaya tulisan yang khas sehingaa dapat terasa nikmat untuk dibaca, begitu pula sebaliknya. Ada seni yang menyebabkan tulisan seseorang enak untuk dibaca dan dinikmati. Seseorang tidak akan begitu saja pandai mengungkapkan apa yang ada dalam fikirannya tanpa latihan yang dilakukan secara rutin. Bagi yang sudah terlatih, kumpulan uneg-uneg saja bisa jadi bacaan yang menarik. Saat pertama kali saya melakukan posting, kesulitan pertama yang saya hadapi adalah bagaimana menyusun kalimat yang baik agar bisa dipahami banyak orang, bagaimana menyampaikan hal-hal yang bisa menjawab pertanyaan banyak orang, bagaimana mencari informasi yang menarik dan sedang banyak dicari orang lalu menuliskannya dalam blog saya, dan banyak lagi. Tidak mudah memang, akan tetapi saya tidak berhenti sampai disitu dan berusaha untuk terus mencoba. Kini, setelah beberapa waktu berlalu, setelah beberapa tulisan saya posting, saya bisa merasakan hasilnya. Semua kesulitan yang saya alami itulah yang telah melatih saya menulis lebih baik dari sebelumnya.</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"><br />
</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><b><span style="font-size: small;">2. Amal Ibadah</span></b></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Mengapa dikatakan sebagai amal ibadah atau amal kebaikan. Ya, informasi yang kita tulis akan menjadi ilmu yang bermanfaat bagi umat manusia. Ilmu yang bermanfaat adalah salah satu dari tiga amal jariyah yang kebaikannya akan bersifat abadi. Pahala amal kebaikan ini tidak akan pernah terputus dan terus mengalir meski kita sudah meninggalkan dunia online ataupun offline. Maka dari itu, pilihan ngeblog adalah pilihan yang sangat tepat untuk mengisi tabungan amal kebaikan kita dan berinvestasi baik dunia maupun akhirat karena ada pepatah arab mengatakan khairunnasi ahsanuhum khuluqan wa anfa’uhum linnas yang artinya sebaik-baiknya manusia adalah manusia yang memberikan manfaat bagi yang lainnya. Jangan ragu dan enggan untuk membagikan ilmu yang kita miliki walau hanya satu huruf karena amal kebaikan seberat biji sawipun akan dicatat sebagai bekal kita nanti.</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"><br />
</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><b><span style="font-size: small;">3. Suka Tantangan</span></b></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Saya bukan seorang mahasiswa Teknik Komputer dan Informatika. Tidak mudah bagi saya menggeluti dunia baru, terlebih tanpa seorang guru yang mendampingi. Ketika saya melihat dan membaca apa yang telah dilakukan oleh para blogger lain di situsnya masing-masing saya merasa begitu iri dan tertarik sekaligus pula termotivasi. Orang sudah sedemikian merdeka menyampaikan ide-idenya, opini-opininya, dan segala hal tentang dunia mereka dengan mudah, tanpa rasa takut dan khawatir, mendapat penghasilan pula. Sayangnya, setiap kali saya ingin mencoba mengikuti, pertanyaan yang timbul adalah: “bagaimana dan dari mana saya harus memulainya? Sedangkan saya tak punya seseorang untuk membimbing dan memandu saya untuk itu”. Dengan penuh keyakinan, asal ada kemauan pasti ada jalan. Toh mahasiswa Teknik Komputer dan Informatikapun pandai bukan karena sekolahnya, tapi karena belajarnya! Where there is a will, there is a way. Man jadda wajada. Saya suka akan dunia baru ini, dan saya terima tantangannya.</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"><br />
</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><b><span style="font-size: small;">4. Mudah Dan Murah</span></b></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Mudah? Apanya yang mudah? Bukankah ngeblog itu sulit menurut pendapat sebagian besar orang? Ya, tergantung dengan apa kita membandingkannya. Jika kita membandingkannya dengan membuat presentasi menggunakan Microsoft Pewer Point, maka membuat blog sedikit lebih sulit, perlu waktu dan kesabaran untuk mempelajarinya, terlebih jika mempelajarinya secara ortodidak. Akan tetapi, jika dibandingkan dengan membuat sebuah situs web, membuat blog jauh lebih mudah dan simple. Satu hal yang penting, anda bisa melakukan semuanya secara cuma-cuma terkecuali untuk biaya internetnya.</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"><br />
</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><b><span style="font-size: small;">5. Sarana Mengekspresikan Diri</span></b></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Jika anda seorang yang sedang mencari jati diri atau ingin mengexspose kelebihan-kelebihan yang dimiliki kepada banyak orang atau katakan saja ingin mencari popularitas, tetapi anda mengalami kesulitan untuk melakukannya. Sebagian mungkin sudah menemukan tempatnya. Namun bagi anda yang belum, saya mengajak anda untuk mengekspresikan diri anda melalui internet. Tidak sedikit orang yang kini menjadi selebritis dan terkenal dengan memanfaatkan media internet pada awalnya untuk menunjukkan kemampuan yang dimilikinya. Dalam hal ini saya mengajak anda yang belum menjadi seorang blogger untuk bergabung berprofesi sebagai seorang blogger. Ya, dengan menjadi seorang blogger anda bebas terbang melayang menggapai impian anda. Jika anda interested dalam dunia jurnalistik, maka asahlah kemampuan menulis anda sehingga dengan selalu mempraktekannya anda akan lebih terbiasa menulis. Dan semakin banyak orang mengapresiasi karya kita, maka semakin banyak pula orang yang mengenal kita. Mungkin bukan hanya di Indonesia. Dan tahukan anda apa risikonya menjadi orang terkenal? Apapun yang anda katakan, akan banyak orang yang menuruti dan mengikuti perkataan-perkataan anda!</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"><br />
</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><b><span style="font-size: small;">6. Media Informasi</span></b></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Internet adalah inovasi kebudayaan yang sangat berpengaruh di abad ini. Tatkala kita berada di jalur dunia intenet, salah satunya dengan blog, berarti kita sudah menempatkan diri di dunia yang tidak dibatasi ruang dan waktu. Apa yang kita sampaikan di blog kita akan segera bisa diakses dan dibaca oleh banyak orang di seluruh penjuru dunia, dimanapun dan kapanpun. Dengan demikian, tak sulit bagi kita sekarang untuk menggali infomasi atau mempublikasikan berbagai hal yang kita anggap penting. Bahkan untuk mempromosikan suatu produk, kita dapat dengan mudah melakukannya. Blog juga bisa menjadi sarana untuk membentuk opini publik? Karena masyarakat pada umumnya berpendapat sesuai dengan apa yang mereka dengar dan mereka lihat atau yang mereka baca. Mari kita bicara sedikit tentang ‘idealisme’. Tanyakanlah kepada kaum muda saat ini tentang pacaran, tentang busana yang baik, tentang etika bergaul, dan banyak hal lagi, apa kiranya yang ada dalam fikiran mereka tentang hal-hal itu? Yang biasa saya dengar, jawaban mereka tidak jauh dengan yang menjadi jawaban para selebritis di televisi, mungkin jauh berbeda dengan yang menjadi idealisme kita, sekalipun tidak semua kaum muda seperti itu. Pedulikah anda akan hal itu? Jika ya, kita bisa membuat opini-opini pembanding dengan perantaraan artikel-arikel di blog kita. Semakin menarik, akan semakin banyak orang yang suka, semakin banyak juga orang yang membaca. Semakin banyak pula opini publik yang terbentuk melalui blog kita.</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"><br />
</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><b><span style="font-size: small;">7. Media Untuk Mencari Pengahasilan Tambahan</span></b></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Ya, untuk yang satu ini saya benar-benar belum begitu berpengalaman karena saya sendiri juga sedang meraba-raba, belajar untuk mendapatkan penghasilan melalui internet. Saya ketahui dan sering melihat alangkah banyaknya lapangan kerja baru yang tercipta melalui media internet. Khususnya, saya salut kepada founder blogger yang telah menjadikan jutawan-jutawan yang lahir dengan memberikan kesempatan untuk bebas mengelola blog mereka dari blogger. Banyak program di dunia maya yang bisa kita ikuti dan bisa meningkatkan penghasilan kita. Sebut saja program reseller/affiliate marketing, Paid To Click (PTC), Paid Per Click (PPC), bisnis domain seperti hostgator, dan masih banyak lagi. Beberapa program mengharuskan kita untuk setidaknya memiliki sebuah blog. Bahkan tidak sedikit orang yang mengikuti program ini sebagai penghasilan utama mereka dan menggantungkan hidup mereka dari internet dan bisa mencukupi kehidupan mereka pula dari penghasilan yang didapat dari dunia maya tersebut.</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><br />
</div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Bagaimana? Apakah pintu hati anda mulai terbuka untuk memulai ngeblog. Bukankah akan terasa menyenangkan menyalurkan bakat dan hobi kita di sela-sela waktu luang kita dengan ngeblog. Bagi anda yang mulai terbuka fikirannya, maka silakan untuk melanjutkan tindakan awal anda untuk menjadi seorang blogger dengan mendaftar di sini untuk memilih layanan blogger dan di sini untuk memilih layanan wordpress. Selamat berjuang dan berkreativitas!</span></div>Ihsanul Hudahttp://www.blogger.com/profile/00973343987877850614noreply@blogger.com3tag:blogger.com,1999:blog-8505861799181383189.post-34628209989286224262010-12-13T02:03:00.000-08:002011-01-31T22:27:38.608-08:00Sekilas Mengenai Blog Baru Ini<div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Bismillah, ini adalah tulisan pertama untuk domain baru http://oilink.blogspot.com/ setelah berpindah-pindah tidak karuan dari dua blog sebelumnya yaitu <a href="http://insanshalih.blogspot.com/" target="_blank">hijrah pertama</a> yang merupakan blog pertama kali saya memulai aktivitas baru saya sebagai seorang blogger dan sekarang blog tersebut menjadi blog tetap yang membahas topic keagamaan kemudian berpindah lagi ke domain <a href="http://njoyblogging.blogspot.com/" target="_blank">hijrah kedua</a> yang sebelumnya bermaksud untuk menulis blog tutorial yang saya bisa dengan berbahasa English di blog tersebut. Setelah merasa lelah tak menentu dalam pencarian domain yang bagus dan pernah merasa down pula penyebab utamanya, syukur inspirasi mengetuk pikiran saya untuk tetap blogging dan Alhamdulillah sekaligus menemukan nama domain yang cantik sekali menurut saya (prikitiew he he). Baiklah karena ini awal dari oilink untuk menulis maka tutorialpun akan dibahas dari awal pula. </span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><br />
</div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"><b>Sejarah Blog</b></span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"><br />
</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI8jBUaFkf2MDkVtrtT3vcXCs0xII-zLboDyyiphDhHNi1uYaxbj0yudEMTqvJExKrIZ1qpecz5BDRid0TvJP3qFd4hpW2okhsRjJZdU_RJ0gLlJ-fsA_QUzH_qigYO70ziw5fEGt0kz8/s1600/mahirbuatblog.jpg" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="sejarah blogger" border="0" height="182" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI8jBUaFkf2MDkVtrtT3vcXCs0xII-zLboDyyiphDhHNi1uYaxbj0yudEMTqvJExKrIZ1qpecz5BDRid0TvJP3qFd4hpW2okhsRjJZdU_RJ0gLlJ-fsA_QUzH_qigYO70ziw5fEGt0kz8/s320/mahirbuatblog.jpg" width="320" /></a><span style="font-size: small;">Media blog pertama kali dipopulerkan oleh Blogger.com, yang dimiliki oleh PyraLab sebelum akhirnya PyraLab diakuisi oleh Google.Com pada akhir tahun 2002 yang lalu. Semenjak itu, banyak terdapat aplikasi-aplikasi yang bersifat open-source atau gratisan yang diperuntukkan kepada perkembangan para penulis-penulis blog tersebut. Blog memiliki fungsi beraneka ragam dari sebuah catatan harian, media publikasi atau promosi produk barang dan jasa, sampai dengan program-program media dan perusahaan-perusahaan yang berkaitan dengan internet marketing. Sebagian blog dipelihara oleh seorang penulis tunggal, sementara sebagian lainnya oleh beberapa penulis. Banyak juga weblog yang memiliki fasilitas interaksi dengan para pengunjungnya, yang dapat memperkenankan para pengunjungnya untuk meninggalkan komentar atas isi dari tulisan yang dipublikasikan, namun demikian ada juga yang sebaliknya atau yang bersifat non-interaktif.</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"><br />
</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;"><b>Pengenalan Blogspot atau Blogger</b></span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><br />
</div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Blog merupakan singkatan dari "web log" yang terpisah dari dua kata berbeda arti, log (catatan) yang ditulis dalam bentuk situs web. Tulisan-tulisan di blog yang nantinya akan lebih akrab dikenal dengan sebutan posting (entri) ditampilkan secara urut berdasarkan waktu penulisannya, meskipun tidak selamanya demikian karena bisa saja nantinya dapat kita ubah sendiri waktu penulisannya. Pengguna blog, maksud saya orang yang menulis di blog disebut blogger. Kita dapat mengetahui gambaran sosok seorang blogger dengan melihat isi blognya. Situs web seperti blog ini biasanya dapat diakses oleh semua pengguna internet sesuai dengan topik dan tujuan dari si pengguna blog tersebut.</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><br />
<div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;">Anda dapat menemukan berbagai layanan situs internet yang menyediakan layanan untuk membuat blog, diantaranya: wordpress, blogger, blogdetik, dan lain-lain. Blogspot merupakan salah satu situs penyedia layanan yang didukung oleh Google. Anda bisa membuat blog pada blogspot dengan membuka alamat website: www.blogger.com atau www.blogspot.com karena kedua situs tersebut isinya sama saja.</span></div></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><br />
</div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Sekian dulu tulisan awal ini yang sekaligus menjadi peresmian blog oilink dan semoga tetap terus semangat ngeblog.</span></div>Ihsanul Hudahttp://www.blogger.com/profile/00973343987877850614noreply@blogger.com0tag:blogger.com,1999:blog-8505861799181383189.post-59998238001120806042010-10-10T19:40:00.000-07:002011-01-31T02:54:32.981-08:00Sexy Vertical Sliding Panel<div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Apakah anda tertarik dengan sebuah panel yang berfungsi semacam drawer (laci) yang menggeser menu atau apa saja ketika membukanya? Memang sepertinya panel ini tampak biasa saja tapi cukup layak qo untuk dicoba. Saya rasa akan terasa menyenangkan untuk menciptakan sesuatu yang berbeda dan bekerja dengan cara yang sama, tapi sedikit lebih fleksibel. Ya, artinya mengubah tampilan menu blog anda sedikit unik biar ga mono itu-itu aja. </span></div><div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;"><br />
</span></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Berikut tampilan panel tersebut dan click untuk memperbesar atau periksa di bawah gambar untuk bekerja (demo):</span></div><div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;"><br />
</span></div><div class="separator" style="clear: both; font-family: Georgia,"Times New Roman",serif; text-align: center;"><span style="font-size: small;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirPritSXpdt6KIfMEuNe-lyBTUSDTCkh1fq4-qeOLSyVhAQT9CxnCQm4Mg-ZlLzxKi3MpS3SqDuYPJ9-ty_B5V7dYzi1g2Cgy9Ck3t6IUgX8uJ6UeLVLUaYgMmkG1wmlFmaEU7T9-5rwHj/s1600/fafae.bmp" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirPritSXpdt6KIfMEuNe-lyBTUSDTCkh1fq4-qeOLSyVhAQT9CxnCQm4Mg-ZlLzxKi3MpS3SqDuYPJ9-ty_B5V7dYzi1g2Cgy9Ck3t6IUgX8uJ6UeLVLUaYgMmkG1wmlFmaEU7T9-5rwHj/s320/fafae.bmp" width="291" /></a></span></div><br />
<div class="separator" style="clear: both; font-family: Georgia,"Times New Roman",serif; text-align: center;"></div><div class="view_demo"><a href="http://oilink-demo.blogspot.com/2010/10/blog-post.html" target="_blank">Live Demo</a>Klik di sini untuk melihat demo Sexy Vertical Sliding Panel</div><div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;"><br />
</span></div><div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;">Tertarik? Lanjutkan. Berikut Cara membuat Sexy Vertical Sliding Panel mengggunakan jQuery And CSS3 di Blogger:</span></div><ul style="font-family: Georgia,"Times New Roman",serif;"><li><span style="font-size: small;">Login dan click Design dan masuk pada Edit HTML.</span></li>
<li><span style="font-size: small;">Tambahkan kode dibawah ini diatas kode </span><span style="color: red; font-size: small;"><b></head></b></span><span style="font-size: small;">: </span><span style="font-size: small;"><b> </b></span></li>
</ul><blockquote style="background-color: white; font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;"><code> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$(".trigger").click(function(){<br />
$(".panel").toggle("fast");<br />
$(this).toggleClass("active");<br />
return false;<br />
});<br />
});<br />
</script> </code></span></blockquote><ul style="font-family: Georgia,"Times New Roman",serif;"><li><span style="font-size: small;">Selanjutnya silakan letakkan kode dibawah ini di atas pada bagian</span><span style="font-size: small;"> </span><span style="font-size: small;"><b><span style="color: red;"></body></span></b></span><span style="font-size: small;">: </span></li>
</ul><div style="background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYh7g76RBTgfVo7rm_rUiBnidypp-lkE8SNr8olRYK3mNWqtuCg3L0fj8h91EJXL8FCFK7fsLyDPB7vR-bGgQHrk8xZRbYyNLIF_4b130_hIZLCkBbvjKAbi-mw9OHhqbYsuBOThZsMfWa/") repeat-y scroll left top transparent; border: 1px solid rgb(4, 4, 180); font-family: Georgia,"Times New Roman",serif; height: 200px; overflow: auto; padding: 5px 5px 5px 35px; width: 553px;"><span style="font-size: small;"><div class='panel'><h3>Sliding Panel</h3><p>Here's our sliding panel (drawer) made using jQuery with the toggle function and some CSS3 for the rounded corners</p> <p>This panel could also be placed on the right. This could be particularly useful if, <a href="http://insanshalih.blogspot.com" title="The United Muslim Foundation">like me</a>, you have a left-aligned website layout.</p></span><br />
<span style="font-size: small;"><h3>A Little Something About Me</h3></span><br />
<div style="text-align: left;"><span style="font-size: small;"><p>My name&#39;s <a href='http://www.blogger.com/profile/09230988353278370498' title='Ihsanul Huda'>Ihsanul Huda</a>. My God is Allah. I&#39;m interested in Blogger for Da&#39;wah. I&#39;m not sure if that would count as a Da&#39;wah booth but the best way I can do for Muslim brothers and sisters is to spread Da&#39;wah so that we return to Islam kaffah and follow it properly. Sad truth is most Muslims in Indonesia nowadays place their religion at the lowest priority, and are too caught up with this world. Especially the younger generation, which is being lost in places. I still say alhamdulillah there&#39;s a lot of knowledge spreading among the youth with this media coming out and speaking. This is a majelis for muslimin to share, remind each other so that we can keep our tauheed. Be a true Muslim! </p></span></div><span style="font-size: small;"><div style='clear:both;'/></span><br />
<span style="font-size: small;"><div class='columns'></span><br />
<span style="font-size: small;"><div class='colleft'></span><br />
<span style="font-size: small;"><h3>Navigation</h3><ul></span><br />
<div style="text-align: left;"><span style="font-size: small;"><li><a href='http://insanshalih.blogspot.com' title='home'>Home</a></li></span></div><div style="text-align: left;"><span style="font-size: small;"><li><a href='http://www.emailmeform.com/builder/form/66D51h3rSiBfd98V' title='contact'>Contact</a></li></span></div><span style="font-size: small;"></ul></div></span><br />
<span style="font-size: small;"><div class='colright'></span><br />
<span style="font-size: small;"><h3>Social Stuff</h3></span><br />
<span style="font-size: small;"><ul></span><br />
<div style="text-align: left;"><span style="font-size: small;"><li><a href='http://twitter.com/insanshalih' title='Twitter'>Twitter</a></li></span></div><div style="text-align: left;"><span style="font-size: small;"><li><a href='http://facebook.com/insanshalih' title='Facebook'>Facebook</a></li></span></div><span style="font-size: small;"></ul></div></div></span><br />
<span style="font-size: small;"><div style='clear:both;'/></div></span><br />
<span style="font-size: small;"><a class='trigger' href='#'>INFO</a></span></div><ul style="font-family: Georgia,"Times New Roman",serif;"><li><span style="font-size: small;">Copy CSS dibawah ini kemudian letakkan <i>(paste)</i> pada bagaian CSS Blogger atau letakkan di atas <b><span style="color: red;">]]></b:skin></span></b> atau buat CSS Eksternal Blogger: </span></li>
</ul><div style="background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYh7g76RBTgfVo7rm_rUiBnidypp-lkE8SNr8olRYK3mNWqtuCg3L0fj8h91EJXL8FCFK7fsLyDPB7vR-bGgQHrk8xZRbYyNLIF_4b130_hIZLCkBbvjKAbi-mw9OHhqbYsuBOThZsMfWa/") repeat-y scroll left top transparent; border: 1px solid rgb(4, 4, 180); font-family: Georgia,"Times New Roman",serif; height: 200px; overflow: auto; padding: 5px 5px 5px 35px; width: 553px;"><span style="font-size: small;">body {background:#1a1a1a; text-align:left; </span><br />
<span style="font-size: small;">color:#666;width:700px; font-size:14px; font-family:georgia, 'time new romans', serif; </span><br />
<span style="font-size: small;">margin:0 auto;</span><br />
<span style="font-size: small;">padding:0;}</span><br />
<span style="font-size: small;">a:focus {outline: none;}</span><br />
<span style="font-size: small;">h1 {font-size: 34px; font-family: verdana, helvetica, arial, sans-serif; letter-spacing:-2px; color:#9FC54E; font-weight:700; padding:20px 0 0;}</span><br />
<span style="font-size: small;">h2 {font-size: 24px; font-family: verdana, helvetica, arial, sans-serif; color:#444444; font-weight: 400; padding: 0 0 10px;}</span><br />
<span style="font-size: small;">h3 {font-size:14px; font-family:verdana, helvetica, arial, sans-serif; letter-spacing:-1px; color:#fff; font-weight: 700; text-transform:uppercase; margin:0; padding:8px 0 8px 0; }</span><br />
<span style="font-size: small;">img{float: right; margin: 3px 3px 6px 8px; padding: 5px; background: #222222; border: 1px solid #333333;} p { color:#cccccc; line-height:22px; padding: 0 0 10px; margin: 20px 0 20px 0;}</span><br />
<span style="font-size: small;">img {border:none; } #container {clear: both; margin: 0; padding: 0;}#container a{float: right; background: #9FC54E; border: 1px solid #9FC54E; -moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px; -moz-border-radius-bottomleft: 20px; -webkit-border-bottom-left-radius: 20px; text-decoration: none; font-size: 16px; letter-spacing:-1px; font-family: verdana, helvetica, arial, sans-serif; color:#fff; padding: 20px; font-weight: 700;}#container a:hover{float: right; background: #a0a0a0; border: 1px solid #cccccc; -moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px; -moz-border-radius-bottomleft: 20px; -webkit-border-bottom-left-radius: 20px; text-decoration: none; font-size: 16px; letter-spacing:-1px; font-family: verdana, helvetica, arial, sans-serif; color:#fff; padding: 20px; font-weight: 700;}</span><br />
<span style="font-size: small;">.content {font-style:normal; font-family:helvetica, arial, verdana, sans-serif; color:#ffffff; background:#333333; border:1px solid #444444; -moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px; -moz-border-radius-bottomleft: 20px; -webkit-border-bottom-left-radius: 20px; margin: 30px 0 50px; padding: 15px 0;}</span><br />
<span style="font-size: small;">.content p {margin: 10px 0; padding: 15px 20px; }</span><br />
<span style="font-size: small;">.panel {position: fixed; top: 50px; left: 0; display: none; background: #000000; border:1px solid #111111; -moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px; -moz-border-radius-bottomright: 20px; -webkit-border-bottom-right-radius: 20px; width: 330px; height: auto; padding: 30px 30px 30px 130px; filter: alpha(opacity=85); opacity: .85;}</span><br />
<span style="font-size: small;">.panel p{margin: 0 0 15px 0; padding: 0; color: #cccccc;} .panel a, .panel a:visited{margin: 0; padding: 0; color: #9FC54E; text-decoration: none; border-bottom: 1px solid #9FC54E;}</span><br />
<span style="font-size: small;">.panel a:hover,</span><br />
<span style="font-size: small;">.panel a:visited:hover{margin: 0; padding: 0; color: #ffffff; text-decoration: none; border-bottom: 1px solid #ffffff;} a.trigger{position: fixed; text-decoration: none; top: 80px; left: 0; font-size: 16px; letter-spacing:-1px; font-family: verdana, helvetica, arial, sans-serif; color:#fff; padding: 20px 40px 20px 15px; font-weight: 700; background:#333333 url(images/plus.png) 85% 55% no-repeat; border:1px solid #444444; -moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px; -moz-border-radius-bottomright: 20px; -webkit-border-bottom-right-radius: 20px; -moz-border-radius-bottomleft: 0px; -webkit-border-bottom-left-radius: 0px; display: block; }a.trigger:hover{position: fixed; text-decoration: none; top: 80px; left: 0; font-size: 16px; letter-spacing:-1px; font-family: verdana, helvetica, arial, sans-serif; color:#fff; padding: 20px 40px 20px 20px; font-weight: 700; background:#222222 url(images/plus.png) 85% 55% no-repeat; border:1px solid #444444; -moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px; -moz-border-radius-bottomright: 20px; -webkit-border-bottom-right-radius: 20px; -moz-border-radius-bottomleft: 0px; -webkit-border-bottom-left-radius: 0px; display: block;}</span><br />
<span style="font-size: small;">a.active.trigger {background:#222222 url(images/minus.png) 85% 55% no-repeat;}</span><br />
<span style="font-size: small;">.columns{clear: both; width: 330px; padding: 0 0 20px 0; line-height: 22px;}</span><br />
<span style="font-size: small;">.colleft{float: left; width: 130px; line-height: 22px;}</span><br />
<span style="font-size: small;">.colright{float: right; width: 130px; line-height: 22px;}ul{padding: 0; margin: 0; list-style-type: none;} ul li {padding: 0; margin: 0; list-style-type: none;} </span></div><ul style="font-family: Georgia,"Times New Roman",serif;"><li><span style="font-size: small;">Perhatian! Ini hanyalah merupakan contoh tampilan panel saya, dan untuk merubah link dan lainnya anda bisa ubah sendiri aja ya. Adapun perubahan structure bisa kita lihat di bawah ini. Jika anda ingin menempatkan tombol pemicu dan geser panel di sebelah kanan atau kiri jendela, cukup mengedit a.trigger dan .panel switch 'left' untuk 'right'. Contoh:</span></li>
</ul><div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;">Dari:</span></div><blockquote style="background-color: white; font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;"><code>a.trigger{<br />
position: absolute;<br />
top: 80px; left: 0;<br />
}<br />
<br />
.panel {<br />
position: absolute;<br />
top: 50px; left: 0;<br />
}</code></span></blockquote><div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;">Menjadi</span><span style="font-size: small;">:</span></div><blockquote style="background-color: white; font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;"><code>a.trigger{<br />
position: absolute;<br />
top: 80px; right: 0;<br />
}<br />
<br />
.panel {<br />
position: absolute;<br />
top: 50px; right: 0;<br />
}</code></span></blockquote><div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;">Edit pula posisi sudutnya sehingga:</span></div><div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;"><br />
</span></div><div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;">Dari:</span></div><blockquote style="background-color: white; font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;"><code>border:1px solid #444444;<br />
-moz-border-radius-topright: 20px;<br />
-webkit-border-top-right-radius: 20px;<br />
-moz-border-radius-bottomright: 20px;<br />
-webkit-border-bottom-right-radius: 20px;</code></span></blockquote><div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;">Menjadi: </span></div><blockquote style="background-color: white; font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;"><code>border:1px solid #444444;<br />
-moz-border-radius-topleft: 20px;<br />
-webkit-border-top-left-radius: 20px;<br />
-moz-border-radius-bottomleft: 20px;<br />
-webkit-border-bottom-left-radius: 20px;</code></span></blockquote><div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;">Jika anda ingin mengganti tombol tab pemicu dan panel geser tersebut agar selalu tetap terlihat saat anda geserkan scroll mouse ke atas dan ke bawah, ubahlah posisi absolute menjadi posisi tetap, seperti ini:</span></div><div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;"><br />
</span></div><div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;">Dari: </span></div><blockquote style="background-color: white; font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;"><code>a.trigger{<br />
position: absolute;<br />
top: 80px; left: 0;<br />
}<br />
<br />
.panel {<br />
position: absolute;<br />
top: 50px; left: 0;<br />
}</code></span></blockquote><div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;">Menjadi</span><span style="font-size: small;">:</span></div><blockquote style="background-color: white; font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;"><code>a.trigger{</code></span><br />
<span style="font-size: small;"><code>position: fixed;</code></span><br />
<span style="font-size: small;"><code>top: 80px; left: 0;</code></span><br />
<span style="font-size: small;"><code>}</code></span><br />
<span style="font-size: small;"><code></code></span><br />
<span style="font-size: small;"><code>.panel {</code></span><br />
<span style="font-size: small;"><code>position: fixed;</code></span><br />
<span style="font-size: small;"><code>top: 50px; left: 0;</code></span><br />
<span style="font-size: small;"><code>}</code></span></blockquote><div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;">Jika anda ingin mengedit transparansi panel geser, cukup menghapus atau mengedit bagian CSSnya:</span></div><blockquote style="background-color: white; font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;"><code>filter: alpha(opacity=85);</code></span><br />
<span style="font-size: small;"><code>opacity: .85;</code></span></blockquote><div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;">Demo</span><span style="font-size: small;"> </span><span style="font-size: small;">dan Referensi</span><span style="font-size: small;">:</span></div><div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;"><br />
</span></div><div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;"><a href="http://spyrestudios.com/demos/sliding-panel-left/">The Sliding Panel And Trigger Button On The Left Have Absolute Positioning</a></span> </div><div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;"><br />
</span></div><div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;"><a href="http://spyrestudios.com/demos/sliding-panel-right/">The Sliding Panel And Trigger Button On The Right Have Absolute Positioning</a></span></div><div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;"><br />
</span></div><div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;"><a href="http://spyrestudios.com/demos/sliding-panel-fixed/">The Sliding Panel And Trigger Button On The Left Have Fixed Positioning</a></span></div>Ihsanul Hudahttp://www.blogger.com/profile/00973343987877850614noreply@blogger.com0tag:blogger.com,1999:blog-8505861799181383189.post-31992354604604760072010-10-10T09:18:00.000-07:002011-01-26T01:05:46.224-08:00Auto Hidden Chat Box<div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><span style="font-size: small;">Ok guys, pada kesempatan yang berbahagia ini di tengah kesibukan akademic, saya sempatkan posting tutorial blogger untuk pemula. Sebuah penerapan kode HTML yang dapat digunakan untuk menghemat ruang blog kita. Kode tersebut digunakan untuk menyembunyikan berbagai widget namun pada tutorial ini saya contohkan aplikasi chatting untuk disembunyikan. Bagi para sobat blogger yang merasa sumpek dengan ruangan blog yang penuh dengan berbagai macam perkakas blog bisa gunakan penerapan ini di blog sobat. Berikut penampakannya:</span><br />
<br />
<div style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4RtYkTKYzPGaPB7B1yq722-vmj0It6uk1uZQAeZN5xsatLlr_6Wwba0nxFVXjvuRb51hyAJpsIcTMMpYnSNrRgjfRjP_BRzSpQ2yr8-AFYUvyP9lz83ZeAGym1INcW8dT-aMnVL6y7aLJ/s1600/chatbox+insanshalih.blogspot.com.bmp" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4RtYkTKYzPGaPB7B1yq722-vmj0It6uk1uZQAeZN5xsatLlr_6Wwba0nxFVXjvuRb51hyAJpsIcTMMpYnSNrRgjfRjP_BRzSpQ2yr8-AFYUvyP9lz83ZeAGym1INcW8dT-aMnVL6y7aLJ/s320/chatbox+insanshalih.blogspot.com.bmp" title="membuat auto hide chat box" width="216" /></a><span style="font-size: small;"> </span></div></div><div class="separator" style="clear: both; font-family: Georgia,"Times New Roman",serif; text-align: justify;"></div><br />
<div class="view_demo"><a href="http://oilink-demo.blogspot.com/p/auto-hidden-chat-box-demo.html" target="_blank">Live Demo Auto Hidden Chat Box</a>Klik untuk melihat sreenshotnya</div><br />
<div class="separator" style="clear: both; font-family: Georgia,"Times New Roman",serif; text-align: justify;"></div><div style="font-family: Georgia,"Times New Roman",serif;">Bagaimana? Menarik bukan?</div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;">Simak tutorial berikut:</div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;">Saya bagi dalam 2 tipe penempatan chat box, sebelah kiri dan kanan.</div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><br />
</div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;">Tampilan Widget di sebelah Kanan:</div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><br />
<div style="background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYh7g76RBTgfVo7rm_rUiBnidypp-lkE8SNr8olRYK3mNWqtuCg3L0fj8h91EJXL8FCFK7fsLyDPB7vR-bGgQHrk8xZRbYyNLIF_4b130_hIZLCkBbvjKAbi-mw9OHhqbYsuBOThZsMfWa/") repeat-y scroll left top transparent; border: 1px solid rgb(4, 4, 180); font-family: Georgia,Times New Roman,serif; height: 200px; overflow: auto; padding: 5px 5px 5px 35px; width: 553px;"><!-- Right hidden chatbox by http://insanshalih.blogspot.com START --><br />
<style><br />
#hcl {<br />
position:fixed;<br />
top:100px;<br />
left:0px;<br />
z-index:+1000;<br />
}<br />
<br />
* html #hcl {position:relative;}<br />
.hcltab {<br />
height:100px;<br />
width:30px;<br />
float:left;<br />
cursor:pointer;<br />
background:url('http://img202.imageshack.us/img202/8018/copyofcbblue.png') no-repeat;<br />
}<br />
<br />
.hclcontent {<br />
float:left;<br />
border:2px solid #790909;<br />
background:#f3f6f7;<br />
padding:10px;<br />
}<br />
<br />
.hc-credit {font-size:9px}<br />
.hc-credit a {text-decoration:none}<br />
</style><br />
<script type="text/javascript"><br />
<br />
function showHidehcl(){<br />
var hcl = document.getElementById("hcl");<br />
var w = hcl.offsetWidth;<br />
hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);<br />
hcl.opened = !hcl.opened;<br />
}<br />
<br />
function movehcl(x0, xf){<br />
var hcl = document.getElementById("hcl");<br />
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;<br />
var dir = xf>x0 ? 1 : -1;<br />
var x = x0 + dx * dir;<br />
hcl.style.left = x.toString() + "px";<br />
if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);}<br />
}<br />
</script><br />
<br />
<div id="hcl"><br />
<div class="hclcontent"><br />
<br />
<div style="color: red;"><span style="font-size: large;"><!—Widget Here --></span></div><br />
<br /><br />
<br />
<div class="hc-credit"><br />
<span style="float:left"><br />
<br />
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE --><br />
<br />
<a href="http://oilink.blogspot.com/2010/10/auto-hidden-chat-box.html" target="_blank"> Get this widget! </a><br />
<br />
</span><br />
<span style="float:right"><br />
<a href="javascript:showHidehcl()"><br />
<br />
[close]<br />
</a></span><br />
</div><br />
</div><br />
<br />
<div class="hcltab" onclick="showHidehcl()"> </div><br />
</div><br />
<script type="text/javascript"><br />
<br />
var hcl = document.getElementById("hcl");<br />
hcl.style.left = (30-hcl.offsetWidth).toString() + "px";<br />
</script><br />
<br />
<!-- right hidden chatbox by http://insanshalih.blogspot.com END --></div></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><br />
</div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;">Tampilan Widget di sebelah Kiri:</div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><br />
<div style="background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYh7g76RBTgfVo7rm_rUiBnidypp-lkE8SNr8olRYK3mNWqtuCg3L0fj8h91EJXL8FCFK7fsLyDPB7vR-bGgQHrk8xZRbYyNLIF_4b130_hIZLCkBbvjKAbi-mw9OHhqbYsuBOThZsMfWa/") repeat-y scroll left top transparent; border: 1px solid rgb(4, 4, 180); font-family: Georgia,Times New Roman,serif; height: 200px; overflow: auto; padding: 5px 5px 5px 35px; width: 553px;"><!-- left hidden chatbox by http://insanshalih.blogspot.com START --><br />
<style><br />
#hcr {<br />
position:fixed;<br />
top:100px;<br />
z-index:+1000;<br />
}<br />
<br />
* html #hcr {position:relative;}<br />
.hcrtab {<br />
height:100px;<br />
width:30px;<br />
float:left;<br />
cursor:pointer;<br />
background:url('http://img202.imageshack.us/img202/8018/copyofcbblue.png') no-repeat;<br />
}<br />
<br />
.hcrcontent {<br />
float:left;<br />
border:2px solid #003e82;<br />
background:#f3f6f7;<br />
padding:10px;<br />
}<br />
<br />
.hc-credit {font-size:9px}<br />
.hc-credit a {text-decoration:none}<br />
</style><br />
<br />
<script type="text/javascript"><br />
function showHidehcr(){<br />
var hcr = document.getElementById("hcr");<br />
var w = hcr.offsetWidth;<br />
hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);<br />
hcr.opened = !hcr.opened;<br />
}<br />
<br />
function movehcr(x0, xf){<br />
var hcr = document.getElementById("hcr");<br />
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;<br />
var dir = xf>x0 ? 1 : -1;<br />
var x = x0 + dx * dir;<br />
hcr.style.right = x.toString() + "px";<br />
if(x0!=xf){setTimeout("movehcr("+x+", "+xf+")", 10);}<br />
}<br />
</script><br />
<br />
<div id="hcr"><br />
<div class="hcrtab" onclick="showHidehcr()"> </div><br />
<div class="hcrcontent"><br />
<br />
<div style="color: red;"><span style="font-size: large;"><!—Widget Here --></span></div><br />
<br /><br />
<br />
<div class="hc-credit"><br />
<span style="float:left"><br />
<br />
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE --><br />
<br />
<a href="http://oilink.blogspot.com/2010/10/auto-hidden-chat-box.html" target="_blank"> Get this widget! </a><br />
<br />
</span><br />
<br />
<span style="float:right"><br />
<a href="javascript:showHidehcr()"><br />
<br />
[close]<br />
<br />
</a></span><br />
</div><br />
</div><br />
</div><br />
<br />
<script type="text/javascript"><br />
var hcr = document.getElementById("hcr");<br />
hcr.style.right = (30-hcr.offsetWidth).toString() + "px";<br />
</script><br />
<br />
<!--left hidden chatbox by http://insanshalih.blogspot.com END --></div><br />
</div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"></div><div class="MsoNormal" style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><div>Note:<br />
<blockquote>#hcr {<br />
position:fixed; /* Menunjukkan bahwa posisi widget tetap tidak bergeser dan sobat bisa ganti menjadi posisi absolute */</blockquote><blockquote>#hcr {<br />
position:absolute; /* Menunjukkan bahwa posisi widget tetap dapat bergeser dengan menggeser scroll */</blockquote><blockquote>top:100px; /* Menunjukkan bahwa jarak tab dari atas adalah sejauh 100px. Bisa kalian ganti dengan bottom:100px yang berarti jarak tab dari bawah menjadi sejauh 100px */<br />
z-index:+1000;<br />
}</blockquote></div><blockquote><div>.hcrtab {</div><div>height:100px; /* tinggi tab pembuka hidden chatbox */</div><div>width:30px; /* tinggi tab pembuka hidden chatbox */</div><div>float:left;</div><div>cursor:pointer;</div><div>background:url('http://img202.imageshack.us/img202/8018/copyofcbblue.png') no-repeat; /* gambar yang dijadikan sebagai tab pembuka hidden chatbox */</div><div>} </div></blockquote><blockquote><div>.hcrcontent {</div><div>float:left; border:2px solid #003e82; /* warna dan ukuran border hidden chatbox */ </div><div>background:#f3f6f7; /* warna background hidden chatbox (sebaiknya tidak perlu diganti jika kalian mengedit kode lain pada style) */ </div><div>padding:10px;</div><div> }</div></blockquote></div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;"><br />
</div><div style="font-family: Georgia,"Times New Roman",serif; text-align: justify;">Alhamdulillah, semoga dengan tutorial yang sesederhana ini dapat bermanfaat. Selamat mencoba! Ohya, pilihan model dan warna tab pemicunya dapat diubah sendiri:</div><br />
<div class="separator" style="clear: both; font-family: Georgia,"Times New Roman",serif; text-align: justify;"><table><tr> <td><img border="0" src="http://img202.imageshack.us/img202/8018/copyofcbblue.png" /></td> <td><img border="0" src="http://img714.imageshack.us/img714/6969/cbblue.png" /></td> <td><img border="0" src="http://img43.imageshack.us/img43/7977/copy3ofcbblue.png" /></td> <td><img border="0" src="http://img571.imageshack.us/img571/2107/copy2ofcbblue.png" /></td> </tr>
</table></div><pre class="code">http://img202.imageshack.us/img202/8018/copyofcbblue.png</pre><pre class="code">http://img714.imageshack.us/img714/6969/cbblue.png</pre><pre class="code">http://img43.imageshack.us/img43/7977/copy3ofcbblue.png</pre><pre class="code">http://img571.imageshack.us/img571/2107/copy2ofcbblue.png</pre>Ihsanul Hudahttp://www.blogger.com/profile/00973343987877850614noreply@blogger.com1tag:blogger.com,1999:blog-8505861799181383189.post-80672495388890723212010-10-10T08:36:00.000-07:002010-12-08T02:54:01.354-08:00Cara Menambahkan Meta Tag<div style="font-family: Georgia,"Times New Roman",serif;"><div style="text-align: justify;"><div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;">Salah satu teknik agar situs blog anda dapat terindeks dengan baik oleh mesin pencari adalah dengan melakukan teknik seo. Apa itu SEO? SEO merupakan singkatan</span><span id="main" style="font-size: small; visibility: visible;"><span id="search" style="visibility: visible;"> dari <i>Search Engine</i> </span></span><span id="main" style="font-size: small; visibility: visible;"><span id="search" style="visibility: visible;"><i>Optimization</i></span></span><span id="main" style="font-size: small; visibility: visible;"><span id="search" style="visibility: visible;">, seperti yang saya jelaskan tadi yaitu suatu teknik agar website yang kita buat mudah ditemukan melalui search engine seperti Google. Baiklah, saya jelaskan saja langsung bagaimana menambahkan meta tag pada blogger karena penggunaan meta tag yang baik merupakan salah satu teknik SEO yang mutlak untuk digunakan. Silakan ikuti penjelasan berikut:</span></span><span style="font-size: small;"> </span></div><br />
<div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;">1. Sign in lalu masuk ke dashboard blogger anda. </span></div></div></div><div class="separator" style="clear: both; font-family: Georgia,"Times New Roman",serif; text-align: center;"><span style="font-size: small;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLZodUYbxjXe9_Vk-7kstFXeyN-A2SucNLiNXOTwsrEijAz6tAB7CMW2-j6V81qCIAdODvU9L47Qw3ggDdFgGN3igohkxteHeMi9TrA-bMoKBjhszRjzLXYaInuFDGiJw8nVElk6g6sMTo/s1600/editetame.bmp" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="97" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLZodUYbxjXe9_Vk-7kstFXeyN-A2SucNLiNXOTwsrEijAz6tAB7CMW2-j6V81qCIAdODvU9L47Qw3ggDdFgGN3igohkxteHeMi9TrA-bMoKBjhszRjzLXYaInuFDGiJw8nVElk6g6sMTo/s320/editetame.bmp" width="320" /></a></span></div><div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;"> </span></div><div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;">2. Click Design lalu click pada tab Edit HTML. </span></div><div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;">3. Temukan kode ini: <b:include data='blog' name='all-head-content'/></span></div><div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;">4. Sekarang tambahkan kode di bawah ini selepas kode tersebut sehingga menjadi:</span></div><blockquote style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;"><b:include data='blog' name='all-head-content'/></span><span style="font-size: small;"> </span><br />
<span style="font-size: small;"><meta content='DESCRIPTION HERE' name='description'/></span><br />
<span style="font-size: small;"><meta content='KEYWORDS HERE' name='keywords'/></span><br />
<span style="font-size: small;"><meta content='AUTHOR NAME HERE' name='author'/></span></blockquote><div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;">5. Lalu gantikan kode di bawah ini dan sesuaikan dengan blog anda:</span></div><blockquote style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;"> DESCRIPTION HERE: tulis keterangan blog.</span><br />
<span style="font-size: small;"> KEYWORDS: tulis kata kunci dari blog anda.</span><br />
<span style="font-size: small;"> AUTHOR NAME: tulis nama penulis (nama anda).</span></blockquote><div style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: small;">6. Semoga bermanfaat. </span></div><ol style="font-family: Georgia,"Times New Roman",serif;"></ol>Ihsanul Hudahttp://www.blogger.com/profile/00973343987877850614noreply@blogger.com0