Mengganti Link Read More Dengan Gambar 6 Feb 2011 11:49 PM (14 years ago)

mengganti link read more dengan gambar blogger

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 Cara Membuat Read More Blogger, 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 ini. 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.

Berikut penjelasan singkat untuk mengganti link read more dengan gambar atau icon pada blogger:

1. Seperti biasa Log in terlebih dahulu ke account blogger anda, kemudian pilih menu Design > Edit HTML, jangan lupa untuk centang Expand Widget Templates dan temukan kode yang ditandai di bawah ini:

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>Read More...</a>
</b:if>

2. Bagaimana? Sudah dapat? Ganti tulisan Read More... dengan kode ini:

<img border="0" src="http://urlgambarreadmorebloggeranda.com"/ >

Atau ganti tulisan yang ditandai berwarna merah di atas dengan url gambar read more anda. Anda juga dapat gunakan gambar yang telah saya sediakan berikut, silakan dipilih salah satu:

tulisan link read more blogger dengan gambar

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV14gGV2rd2iSZF-bwL_YYZ0tAcaiRdoptnZ-rUIoimAzRNRcPJjk3mWLGeFzc-BmMIugjE9l7RM3gXJVb83NGsxf21_8dL_Oa6DLp86PXFe4FVXLGz1VrC4MoudJJ2HoXwzL2O5NrzxE/s1600/readmore.gif"/ >
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYxUQqZVw4Q5jrztY6Rj5tDiIgL8CgXYwX1A6HKXvKNt3ZOlsyiZchTr4hE6PqW9PPDrprKzkH8JQSBzYgF0h-9M1UHKsrMjYn8aQ23FbqelJQ9fosCeiKQcaJUE-bSTdiReRh3cDzF_E/s1600/more+button.gif"/ >
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZeFVR_MMrigvybN_qg2XcBVs9pC2ndgrUbu44A_QOptolphCiAzc3tPXsnxDFywlWT49lHwAibIFLcW49A3b90ebkhmnSjh77k7s7ZTx6iYTEGpB2Xkl85Ehx7EwBeXRaIpuv9sr3p8I/s1600/readmore.png"/ >
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhBh1ykH4DFB7ua0v_1NkYwYwyV8Vp5FDFbNLoZ3awGly96WLWTfhwBmcaOmI0mLxr5OdyD8RYwEDRpUb75_L4Vnx11upPELmUuKx6tKikFX8qv1UTx3Od9ySTR0ZxsvgEn-yQTeq_elg/s1600/read+more+arrow.png"/ >

3. Langkah akhir tinggal klik Save Template dan lihat hasilnya.

Membuat Text Area 6 Feb 2011 9:25 PM (14 years ago)

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 kode HTML 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.

Berikut kode untuk membuat text area:

<p align="center"><textarea name="code" rows="5" cols="20">masukkan text atau kode HTML anda di sini</textarea></p>

rows="5" /*Menunjukkan tinggi text area. /*
cols="20" /*Menunjukkan lebar text area. /*

Contoh penerapannya langsung:

<p align="center"><textarea name="code" rows="5" cols="20"><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>

Maka hasilnya menjadi:

Ada cara lain yang lebih memudahkan pengunjung untuk mendapatkan kode HTML yang disediakan oleh kita yaitu dengan memberikan variasi penambahan tombol Select All atau Highlight All. Hanya ikuti langkah mudah berikut untuk mengubah kode text area dengan Select All atau Highlight All.

<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">masukkan text atau kode HTML anda di sini</textarea></p></form>

<div align="center"> /*Menunjukkan posisi tombol Select All./*
value="Select All" /*Tulisan yang akan muncul di tombol dan dapat diganti terserah anda seperti Highlight All. /*

Contoh penerapannya langsung:

<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>

Maka hasilnya menjadi:

Bagaimana? Siap untuk bertukar link menggunakan text area ini dengan sahabat blogger lain. Selamat mencoba.

Script Tombol Bookmark This 3 Feb 2011 1:12 AM (14 years ago)

cara membuat tombol link script bookmark this

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 cara membuat script bookmark. 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.

Berikut cara membuat script tombol bookmark this pada blogger:

1. Log in ke account blogger anda, kemudian pilih menu Design > Edit HTML, lalu temukan kode </head>.
2. Tambahkan Javascript berikut di atas kode tadi:

<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>

3. Save Template

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:
1. Text link:

<a href="javascript:bookmarksite('Nama Blog', 'URL Blog')">Bookmark blog ini!</a>

2. Image link:

<a href="javascript:bookmarksite('Nama Blog', 'URL Blog')"><img src="http://urlgambarbookmarkanda.com" border="0"/></a>

Note:
Jika nama blog anda terdapat tanda kutip misalnya Ihsanul Huda's Blog, maka tambahkan backslashed (\) pada Javascript linknya, sehingga untuk contohnya menjadi:

<a href="javascript:bookmarksite('Ihsanul Huda\'s Blog', 'http://insanshalih.blogspot.com/')">Bookmark blog ini!</a>

Tombol link bookmark dapat anda pasang dimana saja baik di postingan ataupun gadget blogger anda. Silakan dicoba.

Membuat Signature Dibawah Posting Blog 31 Jan 2011 5:24 AM (14 years ago)

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.

Baiklah, langkah selanjutnya anda harus memiliki gambar signaturenya terlebih dahulu yang bisa anda dapatkan di situs resminya mylivesignature.

Setelah anda buat gambar signature pada situs tersebut silakan upload gambarnya di image file hosting favourite seperti picasa, photobucket, imageshack, etc. Kemudian ambil URL gambarnya lalu ikuti langkah berikut:
1. Seperti biasa login ke account blogger, kemudian pilih menu Design > Edit HTML, jangan lupa untuk centang Expand Widget Templates dan carilah kode berikut:

<div class='post-footer-line post-footer-line-1'>

Kalo belum ketemu yang ini juga boleh:

<p class='post-footer-line post-footer-line-1'>

Kalo masih belum ketemu juga coba cari yang ini:

<data:post.body/>

2. Tambahkan kode ini tepat di salah satu kode yang telah disebutkan di atas tadi:

<b:if cond='data:blog.pageType == "item"'>
<img src='http://urlgambarsignatureanda.com' style='border:0px;'/>
</b:if>

Ganti URL berwarna merah tersebut dengan URL gambar signature yang telah diupload tadi.
3. Klik Save Settings dan lihat hasilnya. Selamat berkreasi dengan gambar signature blog anda.

Cara Mudah Membuat Menu Navigasi Horizontal Ajaib 28 Jan 2011 9:30 PM (14 years ago)

Apa itu tombol navigasi?

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 Cara Membuat Menu Navigasi Breadcrumb.

Baiklah kita fokus kembali pada topic utama judul postingan ini. Berikut langkah-langkah yang harus anda ikuti untuk membuat menu navigasi horizontal pada blogger:

1. Seperti biasa login ke account blogger, kemudian pilih menu Design > Page Element, lalu Add a Gadget.

2. Masukkan kode berikut pada HTML/Javascript gadget anda:

Hasilnya menjadi:

Anda dapat memberikan variasi warna dan pengaturan kode CSS lain agar terlihat lebih indah seperti:

Berikut keterangan kode penting yang harus anda ganti:

width="620" height="28" /*Sesuaikan dengan ukuran lebar main-wrapper blog anda dan ubah juga tinggi menu tab sesuai selera anda. /*

href='#'"> <a href="#" /*Tanda "#" ini anda ubah sesuai dengan url blog yang anda inginkan. /*

Pengaturan warna saya rasa anda sudah mngerti, lihat saja kata color 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 sini atau pilihan fasilitas kode warna lainnya melalui label warna berdasarkan kategori di sini.

Demikian sharing tutorial cara mudah membuat menu navigasi horizontal pada blogger. 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 misteri blogger pemula mengenai tutorial membuat menu navigasi horizontal telah terpecahkan dengan segala keajaiban yang ada di sini.

Selamat mencoba dan semoga anda puas dengan hasil yang anda buat.

Cara Memenggal Artikel Blogger 28 Jan 2011 8:52 AM (14 years ago)

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 membuat read more pada blogger ini akan membuat pembaca semakin penasaran karena belum selesai mereka membaca postingan anda tapi malah dipotong. Baiklah, simak saja langsung penjelasannya.

Caranya ikuti langkah berikut:
1. Seperti biasa login ke account blogger, kemudian pilih menu Design > Edit HTML, jangan lupa untuk centang Expand Widget Templates dan carilah kode berwarna merah berikut:

<data:post.body/>

Biasanya kode tersebut dapat anda temukan tepat di bawah kode:

<div class='post-body entry-content'>

2. Setelah dapat, ganti hanya kode berwarna merah di atas sehingga menjadi seperti ini:

<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>

Berikut screenshotnya jika anda masih bingung:

Untuk tulisan Read More... dapat anda ubahsesuaikan sendiri, misalnya menjadi Baca Selengkapnya.

5. Save Template hasil pengeditan.

6. Langkah selanjutnya setelah mengedit HTML, kemudian pilih menu Setting lalu pilih Formatting.

7. Masukkan kode berikut pada kotak Post Template:

<span class="fullpost">

</span>

8. Klik Save Settings.

Terakhir adalah hal penting agar fungsi read more blogger dapat berjalan dengan baik yaitu pada saat anda akan mulai menulis artikel, letakkan paragraf yang akan tampil dengan menyisipkan kode <span class="fullpost"> pada paragraf yang akan dipotong dan kode </span> di akhir paragraf tersebut yang akan dipotong. Simpan hasil pengeditan dan lihat hasilnya. Sekarang artikel blog anda sudah dipenggal.

Cara Menghilangkan Tanda Obeng Blogger 27 Jan 2011 6:45 PM (14 years ago)

menghilangkan tanda obeng dan tang widget blogger

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:

Untuk menghilangkan tanda obeng dan tang tersebut, maka ada beberapa cara yang akan saya jelaskan, yaitu:
1. Dengan menghilangkan tanda centang pada setting posting blog yang disediakan Blogger.

Berikut petunjuknya:
Log in account Blogger, lalu pilih Design > Page Element, kemudian klik Edit pada contoh kolom widget Blog Posts, seperti yang terlihat pada gambar di atas:

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 Show Quick Editing. Setelah Anda hilangkan tanda centang pada menu Tunjukkan Pengeditan Cepat, lalu simpan.

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.

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:

Seperti biasa login ke account blogger, kemudian pilih menu Design > Edit HTML, dan carilah kode berikut ]]></b:skin>. Tambahkan kode berikut tepat diatas kode yang telah disebutkan tadi, setelah ditambahkan langsun Save Template dan lihatlah hasilnya.

.quickedit {display:none;}

Note: Bila anda ingin menampilkan kembali tanda obeng dan tang tersebut pada blog, anda hanya perlu menghapus kode html diatas.

Lakukan langkah-langkah di atas dengan benar sesuai dengan petunjuk yang ada dan lihat hasilnya, kini tanda obeng atau tang dapat dihilangkan. Selamat mencoba.

Tahun Copyright Berganti Otomatis 25 Jan 2011 11:02 PM (14 years ago)

membuat tahun copyright blog berganti otomatis

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 hak atas kepemilikan konten blog. Dan bagi siapa saja yang ingin memilikinya tentu harus meminta persetujuan dari pemiliknya. Bagi yang belum tau untuk mengganti tahun copyright secara otomatis 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.

Biasanya Copyright yang terpasang di bagian footer memiliki susunan seperti ini:

Angka 2010 menandakan blog tersebut mulai diterbitkan.

Susunan seperti di atas tidaklah mutlak, tetapi masih bisa dikreasikan dengan tahun pada saat sekarang. Sehingga bentuk tampilannya menjadi:

Atau pula dikreasikan menjadi:

Angka 2010 akan secara otomatis berganti seiring dengan pergantian tahun. Berikut ini script yang berfungsi untuk membuat tahun pada copyright menjadi berganti otomatis:

<script language="JavaScript">

    </script> <a href="http://oilink.blogspot.com"> Misteri Blogger Pemula </a></center>

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.

Desktop Computer Template 22 Jan 2011 6:08 PM (14 years ago)

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.

Screenshot

Live Demo

Live Demo TemplateWant to see it in action?

Berikut beberapa fitur dan spesifikasi template yang akan anda dapatkan:

1. Two Columns Layout Template

2. Dark Colour Template
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.

3. Highlight Subscribe Button and Easy Add menu Links

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.

4. Auto Read More Function With Thumbnail

Anda tidak perlu lagi khawatir dan direpotkan dengan read more with thumbnail yang bermasalah dengan page statis.

5. Tab Menu Icons

Icon cobalts dioleskan pada tampilan desktop windows vista ultimate membuat template ini terasa semakin manis.

6. Time Reload

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.

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 http://www.ziddu.com/download/13508827/DesktopComputer.rar.html. Dan Hotfile.com one click file hosting di link http://hotfile.com/dl/98828595/6f3e643/Desktop_Computer.rar.html ini.

Disable Seleksi Mouse 20 Jan 2011 9:14 AM (14 years ago)

Masih berlanjut menangani permasalahan hak cipta, yang baru saja dibahas pada postingan sebelumnya tentang tutorial memasukkan script disable klik kanan blog. 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.

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.

Baiklah, berikut praktek sederhana menonaktifkan seleksi mouse pada halaman web blog:
1. Masuk ke dalam kustomisasi blog lalu klik tab Design > Edit HTML.
2. Temukan bagian kode <body>.

3. Ubah kode tersebut menjadi:

<body onmousedown=”return false” oncontextmenu=”return false” onselectstart=”return false” >

4. Save template dan lihat hasilnya pada halaman blog anda.
5. Selamat mencoba.

Disable Klik Kanan Blog 20 Jan 2011 8:11 AM (14 years ago)

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.

Anda dapat mencegahnya dengan menggunakan script berikut:

<script>
var message="Maaf, klik kanan tidak diperbolehkan!";
///////////////////////////////////
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>

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.

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 ctrl + c atau pilih menu edit > copy pada menu browser Mozilla anda. Selamat mencoba.

Navigasi Breadcrumb 18 Jan 2011 7:19 AM (14 years ago)

Dengan menggunakan navigasi breadcrump pada blog biasanya akan muncul menu tambahan di bagian atas posting blog. Menu tersebut akan ditampilkan dengan format:

Browse >> Home >> [Nama Label] >> Judul Posting

Berikut screenshotnya:

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.

Bagaimana? Mau ya pake navigasi breadcrumb yang imut ini.

Berikut langkah-langkah yang harus anda ikuti untuk membuatnya:
1. Seperti biasa masuk ke dalam kustomisasi blog lalu klik tab Design (Tata Letak) > Edit HTML.
2. Cari bagian ]]></b:skin>, kemudian tambahkan kode di bawah ini di atasnya:

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}

3. Cari bagian <div class=’post hentry’> atau <div class=’post hentry uncustomized-post-template’>, kemudian tambahkan kode berikut di atasnya:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> »
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'> , </b:if>
</b:loop>
</b:if> » <data:post.title/>
</div>
</b:if>
</b:if>

Note: untuk kata Browse dapat anda sesuaikan sendiri, contoh Anda berada di >> atau You are here >>.
4. Simpan template dan nikmati hasilnya. Selamat mencoba.

Template Generator 16 Jan 2011 6:53 PM (14 years ago)

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.

1. Praktek menggunakan Template Generator dengan Pimp My Profile

Kunjungi alamat URL situs Pimp My Profile di http://www.pimp-my-profile.com/generators/blogger.php.

Klik menu Blogger Editor pada bagian Blogger

Maka akan muncul ucapan Welcome, lalu klik link Start di bagian bawah.

Mulai dari pengaturan Background, anda dapat menentukan warna dan gambar background yang akan digunakan.
Lakukan langkah selanjutnya dengan menentukan Tables, Text/Headings, Scrollbars, Graphics, dan akhirnya Finish. Akhiri dengan mengklik tombol “Generate my Code!”.
Salin kode dan masukkan kode tersebut ke dalam template Blogger. Caranya, seperti biasa masuk ke bagian kustomisasi blog, klik tab Design (Tata Letak) > Edit HTML. Hapus semua kode template lama lalu paste kode baru Template Generator.

Simpan dan lihat hasilnya pada halaman blog anda.

Selain menggunakan layanan Template Generator di atas, sebagai alternative gunakan layanan lain di bawah ini:

2. PsycHo - psychogenesis

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.

3. Page Column Layout Generator

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:

Liquid design, no tables, no javascript, pure layers and css.
Visual layout and backgroud color design, WYSIWYG
Cross browser compatibility
Compact CSS code, reduce 25% of length

4. Trix Blogspot Template Generator

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.

Hanya ini saja Template Generator yang saya ketahui, semoga hasilnya memuaskan ya dan selamat mengutak atik template.

Widget Recent Posts Blogger 16 Jan 2011 12:40 AM (14 years ago)

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 sini. 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.

Live DemoKlik untuk melihat demo langsung Widget Recent Posts

Langkah selanjutnya anda hanya tinggal copas kode berikut dan masukkan pada halaman gadget javascript blogger anda:

<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfu3w7ddiISaSNQj-P9XAC9Rnc7qstT1Q0e7UZzWn2jg3wrRcGea1BYaFEGes2VNuWGRNzPd-HqhkUKM_sV4Xdj1Z4eFIOGqGgIbUfrIAeWPoZx11UqcPrJRjttWOGJsiC-wGlwSKSnjbH/s400/feedreader_2.jpg";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfu3w7ddiISaSNQj-P9XAC9Rnc7qstT1Q0e7UZzWn2jg3wrRcGea1BYaFEGes2VNuWGRNzPd-HqhkUKM_sV4Xdj1Z4eFIOGqGgIbUfrIAeWPoZx11UqcPrJRjttWOGJsiC-wGlwSKSnjbH/s400/feedreader_2.jpg";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfu3w7ddiISaSNQj-P9XAC9Rnc7qstT1Q0e7UZzWn2jg3wrRcGea1BYaFEGes2VNuWGRNzPd-HqhkUKM_sV4Xdj1Z4eFIOGqGgIbUfrIAeWPoZx11UqcPrJRjttWOGJsiC-wGlwSKSnjbH/s400/feedreader_2.jpg";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfu3w7ddiISaSNQj-P9XAC9Rnc7qstT1Q0e7UZzWn2jg3wrRcGea1BYaFEGes2VNuWGRNzPd-HqhkUKM_sV4Xdj1Z4eFIOGqGgIbUfrIAeWPoZx11UqcPrJRjttWOGJsiC-wGlwSKSnjbH/s400/feedreader_2.jpg";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfu3w7ddiISaSNQj-P9XAC9Rnc7qstT1Q0e7UZzWn2jg3wrRcGea1BYaFEGes2VNuWGRNzPd-HqhkUKM_sV4Xdj1Z4eFIOGqGgIbUfrIAeWPoZx11UqcPrJRjttWOGJsiC-wGlwSKSnjbH/s400/feedreader_2.jpg";
showRandomImg = true;
boxwidth = 298;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fontsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://oilink.blogspot.com/";
</script>
<script src="http://recentpostoilnk.googlecode.com/files/recentpost.js" type="text/javascript"></script>

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 "numposts = 5;". Silakan berkreasi sendiri dengan mengganti opsi ukuran, warna, dan lainnya pada kode css sebelumnya. Selamat mencoba kawan.

Menampilkan Widget Pada Halaman Tertentu 15 Jan 2011 11:55 PM (14 years ago)

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:

Bersifat static, maksudnya halaman tidak diurutkan berdasarkan waktu.
Halaman banyak digunakan untuk menampilkan informasi tertentu, seperti contact person, about us, sitemap, dan sebagainya.
Biasanya untuk mengakses halaman ini juga anda dapat menambahkan gadget baru yang hanya tampil pada halaman page ini.

Begini kesimpulannya, setiap halaman yang ada di blogger memiliki karakteristik masing-masing. Berikut saya paparkan saja setiap halaman yang terdapat di blogger secara keseluruhan:

Homepage merupakan halaman utama blog anda, yakni halaman depan blogger.
Archivepage adalah halaman arsip blogger.
Itempage adalah halaman postingan yang diurutkan berdasarkan waktu penulisan.
Indexpage adalah halaman muka, halaman label, dan halaman pencarian.
Staticpage adalah feature baru google yakni halaman yang tidak masuk pada postingan yang telah saya jelaskan tadi.

Menampilkan widget hanya di Homepage

<b:if cond='data:blog.url == data:blog.homepageUrl'>
..........................
</b:if>

Menampilkan widget selain di Homepage

<b:if cond='data:blog.url != data:blog.homepageUrl'>
..........................
</b:if>

Menampilkan widget hanya di Archivepage

<b:if cond='data:blog.pageType == "archive"'>
..........................
</b:if>

Menampilkan Widget selain di Archivepages

<b:if cond='data:blog.pageType != "archive"'>
..........................
</b:if>

Menampilkan Widget hanya di Itempages / Postingan

<b:if cond='data:blog.pageType == "item"'>
..........................
</b:if>

Menampilkan widget selain di Itempages

<b:if cond='data:blog.pageType != "item"'>
..........................
</b:if>

Menampilkan widget hanya di Staticpages

<b:if cond='data:blog.pageType == "static_page"'>
..........................
</b:if>

Menampilkan widget selain di Staticpages

<b:if cond='data:blog.pageType != "static_page"'>
............................
</b:if>

Menampilkan widget pada URL postingan tertentu

<b:if cond='data:blog.url == "alamatpostingan"'>
..........................
</b:if>

Menampilkan widget selain di URL postingan tertentu

<b:if cond='data:blog.url != "alamaatpostingan"'>
..........................
</b:if>

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:

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>

kode pembuka perubahan widget

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>

kode penutup perubahan widget
</b:includable>
</b:widget>

Kalimat ditandai berwarna merah adalah penempatan kode untuk penampilan widget pada halaman tertentu saja.

Jadi penggunaannya untuk contoh penempatan widget hanya di homepage menjadi:

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>

</b:if>
</b:includable>
</b:widget>

Semoga bermanfaat.

Menambahkan Iklan Melayang 12 Jan 2011 4:15 AM (14 years ago)

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.

Langsung saja ikuti petunjuk singkat di bawah ini kawan, berikut praktek menambahkan iklan melayang di blogger:
1. Seperti biasa masuk ke dalam kustomisasi blog. Klik tab Design (Tata Letak) > Page Element (Elemen Halaman).
2. Tambahkan gadget HTML/JavaScript, lalu masukkan kode iklan di bawah ini:

Masukan kode iklan atau gambar di sini

</center>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

3. Klik tombol Save (Simpan) dan apa yang terjadi?
4. Lihat hasilnya, maka akan muncul iklan melayang di bagian atas. Klik link Close sebanyak dua kali dan iklanpun akan hilang.
5. Selain iklan teks, anda juga dapat memasukkan iklan berupa gambar.
6. Selamat mencoba kawan.

Sekilas Tentang HTML 26 Dec 2010 7:48 AM (14 years ago)

HTML adalah singkatan dari Hyper Text Markup Language. 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.

Sintax Dasar HTML

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:

<html>
             <head>
<title>Test HTML</title>

   </head>
<body>
                                       Ini hanya test dokumen HTML pertamaku
</body>
</html>

Maka hasilnya adalah:

Skrip diatas hanya file HTML yang sangat sederhana. Setiap tag HTML selalu diawali tag pembuka dan diakhiri dengan tag penutup. Pada contoh tadi misalnya untuk tag <head>, maka harus diakhiri pula dengan tag </head>. Coba perhatikan terdapat tanda "/" pada setiap tag penutup. Biasanya pula dapat ditambahkan meta tag content di antara <head> dan </head> seperti yang telah dijelaskan pada pembahasan sebelumnya "Cara Menambahkan Meta Tag".

URLs

URL merupakan singkatan dari Uniform Resource Locator 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:

Keterangan:
Protocol adalah metode transfer data dari satu komputer ke komputer lain, antara komputer client dan komputer server.

HTTP (Hyper Text Transfer Protocol)

Gopher

FTP

News

Network location adalah mesin tempat data tersebut berada.
Path adalah dokumen yang menunjukkan di direktori mana dokumen tersebut berada.
File name adalah nama file html yang berada dalam direktori web server.

Ubah Tulisan Newer Older Post Dengan Icon 15 Dec 2010 10:58 PM (14 years ago)

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.

Berikut tampilan defaultnya:

Karena tampilan seperti itu terlihat sangat membosankn maka saya akan mencoba untuk menyulapnya menjadi:

View Live DemoKlik untuk melihat langsung animasi iconnya

Berikut tricks yang harus anda lakukan untuk menyulap pager blog anda agar terlihat lebih fantastis he he:
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:

Tips: untuk mempercepat pencarian kode, anda dapat gunakan tombol (Ctrl + F) atau (F3).

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>

Perhatikan tulisan yang berwarna merah:

<data:newerPageTitle/> Posting Baru (Newer Post)
<data:olderPageTitle/> Posting Lama (Older Post)
<data:homeMsg/> Beranda (Home)

Silakan anda ganti kode-kode tersebut dengan kode berikut, hanya kode yang berwarna merah saja anda gunakan:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-59pkM7qJMl8yeRBDaOOW_9C7FvdYk31x5Q154TvPUmCRxOL2RsC4R_e1ZGVabaJyzxX-EqDmvDuPpvyPnalBXoBblRjaF1GzZD4Co115aSNzXhVX72UVqCAy55MvJGUhcHiBItx8ZJ8/"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCZ51NxePCxGtluX7QKLwWSLz3VtZ1Kwngm0I2L4qDclwA5o22xDVYg32IE8btDIcP5EfoJbvd14NY4DlKCrYERFxKiveNrvOQcELK7hq-zxyatJtf2HKhtuQRzh-U1SoVHKapCsSiqvw/"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF9J4BUr5RNW0nOX2fEmY4rYPSEtrDl-J7Zog8jHL8SWSgOFfO5bau4Hy9eHwPln0ZbsL5V8ByxxbvXZEWtKPzQ88mrhDrXrQFgGv7KHgD4rzaiyleMgAIGjw8gsqYXOiopt1K5IreEow/"/>

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 icon archive.

3. Selamat mencoba.

Mengganti Default Favicon Blogger 15 Dec 2010 6:46 AM (14 years ago)

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

pada bagian favicon.

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.

1. Kunjungi website Tinypic yang beralamat di www.tinypic.com. Pilih dulu file gambar yang akan diupload dengan klik tombol browse. Klik file gambarnya lalu klik tombol open. Tentukan konfigurasi upload lalu klik tombol upload now.

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.

3. Setelah anda log in blogger, klik tab Tata Letak (Design) > Edit HTML.

5. Temukan kode </head> lalu paste kode berikut tepat di bawah kode tadi.

<link href='(url icon anda)' rel='shortcut icon'/>

Dalam hal ini, anda hanya perlu menambahkan alamat url gambar iconnya saja, yaitu kode setelah img scr=, sehingga gabungan kodenya akan menjadi:

<link href='http://i51.tinypic.com/2wfl9ty.png' rel='shortcut icon'/>

6. Simpan kode yang telah diedit dan lihat hasilnya.

Pendaftaran Blogspot 13 Dec 2010 11:10 PM (14 years ago)

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:

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.

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.

3. Untuk melakukan ketiga langkah di atas, mulai dari mengisi data pada form pendaftaran yang disediakan.

Alamat Email

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.
Nama Tampilan
Masukkan nama anda karena nama tersebut akan muncul di setiap posting blog yang akan digunakan nanti.
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.

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.

5. Pada halaman berikutnya adalah langkah terakhir proses pendaftaran blog, yaitu memilih template. Klik pilihan screenshot template yang anda inginkan kemudian klik tombol lanjutkan.

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.

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.

8. Selamat, sekarang anda sudah punya blog. Klik lihat entri (view post) untuk melihat hasil dari apa yang baru saja anda publish.

Beberapa Alasan Menjadi Seorang Blogger 13 Dec 2010 6:57 AM (14 years ago)

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):

1. Blogging Melatih Kita Mahir Menulis

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.

2. Amal Ibadah

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.

3. Suka Tantangan

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.

4. Mudah Dan Murah

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.

5. Sarana Mengekspresikan Diri

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!

6. Media Informasi

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.

7. Media Untuk Mencari Pengahasilan Tambahan

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.

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!

Sekilas Mengenai Blog Baru Ini 13 Dec 2010 1:03 AM (14 years ago)

Bismillah, ini adalah tulisan pertama untuk domain baru http://oilink.blogspot.com/ setelah berpindah-pindah tidak karuan dari dua blog sebelumnya yaitu hijrah pertama 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 hijrah kedua 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.

Sejarah Blog

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.

Pengenalan Blogspot atau Blogger

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.

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.

Sekian dulu tulisan awal ini yang sekaligus menjadi peresmian blog oilink dan semoga tetap terus semangat ngeblog.

Sexy Vertical Sliding Panel 10 Oct 2010 6:40 PM (14 years ago)

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.

Berikut tampilan panel tersebut dan click untuk memperbesar atau periksa di bawah gambar untuk bekerja (demo):

Live DemoKlik di sini untuk melihat demo Sexy Vertical Sliding Panel

Tertarik? Lanjutkan. Berikut Cara membuat Sexy Vertical Sliding Panel mengggunakan jQuery And CSS3 di Blogger:

Login dan click Design dan masuk pada Edit HTML.
Tambahkan kode dibawah ini diatas kode </head>:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".trigger").click(function(){ $(".panel").toggle("fast"); $(this).toggleClass("active"); return false; }); }); </script>

Selanjutnya silakan letakkan kode dibawah ini di atas pada bagian </body>:

<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>
<h3>A Little Something About Me</h3>

<p>My name's <a href='http://www.blogger.com/profile/09230988353278370498' title='Ihsanul Huda'>Ihsanul Huda</a>. My God is Allah. I'm interested in Blogger for Da'wah. I'm not sure if that would count as a Da'wah booth but the best way I can do for Muslim brothers and sisters is to spread Da'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'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>

<div style='clear:both;'/>
<div class='columns'>
<div class='colleft'>
<h3>Navigation</h3><ul>

<li><a href='http://www.emailmeform.com/builder/form/66D51h3rSiBfd98V' title='contact'>Contact</a></li>

</ul></div>
<div class='colright'>
<h3>Social Stuff</h3>
<ul>

<li><a href='http://twitter.com/insanshalih' title='Twitter'>Twitter</a></li>

<li><a href='http://facebook.com/insanshalih' title='Facebook'>Facebook</a></li>

</ul></div></div>
<div style='clear:both;'/></div>
<a class='trigger' href='#'>INFO</a>

Copy CSS dibawah ini kemudian letakkan (paste) pada bagaian CSS Blogger atau letakkan di atas ]]></b:skin> atau buat CSS Eksternal Blogger:

body {background:#1a1a1a; text-align:left;
color:#666;width:700px; font-size:14px; font-family:georgia, 'time new romans', serif;
margin:0 auto;
padding:0;}
a:focus {outline: none;}
h1 {font-size: 34px; font-family: verdana, helvetica, arial, sans-serif; letter-spacing:-2px; color:#9FC54E; font-weight:700; padding:20px 0 0;}
h2 {font-size: 24px; font-family: verdana, helvetica, arial, sans-serif; color:#444444; font-weight: 400; padding: 0 0 10px;}
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;         }
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;}
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;}
.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;}
.content p {margin: 10px 0; padding: 15px 20px; }
.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;}
.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;}
.panel a:hover,
.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;}
a.active.trigger {background:#222222 url(images/minus.png) 85% 55% no-repeat;}
.columns{clear: both; width: 330px; padding: 0 0 20px 0; line-height: 22px;}
.colleft{float: left; width: 130px; line-height: 22px;}
.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;}

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:

Dari:

a.trigger{ position: absolute; top: 80px; left: 0; } .panel { position: absolute; top: 50px; left: 0; }

Menjadi:

a.trigger{ position: absolute; top: 80px; right: 0; } .panel { position: absolute; top: 50px; right: 0; }

Edit pula posisi sudutnya sehingga:

Dari:

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;

Menjadi:

border:1px solid #444444; -moz-border-radius-topleft: 20px; -webkit-border-top-left-radius: 20px; -moz-border-radius-bottomleft: 20px; -webkit-border-bottom-left-radius: 20px;

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:

Dari:

a.trigger{ position: absolute; top: 80px; left: 0; } .panel { position: absolute; top: 50px; left: 0; }

Menjadi:

a.trigger{
position: fixed;
top: 80px; left: 0;
}

.panel {
position: fixed;
top: 50px; left: 0;
}

Jika anda ingin mengedit transparansi panel geser, cukup menghapus atau mengedit bagian CSSnya:

filter: alpha(opacity=85);
opacity: .85;

Demo dan Referensi:

The Sliding Panel And Trigger Button On The Left Have Absolute Positioning

The Sliding Panel And Trigger Button On The Right Have Absolute Positioning

The Sliding Panel And Trigger Button On The Left Have Fixed Positioning

Auto Hidden Chat Box 10 Oct 2010 8:18 AM (14 years ago)

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:

Live Demo Auto Hidden Chat BoxKlik untuk melihat sreenshotnya

Bagaimana? Menarik bukan?

Simak tutorial berikut:

Saya bagi dalam 2 tipe penempatan chat box, sebelah kiri dan kanan.

Tampilan Widget di sebelah Kanan:

<style>
#hcl {
position:fixed;
top:100px;
left:0px;
z-index:+1000;
}

* html #hcl {position:relative;}
.hcltab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://img202.imageshack.us/img202/8018/copyofcbblue.png') no-repeat;
}

.hclcontent {
float:left;
border:2px solid #790909;
background:#f3f6f7;
padding:10px;
}

.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">

function showHidehcl(){
var hcl = document.getElementById("hcl");
var w = hcl.offsetWidth;
hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);
hcl.opened = !hcl.opened;
}

function movehcl(x0, xf){
var hcl = document.getElementById("hcl");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcl.style.left = x.toString() + "px";
if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);}
}
</script>

<div id="hcl">
<div class="hclcontent">

<!—Widget Here -->

<br />

<div class="hc-credit">
<span style="float:left">



<a href="http://oilink.blogspot.com/2010/10/auto-hidden-chat-box.html" target="_blank"> Get this widget! </a>

</span>
<span style="float:right">
<a href="javascript:showHidehcl()">

[close]
</a></span>
</div>
</div>

<div class="hcltab" onclick="showHidehcl()"> </div>
</div>
<script type="text/javascript">

var hcl = document.getElementById("hcl");
hcl.style.left = (30-hcl.offsetWidth).toString() + "px";
</script>

Tampilan Widget di sebelah Kiri:

<style>
#hcr {
position:fixed;
top:100px;
z-index:+1000;
}

* html #hcr {position:relative;}
.hcrtab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://img202.imageshack.us/img202/8018/copyofcbblue.png') no-repeat;
}

.hcrcontent {
float:left;
border:2px solid #003e82;
background:#f3f6f7;
padding:10px;
}

.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>

<script type="text/javascript">
function showHidehcr(){
var hcr = document.getElementById("hcr");
var w = hcr.offsetWidth;
hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);
hcr.opened = !hcr.opened;
}

function movehcr(x0, xf){
var hcr = document.getElementById("hcr");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcr.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("movehcr("+x+", "+xf+")", 10);}
}
</script>

<div id="hcr">
<div class="hcrtab" onclick="showHidehcr()"> </div>
<div class="hcrcontent">

<!—Widget Here -->

<br />

<div class="hc-credit">
<span style="float:left">



<a href="http://oilink.blogspot.com/2010/10/auto-hidden-chat-box.html" target="_blank"> Get this widget! </a>

</span>

<span style="float:right">
<a href="javascript:showHidehcr()">

[close]

</a></span>
</div>
</div>
</div>

<script type="text/javascript">
var hcr = document.getElementById("hcr");
hcr.style.right = (30-hcr.offsetWidth).toString() + "px";
</script>

Note:

#hcr {
position:fixed; /* Menunjukkan bahwa posisi widget tetap tidak bergeser dan sobat bisa ganti menjadi posisi absolute */

#hcr {
position:absolute; /* Menunjukkan bahwa posisi widget tetap dapat bergeser dengan menggeser scroll */

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 */
z-index:+1000;
}

.hcrtab {
height:100px; /* tinggi tab pembuka hidden chatbox */
width:30px; /* tinggi tab pembuka hidden chatbox */
float:left;
cursor:pointer;
background:url('http://img202.imageshack.us/img202/8018/copyofcbblue.png') no-repeat; /* gambar yang dijadikan sebagai tab pembuka hidden chatbox */
}

.hcrcontent {
float:left; border:2px solid #003e82; /* warna dan ukuran border hidden chatbox */
background:#f3f6f7; /* warna background hidden chatbox (sebaiknya tidak perlu diganti jika kalian mengedit kode lain pada style) */
padding:10px;
}

Alhamdulillah, semoga dengan tutorial yang sesederhana ini dapat bermanfaat. Selamat mencoba! Ohya, pilihan model dan warna tab pemicunya dapat diubah sendiri:

http://img202.imageshack.us/img202/8018/copyofcbblue.png

http://img714.imageshack.us/img714/6969/cbblue.png

http://img43.imageshack.us/img43/7977/copy3ofcbblue.png

http://img571.imageshack.us/img571/2107/copy2ofcbblue.png

Cara Menambahkan Meta Tag 10 Oct 2010 7:36 AM (14 years ago)

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 dari Search Engine Optimization, 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:

1. Sign in lalu masuk ke dashboard blogger anda.

2. Click Design lalu click pada tab Edit HTML.

3. Temukan kode ini: <b:include data='blog' name='all-head-content'/>

4. Sekarang tambahkan kode di bawah ini selepas kode tersebut sehingga menjadi:

<b:include data='blog' name='all-head-content'/>
<meta content='DESCRIPTION HERE' name='description'/>
<meta content='KEYWORDS HERE' name='keywords'/>
<meta content='AUTHOR NAME HERE' name='author'/>

5. Lalu gantikan kode di bawah ini dan sesuaikan dengan blog anda:

DESCRIPTION HERE: tulis keterangan blog.
KEYWORDS: tulis kata kunci dari blog anda.
AUTHOR NAME: tulis nama penulis (nama anda).

6. Semoga bermanfaat.

Misteri Blogger Pemula View RSS

Mengganti Link Read More Dengan Gambar 6 Feb 2011 11:49 PM (14 years ago)

Membuat Text Area 6 Feb 2011 9:25 PM (14 years ago)

Script Tombol Bookmark This 3 Feb 2011 1:12 AM (14 years ago)

Membuat Signature Dibawah Posting Blog 31 Jan 2011 5:24 AM (14 years ago)

Cara Mudah Membuat Menu Navigasi Horizontal Ajaib 28 Jan 2011 9:30 PM (14 years ago)

Cara Memenggal Artikel Blogger 28 Jan 2011 8:52 AM (14 years ago)

Cara Menghilangkan Tanda Obeng Blogger 27 Jan 2011 6:45 PM (14 years ago)

Tahun Copyright Berganti Otomatis 25 Jan 2011 11:02 PM (14 years ago)

Desktop Computer Template 22 Jan 2011 6:08 PM (14 years ago)

Disable Seleksi Mouse 20 Jan 2011 9:14 AM (14 years ago)

Disable Klik Kanan Blog 20 Jan 2011 8:11 AM (14 years ago)

Navigasi Breadcrumb 18 Jan 2011 7:19 AM (14 years ago)

Template Generator 16 Jan 2011 6:53 PM (14 years ago)

Widget Recent Posts Blogger 16 Jan 2011 12:40 AM (14 years ago)

Menampilkan Widget Pada Halaman Tertentu 15 Jan 2011 11:55 PM (14 years ago)

Menambahkan Iklan Melayang 12 Jan 2011 4:15 AM (14 years ago)

Sekilas Tentang HTML 26 Dec 2010 7:48 AM (14 years ago)

Ubah Tulisan Newer Older Post Dengan Icon 15 Dec 2010 10:58 PM (14 years ago)

Mengganti Default Favicon Blogger 15 Dec 2010 6:46 AM (14 years ago)

Pendaftaran Blogspot 13 Dec 2010 11:10 PM (14 years ago)

Beberapa Alasan Menjadi Seorang Blogger 13 Dec 2010 6:57 AM (14 years ago)

Sekilas Mengenai Blog Baru Ini 13 Dec 2010 1:03 AM (14 years ago)

Sexy Vertical Sliding Panel 10 Oct 2010 6:40 PM (14 years ago)

Auto Hidden Chat Box 10 Oct 2010 8:18 AM (14 years ago)

Cara Menambahkan Meta Tag 10 Oct 2010 7:36 AM (14 years ago)