Cara Membuat Recent post seperti Headline News

Recent Post Widget Seperti Headline News merupakan salah satu widget yang banyak digemari oleh para blogger. selain tidak memakan tempat yang banyak di blog, Recent Post Widget Seperti Headline News juga membuat tampilan blog lebih menarik.

Ok untuk mempersingkat waktu langsung saja berikan langkah-langkah untuk mebuat Recent Post Widget seperti Headline News:
1. masuk ke akun blogger anda.
2. setelah anda berada di dasbor, kemudian pilih tab Rancangan.
3. klik tambah gadget. akan muncul tampilan seperti gambar dibawah ini.

4. tambahkan HTML/JavaScript. maka akan muncul lagi tampilan seperti dibawah ini.

5. pada bagian judul kosongkan saja. pada bagian conten isikan kode berikut.

 <script type="text/javascript">

        var jc_url_blog = "http://johancomputers.blogspot.com/";

        var jc_count_post = 20;

        var jc_color_backgroud = "white";

        var jc_color_line = "black";

        var jc_position = "bottom";

        var jc_show_title = true;

        var jc_backlink = true;

    </script>

    <script src="https://sites.google.com/site/johanbone/gadget/Headlinenews-jc.js"></script>

pada tulisan yang bercetak merah dapat ubah sesui keinginan anda. berikut keterangan nya

var jc_url_blog = "http://johancomputers.blogspot.com/"; ubah dengan alamat blog kamu

var jc_count_post = 20; jumlah recent post yang akan dimunculkan

var jc_color_backgroud = "white"; warna latar

var jc_color_line = "black"; warna garis

var jc_position = "bottom"; posisi widget dapat kamu ubah pada posisi top atau posisi Bottom

sekian tutorial Recent Post Widget Seperti Headline News. jika ada kesulitan atau masukan silahkan tuliskan pada kolom komentar dibawah ini

Sumber dari : Recent Post Widget as Headline News

Cara Merubah Logo ( Favicon ) blogger pada blog part II

anda tau kenapa postingan ini saya beri judul Cara Merubah Logo ( Favicon ) blogger pada blog part II, soalnya ini postingan kedua ane tentang Cara Merubah Logo ( Favicon ) blogger pada blog. berhubung tutorial itu banyak bilang gk bisa lg. ya terpaksa ane update. soalnya itu tutorial lama.....

disi saya gk bakal bahas lebih detail lg soal.a malas sudah ngetik. ane cuma mo perbaharui yang perlu di ubah aja dari tutorial sebelumnya. bagi anda yang belum baca silahkan baca di postingan ane terdahulu Cara Merubah Logo ( Favicon ) blogger pada blog disini saya hanya mengubah Script yang ada di langkah ketujuh-nya saja.

selipkan script <link href="http://i856.photobucket.com/albums/ab127/johanjm/ICON-JJ.gif" rel="shortcut icon" type="image/vnd.microsoft.icon">  tepat di atas <b:skin>

yang bertulisan merah silahkan anda ganti dengan url alamat icon yang anda inginkan.........

Cara pasang gambar pada judul postingan

Cara pasang gambar pada judul postingan. Kalau berbicara masalah image/gambar, memang sangat seru dan menyenangkan. Dengan adanya image maka blog kita akan tampil lebih menarik untuk di lihat,

Ok sobat, biar ga terlalu banyak berimpropisasi, langsung saja pada topik bahasan. topik yang akan kita bicarakan saat ini yaitu memasang image/gambar pada judul artikel. Artikel ini saya buat bagi yang senang akan pernak-pernik gambar,bagi yang tidak senang, ya sebagai pengetahuan saja lah.

Gambar Di Judul Postingan ? Mungkin kata itu sudah tidak asing lagi buat kamu yang sering lihat gambar nongol di depan judul postingan.Dan Dalam tutorial kali ini Johan Jm pun akan menjelaskan Tentang bagaimana Cara Pasang Gambar Di judul Postingan.Sebenarnya cara ini pun sobat klinik-it mungkin sudah banyak yang tau .Namun klinik-it akan tetap men sharenya.hehehe coba lihat gambar di bawah ini.

Gambar tersebut bisa di pasang di depan judul postingan kamu ,yang tujuanya supaya Desain blog kita terlihat aktraktif.Langsung aja ikuti tutorial berikut untuk Pasang Gambar pada judul Postingan.

1.Login Ke Blogger.

2.Klik Tatat Letak.

3.Klik Edit HTML.

4.Selanjutnya cari kode yang ada di bawah ini.

<a expr:href='data:post.url'>

5.Lalu Copy Paste Kode berikut Di Bawahnya .

<img border='0' src='http://i856.photobucket.com/albums/ab127/johanjm/ICON-JJ.gif''/>

6.Link yang berwarna merah tersebut bisa kamu ganti dengan Link gambar masing-masing.atau menggunakan gambar tersebut juga ga apa-apa.

7.Kalo sudah selesai silakan Klik SAVE TEMPLATE.

Selesai Coba Anda lihat hasilnya...

Cara Membuat Read More

Terkadang Pengunjung akan cepat bosen Membaca artikel yang sangat Panjang dan bisa membuat template anda penuh dengan artikel yang Panjang,

Lebih baik , Jika kamu ingin supaya postingan kamu yang ditampilkan dihalaman utama cuma intinya saja kemudian ada sebuah link Read More / Baca Selengkapnya untuk melihat selengkapnya maka ikutilah langkah-langkah berikut :



1. Seperti biasa, Bacalah bissmillah . supaya Lancar

2. Buka menu Layout kemudian pilih Edit HTML.

3. Kasih tanda cek (centang) pada cekbox "expand widget template"

4. Cari kode berikut di Template blog kamu (tempatnya kira-kira pada 1/4 bagian
bawah kode hmtl) seperti ini kode'a :


<div class="'post-body">


kalo dah ketemu maka dibawahnya ada kode ini :


<p><data:post.body></data:post.body></p>


5. Kalau sudah ketemu, Ganti kode yang ini <p><data:post.body></data:post.body></p> menjadi seperti
ini :


<b:if cond="data:blog.pageType == &quot;item&quot;">

<style>.fullpost{display:inline;}</style>

</b:if><p><data:post.body></data:post.body></p><span id="fullpost">

<b:else>

<style>.fullpost{display:none;}</style>


</b:else></span><p><data:post.body></data:post.body></p><span id="fullpost">


<a href="data:post.url"><span style="font-weight: bold;">Selengkapnya......</span></a>


Tulisan "Selengkapnya..." itu bisa kamu rubah, misalnya jadi "Read More" (intinya terserah anda).


6. Simpan hasil pengeditan.

7. Kemudian pilih menu Setting lalu pilih Formatting

8. Pada kotak Post Template isikan kode berikut:


<span style="font-style: italic;"><span class="fullpost">


</span></span>


9. Kemudian Simpan.

10. Ketika memposting, kan disana ada 2 tab pilihan tuh, yang "Tulis" dan "Edit

Html", Nha km pilih Yang "Edit HTML", Maka secara otomatis akan tampak kode

seperti berikut :


<span class="fullpost">


</span>


11. Letakkan abstraksi(tulisan inti)sebelum kode <span class="fullpost"> itu supaya

posting atau artikel yang akan ditampilkan

dihalama utama sebelum tulisan "Selanjutnya"

sementara

sisanya yaitu keseluruhan posting letakkan di antara kode <span class="fullpost"> dan </span>


Langkah ke 12 Check Dengan Teliti, &amp; jangan sampai salah ngetik ia??

Ok Deh selesai

Panitia Pesta Blogger Kesulitan Tentukan Lokasi

Dua bulan menjelang perhelatan Pesta Blogger 2010, panitia ajang 'kopi darat' blogger tersebut mengaku kesulitan menentukan lokasi pelaksanaan Pesta Blogger. Namun, panitia menyatakan hal tersebut takkan mempengaruhi pelaksanaan PB 2010.

"Kami belum menentukan venue untuk pelaksanaan, tapi akan segera menentukan tempatnya. Kami akan selalu update informasi, termasuk lokasi," kata ketua panitia PB 2010, Irayani Queencyputri di sela jumpa pers PB 2010 di Jakarta, Rabu (18/8/2010).

Menurut perempuan yang akrab disapa Rara tersebut, banyak faktor yang membuat panitia hingga saat ini kesulitan menentukan lokasi pelaksanaan.

"Banyak faktor yang harus kami kaji seperti harga dan juga kapasitas," kata Rara.

Panitia PB 2010 menargetkan kali ini bisa menghadirkan sekira 1.500 blogger yang tersebar di seluruh Indonesia. Selain itu, PB 2010 juga akan mengundang komunitas online lainnya, mulai dari Facebookers, Tweeps, dan anggota komunitas lain seperti anggota Devian Arts.

Dikatakan Rara, rangkaian acara PB 2010 akan diawali dengan BLOGSHOP (Blogging workshop) ke 10 kota di Indonesia bersama kedutaan besar Amerika Serikat di Indonesia. Kota-kota yang akan dikunjungi di antaranya, Makasar, Manado, Pontianak, Banjarmasin, Aceh, medan, Surabaya. Madura dan Yogyakarta.

Pada PB tahun ini, Kedutaan besar Amerika Serikat kembali menjadi sponsor utama untuk ketiga kalinya. Deputi Duta besar Amerika Serikat untuk Indonesia, Ted Osius mengungkapkan, ini adalah salah satu bentuk dukungan AS terhadap pelaksanaan demokrasi di Indonesia.

"Media sosial dan blog adalah salah satu alat untuk menyuarakan pendapat dan mendorong proses demokrasi. Indonesia adalah salah satu negara dengan kebebasan berpendapat terbaik di Asia tenggara, dan acara ini adalah salah satu bentuk pernyataan hal tersebut," kata Osius.

Cara Merubah Logo ( Favicon ) blogger pada blog

            Cara Merubah Logo ( Favicoon ) blogger pada blog. Sebenarnya Sudah banyak dan bukan hal baru lagi postingan yang ngebahas tentang Cara Merubah Logo ( Favicon ) blogger pada blog. Sebab telah lama Blogger.com (blogspot.com) memberikan kebebasan kepada para blogger-nya untuk mengubah favicon-nya masing-masing. tapi gak papa dech klo johan jm ngebahasnya lagi. soalnya ada beberapa teman yang nanyain, jo bagaimana sich Cara Merubah Logo ( Favicoon ) blogger pada blog ???. klo dijelasin kan susah ngerti-nya. ya mending diposting aja, sekalian buat nambah-nambah archive di johan jm hehehe... sambil nyelam minum air dong.??? enak aja ngomong gue minum air gue lagi puasa tau....
perhatikan gambar berikut.

perbandingan 2 buah Favicon (logo) pada blog, Yang mana sebelah kiri  (1) adalah favicon default   (bawaan Dari Blogger) di blogspot dan yang sebelah kanan (2) adalah favicon buatan Johan jm. Bikinnya gampang kok. johan jm akan tunjukkan kepada anda sekalian bagaimana Cara Merubah Logo ( Favicoon ) blogger pada blog. ikuti langkah-langkah berikut.

1. Persiapkan gambar untuk favicon. Anda bisa menggunakan editor gambar kesukaan untuk berkreasi. Saya menggunakan Adobe Photoshop.
2. Ukuran icon yang saya buat adalah 120 x 150 pixel. klo ukuran sich tergantung anda mau berapa agar terlihat proporsional.
3. Simpan dengan ekstensi gif (File, Save As, File Type : gif). Ekstensi untuk favicon sebenarnya bisa dibuat dalam ekstensi gif, ico dan png. Saya pilih gif karena lebih mudah pembuatannya dan ukurannya relatif kecil, juga bisa dibuat beranimasi (tidak saya bahas sekarang).
4. Upload gambar strong penyimpanan image. klo saya upload ke photobucket (gratis) dan dapatkan link direct downloadnya. Contoh yang saya pakai ada di http://i856.photobucket.com/albums/ab127/johanjm/ICON-JJ.gif.
5. Login ke Dashboard blogger anda, masuk ke menu Layout, Edit HTML
6. cari code </head> letakknya diatas,
7. Selipkan syntax berikut : <link href='http://i856.photobucket.com/albums/ab127/johanjm/ICON-JJ.gif' rel='shortcut icon'/> tepat diatas  </head> dibawah juga gk papa (NB: Ganti alamat http://i856.photobucket.com/albums/ab127/johanjm/ICON-JJ.gif sesuai alamat icon anda di strong penyimpanan anda)
8. Save Template dan lihat perubahan yang terjadi (View Blog) - Selesai

Silahkan dicoba. Beri tahu saya hasil yang anda buat.

Semoga bermanfaat. Salam Blogger

Cara Membuat Halaman Forum di Blogger

            Cara Membuat Halaman Forum di Blogger ( How to Make a Home Forum in Blogger ). Setelah sekian lama JOHAN JM berusaha dan keliling mengitari dunia.... bukan dunia nyata ya tapi dunia maya, hehehe... berkelana untuk mencari tau bagaimana cara Membuat Halaman Forum di Blogger atau dalam bahasa bugisnya How to Make a Home Forum in Blogger akhirnya ketemu juga. Bukan maksud saya ingin mengajari agan-agan sekalian tetapi disini Johan JM akan mencoba share sedikit bagaimana Cara membuat halaman Forum Di Blogger atau How to Make a Home Forum in Blogger bagi anda yang belum tau.

            Mungkin bagi anda yang belum mengetahuinya. dalam hati bertanya-tanya apa sich manfaat forum itu??? setiap orang pasti dapat mengartikanya berbeda-beda tetapi menurut Johan Jm Sendiri "forum membatu kita untuk menemukan jawaban serta tempat berbagi dan berdiskusi".            Oke biar gak lama-lama sekarang kita langsung saja memulai langkah-langkah membuat halaman forum di blogger, soalnya gak lama lagi mo sahur...

1. Login ke blogger dengan acount anda
2. pilih menu entri baru >>> laman
3. kunjungi situs http://tal.ki/pricing/
4. Silakan anda login / registrsi terlebih dahulu, setelah ke 3 tahap registrasi nanti akan di beri kode
5. kembali ke blogger (tempat kita akan membuat forum). buatlah forum sebagai judul halaman anda
6. kemudian pastekan code yang anda dapat td pada kolom biasa kita buat postingan
7. terakhir terbitkan halaman dan lihat hasilnya

Selamat Mencoba Dan semoga sukses. heppy Blogging

Refrensi : http://www.help.tal.ki/home/embedding-talki-forums/blogger
Post by  : Johan Jm

Mau Pasang kotak Tukeran Link ???

            Mau pasang kotak tukeran link ???. Tukeran link ??? maksudnya apaan sich dan apa gunanya??? masa sich gk tau apa itu tukeran link dan apa kegunaan-nya.baiklah bagi yang sudah tau bagus dech. dan bagi yang belum tau biar JOHAN JM yang jelaskan.

           Sebenarnya saya malu untuk posting Mau Pasang kotak Tukeran Link ini. coznya udah banyak banget kayaknya blogger-blogger yang ngebahas tentang tukeran link ini di postingan-nya. tapi gak papa dech buat yang belum tau coznya kemaren ada teman yang nanyain bagaimana sich pasang kotak tukeran link di blogspot.

           Tukeran link atau link Exchange adalah saling bertukaran link/alamat blog antara pemilik blog. tukeran link atau link Exchange merupakan salah satu cara untuk ningkatin kunjungan blog atau dalam bahasa Bugisnya Traffic Blog. contohya seperti yang ada dikanan bawah blog ini. bagaimana udah ngertikan???? klo udah kita lanjutkan ocehan berikutnya......

cara memasang kotak Tukeran Link cukup mudah. bagi yang mengerti...ye sama aja boong. klo mengerti gak usah baca panjang-panjangan baca postingan JOHAN JM tentang Pasang kotak Tukeran Link. hehehe... bener juga ya. cara memasang kotak Tukeran Link tidak memerlukan penanaman script pada template. berikut ini langkah-langkah memasang kotak tukeran link pada blog.

1. Masuk ke blogger dengan akun anda. bukan akun saya y.
2. klo udah masuk k menu rancangan/tata letak-elemen halaman
3. kemudian tambahkan gadget
4. pilih menu HTML/JavaScript
5. copy paste kode berikut pada kolom yang tersedia. klo judulnya terserah agan-agan...mo ngasi judul apa....


<textarea rows="3" cols="19"><center><a href='URL ANDA' target='_blank' style='display: block' title='TITLE-NYA'><img height="40" src="URL lokasi Gambar anda" style="display: block" width="170" /></a></center></textarea>



6. pilih simpan
7. selesai. coba lihat hasilnya  kotak tuker link anda sudah ada
   

jika anda blum punya gambar untuk link anda ganti <img height="40" src="URL lokasi Gambar anda" style="display: block" width="170" /></a></center> dengan NAMA BLOG ANDA</a></center></textarea>
maka hasilnya akan seperti ini
<textarea rows="3" cols="19"><center><a href='URL ANDA' target='_blank' style='display: block' title='TITLE-NYA'>NAMA BLOG ANDA</a></center></textarea>

Selamat mencoba dan semoga berhasil Salam blogger....

 

Gara-gara Blog, Bocah 12 Tahun Terancam Dibunuh

            Seorang bocah berusia 12 tahun kini menjadi target pembunuhan akibat tulisan di blognya. Tanpa takut bocah bernama Pocesta Rastko itu menentang pemerintah Serbia, dengan menginginkan pengakuan negara Kosovo.

            Kalau dilihat, seorang anak yang terlihat lugu ini tidak mungkin menjadi target pembunuhan. Namun kaum Nasionalis Serbia yang berang pun, menjadi naik pitam dengan tulisannya.

           Dalam blognya, ia menginginkan hubungan yang lebih baik antara Serbia dan Uni Eropa. Lantas ia pun meminta pengakuan atas negara Kosovo yang telah memisahkan diri, serta mengutuk pembantaian yang dilakukan negaranya.

           "Saya seorang Serbia, tapi mengakui Kosovo sebagai negara merdeka," tulis Rastko dalam postingannya. Walau pemerintah Serbia tak mengakui Kosovo, tapi Rastko menjelaskan bahwa ia punya pandangan lain dari negaranya. "Karena itu adalah masa depan kita, kita tidak bisa lagi melihat ke masa lalu, " tambahnya.

            Tak terima dengan tulisan itu, seorang kaum nasionalis Serbia mengancam dengan balasan diblog tersebut. "Aku akan menunggumu didepan sekolah kemudian membunuhmu, " tulisnya. Ibu Rastko, Suzanna yang mengetahuinya, langsung menghubungi polisi setempat untuk meminta perlindungan.

            "Saya seorang aktivis hak asasi manusia yang independen. Saya tak takut untuk berbeda pendapat dan saya anti-kekerasan," kata Rastko dalam sebuah wawancara dirumahnya yang sederhana di pusat kota Belgrade, Serbia. Dia mengungkapkan dengan nada suara yang bijaksana dan diplomatis jauh dari usianya.

            "Aku memang sedikit khawatir. Tapi aku tak takut. Aku akan meneruskan apa yang aku lakukan. Mungkin ini sulit untuk ibuku karena dia seorang yang apatis, toh kebanyakan dari kita memang tidak setuju dengan politik," ucap bocah itu tanpa ragu.


Sumber :  www.srigemilang.web.id

Widget Islami Marhaban Ya Ramadhan

Johan Jm | Blogging | Widget Islami Marhaban Ya Ramadhan
 

            Menyambut bulan ramadhan, bulan yang selalu di tunggu-tunggu umat islam, tidak ada salahnya kita buat Widget Islami Marhaban Ya Ramadhan yang bisa kamu pasang di blog, friendster, multiply, myspace atau tempat-tempat lain yang bisa dipasangi animasi flash.

           Cara setting Widget Islami Marhaban Ya Ramadhan ini sangat mudah, kamu tinggal isi textbox ucapan dengan kalimat yang diinginkan kemudian pilih warna pakaian karakter animasi melalui color picker.

Kamu juga bisa memilih opsi karakter cowok/cewek dan juga memilih Expresi wajah karakter dalam keadaan tersenyum atau tertawa. Terakhir, klik tombol Generate code dan copy paste ke dalam blog, friendster, multiply dll milikmu.

Untuk menambahkan Widget Islami Marhaban Ya Ramadhan silahkan ikuti petunjuk berikut :

1.Login ke dasbor blog kita, lalu klik Rancangan lalu pilih Elemen Laman

2. klik Tambah Gadget
  3. Pilih HTML/Java Script

4.  Paste Code yang kamu copy tadi pada kotak HTML/Java Script :

Johan Jm | Blogging | Widget Islami Marhaban Ya Ramadhan

Menambahkan scroll pada Blog Archive

Karena seringnya aktifitas Posting, yang akan menambah panjang pada widget Blog archive (posting terbaru), ini akan mempersempit halaman blog anda.


Untuk itu perlu ditambahkanya Scroll....

bagaimana menampilkan scroll pada archive anda ikuti langkah sebagai berikut.

Login >> dasbor >> rancangan >> edit Html >> centang >>

Expand Template Widget 


Cari code ini <div id='ArchiveList'> untuk mempercapat pencarian tekan Ctrl+f


Tambahkan code <div style='overflow:auto; height:350px;'> sebelum code <div id='ArchiveList'> dan tambahkan juga akhiran </div> untuk code scroll seperti tarlihat pada gambar......  

height = ukuran panjang kebawah sesuaikan dengan selera anda. 

Pratinjau lihat...halaman blog anda jika berhasil.

Simpan template 

Selamat mencoba ...

Fitur Statistik Baru Dari Blogger

        Johan Jm | Kali ini blogger menambahkan fitur terbaru pada dashboard penggunanya yaitu fitur statistik. Fitur statistik ini sangat berguna sekali untuk admin blogger dalam menganalisa trafik kunjungan, artikel yang sering dibaca, asal kunjungan dan lainnya. Fitur ini cukup lengkap karena statistik yang diberikan bisa di lihat berdasarkan waktu tertentu muali dari harian, mingguan, bulanan dan lain sebagainya. Berikut ini adalah fiturnya.

Tab Statistik Blogger

       Gambar di atas adalah screenshot fitur Statistik Blogger terbaru yang memudahkan admin menganalisa dan mamantau trafik kunjungan ke blogger Anda tanpa perlu membutuhkan pihak ketiga setelah adanya fitur tersebut.

      Untuk mencobanya silahkan anda log-in ke dashboard blogger Anda. Perlu di ingat bahwa fitur ini sejak artikel ini di posting tidak ada 

       pada Dashboard dasar http://www.blogger.com melainkan pada Dashboard Blogger in Draft di  http://draft.blogger.com.

 Selamat mencoba!

Cara Membuat Menu Drop Down di Blog

            Apakah Anda pernah mengetahui menu seperti di bawah ini? Bagi anda yang belum mengetahuinya coba anda tekan menunya apa yang di perlihatkan...

~~~ Pilih Music ~~~ Lagu Dangdut Kini Lagu Dangdut Lawas Lagu Bugis Cowok lagu bugis cewek

Nama menu ini adalah Menu Drop Down.

Untuk Membuat Menu Drop Down, Anda hanya membuat kode seperti ini:

<form><select name="menu"                                                                                                             onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu><option value=0 selected> <i><b><span style="color: red;">Tampilan Awal Menu Drop Down Kamu</span></b></i> </option><br /> <option value=" <span style="color: red;"><i><b>Link Pilihan</b></i> </span>"> <i><b><span style="color: red;">Menu Pilihan</span></b></i> </option> </select></form> 

Sebagai Contoh kodenya Sebagai Berikut

<form>

<select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')" size="1">  <option>~~~ Pilih Music ~~~</option>

<option value="http://johan-jm.blogspot.com/2010/06/lagu-bugis-cowok.html">Lagu Bugis Cowok</option>

<option value="http://johan-jm.blogspot.com/2010/06/lagu-bugis-cewek.html">Lagu Bugis Cewek</option>

<option value="http://johan-jm.blogspot.com/2010/05/lagu-dangdut-lawas.html">Lagu Dangdut Lawas</option>

<option value="http://johan-jm.blogspot.com/2010/05/lagu-dangdut-kini.html">Lagu Dangdut Kini</option>  </select></form>

Maka Hasilya Akan Seperti Di Bawah Ini.

~~~ Pilih Music ~~~ Lagu Dangdut Kini Lagu Dangdut Lawas Lagu Bugis Cowok Lagu Bugis Cewek

Sudah Mengerti kan, Cara Membuat Menu Drop Down???

Sekarang Kita Tinggal mengetahui Bagaimana Cara Menambahkan Menu Drop Down di Blog

Untuk mengetahui Bagaimana Cara Menambahkan Menu Drop Down di Blog, kamu tinggal ikutin langkah-langkah sebagai berikut;

1. Login ke Blogger dengan ID Anda
2. Setelah memasukkan halaman dasboard, klik Layout.
3. Klik pada tab Elemen Halaman. Lihat gambar di bawah ini:

4. Klik pada Tambah Gadget.
5. Setelah muncul pop up, Klik tombol tambahkan ke blog untuk hal-hal yang HTML / JavaScript. Lihat gambar berikut:

6. Salin dan sisipkan kode di bawah ke kolom yang tersedia:
<form> <select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')" size="1">  <option>~~~ Pilih Music ~~~</option>   <option value="http://johan-jm.blogspot.com/2010/06/lagu-bugis-cowok.html">Lagu Bugis Cowok</option> <option value="http://johan-jm.blogspot.com/2010/06/lagu-bugis-cewek.html">Lagu Bugis Cewek</option> <option value="http://johan-jm.blogspot.com/2010/05/lagu-dangdut-lawas.html">Lagu Dangdut Lawas</option> <option value="http://johan-jm.blogspot.com/2010/05/lagu-dangdut-kini.html">Lagu Dangdut Kini</option>  </select></form>
7. Klik simpan perubahan
8. Selesai. Silakan lihat hasilnya.

          Sekarang Anda memiliki Drop Down menu di blog Anda. Atau mungkin Anda masih bingung dengan langkah di atas? jangan khawatir saya punya cara mudah untuk melakukannya, cukup klik tombol di bawah ini, Kemudian login ke blog Anda. dan akan menambahkan widget ke blog Anda secara otomatis:

<br /> <form><br /> <select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')" size="1">  <option>~~~ Pilih Music ~~~</option>  <br /> <option value="http://johan-jm.blogspot.com/2010/06/lagu-bugis-cowok.html">Lagu Bugis Cowok</option><br /> <option value="http://johan-jm.blogspot.com/2010/06/lagu-bugis-cewek.html">Lagu Bugis Cewek</option><br /> <option value="http://johan-jm.blogspot.com/2010/05/lagu-dangdut-lawas.html">Lagu Dangdut Lawas</option><br /> <option value="http://johan-jm.blogspot.com/2010/05/lagu-dangdut-kini.html">Lagu Dangdut Kini</option>  </select></form> <br />

*** Semoga Berhasil ***

Cara Menambahkan Google Talk Ke Blog

Saya yakin Anda pasti tahu apa itu Google Talk, dengan Google Talk Anda dapat mengirim pesan instan, membuat panggilan suara, meninggalkan pesan suara mail, file transfer dan sebagainya, tetapi tentu saja harus dengan pengguna Google lainnya. Apakah Anda tahu, sekarang Anda dapat menambahkan Google Talk ke blog Anda? Belum tahu Cara Menambahkan Google Talk Ke Blog? 

Nah, berikut Adalah langkah-langkah Menambahkan Google Talk Ke Blog:

1. Login ke Blogger dengan ID Anda
2. Setelah memasuki halaman dasboard, klik Layout. 
3. Klik pada tab Elemen Halaman. Lihat gambar di bawah ini:

4. Klik pada Tambah Gadget.
5. Setelah muncul pop up, Klik tombol tambahkan ke blog untuk hal-hal yang HTML / JavaScript. Lihat gambar berikut:

6. Salin dan sisipkan kode di bawah ke kolom yang tersedia:
<iframe width="234" frameborder="0" src="http://talkgadget.google.com/talkgadget/client?fid=gtalk0&relay=http%3A%2F%2Fwww.google.com%2Fig%2Fifpc_relay" height="350"> </iframe><p style="margin:-8px 0"><br /><center> <a style="text-decoration:none;font-size:70%;" http://johan-jm.blogspot.com/2010/06/cara-menambahkan-google-talk-ke-blog.html">By Johan JM</a></center></p>
7. Klik simpan perubahan.
8. Selesai. Silakan lihat hasilnya.

           Sekarang Anda memiliki Google Talk di blog Anda. Atau mungkin Anda masih bingung dengan langkah di atas? jangan khawatir saya punya cara mudah untuk melakukannya, cukup klik tombol di bawah ini, login ke blog Anda, dan widget akan menambahkan ke blog Anda secara otomatis:

*** Semoga Berhasil ***

Cara Membuat Tulisan Berjalan ( Maquee )

             Kali ini saya coba bahas cara membuat tulisan berjalan ( marquee ). itung -itung gak da kerjaan  mending nambahin postingan Sebenarnya gue males juga mo ngepostingin Cara Membuat Tulisan Berjalan ( Maquee ) ini. secara banyak banget kayaknya yang ngebahas tentang ini. tp gak apa apa lah siapa tau ada yanng nyasar. hehehehe....... Sekarang waktunya serius..................
            Efek tulisan berjalan ( Marquee ) adalah suatu program HTML untuk membuat teks agar bisa bergerak / berjalan yang merupakan suatu perintah yang dapat kita atur sesuai keinginan. Kode HTML ini banyak sekali di pakai oleh para blogger, karena memang menarik pengunjung untuk melihatnya dan menghemat tempat pada halaman blog. Ada beberapa macam kode marquee untuk model perilaku geraknya ... antara lain :

Kode untuk  perilaku gerakan dari kanan ke kiri
<marquee>Cara Membuat Tulisan Berjalan ( Maquee )</marquee>
Cara Membuat Tulisan Berjalan ( Maquee )


Kode untuk perilaku gerakan dari kiri ke kanan 
<marquee direction="right">Cara Membuat Tulisan Berjalan ( Maquee )</marquee>
Cara Membuat Tulisan Berjalan ( Maquee )



Kode untuk perilaku gerakan berjalan ke kiri dan ke kanan
<marquee behavior="alternate">Cara Membuat Tulisan Berjalan ( Maquee )</marquee>Cara Membuat Tulisan Berjalan ( Maquee )




Kode untuk perilaku gerakan berjalan ke atas
<marquee direction="up">Cara Membuat Tulisan Berjalan ( Maquee )</marquee>
Cara Membuat Tulisan Berjalan ( Maquee )


Kode untuk perilaku gerakan berjalan ke bawah
<marquee direction="down">Cara Membuat Tulisan Berjalan ( Maquee )</marquee>

Cara Membuat Tulisan Berjalan ( Maquee )


Kode untuk perilaku gerakan berjalan ke atas dan ke bawah
<marquee behavior="alternate" direction="up">Cara Membuat Tulisan Berjalan ( Maquee )</marquee>

Cara Membuat Tulisan Berjalan ( Maquee )

Kode untuk perilaku gerakan terbang zigzag
<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right">Cara Membuat Tulisan Berjalan ( Maquee )</marquee></marquee>


Cara Membuat Tulisan Berjalan ( Maquee )

Kode untuk perilaku gerakan berjalan zigzag ke atas dan ke bawah
<marquee behavior="alternate" direction="up" width="80%"><marquee behavior="alternate" direction="right">Cara Membuat Tulisan Berjalan ( Maquee )</marquee></marquee>

Cara Membuat Tulisan Berjalan ( Maquee )



Kode untuk perilaku gerakan berjalan dari kanan ke kiri dengan latar belakang warna, anda bisa merubahnya dengan kode warna lain
<font ><marquee direction="left" style="background:BLUE">Cara Membuat Tulisan Berjalan ( Maquee )</marquee></Font>
Cara Membuat Tulisan Berjalan ( Maquee )


Kode untuk perilaku gerakan berjalan dari kanan ke kiri dengan dikelilingi garis tepi (border)
<marquee style="border:BLUE 2px SOLID">Cara Membuat Tulisan Berjalan ( Maquee )</marquee>Cara Membuat Tulisan Berjalan ( Maquee )



Kode untuk perilaku gerakan berjalan dengan hanya menampilkan bagian depan textnya saja atau hidden marquee
<marquee behavior="alternate"><marquee width="150">Cara Membuat Tulisan Berjalan ( Maquee )</marquee></marquee>

Cara Membuat Tulisan Berjalan ( Maquee )



Kode untuk perilaku gerakan berjalan seperti gelombang ombak ke atas dan ke bawah
<marquee behavior=alternate direction=up scrollamount=2 scrolldelay=65 height=80 style="Text-align;filter:wave(add=0,phase=1, freq=1,strength=15,color=.FFFFFF)"><center>Cara Membuat Tulisan Berjalan ( Maquee )<br>Cara Membuat Tulisan Berjalan ( Maquee )</center></marquee>

Cara Membuat Tulisan Berjalan ( Maquee )

Cara Membuat Tulisan Berjalan ( Maquee )

Cara Menambah Gadget Di Atas Header ( Judul )

             Sambil menunggu kedatangan tamu yang gk di undang........ gk di undang kok di tunggu??? ganti dech!!!  dari pada suntuk jadinya  ngantuk,  mending coba-coba buat postingan yang membahas cara menambah gadget diatas header ( Judul ).
 
           Gadget diatas header ( Judul ) bisa difungsikan untuk pemasangan koleksi image atau apa saja  yang anda suka, bahkan dapat juga  untuk pemasangan iklan, karena tempatnya startegis, terdapat dibagian paling atas yang secara langsung loadingnya paling duluan dan yang pertama dilihat oleh pengunjung blog anda.
 
         Hanya dengan sedikit penambahan kode, blog anda memiliki tempat  widget diatas header ( Judul ).  

Simak cara-Cara Menambah Gadget Di Atas Header ( Judul ) :

• Masuk ke Blogger dengan ID anda
• Pilih Tata letak
• Pilih Edit HTML
• Backup dulu templatenya kalau anda takut gagal
• Beri tanda contreng pada kotak disamping Expland Widget Template
• Cari kode yang mirip dengan kode dibawah ini pada template anda
  
  <div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='TITLE BLOG ANDA (Header)' type='Header'>
</b:section> 

• Perhatikan yang berwarna merah. Angka 1 ganti dengan jumlah gadget yang ingin anda tampilkan (disarankan angka 1 jangan diubah) dan kata no anda ganti dengan kata yes  Setelah anda ubah kata yang berwarna merah, copy kode dibawah ini dan letakan tepat dibawah kode <div id='header-wrapper'>

     <b:section class='header' id='topheader' preferred='yes'/>

• Setelah digabungkan kodenya menjadi seperti ini :

     <div id='header-wrapper'>
     <b:section class='header' id='topheader' preferred='yes'/>
     <b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
     <b:widget id='Header1' locked='true' title='TITLE BLOG ANDA (Header)'  type='Header'>
     </b:section>

• Klik tombol Simpan Template
• Lihat pada Elemen Halaman 
• Setelah muncul Tambah gadget diatas header, sekarang cobalah anda tambah widget atau apa saja yang ingin anda tampilkan diatas header

• Selesai 

 

Selamat Mencoba

Cara Memasang Widget Feedjit di Blog

            Saya sengaja membuat posingan Cara Memasang Widget Feedjit di Blog ini untuk menjawab pertanyaan salah seorang teman menanyakan cara memasang widget feedjit di blog. Memasang feedjit di blog memang menarik karena kita bisa tahu dari mana saja blog kita dikunjungi. Feedjit ini merekam dari mana visitor blog tersebut berasal yakni kota dan negaranya juga akan dapat diketahui.

Untuk memasang feedjit diblog anda adalah sebagai berikut:

1. Masuk situs feedjit untuk mendapatkan codenya 
2. Copy kode HTML feedjit yang anda dapat di berikan  
3. Kemudian Login ke account blogger anda
4. Pilih Dashboard -> tata letak -> elemen halaman   
5. Pilih Tambah Gadget   
6. Pilih HTML/JavaScript   
7. Paste kode HTML feedjit yang anda copy tadi Jika anda kesulitan menemukan kode feedjit silahkan copy saja kode berikut ini

<script src="http://feedjit.com/serve/?bc=ffffff&tc=494949&brd1=336699 amp;lnk=494949&hc=336699&ww=250"type="text/javascript"></script>lt;noscript><a href="http://feedjit.com/">Feedjit Live Blog Stats</a>&lg;/noscript> 

     8.  Klik Simpan 

     9.  Selesai dan lihat hasilnya

Selamat mencoba.... happy blogging.

Cara Membuat Tabel Pada Blog

             Terkadang disaat tertentu, saat akan membuat postingan blog kita membutuhkan tabel agar data yang disampaikan bisa terlihat rapi dan enak untuk dibaca. sedangkan kita gk tau  Cara Membuat Tabel Pada Blog jadi bingung dech. jangan pusing-pusing memikirkan bagaimana  Cara Membuat Tabel Pada Blog. nah pada postingan kali ini saya coba untuk menulis  Cara Membuat Tabel Pada Blog 

            Berikut adalah  Cara Membuat Tabel Pada Blog.

Untuk membuat tabel dengan 1 baris dan 2 kolom (1x2) adalah:

<table border="1">
<tr>
<td></td> <td></td>
</tr>
</table>

Keterangan :

<table border="1"> : perintah untuk membuat tabel sekaligus untuk mengatur ketebalan garis pinggir. Silahkan ganti nilainya sesuai keinginan anda.
<td></td> <td></td> : perintah untuk membuat kolom tabel.
</tr> : perintah untuk membuat baris baris.
Contohnya jika anda memasukkan kode berikut ini :

<table border="1">
<tr>
<td>Isi 1 Isi 2
</tr>
</table>

Maka hasil tabelnya akan seperti berikut ini :

Isi 1

Isi 2

Tulisan yang berwarna merah diatas adalah isi dari tabel, anda bisa menggantinya dengan teks, link atau gambar.

Untuk membuat tabel dengan 2 baris dan 2 kolom(2x2) anda tinggal menambahkan kode barisnya seperti berikut:

<table border="1">
<tr>
<td>Isi 1 Isi 2
</tr>
<tr>
<td>Isi 3 Isi 4
</tr>
</table>

Hasil tabelnya adalah sebagai berikut

Isi 1	Isi 2
Isi 3	Isi 4

Ok sampai disini dulu  Cara Membuat Tabel Pada Blog nya, jika ada kesulitan silahkan dtanyakan. Terimakasih. 

<<< Selamat Mencoba & Semoga Berhasil>>>

Cara Menampilkan Lencana Facebook di Blog / Website

             Mungkin masih banyak teman teman yang Belum tau Cara menampilkan Lencana Facebook di blog / website. Kali ini gue cieh pake gue awak orang dusun ko la........ baiklah saya akan sedikit ngebahas tentang Cara menampilkan Lencana Facebook di blog / website kamu. Kamu pasti udah punya akun facebook kan???. Untuk Cara menampilkan Lencana Facebook di blog / website kamu mudah alias gampang kok
.

            Tutorial Cara menampilkan Lencana Facebook di blog / website kali ini untuk blog WordPress dan juga dari Blogspot. Langsung aja kamu ikuti langkah-2 berikut.

*Cara Menampilkan Lencana Facebook di Blog / Website :
1. Login ke Facebook Kamu
2. Buka halaman [profile]
3. Kemudian pilih [Create a Profile Badge] | [Buat lencana profil] yang ada di bagian paling bawah profile facebook kamu.
4. Lalu klik link [Create A New Badge.]

5. Kalo udah, sekarang kamu seting tampilan Facebook kamu, apakah mau vertical atau horizontal? Silakan berexperimen. Sebelum kamu menyimpan lihat terlebih dahulu previewnya.

    * Layout : Pilihan tampilan horizontal / vertical
    * Format : Pilihan tampilan Image / Javascript
    * Items : Pilihan items yang akan di tampilan di badge, Kemudian klik  [Add Items]

6. Setelah kamu yakin, klik tombol [save], nanti akan terlihat tampilan seperti di bawah ini, kamu tinggal mengcopy kode script / html yang muncul Seperti Gambar berikut.

nah itukan Cara membuat Lencana Facebook nya. lalu bagaimana Cara menampilkan Lencana Facebook di blog / website nya ???? Sabarrrrrrrrr kita lakukan satu demi satu.... baiklah klo udah gak sabar lagi Sekarang saatnya untuk mengetahui Cara Menampilkan Lencana Facebook di Blog / Website kamu,


*Berikut langkah-2nya :

**Untuk Wordpress :

- Sekarang login ke WordPress dengan akun kamu

- Buka widget

- Buat 1 widget bertipe [text-wid]

- Kemudian paste script badge dari facebook tadi, dan klik [save change]


- Selesai, refresh halaman utama blog WordPress kamu.

**Untuk Blogspot :

- Login ke Blogspot dengan akun kamu.

- Klik [Layout]

- Pilih [Add a Gadget] trus pilih widget [HTML/JavaScript] 

- Lalu paste script badge dari facebook tadi, trus klik [Save]

- Selesai lagi deh. refres halaman Blog Blogspot kamu.

         
              Ternyata gampang kan cara menampilkan Lencana Facebook di blog / website kamu. Silahkan langsung kamu coba deh.. capedeh..