Pantai Balekambang

Pantai BalekambangMalang sangat beruntung karena diwarisi kekayaan alam yang sangat indah sehingga dapat menambah pemasukan daerah. Banyak sekali tujuan wisata alam yang dapat kita kunjungi disini seperti Pantai Balekambang salah satunya.

Pantai Balekambang terletak di Kecamatan Bantur, sebelah selatan kota Malang. Pantai Balekambang ini cukup indah dan menawan. Pantai landai ini dipenuhi dengan karang laut, yang membentang sepanjang 2 km dengan lebar sekitar 200 meter ke arah laut, sewaktu air laut surut, maka akan tampak di atas air dan disela-selanya berbagai jenis ikan-ikan hias kecil yang beraneka ragam.

Selain itu, di lepas pantai nampak tiga buah pulau berjajar ke arah barat, Pulau Ismoyo, pulau Anoman dan Pulau Wisanggeni. Tepat di atas Pulau Ismoyo berdiri megah sebuah Pura yang bernama Pura Luhur Amertha Jati.

Pada bulan Suro, Pantai Balekambang cukup ramai di datangi wisatawan baik dari dalam negeri maupun mancanegara. Ada acara yang khusus di Pantai Balekambang ini yaitu Upacara Surohan (Suro'an) dan Upacara Jalanidhi Puja. Pantai Balekambang dengan nilai tambahnya tersendiri telah menjadi salah satu primadona tujuan wisatawan.

Berenang di Pantai
[Read More...]

Cagar Alam Pulau Sempu

Cagar Alam Pulau SempuPulau Sempu, adalah sebuah pulau kecil yang terletak di sebelah selatan Pulau Jawa. Pulau ini berada dalam wilayah Kabupaten Malang, Jawa Timur.

Dengan kondisi alamnya yang kaya akan flora dan fauna langka yang masuk daftar Convention o­n International Trade in Endangered Species of Wild Fauna and Flora (CITES), Pulau Sempu tidak dibangun menjadi wisata sebagaimana biasanya. Sehingga tidak ada fasilitas akomodasi di pulau tersebut. K'lo mau bisa mendirikan tenda di pulau itu, tentu dengan seizin petugas pengawas cagar alam yang berkantor di Sendang Biru yang terletak tepat di seberang Pulau Sempu.

Keindahan lain yang bisa ditemui di Pulau Sempu adalah saat berenang di Segoro Anakan, sebuah tempat mirip telaga kecil yang dikelilingi batu karang yang membatasinya dengan laut. Suplai air ke telaga ini berasal dari karang yang berlubang besar di tengahnya, yang secara periodik menyajikan pemandangan indah percik–percik air deburan ombak yang menghantam karang. Dari lubang itulah sebagian air laut mengalir masuk ke Segara Anakan.

Bila kita mendaki karang, kita bisa melihat Laut Selatan yang terbentang luas sampai di kaki cakrawala. Saat pagi menjelang, matahari pagi bersinar hangat dan ramah, tidak terlalu panas. Saat malam datangpun udara terasa begitu sejuk, karena di sekitar pantai merupakan hutan yang cukup rimbun.

Perlengkapan yang wajib dibawa sebelum ke Pulau Sempu adalah makanan dan air bersih, karena di pulau ini tidak ada penjual makanan dan minuman.

Sendang Biru

[Read More...]

Padusan Umbul Cokro

Padusan Di CokroCokro adalah sebuah lokasi pariwisata yang terletak di Tulung, Klaten, Jawa Tengah. Di sini dapat ditemukan sebuah pemandian, dengan sumber air langsung dari alam. Air yang jernih hanya dibuang mengalir ke sungai untuk mengairi sawah atau mandi.

Meskipun sebagian telah digunakan untuk air minum penduduk kota Solo dan dibuang ke sungai, volume air seperti tidak berkurang. Tempat ini dikenal dengan nama Umbul (Sumber Air) Ingas/Umbul Cokro.

Sumber Air Ingas dengan udara yang sejuk dan pemandangan yang asri, warung-warung untuk santai serta lahan untuk tempat peristirahatan yang teduh di bawah rindangnya pepohonan yang besar dan kicauan burung, sangat cocok sebagai tempat rekreasi. Di tempat yang sama juga terdapat kolam renang dengan nama Balik Kambang.

Obyek wisata ini sangat ramai apabila menjelang bulan puasa tiba, beribu-ribu pengunjung membanjiri kawasan ini guna mensucikan diri sebelum menjalankan ibadah puasa.

Menurut kepercayaan budaya kebiasaan atau tradisional orang jawa pada umumnya bagi yang menganut agama Islam mempunyai anggapan bahwa sebelum menjalankan ibadah puasa di bulan Ramadhan perlu mensucikan diri, orang Jawa menyebutnya dengan padusan yaitu mandi di pemandian tersebut dengan harapan agar puasanya dapat lancar, berjalan dengan baik.

[Read More...]

Umbul Nilo

Umbul NiloMasih seputar Janti...
Nach, setelah kenyang menyantap lele bakar di Pemancingan Ikan Janti, alangkah baiknya k'lo dilanjut dengan bermalas-malasan sambil berendam di pemandian.

Konsep pemandian terbuka dengan pemandangan yang indah di sekitarnya, seperti bebatuan dan pepohonan besar, sungai serta sawah yang membentang dengan latar belakang gunung Merbabu dan Merapi, membuat pengunjung betah berlama-lama berendam di dalam kolam pemandian. Apalagi air yang melimpah-ruah, membuat orang yang melihatnya, langsung ingin menceburkan diri ke dalamnya.

Di kawasan Janti terdapat sekitar lima sumber mata air (umbul). Di antaranya adalah Umbul Manten, yang dua mata airnya saling berdekatan. Selanjutnya Umbul Nilo, serta yang terbesar yakni pemandian Ingas Cokrotulung. Mata air yang keluar dari umbul-umbul ini cukup jernih dan dingin.

Kondisi alamnya yang berkelimpahan sumber mata air, selain menjadikannya sebagai daerah pertanian yang sangat subur, juga ideal untuk tempat-tempat pemancingan dan pemandian. Tak heran begitu memasuki wilayah tersebut, semilir angin yang sejuk akan segera menyambut mesra. Sawah yang menghijau terbentang luas di sisi kiri dan kanan jalan.

[Read More...]

Pemancingan Ikan Janti

Pemancingan Ikan JantiKawasan wisata Janti yang berada di Polanharjo, Klaten, Jawa Tengah, bisa menjadi pilihan yang sangat menarik. Tempat ini terkenal karena kolam pemancingan ikannya.

Di kawasan ini pengunjung juga dapat menikmati wisata kuliner, hampir seluruh penduduknya setiap rumah pasti mempunyai kolam pemancingan dan juga mereka menyediakan jasa penggorengan ikan sekaligus nasi, sambal beserta lalapannya. Gurami, bawal, nila, lele ataupun ikan tawar lainnya, dengan menu bebakaran ataupun goreng tersedia di tempat ini.

Jadi setelah memancing ikan bisa digoreng dan dimakan di tempat. Di tiap-tiap pemancingan, disediakan pula kolam renang yang bisa dipakai sembari menunggu masakan matang.

Kebanyakan anak sekolahan merayakan ulang tahunnya dengan mentraktir teman-temannya di Pemancingan ini. Entah nomer berapa yang jadi favorit saya dulu, yang pasti k'lo ke Janti, selalu makan ikan bakar dan minum es jeruk.

Setiap hari Sabtu atau Minggu tempat ini sangat ramai dikunjungi orang baik dari daerah Solo, Klaten, Jogja atau Semarang. Jika tidak suka suasana ramai datanglah pada hari lain, karena tempat ini juga cocok buat pacaran anak muda.

[Read More...]

Pesona Deles Indah

Kesejukan Deles IndahSebuah gapura bertuliskan "Obyek Wisata Deles Indah" menyambut setiap pengendara yang datang dari arah Klaten, begitu memasuki kawasan Deles di Desa Sidorejo, Kemalang, Klaten.

Deles Indah berjarak ± 30 km dari Klaten, dan dari Solo sekitar 70 km, serta dari Yogyakarta sekitar 50 Km. Objek wisata Deles Indah merupakan salah satu alternatif yang bisa dikunjungi oleh wisatawan yang menyukai daerah dengan hawa sejuk, alamnya yang masih asli dan pemandangan yang indah dengan dikelilingi oleh tanaman pinus disekitarnya.

Dengan ketinggian antara 800 m - 1300 m diatas permukaan laut, Deles Indah mempunyai potensi spesifik suasana pemandangan alam pegunungan. Dari Objek wisata Deles Indah dapat dilihat pemandangan puncak Merapi dengan gumpalan asap yang berwarna putih kelabu atau kehitam-hitaman mengepul ke angkasa, yang dari kejauhan nampak bagaikan timbunan bulu domba, serta pemandangan kota Klaten yang dihiasi dengan cerobong Perusahaan Gula Gondang Baru dan Perusahaan Ceper Baru dengan berselendangkan Rowo Jombor.

Objek wisata ini merupakan wisata alam yang dapat membuat orang betah di Klaten. Panorma penggunungan yang indah dan hawa sejuk menjadi salah satu tujuan bagi wisatawan untuk melepas lelah.

[Read More...]

Membuat Daftar Isi Blog

Daftar isi merupakan suatu elemen penting yang harus dimiliki oleh suatu blog. Karena dengan adanya daftar isi tersebut, para pengunjung akan lebih mudah untuk mencari suatu artikel yang mereka cari. Bila masih ada yang belum mengerti mengenai hal ini, kamu bisa lihat contoh tampilan daftar isi di bawah ini :

Postingan kali ini, saya akan share mengenai bagaimana cara membuat daftar isi blog seperti contoh diatas dengan menggunakan javascript.

Langkah Pertama:
Buka menu Layout kemudian pilih Page Element. Selanjutnya klik Add Page Element, trus pilih Html/JavaScript (Terserah mau disimpan dimana, baik di sidebar atau di bagian footer).

Langkah Kedua:
Copy-Paste kode di bawah kedalam kotak "content".

<div style="border: 1px solid rgb(20, 20, 20); padding: 1px; overflow: auto; height: 250px;">
<script style="text/javascript" src="http://www.geocities.com/itto83/amboeradoel/daftar_isi.js"></script>
<script style="text/javascript">
var numposts = 1000;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://NAMA_BLOG.blogspot.com/feeds/posts/default?
orderby=published&alt=json-in-script&max-results=999
&callback=showrecentposts"></script>
</div>

Jangan lupa ganti text yang berwarna Hijau dengan nama blog kamu.

Langkah Ketiga:
Simpan dan slesai dech akhirnya... Ok, selamat mencoba.

[Read More...]

Membuat Recent Comments Di Blogger

Recent Comments merupakan informasi singkat komentar terbaru para pengunjung yang ditampilkan secara berurutan dimaksudkan supaya kita bisa dengan mudah mengetahui siapa yang baru saja memberikan komentar pada blog kita dan di postingan mana mereka berkomentar.

Nach.., untuk menghargai komentar dari para pengunjung, tidak ada salahnya k'lo kita membuat recent post. Komentar boleh, asal jangan main Spam.
Ok, kita lanjut lagi...

Untuk membuat Recent Comment kita bisa menggunakan kode seperti dibawah ini.

<script style="text/javascript" src="http://www.geocities.com/itto83/amboeradoel/recent-comments.js"></script><script style="text/javascript">var numcomments = 5;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script><script src="http://amboeradoel-camp.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

Pertama-tama kita masuk dulu pada Page Element Blogger. Kemudian klik Add a Gadget lalu pilih HTML/Javascript. Copy-Paste kode diatas kedalam kotak "content".

Angka yang berwarna Hijau merupakan jumlah komentar yang akan ditampilkan, jadi dapat kita atur sesuai keinginan. Jangan lupa ubah kode yang berwarna Biru, ganti dengan alamat blog kamu. Nach.. slesai dech, selamat mencoba...


[Read More...]

Membuat Recent Post Di Blogger

Recent Post merupakan informasi singkat dari judul posting terbaru yang ditampilkan secara berurutan dimaksudkan agar memudahkan pengunjung melihat urutan posting yang telah kita buat. Setiap kita memposting artikel terbaru pada blog, mungkin artikel kita sangat dinantikan oleh pengunjung setia kita.

Nach, tidak ada salahnya k'lo kita membuat recent post demi pengunjung setia kita yang haus akan beragam informasi dari sebuah blog yang berbobot dan bermutu layaknya blog ini. Ehemm.. hem..
Yups, kita lanjut...

Untuk membuat recent post kita bisa menggunakan kode seperti dibawah ini.

<script style="text/javascript" src="ttp://www.geocities.com/itto83/amboeradoel/recent-post.js"></script><script style="text/javascript">var numposts = 5;var showpostdate = true;var showpostsummary = true;var numchars = 100;var standardstyling = true;</script><script src="http://amboeradoel-camp.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>

Pertama-tama kita masuk dulu pada Page Element Blogger. Kemudian klik Add a Gadget lalu pilih HTML/Javascript. Copy-Paste kode diatas kedalam kotak "content".

Angka yang berwarna Hijau merupakan jumlah posting yang akan ditampilkan, jadi dapat kita atur sesuai keinginan. Jangan lupa ubah kode yang berwarna Biru, ganti dengan alamat blog kamu. Nach.. slesai dech, selamat mencoba...

[Read More...]

Warung Apung Rowo Jombor

Warung Apung Rowo Jombor Pemandangan alam pegunungan, dipadu dengan bentangan lahan persawahan dan gemercik air di rawa yang ada di kompleks Objek wisata Rawa Jombor yang terletak di Desa Krakitan Kecamatan Bayat, Kabupaten Klaten, Provinsi Jawa Tengah demikian indahnya dan kondisi itu sangat diminati wisatawan yang berkunjung ke objek wisata ini.

Rowo Jombor merupakan salah satu obyek wisata unggulan di Kabupaten Klaten dan menjadi kawasan wisata potensial. Selain pemandangan alam di sekitar objek wisata ini indah, wisatawan bisa menikmati aneka sajian makanan ikan, lele dan ayam goreng atau bakar dengan harga terjangkau di warung makan atau rumah makan terapung. Masakannya juga enak dan nikmat plus lezat, pokoknya "mak nyusss.." dech...!! Klo nggak percaya, cobain aja sendiri dech.

Setiap hari libur Rowo Jombor selalu dipadati pengunjung baik dari dalam kota maupun dari luar kota seperti Solo, Sukoharjo, Boyolali, Jogja, Magelang, Semarang, Jakarta, dan lain sebagainya, semua berdatangan untuk berekreasi di tempat tersebut sambil mencicipi ikan bakar khas Rowo Jombor. Sedangkan untuk hari-hari biasa, kebanyakan yang meramaikan adalah siswa-siswi sekolah yang sedang merayakan Ulang Tahun maupun hanya sekedar bolos sekolah mencari tempat yang aman .

Kini Rowo jombor mulai dikembangkan dan diharapkan mampu menjadi tempat pariwisata berpotensi nasional. Jadi ingat k'lo dulu suka mbolos sekolah di Rowo Jombor, hee.. hee.. Ups...

[Read More...]

Cara Membuat Text Area "Readonly"

Text Area merupakan salah satu fasilitas untuk saling tukar link dengan tujuan untuk saling kenal dan ajang promosi. Yups.., saling bertukar link merupakan hal yang perlu dalam dunia perbloggeran untuk meningkatkan kepopuleran sebuah blog, apalagi link nya berupa banner tentu akan lebih menarik. Dan bila ingin bertukar banner tentu si blogger menyediakan sebuah textarea yang di dalamnya terdapat script yang bisa dikopi dan kemudian diletakkan di blog lain.

Namun kebanyakan textarea yang disediakan tidak "readonly". Coba deh letakkan kursor di textarea kemudian tekan tombol delete atau space, ada script yang terhapus kan. Akibat yang paling fatal yaitu terhapusnya script pada waktu meng-copy.

Contoh text area yang tidak readonly:

Contoh text area yang readonly:

Untuk mengantisipasi terhapusnya bagian script pada waktu meng-copy, tambahkan script readonly="readonly" pada tag textarea. Lebih jelasnya lihat script berikut:

<textarea readonly="readonly" rows="4" cols="20" name="code"><a href="http://amboeradoel-camp.blogspot.com" target="_blank"><img src="http://i393.photobucket.com/albums/pp13/Amboeradoel/Camp/Logo_Amboeradoel.png" border="0" alt="Blog Tutorial" /></a></textarea>


Keterangan:
  1. rows="4", menunjukan tinggi dari text area, jadi jika anda menginginkan text area yang tinggi maka silahkan ganti angka "4" tadi dengan angka yang lebih tinggi nilainya.
  2. Cols="20", menunjukan lebar dari text area. Jika anda menginginkan text area yang lebar maka silahkan ganti angka "20" tadi dengan angka yang lebih tinggi nilainya.

Ok dech, sekarang textarea yang disediakan akan kebal terhadap tombol delete atau space namun masih tetap bisa dikopi.

[Read More...]

Membuat Rainbow Link

Rainbow Link adalah suatu link yang apabila link tersebut disorot oleh kursor, maka warna link tersebut akan berubah menjadi warna - warni. Yups, seperti namanya rainbow link atau dalam bahasa indonesia bisa diartikan sebagai link pelangi. Kode javascript untuk membuat rainbow link tersebut, saya dapatkan di www.dynamicdrive.com.

Mungkin dach pada banyak yang tahu tentang tutorial yang satu ini. Tapi.., siapa tau ada yang masih blom tahu mengenai rainbow link atau link warna - warni, makanya saya coba postingin artikelnya.

Untuk membuatnya, silahkan ikuti petunjuk berikut:
Langkah awal yaitu seperti biasa, buka menu Layout kemudian pilih Edit HTML. Selanjutnya, silahkan cari kode </head> lalu simpan script berikut di bawah kode </head> tersebut.

<script src="http://www.geocities.com/itto83/amboeradoel/rainbow_link.js"/>

Jika sudah sesuai, jangan lupa Save Template. Trus liat hasilnya..

[Read More...]

Blogumus, Animasi Flash Untuk Label Blog

Blogumus aslinya merupakan tag cloud dengan nama "wp-cumulus" untuk wordpress yang dibuat oleh Roy Tanck kemudian di buat versi bloggernya oleh Amanda Fazani. Dengan adanya Blogumus ini, tampilan label blog kita akan menjadi lebih cantik dan menarik.

Blogumulus by Roy Tanck and Amanda Fazani

Bagus khan..??!
Untuk Lebih jelasnya mari kita langsung praktekan saja ya...

Untuk langkah pertamanya, silakan masuk pada menu Edit HTML. Nach sekarang carilah script ini atau yang hampir sama dengan ini:

<b:section class='sidebar' id='sidebar' preferred='yes'>

Bila sudah ketemu pastekan kode dibawah ini dibawah kode diatas:

<b:widget id='Label2' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Akhirnya slesai.., jangan lupa privew dulu apakah ada kesalahan script atau tidak, baru kemudian kita SAVE. Dari script diatas, tampilan default Blogumus secara spesifik seperti berikut:

# Width is set to 240px
# Height is set to 300px;
# Background color is white
# Text color is grey
# Font size is "12"

Jika menghendaki tampilan yang lain, kita bisa merubah kode dari tampilan default Blogumus diatas. Untuk merubah panjang dan lebar, silakan cari dan ganti kode yang berwarna hijau seperti dibawah ini:

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

Jika ingin merubah warna latarbelakangnya, silakan cari dan ganti kode yang berwarna hijau seperti dibawah ini:

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

Untuk merubah warna textnya, silakan cari dan ganti kode yang berwarna hijau seperti dibawah ini:

so.addVariable("tcolor", "0x333333");

Sedangkan untuk merubah ukuran textnya, silakan cari dan ganti kode yang berwarna hijau seperti dibawah ini:

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

Selamat mencoba.., smoga sukses...!!! [Read More...]

Membuat "Elegant" Read More

Di postingan yang baru ini, kita akan membuat link Read more yang jika kita meng-klik link tersebut, maka keseluruhan artikel akan terpampang dibawahnya alias langsung "full-post", jadi tidak perlu meload ke halaman yang lain. Lebih praktis kan..??!

Berbeda dengan Read more yang disini, karena bila kita meng-klik link tersebut, maka keseluruhan artikel akan diload ke halaman yang lain. Nach, semua memiliki keunggulannya masing-masing, tergantung kita mau milih yang mana. Ok, sekarang kita praktekin.. lanjutt...

Langkah Pertama:
Buka menu Layout kemudian pilih Edit HTML. Kasih tanda cek (centang) pada cekbox "Expand Widget Template". Jangan lupa backup blogger dengan mengklik "Dowlnoad Template Lengkap".

Langkah Kedua:
Copy-Paste kode dari BloggerBuster dibawah, kemudian letakan kode tersebut sebelum kode </head>.

<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery-1.2.3.pack.js' type='text/javascript'/>
<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery.extractor.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {

$('.excerpt').expander({
slicePoint: 280, // change this to the length in characters you would like to display.
// HTML tags included in this count.
// the folllowing functions apply when choosing the expanding post version
expandEffect: 'fadeIn', // the effect used for displaying expanded text.
expandText: '[...]', // Change this from an ellipsis to "Read More" for example
userCollapseText: '[^]' // This is the icon used for truncating the post after it has been expanded.
});

});
</script>

Kode yang warna Biru dapat kita ganti, misalnya "Selengkapnya..." dan satunya "Ringkasan..." atau dengan yang lainnya sesuai keinginan kita.

Langkah Ketiga:
Selanjutnya cari kode <data:post.body/>, k'lo sudah ketemu keseluruhannya akan tampak seperti berikut:

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Nach, keseluruhan kode diatas kemudian kita Replace dengan kode berikut:

<b:if cond='data:blog.pageType != "item"'>
<div class='excerpt post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<a expr:href="data:post.url">Continue Reading<;/a>
<b:else/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>

Tulisan warna Biru juga boleh diganti, dan jangan lupa Save perubahannya. Semoga nggak ada yang bingung, aminn...


[Read More...]

Memasang Emoticon Post Di Blogger

Buat yang pernah atau yang sedang memiliki blog/site berbasis WordPress, pastinya sudah mengenal tentang smiley plugin untuk di postingan dan di komentar. Nah, ketertarikan itu pulalah yang memacu saya untuk mencari plugin serupa untuk Blogspot. Seperti yang kita ketahui, blogspot merupakan layanan blog dengan engine CMS yang cukup terbatas dan mungkin perlu keahlian khusus dalam optimasi.

Jadi sebagai blogger user, kita dituntut untuk lebih kreatif untuk mencari segala informasi dan tutorial yang bisa kita gunakan untuk membuat postingan di blog kita menjadi lebih indah dengan adanya smiley seperti ini , atau , atau juga yang ini . Biar senyum nya makin lebar , and kalo ketawa makin ngakak .

Berterima kasihlah kepada master-master blogspot yang sudah sudi mencari cara, trik, tips dan membaginya demi optimasi tampilan di blogspot. Sehingga akhirnya, hampir sekian banyak plugin yang ada di Wordpress tersedia juga di blogspot meskipun dengan cara-cara yang cukup sulit, bahkan sampai menangis untuk bisa memakainya (maklum newbie).

Setelah melakukan blogwalking cukup lama, akhirnya saya menemukan tutorial yang pas untuk menambahkan emoticon di postingan saya. Tutorial ini saya ambil dengan sedikit perubahan dari sini. Ketika kita mau posting, di halaman Compose nantinya akan berwujud kira-kira seperti ini:

Memasang Emoticon Post Di Blogger

Ok, Lets begin the tutorial...

Langkah Pertama:
Pastikan kamu memakai browser Firefox terbaru, at least versi 1.5 keatas lah. Install yg namanya Grease Monkey, ini add-onn Firefox yg akan membantu misi kita kali ini , setelah itu restart Firefox.

Langkah Kedua:
Setelah GM terinstall, berikutnya adalah menginstall script emoticon, untuk contoh kita akan memasang emoticon yang biasa nongol di yahoo. Silahkan klik disini untuk menginstall scriptnya.

Langkah Ketiga:
Buka menu Layout kemudian pilih Edit HTML. Copy-Paste kode dibawah, kemudian letakan kode tersebut sebelum kode ]]></b:skin>.

img.emoticon {
padding: 0;
margin: 0;
border: 0;
}

Jangan lupa Save perubahan tersebut. Bagaimana mudah kan.... sekarang kita bisa juga memasang berbagai macam emoticon di editor posting blogger.


[Read More...]

Membuat Tab View Dengan DOMTab

Tabview merupakan cara mudah untuk memberikan informasi pada halaman multiple, Tabview sangat cocok digunakan pada ruang terbatas karena satu tab dalam tabview akan mewakili satu halaman. So.., Tabview itu sangat berguna sekali, karena dengan ukuran kotak yang relatif kecil tapi bisa memuat isi yang buanyak.

Membuat Tabview

Diatas merupakan contoh Tabview dengan menggunakan srcipt DOMTab, pada Tabview kita juga bisa mengubah warna, menambahkan jumlah tab dan mengubah sendiri ukuran dari tabview sesuai dengan kebutuhan. Agar lebih mudah, saya akan menjelaskannya cara menggunakannya.

Nach, langsung saja kita praktekkan...

Langkah Pertama: Backup Template
Ketika kita akan mengubah template, membackup tamplate adalah sesuatu yang wajib dilakukan, kenapa.. karena jika ada kesalahan yang terjadi pada template kita dan kita tidak membackup-nya yah.. sudah bisa ditebak apa yang terjadi selanjutnya.

Langkah Kedua: Tambahkan Kode CSS
Untuk mengubah tampilan jadi lebih menarik, kita bisa mengubah warna berdasarkan code CSS dibawah ini.

div.domtab{
padding:0;
width:100%;
font-size:90%;
}
ul.domtabs{
float:left;
width:100%;
margin:0;
list-style:none;
padding-left: 0;
}
ul.domtabs li{
float:left;
padding:0 5px 0 0;
text-align: center;
width: 90px;
}
ul.domtabs a:link,
ul.domtabs a:visited,
ul.domtabs a:active,
ul.domtabs a:hover{
padding:.5em 1em 0;
display:block;
background:#999;
color: #333;
height:2em;
font-weight:bold;
text-decoration:none;
}
html>body ul.domtabs a:link,
html>body ul.domtabs a:visited,
html>body ul.domtabs a:active,
html>body ul.domtabs a:hover{
height:auto;
min-height:2em;
}
ul.domtabs a:hover{
background:background:#ccc;
}
div.domtab div{
clear:both;
width:auto;
color:#ddd;
padding:0 5px;
margin: 0 0 1em 0;
}
div.domtab div .sidebar-tab, div.domtab div .sidebar-tab .widget-content {
margin: 0 0 0;
padding: 0;
}
ul.domtabs li.active a:link,
ul.domtabs li.active a:visited,
ul.domtabs li.active a:active,
ul.domtabs li.active a:hover{
background:#ccc;
color: #333;
}
div.domtab div .sidebar-tab ul li {
list-style: none;
padding: 3px 0 5px 0;
}
div.domtab div .sidebar-tab ul li a {
list-style: none;
margin: 0;
padding: 0;
}
div.domtab div .sidebar-tab ul {
width: 100%;
margin: 0;
padding: 0;
}
#domtabprintview{
float:right;
padding-right:1em;
text-align:right;
}
#domtabprintview a:link,
#domtabprintview a:visited,
#domtabprintview a:active,
#domtabprintview a:hover{
color:#ccc;
}
div.domtab div a:link,
div.domtab div a:visited,
div.domtab div a:active{
color:$linkcolor;
padding:1em .5em;
font:bodyfont;
text-decoration: none;
}
div.domtab div h2 a,
div.domtab div h2 a:hover,
div.domtab div h2 a:active{
color:#cfc;
display:inline;
padding:0;
font-weight:normal;
font-size:1em;
}

body#layout #sidebar-tabs-1 .widget,
body#layout #sidebar-tabs-2 .widget,
body#layout #sidebar-tabs-3 .widget {
display: block; clear: both;

div.domtab div {display: block; clear: both;}

Copy-Paste semua kode diatas, lalu tambahkan sebelum kode </b:skin>.

Langkah Ketiga: Tambahkan Kode JavaScript
Untuk kode JavaScript yang akan digunakan, saya direct dari Blogger Buster.

<!--[if gt IE 6]>
<style type="text/css">
html>body ul.domtabs a:link,
html>body ul.domtabs a:visited,
html>body ul.domtabs a:active,
html>body ul.domtabs a:hover{
height:3em;
}
</style>
<![endif]-->
<script src='http://bloggerbuster.com/scripts/domtab/domtab.js' type='text/javascript'/>

Copy-Paste semua kode dibawah ini, kemudian tambahkan sebelum kode </head>.

Langkah Keempat: Tambahkan Kode DOMTab
Untuk penambahan kode ini, sebenarnya tergantung pada pilihan dimana kita akan meletakkan Tabview. Dalam contoh ini, saya letakkan di dalam Sidebar. Selanjutnya, cari kode warna Hijau dibawah ini:

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar-top-section' preferred='yes'>

K'lo kode yang dicari dalam template tidak ada, coba cari yang seperti ini <div id='sidebar'>. Pokoknya yang bau Sidebar, soalnya Tabview kita tambahkan ke dalam sidebar. .

Masukkan kode dibawah ini sesudah kode diatas dan sebelum kode <b:section>.

<div class='domtab'>
<ul class='domtabs'>
<li><a href='#recent'>Recent Posts</a></li>
<li><a href='#cats'>Categories</a></li>
<li><a href='#arc'>Archives</a></li>

</ul>
<div style='border: 3px solid #ccc;'>
<p><a id='recent' name='recent'> </a><b:section class='sidebar-tab' id='sidebar-tabs-1' preferred='yes'>
<b:widget id='Feed1' locked='false' title='' type='Feed'>
<b:includable id='main'>
<div class='widget-content'>
<ul expr:id='data:widget.instanceId + &quot;_feedItemListDisplay&quot;'>
<b:loop values='data:feedData.items' var='i'>
<li class='sidebar-list'>
<span class='item-title'>
<a expr:href='data:i.alternate.href'>
<data:i.title/>
</a>
</span>
<b:if cond='data:showItemDate'>
<b:if cond='data:i.str_published != &quot;&quot;'>
<span class='item-date'>
&#160;-&#160;<data:i.str_published/>
</span>
</b:if>
</b:if>
<b:if cond='data:showItemAuthor'>
<b:if cond='data:i.author != &quot;&quot;'>
<span class='item-author'>
&#160;-&#160;<data:i.author/>
</span>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section></p>

</div>
<div style='border: 3px solid #ccc;'>
<p><a id='cats' name='cats'> </a><b:section class='sidebar-tab' id='sidebar-tabs-2' preferred='yes'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li class='sidebar-list'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section></p>
</div>
<div style='border: 3px solid #ccc;'>
<p><a id='what' name='arc'/>
<a id='arc' name='arc'> </a><b:section class='sidebar-tab' id='sidebar-tabs-3' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul>
<li expr:class='&quot;archivedate &quot; + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
<span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:loop>
</b:includable>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == &quot;expanded&quot;'>
<a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; + &quot;&amp;dir=close&amp;toggle=&quot; + data:interval.toggleId + &quot;&amp;toggleopen=&quot; + data:toggleopen'>
<span class='zippy toggle-open'>&#9660; </span>
</a>
<b:else/>
<a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; + &quot;&amp;dir=open&amp;toggle=&quot; + data:interval.toggleId + &quot;&amp;toggleopen=&quot; + data:toggleopen'>
<span class='zippy'>
<b:if cond='data:blog.languageDirection == &quot;rtl&quot;'>
&#9668;
<b:else/>
&#9658;
</b:if>
</span>
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
</b:widget>
</b:section></p>
</div>

</div>

Jika installasi kode sukses, maka kita akan melihat Tab View dalam template blogger kita.

Langkah Kelima: Selesai

[Read More...]

Memasang Emoticon Comments Di Blogger

Dengan adanya emoticon di kotak komentar tentunya akan membuat blog menjadi lebih hidup. Para komentator menjadi lebih bisa mengekspresikan perasaannya melalui emoticon tersebut. Kalau di WordPress mungkin feature ini sudah tersedia. Tapi untuk Blogspot kita harus mengotak-atik dan mengakalinya supaya bisa menampilkan emoticon di area komentar.

Postingan kali ini akan saya bahas cara "Memasang Emoticon Di Kotak Komentar" . Dan yang pasti emoticon yang dipasang tuch lucu dan asli buatan Yahoo!. Biar pengunjung yang lagi berkomentar k'lo senyum makin lebar , and k'lo ketawa makin ngakak .

Gimana..?? Kamu mau memasang emoticon ini...??! Ok, kita lanjut..

Langkah Pertama:
Seperti biasa, buka menu Layout kemudian pilih Edit HTML. Kasih tanda cek (centang) pada cekbox "Expand Widget Template". Jangan lupa backup blogger dengan mengklik "Dowlnoad Template Lengkap".

Langkah Kedua:
Copy-Paste script dibawah, kemudian letakan script tersebut sebelum kode </body>.

<script src='http://www.geocities.com/itto83/amboeradoel/comment_smileys.js' type='text/javascript'/>

Langkah Ketiga:
Jika sudah, kemudian cari kode <p class='comment-footer'>. Untuk lebih jelasnya lihat tampilan kode berikut:

<p class='comment-footer'>

<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>

Selanjutnya Copy-Paste kode dibawah ini, dan letakkan kode tersebut setelah kode <p class='comment-footer'>.

<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86'>
<b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>
:))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>
:)]
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>
;))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>
;;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>
:D
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>
;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>
:p
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>
:((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>
:)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>
:(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>
:X
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>
=((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>
:-o
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>
:-/
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>
:-*
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>
:|
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>
8-}
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>
~x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>
:-t
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>
b-(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>
:-L
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>
x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>
=))</b>
</div>

K'lo sudah, jangan lupa trus di Save dan coba lihat hasilnya.


[Read More...]

Membuat Menu Dropdown Label Blog

Semakin banyak artikel yang kita tulis tentu semakin banyak pula label atau kategori yang akan ditambahkan, tidak masalah jika nama label kita cuma 5 atau 10 nama label, lalu bagaimana jika sampai 20 atau lebih sedangkan label dalam standar blogger akan tampil tersusun kebawah dan tentu saja cara standard ini akan memakan tempat pada halaman blog kita nantinya.

Langkah praktis mengatasi hal ini adalah dengan membuat menu dropdown label yang nantinya berfungsi untuk mengelompokkan posting ke sebuah sub menu tertentu dan bertujuan untuk kemudahan pencarian post. Sangat mudah membuat Membuat Menu Dropdown Label di Blogger, tidak usah ribet mengetikan entry alamatnya secara manual. Mau tau caranya...??!

Seperti biasa, pertama-tama kita masuk dulu pada menu layout kemudian ke menu Edit HTML, jangan lupa beri tanda cek (centang) pada cekbox "Expand Widget Template". Kalau perlu backup template juga diperlukan. Lalu cari kode berikut ini :

<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

Jika sudah ganti kode diatas dengan kode berikut :

<br />
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>-Pilih Label-</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>

Untuk tulisan -Pilih Label- bisa kita ganti sesuai keinginan. Dan jangan lupa disimpan, trus lihat hasilnya..

[Read More...]

Membuat Highlight Author Comments

Highlight Author Comments berguna untuk membedakan antara komentar pemilik blog (author) dengan komentar para pengunjung blog. Bukan maksudnya "mendiskriminasikan" lho, tujuannya agar pengunjung tau k'lo pemilik blog secara pribadi juga menanggapi komentar dari para pengunjungnya. Jadi komentar dari pemilik blog lebih mudah ditemukan, gitu.. hiks..

Membuat Highlight Author Comments

Nach, gambar diatas itulah yang saya maksud dengan Highlight Author Comments. Sekarang langsung praktek, menuju TKP..

Langkah Pertama:
Buka menu Layout kemudian pilih Edit HTML. Kasih tanda cek (centang) pada cekbox "Expand Widget Template". Jangan lupa backup blogger dengan mengklik "Dowlnoad Template Lengkap". Langkah pertama slalu sama ya..

Langkah Kedua:
Selanjutnya, cari kode default komentar pada template. Kalo pada template minima kurang lebih kodenya seperti ini :

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Nah.. kalo template kamu misalnya bukan minima, biasanya untuk kode default komentar diawali dengan tag <ul>. Pokoknya yang ada kode comments-blocks aja deh.

Langkah Kedua:
Kalo misalnya sudah ketemu, silahkan Copy-Paste kode dibawah ini dan Replace smua kode diatas.

<ul class='commentlist' style='margin: 0; padding: 0;'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.author == data:post.author'>

<li class='author-comments' style='margin: 0 0 10px 0;'>
<b:if cond='data:post.dateHeader'>
<div class='commentcount'/>
</b:if>
<cite>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
</cite>
<br/>
<div style='clear: both;'/>
<b:include data='comment' name='commentDeleteIcon'/>
<p><data:comment.body/></p>
<div class='commentlink-date'><a class='commentlink' expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a></div>

<div class='clear'/>

</li>


<b:else/>

<li class='general-comments' style='margin: 0 0 10px 0;'>
<b:if cond='data:post.dateHeader'>
<div class='commentcount'/>
</b:if>
<cite>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
</cite>
<br/>
<div style='clear: both;'/>
<b:include data='comment' name='commentDeleteIcon'/>
<p><data:comment.body/></p>
<div class='commentlink-date'><a class='commentlink' expr:href='"#comment-" + data:comment.id' title='comment permalink'>

<data:comment.timestamp/>
</a></div>
<div class='clear'/>
</li>

</b:if>
</b:loop>
</ul>

Langkah Ketiga:
Selanjutnya tinggal memasang kode css untuk membedakan tampilan komentar pemilik blog. Copy-Paste kode dibawah ini dan letakan diatas tag ]]></b:skin>.

.author-comments {
background: #656565;
border: 1px solid #333333;
padding: 5px;
}
.general-comments {
background: #454545;
border: 1px solid #333333;
padding: 5px;
}

Langkah Keempat:
Simpan perubahannya, trus lihat hasilnya. Selesai dech...


[Read More...]

Membuat Favicon Blog

Favicon merupakan sebuah gambar yang terdapat pada samping adress bar, ukuran yang dibutuhkan untuk membuat favicon ini adalah 16x16 pixel. Untuk membuatnya bisa menggunakan program seperti corel, photoshop, dan program edit gambar lainnya. Simpan gambar pada format GIF,JPG,PNG atau BMP (pilih salah satu).

Ok dech, langsung aja...
Pertama-tama kita siapkan dulu gambar yang akan dijadikan Favicon. K'lo ukuran 16x16 terasa sangat kecil, kita bisa buat dengan ukuran 32x32 maupun 48x48. Meskipun kita pakai ukuran yang 32x32 atau 48x48, tetap saja defaultnya yang digunakan blog ukuran 16x16. Dengan kata lain, blog akan mengompress menjadi 16x16 pixel dengan sendirinya.

Upload gambar tersebut di alamat penyimpanan online, bisa di www.geocities.com. Selanjutnya buka blogger lalu masuk ke edit HTML, kemudin paste kode dibawah ini diatas kode </head>:

<script type='text/javascript'>
var icon = document.createElement("link");
icon.rel = "SHORTCUT ICON";
icon.href = "URL Favicon";
document.getElementsByTagName("head")[0].appendChild(icon);
</script>

Tulisan warna hijau diganti dengan alamat gambar sesuai dengan nama alamat url tempat disimpannya gambar.

[Read More...]

Membuat Post Summary "Read More"

Bagi kita yg sudah membuat blog dan sudah memposting sejumlah entry, mungkin terpikir oleh kita bahwa postingan kita terlalu panjang sehingga tak menarik dilihat pengunjung. Apabila kita ingin menyingkat posting yang ada di halaman muka supaya lebih menarik dan judul-judul lainnya pun jadi lebih visible di mata pengunjung, dengan harapan mereka akan lebih 'betah' lagi nongkrong di blog kita.

Nach.. sistem ini disebut juga dengan post-summary.

Membuat Post Summary

Dengan cara ini, biasanya nanti dibawah postingan kita terdapat tulisan "Read More" atau yang lain sebagainya seperti gambar diatas, dan k'lo kita klik akan langsung memunculkan posting secara keseleuruhan di sebuah jendela baru. Dan yang tampil sebelumnya hanya posting yang dipotong sebagian.

Nach, sekarang nggak usah basa basi lagi.. waktunya praktek...!!!

Langkah Pertama:
Buka menu Layout kemudian pilih Edit HTML. Kasih tanda cek (centang) pada cekbox "Expand Widget Template". Jangan lupa backup blogger dengan mengklik "Dowlnoad Template Lengkap".

Langkah Kedua:
Copy-Paste kode dibawah, kemudian letakan kode tersebut sebelum kode </head> atau tepat sesudah kode ]]></b:skin>.

<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

Langkah Ketiga:
Selanjutnya, cari kode warna Hijau dibawah ini:

<div class='post-body entry-content'>
<p><data:post.body/></p>

Copy-Paste kode dibawah ini dan letakan dibawah code warna Hijau diatas.

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

Tulisan "[Read More..]" itu bisa kita rubah sesuai dengan keinginan, misalnya jadi "Baca Selengkapnya..". Setelah itu simpan hasil pengeditan.

Langkah Keempat:
Setelah kode diatas disimpan, kita kembali dan masuk ke menu Pengaturan lalu pilih Formatting. Pada kotak Post Template isikan kode berikut:

<span class="fullpost">


</span>

Kemudian simpan.

Catatan:
K'lo kita ingin posting baru. Pilih Edit HTML dan disitulah kamu menulis posting . Jangan di Compose.

Supaya terpotong, setiap kali kita posting, klik pada bagian posting dimana kita ingin tulisan [Read More..] muncul, dan ketik <span class="fullpost"> sisa postingan sampai selesai </span>.

Jadi teks yang berada diantara <span class="fullpost"> dan </span> akan hilang. Nach.. slamat mencoba.
[Read More...]

Menyisipkan Script Dalam Postingan

Sebenarnya untuk bisa menyisipkan script/kode HTML ke dalam postingan blog gampang-gampang susah, gampang bagi yang tau dan susah bagi yang belom tau karena tidak boleh asal menulis. Ada caranya tersendiri, karena jika kita mempostingnya dengan cara biasa maka yang akan muncul di blog tidaklah sama dengan apa yang kita posting, terkadang malah sama sekali nggak muncul.

Nach.. maka dari itu, postingan ini dimaksudkan agar kita semua mengetahui bagaimana menyisipkan script/kode HTML yang benar. Jadi tidak menjadi mimpi buruk bagi bloger pemula seperti saya ini.

Cara Pertama:
Cara ini lumayan mudah. Coba buka situs www.centricle.com, selanjutnya isikan script/kode HTML yang akan disisipkan dalam postingan ke dalam kotak yang disediakan, lalu tekan tombol "Encode". Script/kode baru itulah yang nantinya disisipkan kedalam postingan di blog kita.

Menyisipkan Script Dalam Postingan

Cara Kedua:
Cara ini lebih mudah dan tidak seribet dari yang pertama. K'lo nggak percaya.. coba masuk ke "Blogger in Draft" disini. Jika Sudah masuk di Blogger in Draft, silahkan Posting/Edit Artikel yang akan di tambahkan kode HTML. Jangan lupa pastikan melakukan pengeditan di Mode Compose bukan Edit HTML. Setelah itu klik Post Option, letaknya dipojok kiri bawah.., lebih jelasnya liat gambar ini:

Draft Blogger

Nach.., jadi nggak usah ribet lagi k'lo mau pasang kode HTML di postingan Blog.

[Read More...]

Pasang Kalender Di Blogger

Untuk memasang Kalender di blog sangat gampang sekali, kita bisa memanfaatkan berbagai situs penyedia kalender gratisan. Situs seperti ini sangatlah banyak, tentunya mereka juga berlomba dengan menampilkan kalender yang sangat beragam dan menarik untuk di lihat. Saya berikan contoh satu saja yaitu www.free-blog-content.com, silahkan coba kunjungi situs tersebut.

Silahkan klik kategori yang ada untuk memilih bentuk kalender yang disukai, kemudian copy kode yang di berikan di bawah gambar kalender lalu paste pada notepad untuk nanti keperluan di simpan di blog. Mudah bukan..

Tapi ada juga dengan cara lain, kombinasi antara JavaScript dan CSS dari modifikasi template blog kita sendiri. K'lo tertarik, yuk kita lanjut...

Langkah Pertama:
Buka menu Settings kemudian pilih Formatting, trus ganti format tanggal menjadi YYYY-MM-DD seperti gambar berikut:

Pasang Kalender Di Blogger

Langkah Kedua:
Buka menu Layout kemudian pilih Edit HTML. Kasih tanda cek (centang) pada cekbox "Expand Widget Template". Jangan lupa backup blogger dengan mengklik "Dowlnoad Template Lengkap". Selanjutnya cari kode <data:post.dateHeader>, klo ingin lebih cepat ketemu coba cari dengan kata kunci "dateHeader". Nah, biasanya "data:post.dateHeader" berada diantara tags <h2> atau <h3>.
Kemudian ganti dengan tags <div> dan kasih class "date-header". Hasilnya seperti gambar berikut:

<div class="date-header"><data:post.dateHeader/></div>

Kemudian Save perubahan tadi.

Langkah Ketiga:
Buka kembali menu Edit HTML. Copy-Paste kode dari BloggerBuster berikut:

<!-- calendar widget -->
<script src='http://bloggerbuster.com/scripts/fastinit.js'/>
<script src='http://bloggerbuster.com/scripts/prototype-1.5.0.js'/>
<script src='http://bloggerbuster.com/calendar.js'/>
<link href='http://bloggerbuster.com/calendar.css' rel='stylesheet' type='text/css'/>
<!-- end calendar widget -->

Selanjutnya letakan kode tersebut sebelum kode </head>, jangan lupa untuk menyimpannya.

Untuk tampilan dari kalender, baik warna background, tulisan dan sebagainya, silakan Copy-Paste kode berikut:

span.cal {
background:transparent url('images/calendar.jpg') no-repeat scroll 0%;
float:left;
margin-right: 10px;
height:36px;
width:35px;
font-family:"Helvetica",Tahoma,Arial;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
}
span.cal_month {
color:#FFFFFF;
display:block;
font-size:10px;
line-height:11px;
margin-left:1px;
padding-top:1px;
text-align:center;
text-transform:uppercase;
}
span.cal_day {
color:#999999;
display:block;
font-size:18px;
line-height:18px;
margin-left:1px;
padding-top:4px;
text-align:center;
text-transform:uppercase;
}
.sidebar {
margin-bottom: 20px;
}

Kemudian letakan kode tersebut sebelum kode ]]></b:skin>. Simpan dan selesai...
[Read More...]

MyBlogLog, Modifikasi Recent Reader

Bergabung dengan MyBlogLog memiliki banyak keuntungan bagi yang sudah punya blog atapun bagi yang belum punya blog tapi suka membaca blog orang lain. Salah satu keuntungannya adalah tampilnya foto / gambar yang anda pasang di mybloglog ke setiap blog yang anda kunjungi jika yang empunya blog juga tergabung dalam MyBlogLog dan memasang Widget Recent Reader di blognya.

Hal ini diharapkan dapat lebih mengakrabkan antara si Penulis Blog dan si Pembaca Blog. Dan sangat dianjurkan bagi anda yang berniat ngeblog buat nambah - nambah teman. Tulisan ini di khususkan bagi yang telah memiliki widget MyBlogLog, namun kurang suka dengan tampilan mybloglog yang baru, dan ingin mengembalikannya kepada tampilan yang dulu lagi - classic.

Saatnya untuk memodifikasi tampilan MyBlogLog..
Sebelum memodifikasi tampilan, saran saya backup dulu scriptnya. Copy-Paste kode dibawah ini :

<script src="http://pub.mybloglog.com/comm2.php?mblID=MBL_ID&amp;c_width=125&amp;c_sn_opt=n&amp;c_rows=2&amp;c_img_size=h&amp;c_color_link_bg=CC9966&amp;c_color_link=666666&amp;c_color_bottom_bg=990000" type="text/javascript"></script>

Kemudian ganti saja MBL_ID dengan id MyBlogLog kamu. Selanjutnya pada Element Halaman Blogger pilih Edit HTML, masukan kode CSS dibawah ini dibawah kode <b:skin>.

table#MBL_COMM td.mbl_fo_hidden {
display:none;
}
table#MBL_COMM td.mbl_join_img {
background:transparent url(http://bloggerbuster.com/images/blank.gif) repeat scroll 0%;
}
table#MBL_COMM td.mbl_join {
background:transparent url(http://bloggerbuster.com/images/blank.gif) repeat scroll 0%;
}
table#MBL_COMM tr#tr0 {
background:transparent url(http://bloggerbuster.com/images/blank.gif) repeat scroll 0%;
display:none;
}
table#MBL_COMM th.mbl_h {
display:none;
}

Semua kodenya saya dapatkan dari Bloggerbuaster. Dan jika kita ingin ada link atau tautan ke situsnya MyBlogLog, untuk memudahkan kita login tambahkan saja kode html di bawah script MyBlogLog. Copy-Paste kode dibawah ini :

<p align="center"><a target="_blank" href="http://www.mybloglog.com/buzz/community/NamaUser_MBL/">
Lihat pembaca yang tergabung komunitas</a></p>
<p align="center"><a target="_blank" href="http://www.mybloglog.com/buzz/yjoin/?ref_id=ID_MBL&ref=w">
Gabung dalam komunitas ini</a></p>

Selanjutnya ganti NamaUser_MBL dan ID_MBL, sesuaikan dengan nama user dan ID MBL kamu. Nach.., selamat mencoba..

[Read More...]

Form Komentar Dibawah Posting-an

Tidak seperti pada WordPress yang kolom komentarnya sudah teritegrasi secara otomatis, Blogspot justru lebih sulit karena untuk membuatnya harus terlebih dahulu mengutak-atik kode HTML-nya. Tapi itu duluuu.., saat ini blogger sudah menyediakan kotak komentar yang langsung bisa ditampilkan dibawah postingan.

So, jika kita ingin memasang kotak komentar dibawah posting tidak perlu mengandalkan pihak ketiga lagi, asli blogger punya. Ini tak lepas dari pengembangan yang terus menerus di lakukan oleh tim Blogger in draf. Dengan adanya pilihan yang ketiga ini, sangat memudahkan teman-teman kita untuk ngasih komentar tampa perlu menunggu jendela baru. Ingin tahu bagaimana cara memasangnya..?!

  1. Silahkan Login ke Blogger in draft dengan ID blogger kamu
  2. Setelah Panel Kontrol terbuka, klik menu Pengaturan lalu pilih menu Komentar
  3. Pada kolom "Penempatan Formulir Komentar", pilih atau beri tanda pada tulisan "Disemat di bawah entri".

    Form Komentar Dibawah Posting

  4. Kemudian simpan perubahan.

Fitur ini direkomendasikan untuk blog yang kolom komentarnya belum pernah dimodifikasi. Apabila kotak komentarnya sudah dimodifikasi, kita harus terlebih dahulu mengubahnya seperti semula karena fitur ini terkadang tidak berhasil ditampilkan pada kolom komentar yang sudah dimodifikasi. Ikuti langkah dibawah ini:

  1. Silahkan Login ke Blogger in draft dengan ID blogger kamu
  2. Kemudian masuk ke menu Tata Letak, lalu pilih menu Edit HTML. Jangan lupa backup template dulu dengan mengklik "Download Template Lengkap"
  3. Selanjutnya beri tanda cek (centang) pada cekbox "Expand Widget Template". Cari kode yang seperti di bawah ini:

    <p class='comment-footer'>
    <b:if cond='data:post.allowComments'>
    <a expr:href='data:post.addCommentUrl'
    expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </b:if>
    </p>

  4. Replace kode diatas, lalu ganti dengan kode di bawah ini:

    <p class='comment-footer'>
    <b:if cond='data:post.embedCommentForm'>
    <b:include data='post' name='comment-form'/>
    <b:else/>
    <b:if cond='data:post.allowComments'>
    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </b:if>
    </b:if>
    </p>

Setelah beres Simpan Perubahan. Selesai...
[Read More...]

Sekilas Tentang Widget

Widget merupakan suatu fasilitas standar yang di berikan oleh Blogger untuk dapat kita pergunakan dalam membuat blog. Fungsi widget tersebut sangatlah bervariasi, tergantung dari keinginan kita untuk menampilkan fungsi-fungsi dari widget itu sendiri.

Biasanya kita dalam membuat blog, selain ingin menampilkan hasil tulisan kita, ekspresi kita, juga ingin agar tampilan halaman utama blog kita terlihat meriah, sekaligus enak untuk di lihat oleh pengunjungnya. Dari widget inilah, maka kita bisa melakukan itu semua, sesuai keinginan kita sekedar untuk membuat tampilan di blog kita jadi lebih menarik.

Nach, widget yang saya bahas di sini adalah konfirmasi widget yang muncul saat kita mengganti template blogger kita, sekedar mengingatkan tidak setiap webhosting memiliki widget yang sama, jadi masing-masing memiliki fasilitas yang berbeda baik jumlah dan fungsinya. Secara gampang saat kita berada di Panel Kontrol coba klik Layout.

Nantinya kita akan menemukan halaman seperi ini:

Sekilas Tentang Widget

Bila kita perhatikan, pada elemen halaman ini terdapat beberapa widget yang telah digunakan. Kita juga dapat menambah dan mengedit widget sesuai dengan fungsi dan kebutuhan kita. Untuk mengetahui jumlah maksimal widget Blogger pada sidebar yang dapat kita pasang, silakan masuk pada halaman Edit HTML dan cari kode warna hijau seperti berikut:

maxwidgets='4'

Sekedar catatan, jika pada saat kita mengganti template Blogger, trus kita klik SAVE maka akan muncul sebuah konfirmasi "Widget akan di hapus". Jadi sebelum kita mengklik Konfirmasi & Simpan, 'back up' dulu widget Blogger kita dengan mengcopy-paste kode-kode widget kita ke notepad.


[Read More...]

Recent Post

Welcome

To My Personal Online Home. This Site Features My Blog, Wallpapers, Lyrics, Tutorial, Software...
Thank's To Visit My Site

Recent Visitors

Recent Comments

Copyright © 2008 Amboeradoel Camp | Fanotti