Cara Memposting Artikel



Bagi anda yang mengalami sedikit kendala tentang tata cara memposting suatu artikel kedalam blog, maka kali ini akan di bahas tentang tata cara posting di blogger.com. Di dalam menu posting ada beberapa toolbar yang bisa anda gunakan.Jika anda sudah terbiasa menggunakan microsoft Word ataupun microsoft Excel tentu barangkali tidak akan mengalami kesulitan ketika memposting suatu artikel, tapi mungkin tidak ada salahnya bila saya bahas sekilas tentang ini, barangkali ada di antara teman kita yang masih bingung.

Toolbar yang ada ketika posting :

–> Untuk merubah jenis hurup yang di gunakan

–> Untuk merubah ukuran hurup (heading)

–> Untuk Menebalkan hurup

–> Untuk memiringkan hurup

–> Untuk merubah warna hurup

–> Untuk membuat link

–> Untuk membuat artikel menjadi rata kiri

–> Untuk membuat tulisan menjadi di tengah

–> Untuk membuat artikel menjadi rata kanan

–> Untuk membuat artikel menjadi rata kiri dan rata kanan

–> Untuk membuat sub bahasan oleh angka

–> Untuk membuat sub bahasan oleh bullet

–> Untuk mengecek spelling

–> Untuk memasukan gambar(upload gambar)

–> Untuk membuat artikel dalam kode HTML

–> Untuk membuat artikel dalam mode Compose (biasa)

–> Untuk me review (melihat) artikel

Cara penggunaan toolbar di atas adalah blok (beri tanda) terlebih dahulu tulisan yang akan di edit, kemudian tekan tombol toolbar yang di inginkan.

Langkah-langkah dalam memposting suatu artikel:

  1. Sebaiknya klik terlebih dahulu “ Edit HTML”,jika langsung di mode “Compose”, sering terjadi hang pada komputer (pengalaman saya pribadi). Copy artikel yang telah anda buat sebelumnya, kemudian paste di area posting. Edit sesuai dengan kemauan anda.
  2. Klik tombol “ compose “ untuk melakukan editing (jika anda masih bingung dengan kode HTML).
  3. Klik tombol tool yang berlambang “ panorama” berwarna biru, jika anda ingin memasukan gambar ataupun photo untuk menghiasi posting-an anda.
  4. Klik tombol “ Preview “ untuk melihat hasil posting-an anda yang nantinya akan tampil di dalam blog, barangkali masih ada yang perlu di edit.
  5. Klik tombol “ publish “. Selesai. Tulisan hasil karya anda akan bisa dilihat dan di baca oleh seluruh dunia.

Membuat Read More untuk Template klasik

Silahkan ikuti langkah-langkah berikut :

  • Login ke blogger.com dengan id sobat
  • Klik menu bertuliskan Template
  • Klik menu Edit HTML
  • jangan lupa Copy seluruh kode template milik sobat lalu paste pada notepad dan kemudian simpan, untuk membuat back up data. Ini dimaksudkan apabila terjadi kesalahan dalam template setelah kita otak-atik, kita masih punya cadangan data untuk mengembalikannya.
  • Copy kode HTML di bawah, kemudian paste persis di atas kode </style> :

    <MainOrArchivePage>

    div.fullpost {display:none;}

    </MainOrArchivePage>

    <ItemPage>

    div.fullpost {display:inline;}

    </ItemPage>

    Untuk mempercepat pencarian kode </style>, silahkan sobat klik menu Edit yang ada pada bar menu browser, kemudian klik Find (on this page)…, lalu tulis </style> trus klik tombol find next, maka secara otomatis akan di bawa ke kode tersebut.

  • langkah selanjutnya adalah, silahkan copy kode berikut lalu paste setelah kode <$BlogItemBody$> :

    <MainOrArchivePage><br/>

<a href=”<$BlogItemPermalinkURL$>”>Read more!</a>

</MainOrArchivePage>

Lagi-lagi Untuk mempercepat pencarian kode <$BlogItemBody$>, silahkan sobat klik menu Edit yang ada pada bar menu browser, kemudian klik Find (on this page)…, lalu tulis <$BlogItemBody$> trus klik tombol find next, maka secara otomatis akan di bawa ke kode tersebut.

  • Klik tombol yang bertuliskan SAVE SETTINGS
  • Langkah selanjutnya adalah klik menu Setting
  • Klik menu Formatting
  • Dibagian bawah menu tersebut ada kotak di samping tulisan Post Template, nah isi kotak kosong tersebut dengan kode di bawah ini :

    <div >

    </div>

    Sebenarnya langkah diatas tidak wajib dilakukan,akan tetapi ini di maksudkan agar ketika kita mau posting artikel, kode tersebut akan muncul secara otomatis tanpa harus di tulis dahulu, tentunya ini akan lebih mempermudah dan tidak harus selalu mengingat kode tersebut.

  • kemudian jangan lupa klik tombol Save Settings
  • Selesai

Cara Posting Artikel

Oke, sesudah beberapa tahap kita lalui, sekarang kita masuk ke tahap bagaimana cara memposting suatu artikel agar ada menu Readmore nya.

  • Klik menu Posting
  • klik menu Edit HTML, nah di sana secara otomatis akan tampak kode yang kita simpan tadi, yakni :

    <div >

    </div>

    simpan artikel sobat yang ingin di tampilkan sebelum kode <div >, kemudian simpan sisa keseluruhan artikel setelah kode <div > dan sebelum kode </div>

    Agar lebih jelas, saya beri contoh, misal artikelnya begini :

    Ini adalah contoh tulisan yang di simpan pada awal artikel yang akan selalu muncul pada blog kita, sedangkan tulisan yang lainnya tidak akan muncul.
    <div >
    dan tulisan yang ini adalah tulisan yang akan muncul ketika para pengunjung meng klik link yang bertuliskan Read more.
    </div>

    Hasilnya yang akan tampak pada blog kita adalah seperti ini :

    Ini adalah contoh tulisan yang di simpan pada awal artikel yang akan selalu muncul pada blog kita, sedangkan tulisan yang lainnya tidak akan muncul.

    Read more!

Membuat Text Area

Apa itu text area?. Untuk memudahkan anda memahami apa itu text area, silahkan alihkan perhatian anda ke kolom sebelah kanan layar, di bawah tulisan Mau tuker link, ada sebuah kotak yang di dalamnya berisi text kode-kode HTML, itulah yang di sebut text area. Nah dengan melihat contoh tadi, maka dapat kita katakan bahwa Text area adalah area atau tempat untuk menyimpan text atau tulisan dengan membentuk area baru. Biasanya text area ini di gunakan untuk menyimpan kode-kode HTML ataupun text lainnya agar bisa di copy oleh para pengunjung.

Untuk membuat text area, silahkan anda Copy kode di bawah ini :

<p align=”center”><textarea name=”code” rows=”6″ cols=”20″> Tulis text ataupun kode-kode yang anda inginkan di sini, maka nanti tulisan anda akan tampil di dalam text area </textarea></p>

Sebagai contoh :

 

Keterangan : rows=”6″, menunjukan tinggi dari text area, jadi jika anda menginginkan text area yang tinggi maka silahkan ganti angka ” 6 tadi dengan angka yang lebih tinggi nilainya.

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.

Text Area dengan memakai HighLight

Ada variasi lain dari membuat text area ini, yakni text area dengan menggunakan tombol highlight. dengan adanya tombol highlight ini akan memudahkan bagi para pengunjung untuk mengcopy seluruh text ataupun kode-kode yang di berikan, karena dengan hanya sekali tekan saja pada tombol highlight tadi, maka seluruh text ataupun kode-kode yang ada di dalamnya akan di highlight dan tinggal di copy saja. Fasilitas ini sangat berguna tatkala text ataupun kode-kode yang di berikan dalan jumlah yang sangat banyak dan ini akan mengurangi resiko tertinggalnya suatu text ataupun kode-kode untuk di copy. Untuk membuat text area dengan menggunakan highlight ini silahkan anda copy kode HTML di bawah :

<div><form name=”copy”><div align=”center”><input onclick=”javascript:this.form.txt.focus();this.form.txt.select();” type=”button” value=”Highlight All”> </div><div align=”center”></div><p align=”center”><textarea style=”WIDTH: 300px; HEIGHT: 144px” name=”txt” rows=”100″ wrap=”VIRTUAL” cols=”55″>simpan tulisan anda di sini, maka tulisan yang anda tulis akan muncul di sini dan siap di copy oleh para pengunjung</textarea></p></div></form>

Sebagai contoh :

<script language=”JavaScript”>  function clickIE() { if (document.all) { return false; } }  function clickNS(e) { if (document.layers(document.getElementById&&!document.all)) {  if (e.which==2e.which==3) { return false; } } }  if (document.layers) { document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS; }  else{ document.onmouseup=clickNS; document.oncontextmenu=clickIE; }  document.oncontextmenu=new Function(“return false”)  </script>

Top of Form

 

Bottom of Form

Agar anda lebih memahami kode di atas, sedikit akan saya uraikan. Kode di atas mempunyai dua elemen bagian, yakni elemen kode untuk membuat tombol yang bertuliskan Highlight All, dan yang kedua adalah elemen kode untuk membuat text area.

Elemen tombol highlight All :

  1. <div align=”center”> –> kata center menunjukan bahwa posisi tombol akan berada di tengah, jadi jika anda ingin posisi tombol berada di tepi sebelah kiri, tinggal ganti dengan kata left. Dan jika ingin berada di tepi sebelah kanan, tinggal ganti dengan kata right.

 

  1. <input onclick=”javascript:this.form.txt.focus();this.form.txt.selec()”> –> kode ini artinya ketika tombol highlight di klik, maka seluruh text yang ada di dalamnya akan di highligt (di tandai atau di blok), jadi anda jangan merubah tulisan ini.

 

  1. Value=”Highlight All” –> kata Highlight All adalah kata yang akan muncul di dalam tombol, jadi jika anda ingin merubah tulisan ini silahkan ganti dengan kata yang anda inginkan.

 

Element text area :

  1. <p align=”center”> –> ini menunjukan bahwa text area akan berada di tengah, nah jika anda ingin text area anda berada di tepi kiri, ganti kata center dengan kata left, bila ingin di tepi kanan, ganti dengan kata right.
  2. <text style=”WIDTH: 300px”>–>kata “WIDTH:300px” menunjukan lebar dari text area tersebut sebanyak 300 pixel, jadi jika anda ingin memperpendek atau memperpanjang lebar text area, anda tinggal menggantinya dengan angka yang anda inginkan. misal: “WIDTH:700px;”
  3. HEIGHT: 144px –> angka “144px” menunjukan bahwa text area akan mempunyai tinggi sebesar 144 px, jadi jika anda ingin merubahnya tinggal ganti angka tersebut dengan angka yang anda inginkan. Misal : HEIGHT:160px.

 

Contoh text area yang memakai tombol highlight diatas, memuat skript untuk melindungi dari right click para pengunjung. skript ini di pakai apabila anda tidak ingin tulisan-tulisan anda di copy paste oleh pengunjung. bagi yang berminat silahkan copy lalu pasang pada kode HTML anda antara kode <HEAD> dan </HEAD> selamat mencoba.

 

 

Membuat Menu Dropdown

Dalam konsep blog, setiap posting kita akan terarsip otomatis secara rapi setiap bulan. Setiap memasuki bulan baru, seperti Januari, maka arsip bulan Desember akan tampil di sidebar. Masalahnya, kalau kita sudah ngeblog setahun, maka arsip dari Januari sampai Desember akan berjejer di sidebar kita. Bagaimana kalau dua dan tiga tahun lagi? Langkah praktis mengatasi hal ini adalah dengan membuat pull-down menu seperti di bawah ini:

Jadi, berapa bulan/tahun kita blogging di blogger/blogspot, menu bulan-bulan tsb tidak akan memenuhi dan berjejer panjang di sidebar kita. Yg tampak hanya nama “Archives”, baru setelah di klik, akan muncul nama bulan arsip-arsip kita.

Untuk membuat arsip pulldown ini ada dua yakni untuk blogger dengan template klasik, dan template baru. Untuk template klasik langkahnya yaitu :

  1. Login ke blogger.com dg id Anda
  2. Klik Template

 

  1. Di bagian sidebar blog Anda bagian archives, ada kode html sbb:

&<BloggerArchives>

 

<a href=”<$BlogArchiveURL$”$gt;’><$BlogArchiveName$></a>

 

</BloggerArchives>

 

  1. Nah, ganti kode di atas dg kode html di bawah ini:

<select name=”archivemenu”

onchange=”document.location.href=this.options[this.selectedIndex].value;”>

 

 

<option selected>- Archives -</option>

 

 

<BloggerArchives>

 

<option value=”<$BlogArchiveURL$>”><$BlogArchiveName$></option>

 

</BloggerArchives>

 

</select>

 

  1. Apabila selesai, klik SAVE CHANGES. Bila sudah DONE, klik REPUBLISH.
  2. Selesai.

 

Untuk anda yang memakai template baru, langkahnya lebih mudah yaitu :

  1. login dulu, tentunya dengan id anda
  2. klik LAYOUT
  3. Klik PAGE ELEMENTS, cari element (kotak) yang bertuliskan Blog Archive
  4. Klik Edit pada kotak Blog Archive tadi
  5. Di samping tulisan Style ada beberapa radio button, pilih radio button yang bertuliskan Dropdown Menu dengan cara memberi tanda tik/cek
  6. Klik Save Changes
  7. Selesai

 

Nah keterangan di atas tadi merupakan langkah-langkah untuk membuat menu Dropdown untuk Arsip, Sekarang bagai mana caranya membuat menu dropdown yang di dalam nya ada linknya, saya ambil contoh untuk menu Dropdown milik saya pribadi yang berada di sebelah kanan atas yang berisi tulisan “ blog tutorial “. Untuk membuatnya silahkan anda copy kode HTML di bawah :

<form><select name=”menu” onchange=”window.open(this.options[this.selectedIndex].value,’_blank’)”size=1 name=menu><option value=0 selected>tulisan disini yang akan muncul duluan</OPTION>

<option value=”isi dengan addres yang ingin di tuju”>tulisan di sini yang akan muncul</option> </select></form>

Sebagai contoh untuk menu Dropdown milik saya :

<form><select name=”menu” onchange=”window.open(this.options[this.selectedIndex].value,’_blank’)”size=1 name=menu>

<option>- Blog Tutorial -</option>

<option value=”http://kolom-tutorial.blogspot.com/2007/04/bikin-blog.html”>Membuat Blog</option>

<option value=”http://kolom-tutorial.blogspot.com/2007/04/cara-setting-blog.html”>setting Blog</option>

<option value=”http://kolom-tutorial.blogspot.com/2007/04/memilih-template.html”>Memilih Template</option>

<option value=”http://kolom-tutorial.blogspot.com/2007/04/mengatur-hurup-dan-warna.html”>warna & hurup</option>

<option value=”http://kolom-tutorial.blogspot.com/2007/04/cara-memposting-artikel.html”>Posting Artikel</option>

<option value=”http://kolom-tutorial.blogspot.com/2007/04/membuat-read-more-1.html”>Read more (1)</option>

<option value=”http://kolom-tutorial.blogspot.com/2007/04/membuat-text-area.html”>Text area</option>

<option value=”http://kolom-tutorial.blogspot.com/2007/04/blogger-emoticons.html”>Blogger Emoticons</option>

<option value=”http://kolom-tutorial.blogspot.com/2007/04/yahoo-messenger-emoticons.html”>Yahoo!Emoticons</option&gt;

<option value=”http://kolom-tutorial.blogspot.com/2007/04/download-gratis.html”>Download Gratis</option>

</select></form> Hasilnya akan seperti ini :

Top of Form

 

Bottom of Form

Mudah bukan?   Selamat mencoba !

Membuat Link (1)

Dalam dunia blog, tentu anda tidak asing lagi dengan yang namanya link. Apabila anda seorang blogger (tukang ngeblog kata orang jakarta mah), tentu saja membuat link adalah sebuah keharusan. Berbeda dengan website pada umumnya, di jagat per blog-an ada yang namanya link exchange atau bertukar link dengan blog lain, jadi kalau anda tidak bisa membuat link, ini dapat berakibat anda akan di asingkan alias di cuekin oleh blogger lainnya karena di anggap pelit dalam memberikan link. Dalam topik membuat link ini, saya akan mengulasnya dalam beberapa sub bagian yakni :

 

Link pada posting-an

Jika anda membuat sebuah artikel untuk di posting, trus di dalam nya ingin di buatkan sebuah link, misalkan artikel tersebut bercerita tentang bisnis yang anda ikuti pada sebuah website di internet, lalu anda ingin mengajak para pembaca artikel tersebut untuk mengunjungi website yang anda ceritakan. Misalkan dalam artikel tersebut ada kata –kata seperti Jika anda tertarik silahkan anda klik disini, nah untuk membuat link dari kata-kata tersebut silahkan ikuti langkah-langkah berikut :

  1. Highlight kata-kata yang ingin di buat link, contoh di atas adalah klik disini.
  2. Klik ikon yang bergambar seperti ini      yang berada pada toolbar, maka setelah itu akan muncul tulisan http:// pada window baru yang berbentuk seperti gambar di bawah ini :

  1. Isi kotak yang ada tulisan tersebut dengan alamat situs yang anda inginkan, misalkan : http://www.resepbisnis.com/?id=rohman
  2. Klik OK. Selesai

Link dengan window baru

Mungkin anda punya pikiran, kalau anda membuat sebuah link trus pembaca mengkliknya, anda kwawatir kalau pengunjung blog kita akan meninggalkan blog kita. Untuk meminimalisir hal tersebut, bisa dilakukan dengan cara membuat window baru, jadi ketika pengunjung mengklik salah satu link yang kita buat, halaman blog kita tidak akan tertimpa dengan halaman baru tapi yang terjadi adalah halaman blog anda tetap ada dan halaman yang baru di klik akan muncul terpisah. Sebagai contoh, silahkan anda klik tulisan Resep Bisnis atau Obral plus pada banner header diatas. Ketika anda mengkliknya, akan tercipta window baru. Untuk membuat link seperti ini dapat di lakukan dengan cara :

  1. Apabila sudah melakukan cara membuat link seperti keterangan diatas, klik menu      yang ada pada toolbar.

 

  1. Pada tulisan yang kita link tadi akan muncul kode seperti ini ( contoh tulisan klik disini di link ke http://www.resepbisnis.com/?id=rohman :

    <a href=”http://www.resepbisnis.com/?id=rohman”>klik disini</a>

    maka disini anda harus menambahkan embel-embel kode HTML target=”new’ ataupun target=”_blank” pada awal ataupun akhir kode tersebut . Contoh kode yang sudah di modifikasi adalah :

    <a href=”http://www.resepbisnis.com/?id=rohman&#8221; target=”new”>klik di sini</a>

    atau :

    <a href=”http://www.resepbisnis.com/?id=rohman&#8221; target=”new”>klik di sini</a>

    atau bisa juga seperti ini :

    <a href=”http://www.resepbisnis.com/?id=rohman&#8221; target=”_blank”>klik di sini</a>

Buat Links di sidebar

Bila anda berkeinginan membuat link kepada teman anda di sidebar, cara termudah adalah seperti ini : ( khusus untuk template klasik)

  1. Sign in di blogger dengan id anda
  2. Klik menu TEMPLATE
  3. Klik Edit HTML
  4. Klik Edit
  5. Klik Find (on this page)… –> untuk mempercepat pencarian

  6. Tuliskan kata dimana anda ingin tempatkan, contoh di blog saya adalah Links para sahabat, klik Find
  7. Tuliskan link yang anda inginkan, contoh jika anda ingin membuat link ke blog saya, maka kode yang di tulis adalah :

    <a href=”http://kolom-tutorial.blogspot.com&#8221; target=”_blank”>Blog Tutorial</a>

  8. Klik Save Template Changes. Selesai

 

Sedikit clue untuk anda. Jika anda sedang mengotak-atik kode Template sebaiknya sebelum di obrak-abrik, sebaiknya anda copy terlebih dahulu seluruh template ke dalam notepad, ini untuk jaga-jaga apabila anda melakukan kesalahan, anda bisa mengembalikan kesemula karena sudah mempunyai backup data template tersebut. Atau bisa juga sebelum anda klik Save Template Changes sebaiknya anda klik terlebih dahulu tombol preview untuk melihat perubahan yang anda lakukan, apabila sudah cocok dengan perubahan tersebut baru di save Template Changes.

 

 

 

 

 

 

Kode HTML tampil di posting-an

 

Ada seorang teman bertanya begini, bang rohman gimana caranya agar kode HTML bisa tampil di posting-an blog? Nah dari situ muncul ide untuk membuat posting-an ini, barangkali ada diantara kawan-kawan semua yang juga mempunyai pertanyaan seperti itu? jawabannya mungkin begini. Agar kode-kode HTML dapat muncul pada posting-an blog kita, ada beberapa cara dan yang saya ketahui saat ini cuma baru dua cara ( barangkali kawan-kawan ada yang lebih tahu ).

Yang pertama yaitu anda harus mengganti karakter-karakter perintah dari program HTML dengan notasi tertentu. Karakter-karakter yang sering di gunakan yaitu seperti yang tertera pada tabel di bawah ini :

    Karakter    

    Notasi    

    Keterangan    

&lt;

   Kurung runcing terbuka

&gt;

   Kurung runcing tutup

&

&amp;

   Tanda Dan

 “

&quot;

   Tanda petik ganda

±

&plusmn;

   Tanda plus minus

Spasi

&nbsp;

   Tanda Spasi

©

&copy;

   Tanda hak cipta (copyright)

®

&reg;

   Tanda terdaftar (Registered)

Nah agar lebih paham akan saya beri contoh, misalkan dalam postingan anda berisi kata-kata seperti ini :

Untuk membuatnya cukup dengan hanya membubuhkan program di bawah ini :

<meta http-equiv=”refresh” content=”10″>

</meta>

Nah (dari tadi perasaan nah nah melulu , pake kata lain nape!…      ) di dalam postingan anda, jika ingin tampil seperti itu maka yang di tuliskan tidak persis seperti kode di atas, sebab nanti di postingan tulisan kode tersebut tidak akan muncul, yang ada justru efek dari kode yang anda tuliskan. trus jalan keluarnya gimana? Seperti yang saya tuliskan pada tabel, anda harus mengganti karakter-karakter perintah yang ada dengan notasi penggantinya, jadi yang harus anda tuliskan pada postingan adalah seperti ini :

Untuk membuatnya cukup dengan hanya membubuhkan program di bawah ini :

&ltbr/><br/> <code>
&lt;meta http-equiv=”refresh” content=”10″&gt;
<br/>
&lt;/meta&gt;
</code>

Pembubuhan perintah <code> dan </code> adalah untuk menandakan bahwa yang anda tulis adalah sebuah kode HTML, dan nantinya pun tulisan-tulisan yang berada dalam perintah ini akan tanpil beda dengan tulisan-tulisan yang lainnya, sebagai contoh silahkan anda lihat postingan saya yang lainya yang membubuhkan kode-kode HTML. pembubuhan perintah <br/> adalah untuk membuat tulisan berpindah kebawah, jika anda tidak membubuhkan perintah <br/> tadi, walaupun di posting-an anda tulis jauh kebawah, hasilnya akan tetap bersatu.

  Huh cape juga ya dari tadi kutak-ketik nih.., itu tadi cara yang pertama. Cara yang kedua adalah dengan menggunakan text area. Cara membuat text area secara lengkap silahkan klik di sini. Sebagai contoh, untuk menuliskan kode-kode di atas, pada posting-an anda harus menuliskan seperti ini :

Untuk membuatnya cukup dengan hanya membubuhkan program di bawah ini :
<br/><br/>
<p align=”left”><textarea name=”code” rows=”6″ cols=”400″>&lt;meta http-equiv=”refresh” content=”10″&gt; &lt;/meta&gt;</textarea></p>

Maka yang akan tampil di blog anda adalah seperti ini :

Untuk membuatnya cukup dengan hanya membubuhkan program di bawah ini :

 

mudah bukan? selamat mencoba dan berkarya.

oupss… saya lupa kawan, untuk memposting seperti yang saya jelaskan dia atas, anda harus pada posisi Edit HTML jangan pada posisi compose.

oke kawan, untuk yang kedua kalinya…selamat mencoba.

Pasang Buku Tamu di Sidebar

Memasang sebuah buku tamu (shoutbox/guestbook) pada sebuah blog adalah hal yang cukup lumayan penting,karena buku tamu ini merupakan salah satu sarana untuk berinteraksi antara yang mpunya blog dengan para pengunjung blog. Dengan di pajangnya buku tamu di dalam blog, maka para pengunjung dapat mengungkapkan isi hatinya tentang blog yang anda buat, yang pasti isi dari sebuah buku tamu ini sangatlah bervariasi bisa merupakan pujian, pertanyaan, sekedar iseng, atau ada juga merupakan kritikan terhadap isi blog anda, dan justru dengan adanya variasi itulah membuat blog kita jadi hidup lebih hidu (kaya iklan aja).

Ok, terlalu lama intermezonya ya, sekarang kita kembali (ke lap…top) ke topikbahasan. Bagaimana caranya mendapatkan sebuah buku tamu. Untuk mendapatkannya sangat mudah, anda tinggal mencarinya pada mesin pencari semisal google ataupun yahoo, silahkan ketikan kata free shoutbox atau free guestbook pada search engine masing-masing situs, maka dalam beberapa detik saja akan muncul berpuluh-puluh situs penyedia buku tamu tadi, anda tinggal klik lalu coba lihat-lihat. Tapi untuk menghemat waktu pencarian anda, maka di sini saya akan langsung memberikan alamat situs penyedia buku tamu yang servernya lumayan bagus dan jarang sekali mengalami down yakni http://www.shoutmix.com. Untuk caranya silahkan anda ikuti langkah-langkah berikut ini :

  1. Seperti biasa anda harus daftar terlebih dahulu dengan cara mengklik tulisan Get One noe, free>>, ataupun dengan mengklik tulisan Sign Up, silahkan anda tulis data-data anda pada form yang telah di sediakan.
  2. Jika sudah tedaftar, dan di terima jadi anggota shoutmix, silahkan anda login dengan id anda
  3. Pada kolom yang berjudul Style, klik menu appearance.
  4. Silahkan klik menu pulldown di samping tulisan Load From Preset untuk mengatur tampilan buku tamu anda, silahkan pilih yang sesuai dengan keinginan anda. Jika sudah selesai klik Save Setting.
  5. Untuk mendapatkan kode HTML dari shoutbox anda, silahkan klik Use Shoutbox yang berada di bawah menu Quick Start
  6. Klik tulisan Place Shoutbox on web page. Isi lebar dan tinggi shoutbox yang di inginkan
  7. Copy seluruh kode HTML yang ada pada text area yang berada di bawah tulisan Generated Codes, lalu simpan di program Notepad anda
  8. Klik Log out yang berada di atas layar anda untuk keluar dari halaman shoutmix anda. Silahkan close situs tersebut.
  9. Selesai

 

Untuk menempatkan kode HTML shoutbox tadi pada blog anda, silahkan ikuti langkah-langkah berikut ini.

Untuk blogger dengan template klasik :

  1. Log in terlebih dahulu ke blogger.com dengan id anda
  2. Klik menu Template
  3. Klik Edit HTML
  4. Paste kode HTML shoutbox anda yang telah di copy pada notepad tadi di tempat yang anda inginkan
  5. Untuk jelasnya saya ambil contoh dengan shoubox milik saya, untuk menempatkannya tinggal klik Edit pada browser lalu pilih Find (on this page).. trus tuliskan kata buku tamu lalu klik find, maka kita akan langsung di bawa ke tulisan tersebut. Jika sudah ketemu tulisan tadi silahkan paste kode HTML shoutbox nya.
  6. Klik tombol Preview untuk melihat perubahan yang kita buat.
  7. Jika sudah cocok dengan perubahan tadi, klik Save Template Changes
  8. Selesai

 

Sedikit Clue, agar shoutbox anda sesuai dengan ukuran lebar sidebar , anda bisa merubah ukuran lebar ataupun tinggi dari shoutbox , caranya anda tinggal merubah angka Width (untuk lebar) dan Height (untuk tinggi) dari dalam kode HTML shoutbox tersebut.

 

Untuk Blogger baru :

  1. Silahkan Login dengan id anda
  2. Klik menu Layout
  3. Klik Page Element
  4. Klik Add a Page Element
  5. Klik tombol Add to Blog yang berada di bawah tulisan HTML/JavaScript
  6. Tuliskan judul shoutbox anda pada form title. Contoh : Buku tamu ku, atau my guestbook atau apa saja yang anda suka
  7. Copy paste kode HTML shoutbox anda di dalam form Content
  8. Klik tombol Save Changes
  9. Drag & Drop element yang telah anda buat tadi di tempat yang di sukai
  10. Tekan tombol Save
  11. Selesai

 

Selamat mencoba !

 

Sebagai tambahan, guestbook yang sering dipakai para blogger lainnya :

  1. http://oggix.com
  1. 2.     Menghilangkan Garis Bawah Link
  2. Pernah ada salah satu sobat yang mengirimkan email ke saya, beliau ini menanyakan cara menghilangkan garis bawah yang ada pada setiap link. Garis bawah ini menurut beliau sangat mengganggu keindahan tulisan-tulisannya. Memang seperti kata-kata saya terdahulu, lain orang lain keinginan, untuk urusan link pun ada yang suka memakai garis bawah dan ada juga yang tidak suka akan garis bawah tersebut.

    Menurut kebiasan yang berlaku, sebuah tulisan yang berbentuk link biasanya memang mempunyai garis bawah, akan tetapi sebenarnya garis bawah tersebut bisa di hilangkan apabila kita mau. Bagaimana cara menghilangkan garis bawah pada link? untuk menghilangkannya sobat perlu merubah beberapa kode yang ada pada style sheet CSS, kode tersebut biasanya seperti ini :

    a:link {
    color:#58a;
    text-decoration:underline;
    }

    a:hover {
    color:#c60;
    text-decoration:underline;
    }

    a:visited {
    color:#969;
    text-decoration:underline;
    }

    Agar menjadi faham, akan saya uraikan :

    a:link {
    color:#58a;
    text-decoration:underline;
    }

    kode ini mempunyai arti –> sebuah link akan berwarna biru dan bergaris bawah.

    a:hover {
    color:#c60;
    text-decoration:underline;
    }

    Sebuah link apabila di sorot oleh mouse akan berubah warna menjadi biru tua dan bergaris bawah.

    a:visited {
    color:#969;
    text-decoration:underline;
    }

    Sebuah link apabila pernah di klik oleh komputer yang sama akan berwarna biru tua (banget) dan bergaris bawah.

    Pertanyaan selanjutnya manakah kode diatas yang membuat link menjadi bergaris bawah? jawabnya adalah kode :

    text-decoration:underline;

    Tulisan underline lah yang membuat link menjadi bergaris bawah. Apabila kita tidak menginginkan adanya garis bawah pada sebuah link, maka kita hanya cukup merubahnya dengan kata none, nanti kodenya akan menjadi seperti ini :

    text-decoration:none;

    Dari pengertian tadi diatas tentu saja kita dapat mengatur ingin ada atau tidak ingin ada garis bawah, tergantung dari selera masing-masing, apakah sebuah link ingin bergaris bawah atau tidak? apakah apabila sebuah link di sorot oleh mouse ingin bergaris bawah atau tidak? apakah apabila sebuah link pernah di kunjungi atau di klik ingin bergaris bawah atau tidak? semua terserah sobat sebagai pemilik blog. Ingin bergaris bawah? ya pakai underline, kalau tidak ingin bergaris bawah ya tingal ganti dengan none, gampang bukan?

Pasang Link di New Blogger Template

Menilik beberapa pertanyaan yang di ajukan beberapa sobat, rupanya masih ada yang berkeinginan lebih dalam hal membuat link walaupun sudah saya posting sampai dua artikel, terutama bagi yang memakai template baru alias new blogger template. Untuk memenuhi hasrat beliau-beliau ini, sengaja saya posting kembali mengenai membuat link dan mudah-mudahan dengan adanya postingan ini dapat menjawab beberapa keinginan yang belum terjawabkan.

Ok, saya mulai dengan membuat link yang bisa memunculkan window baru. saya ambil contoh blog yang ingin saya link sebanyak lima buah, yaitu :

  1. http://rubrik-elektronik.blogspot.com
  2. http://www.rohman24.co.nr
  3. http://jaya-example.blogspot.com
  4. http://user-online.blogspot.com
  5. http://amen24.googlepages.com/koded%27treemenu

Untuk membuat kode link yang arah vertikal seperti ini :

<a href=”http://rubrik-elektronik.blogspot.com&#8221; target=”_blank”>Rubrik Elektronik</a>
<br/>
<a href=”http://www.rohman24.co.nr&#8221; target=”_blank”>Free blog template</a>
<br/>
<a href=”http://jaya-example.blogspot.com&#8221; target=”_blank”>Rotating banner blog</a>
<br/>
<a href=”http://user-online.blogspot.com&#8221; target=”_blank”>User Online status</a>
<br/>
<a href=”http://amen24.googlepages.com/koded%27treemenu&#8221; target=”_blank”>Kode menu d tree</a>

Hasilnya akan seperti ini :

Rubrik Elektronik
Free blog template
Rotating banner blog
User Online status
Kode menu d tree

kode <br/> yang saya tuliskan di atas merupakan kode atau tag untuk memindahkan link ataupun tulisan berpindah satu line break kebawah. Jika sobat tidak memasang kode/tag tersebut, walaupun di tulis berjauhan ke bawah hasilnya akan berdempetan kepinggir. satu kode/tag <br/> adalah satu kali link berpindah kebawah, jika sobat ingin jaraknya lebih lebar, maka tambahkan tag tersebut beberapa kali, misal <br/><br/>, atau <br/><br/><br/>, dan bila ingin lebih jauh lagi ya tambahkan yang banyak.

Untuk membuat kode link yang arah horizontal seperti ini :

<a href=”http://rubrik-elektronik.blogspot.com&#8221; target=”_blank”>Rubrik Elektronik</a>
&nbsp;
<a href=”http://www.rohman24.co.nr&#8221; target=”_blank”>Free blog template</a>
&nbsp;
<a href=”http://jaya-example.blogspot.com&#8221; target=”_blank”>Rotating banner blog</a>
&nbsp;
<a href=”http://user-online.blogspot.com&#8221; target=”_blank”>User Online status</a>
&nbsp;
<a href=”http://amen24.googlepages.com/koded%27treemenu&#8221; target=”_blank”>Kode menu d tree</a>

Maka hasilnya akan seperti ini :

Rubrik Elektronik   Free blog template   Rotating banner blog   User Online status   Kode menu d tree

kode &nbsp; yang saya tuliskan di atas merupakan kode untuk memindahkan link ataupun tulisan berpindah satu spasi ke samping. Jika sobat tidak memasang kode tersebut, walaupun di tulis berjauhan ke samping, hasilnya akan tetap berdempetan. satu kode &nbsp; adalah satu kali link berpindah ke samping, jika sobat ingin jaraknya lebih lebar, maka tambahkan kode tersebut beberapa kali, misal &nbsp;&nbsp; , atau &nbsp;&nbsp;&nbsp; , dan bila ingin lebih jauh lagi ya tambahkan yang banyak.

Mudah-mudahan agak sedikit jelas. Ok, kita lanjut. Sempat ada yang menanyakan juga tentang yang memakai variasi abjad supaya terlihat lebih menarik. Kira-kira jawabannya melalui contoh saja.

Ambil contoh blog yang ingin di link adalah seperti berikut ini :

  1. http://sncepuspiritualsciencequantum.blogspot.com –> Abu Amin
  2. http://adry-fx.blogspot.com –> Adryy-fx
  3. http://belati.blogspot.com –> Belati
  4. http://benhardleroy.blogspot.com –> Benhard Journey
  5. http://melileagroup.blogspot.com –> Capunk
  6. http://catatanpojok.blogspot.com –> Catatan pojok

Untuk membuat link yang arah vertikal seperti ini :

<b>:::A:::</b>
<br/>
<a href=”http://sncepuspiritualsciencequantum.blogspot.com&#8221; target=”_blank”>Abu Amin</a>
<br/>
<a href=”http://adry-fx.blogspot.com&#8221; target=”_blank”>Adryy-fx</a>
<br/><br/>

<b>:::B:::</b>
<br/>
<a href=”http://belati.blogspot.com&#8221; target=”_blank”>Belati</a>
<br/>
<a href=”http://benhardleroy.blogspot.com&#8221; target=”_blank”>Benhard Journey</a>
<br/><br/>

<b>:::C:::</b>
<br/>
<a href=”http://melileagroup.blogspot.com&#8221; target=”_blank”>Capunk</a>
<br/>
<a href=”http://catatanpojok.blogspot.com&#8221; target=”_blank”>Catatan pojok</a>

Maka hasilnya akan seperti ini :

:::A:::
Abu Amin
Adryy-fx

:::B:::
Belati
Benhard Journey

:::C:::
Capunk
Catatan pojok

Untuk membuat link yang arah horizontal seperti ini :

<b>:::A:::</b>
&nbsp;&nbsp;
<a href=”http://sncepuspiritualsciencequantum.blogspot.com&#8221; target=”_blank”>Abu Amin</a>
&nbsp;&nbsp;
<a href=”http://adry-fx.blogspot.com&#8221; target=”_blank”>Adryy-fx</a>
&nbsp;&nbsp;

<b>:::B:::</b>
&nbsp;&nbsp;
<a href=”http://belati.blogspot.com&#8221; target=”_blank”>Belati</a>
&nbsp;&nbsp;
<a href=”http://benhardleroy.blogspot.com&#8221; target=”_blank”>Benhard Journey</a>
&nbsp;&nbsp;

<b>:::C:::</b>
&nbsp;&nbsp;
<a href=”http://melileagroup.blogspot.com&#8221; target=”_blank”>Capunk</a>
&nbsp;&nbsp;
<a href=”http://catatanpojok.blogspot.com&#8221; target=”_blank”>Catatan pojok</a>

maka hasilnya akan seperti ini :

:::A:::    Abu Amin    Adryy-fx    :::B:::    Belati    Benhard Journey    :::C:::    Capunk    Catatan pojok

Pemakaian tag <b>…</b> adalah agar karakter yang ada diantara tag tersebut menjadi tebal. Pemakaian tulisan :::A::: adalah karakter biasa yang ada di keyboard, jika ingin berbeda tinggal cari karakter lain yang menurut sobat lebih menarik.

Ada juga variasi lain agar tampak lebih menarik yaitu menambahkan bulatan.

contoh untuk arah vertikal :

<b><< A >></b>
<br/>
&bull;&nbsp;<a href=”http://sncepuspiritualsciencequantum.blogspot.com&#8221; target=”_blank”>Abu Amin</a>
<br/>
&bull;&nbsp;<a href=”http://adry-fx.blogspot.com&#8221; target=”_blank”>Adryy-fx</a>
<br/><br/>

<b><< B >></b>
<br/>
&bull;&nbsp;<a href=”http://belati.blogspot.com&#8221; target=”_blank”>Belati</a>
<br/>
&bull;&nbsp;<a href=”http://benhardleroy.blogspot.com&#8221; target=”_blank”>Benhard Journey</a>
<br/><br/>

<b><< C >></b>
<br/>
&bull;&nbsp;<a href=”http://melileagroup.blogspot.com&#8221; target=”_blank”>Capunk</a>
<br/>
&bull;&nbsp;<a href=”http://catatanpojok.blogspot.com&#8221; target=”_blank”>Catatan pojok</a>

Maka hasilnya akan seperti ini :

<< A >>
• Abu Amin
• Adryy-fx

<< B >>
• Belati
• Benhard Journey

<< C >>
• Capunk
• Catatan pojok

Untuk arah horizontal :

<b><< A >></b>
&nbsp;
&bull;&nbsp;<a href=”http://sncepuspiritualsciencequantum.blogspot.com&#8221; target=”_blank”>Abu Amin</a>
&nbsp;&nbsp;
&bull;&nbsp;<a href=”http://adry-fx.blogspot.com&#8221; target=”_blank”>Adryy-fx</a>
&nbsp;&nbsp;

<b><< B >></b>
&nbsp;
&bull;&nbsp;<a href=”http://belati.blogspot.com&#8221; target=”_blank”>Belati</a>
&nbsp;&nbsp;
&bull;&nbsp;<a href=”http://benhardleroy.blogspot.com&#8221; target=”_blank”>Benhard Journey</a>
&nbsp;&nbsp;

<b><< C >></b>
&nbsp;
&bull;&nbsp;<a href=”http://melileagroup.blogspot.com&#8221; target=”_blank”>Capunk</a>
&nbsp;&nbsp;
&bull;&nbsp;<a href=”http://catatanpojok.blogspot.com&#8221; target=”_blank”>Catatan pojok</a>

Hasilnya akan seperti ini :

<< A >>   • Abu Amin    • Adryy-fx    << B >>   • Belati    • Benhard Journey    << C >>   • Capunk    • Catatan pojok

Bagaimana lebih menarik bukan?

Jika sobat mempunyai icon yang berukuran kecil dan ingin di tambahkan di depan link, ini bisa di lakukan dengan hanya mengganti kode &ampbull; diatas dengan kode gambar yang sobat miliki. Sebagai contoh saya memiliki gambar dalam bentuk bulatan dan mempunyai alamat gambar sebagai berikut :

http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif

Untuk menampilkan gambar ini tentu dengan kode untuk menampilkan gambar, yaitu :

<img src=”http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif”&gt;

hasilnya akan seperti ini :

Jika melihat dari bentuknya, sepertinya terlalu besar maka saya akan mengakalinya dengan menambahkan kode untuk lebar dan tinggi gambar, maka kodenya misalkan jadi seperti ini :

<img src=”http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif&#8221; width=”12″ hight=”12″ border=”0″>

hasilnya akan seperti ini :

Nah, tugas sobat hanya mengganti kode &ampbull; diatas dengan kode ini :

misalkan :

<img src=”http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif&#8221; width=”10″ hight=”10″ border=”0″>&nbsp;<a href=”http://sncepuspiritualsciencequantum.blogspot.com&#8221; target=”_blank”>Abu Amin</a>

Maka hasilnya akan seperti ini :

 Abu Amin

Untuk membuat gambar serta cara upload sudah saya terangkan pada postingan terdahulu, silahkan baca saja ya.

Ada juga pertanyaan dari mba Ati mengenai cara pembuatan link gambar yang arah horizontal, jawaban saya, mba tinggal buat link untuk gambar dan menaruh kode &nbsp; di antara gambar link tadi. misal saya punya alamat gambar butto seperti ini :

http://i162.photobucket.com/albums/t253/rohman24/RubrikElektronik.gif

http://i162.photobucket.com/albums/t253/rohman24/FreeBlogTemplate.gif

Nah mba tinggal buat agar link gambar, bisa link ketulisan yang ada di blog mba atau mau link ke blog lain juga bisa, tinggal menuliskan alamat URL yang du ju oleh link tersebut, contoh jika saya ingin menghubungkan gambar button dengan blog milik saya yang lain :

<a href=”http://rubrik-elektronik.blogspot.com&#8221; target=”_blank”><img src=”http://i162.photobucket.com/albums/t253/rohman24/RubrikElektronik.gif&#8221; border=”0″></a>
&nbsp;&nbsp;
<a href=”http://www.rohman24.co.nr&#8221; target=”_blank”><img src=”http://i162.photobucket.com/albums/t253/rohman24/FreeBlogTemplate.gif&#8221; border=”0″></a>

Hasilnya akan seperti ini :

  

jika ingin gambar buttonnya banyak, tinggal tambahkan saja dan jangan lupa sisipkam kode &nbsp; agar ada jarak antara buttonnya.

Bagaimana sobat, sudah cape bacanya? pasti cape karena panjang banget, apalagi saya yang waktu ngetik postingan ini ampe lima jam depan komputer dan lebih sedihnya lagi kita belum sampe ke topik bahasan utama yakni memasukan kode link-link yang telah saya contohkan diatas ke dalam blog.

Yoi…sobat!!! Sekarang tiba waktunya kita memasukan kode-kode link yang telah kita buat kedalam blog. Dan tentunya seperti judul artikel diatas, langkah-langkah berikut berlaku bagi yang memakai template baru alias new blogger template :

  1. Sig in di blogger dengan id sobat
  2. Klik menu Layout
  3. Klik menu Elemen Halaman
  4. Klik tulisan Tambahkan sebuah Elemen Halaman
  5. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/javaScript, ingat jangan menggunakan yang untuk membuat daftar link
  6. Beri judul link yang sobat kehendaki. contoh : link temanku :
  7. Copy kode-kode link yang telah sobat buat lalu paste pada kotak yang tersedia
  8. Klik tombol SIMPAN PERUBAHAN
  9. Pindahkan elemen yang baru saja pada tempat yang sobat kehendaki
  10. Klik tombol SIMPAN
  11. Selesai.

Akhirnya selesai juga postingan ini. Mudah-mudahan penjelasan diatas mudah untuk di mengerti.

Selamat mencoba !

Text Berjalan di Bar menu

Sobat Ochim beberapa hari yang lalu mengirimkan email kepada saya yang isinya menanyakan tentang cara membuat text berjalan yang ada pada bar menu bawah seperti halnya pada blog milik saya ini. Pertanyaan tersebut sudah saya jawab langsung melalui email juga dan sekarangpun pada saat artikel ini di buat, sobat Ochim sudah berhasil membuat bar menu blognya ada tulisan berjalan.

Seperti biasanya, jika ada pertanyaan melalui email maka jawaban dari pertanyaan tersebut akan saya posting melalui blog ini. Nah jika sobat sama-sama tertarik ingin membuat text berjalan tersebut, silahkan baca artikel ini sampai tuntas.

Karena template blogger terbagi menjadi dua yaitu template klasik dan template baru, maka untuk cara membuat text berjalan tersebutpun akan berbeda, oleh karenanya pembahasannya pun akan saya bagi menjadi dua bagian. Akan tetapi perlu saya sampaikan, contoh yang akan saya berikan kali ini hasilnya tidak persis seperti pada blog ini yaitu text berjalan dari arah kanan kekiri, akan tetapi saya akan memberi contoh text berjalan dari kiri ke arah kanan serta ada jeda waktu antara tulisan yang petama dengan yang kedua dan juga tulisan berikutnya.

Untuk template klasik silahkan ikuti langkah-langkah berikut ini :

  1. Sign in di blogger dengan id sobat
  2. Klik menu Template
  3. klik menu Edit HTML
  4. Copy seluruh kode HTMl lalu paste pada program notepad kemudian save. Ini di maksudkan untuk berjaga-jaga apabila terjadi kesalahan dalam proses editting template, sobat masih mempunyai data untuk mengembalikannya ke semula
  5. Copy kode berikut ini lalu paste di atas kode </head>

    <script language=’javascript’>
    message = “Tulis text pertama yang ingin muncul disini ^” +
    “Tulis text kedua disini ^” +
    “Tulis text ketiga disini ^” +
    “Tulis text keempat disini ^”

    scrollSpeed = 130
    lineDelay = 0

    // Do not change the text below //

    txt = “”

    function scrollText(pos) {
    if (message.charAt(pos) != ‘^’) {
    txt = txt + message.charAt(pos)
    status = txt
    pauze = scrollSpeed
    }
    else {
    pauze = lineDelay
    txt = “”
    if (pos == message.length-1) pos = -1
    }
    pos++
    setTimeout(“scrollText(‘”+pos+”‘)”,pauze)
    }
    scrollText(0)
    </script>

  6. Klik tombol Save Template Changes
  7. Selesai.

Untuk template baru silahkan ikuti langkah-langkah berikut ini :

  1. Sign in di blogger dengan id sobat
  2. Klik menu Layout
  3. Klik menu Edit HTML
  4. Klik tulisan Download Full Template, lalu save data tersebut. Ini untuk berjaga-jaga apabila terjadi kesalahan dalam mengedit kode template
  5. Klik kotak kecil di samping tulisan Expand Widget Templates untuk memberi tanda centang. Sekali lagi jangan lupa klik kotak kecil di samping tulisan Expand Widget Templates
  6. Tunggu beberapa saat sampai proses selesai
  7. Simpan kode berikut di bawah kode </body> , kode ini letaknya berada paling bawah sebelum kode </html>

    <script language=’javascript’>
    message = “Tulis text pertama yang ingin muncul disini ^” +
    “Tulis text kedua disini ^” +
    “Tulis text ketiga disini ^” +
    “Tulis text keempat disini ^”

    scrollSpeed = 130
    lineDelay = 0

    // Do not change the text below //

    txt = “”

    function scrollText(pos) {
    if (message.charAt(pos) != ‘^’) {
    txt = txt + message.charAt(pos)
    status = txt
    pauze = scrollSpeed
    }
    else {
    pauze = lineDelay
    txt = “”
    if (pos == message.length-1) pos = -1
    }
    pos++
    setTimeout(“scrollText(‘”+pos+”‘)”,pauze)
    }
    scrollText(0)
    </script>

  8. Klik tombol SAVE TEMPLATE
  9. Selesai

sedikit clue, pada kode diatas ada tulisan yang saya buat merah, nah tulisan tersebut harus sobat ganti dengan tulisan yang sobat inginkan. contoh : selamat datang di blog saya. atau apa saja yang menurut sobat layak untuk di tulis di situ. contoh yang saya berikan diatas memuat pesan atau text sebanyak empat tulisan, jika sobat ingin lebih banyak itu bisa dilakukan dengan menambah baris tulisan seperti kode sebelumnya.Untuk kode –> scrollSpeed = 130 . angka “130” merupakan kecepatan dari text berjalan, semakin kecil nilainya semakin cepat text berjalan, dan semakin besar nilainya maka text akan semakin lambat. Silahkan sesuaikan dengan keinginan sobat.

Seperti yang saya katakan di awal artikel bahwa kode yang saya berikan di atas hasil efeknya tidak sama dengan yang ada di blog ini, untuk melihat hasil nyatanya, silahkan sobat klik di sini.

Selamat mencoba !!!

Random Banner Header

Menjawab pertanyaan mba Ati beberapa hari yang lalu yang di ajukan melalui shoutbox mengenai cara membuat random banner header atau gambar banner yang ada di header bisa bergantian atau berubah-berubah. Sepertinya memang lebih menarik apabila banner yang ada di header bisa bergantian sehingga suasana akan lebih fresh karena tidak monoton seperti blog saya ini , tapi tidak apa-apa, mungkin suatu hari nanti blog inipun headernya bisa bergantian .

Untuk membuat random banner ada beberapa langkah yang harus sobat lakukan, yaitu :

  1. Sig in di blogger dengan id sobat
  2. Klik menu Template
  3. Klik menu Edit HTML
  4. Copy seluruh kode HTMl lalu paste pada program notepad kemudian save. Ini di maksudkan untuk berjaga-jaga apabila terjadi kesalahan dalam proses editting template, sobat masih mempunyai data untuk mengembalikannya ke semula
  5. Copy kode berikut ini lalu paste di bawah kode <div id=’header’> (biasanya)

    <script type=”text/javascript”>
    var banner= new Array()
    banner[0]=”http://i162.photobucket.com/albums/t253/rohman24/banner_1.gif&#8221;
    banner[1]=”http://i162.photobucket.com/albums/t253/rohman24/banner_2.gif&#8221;
    banner[2]=”http://i162.photobucket.com/albums/t253/rohman24/banner_3.gif&#8221;
    banner[3]=”http://i162.photobucket.com/albums/t253/rohman24/banner_4.gif&#8221;
    banner[4]=”http://i162.photobucket.com/albums/t253/rohman24/banner_5.gif&#8221;
    banner[5]=”http://i162.photobucket.com/albums/t253/rohman24/banner_6.gif&#8221;
    banner[6]=”http://i162.photobucket.com/albums/t253/rohman24/banner_7.gif&#8221;
    banner[7]=”http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif&#8221;
    banner[8]=”http://i162.photobucket.com/albums/t253/rohman24/banner_9.gif&#8221;
    banner[9]=”http://i162.photobucket.com/albums/t253/rohman24/banner_10.gif&#8221;
    var random=Math.floor(10*Math.random());
    document.write(“<style>”);
    document.write(“#header {“);
    document.write(‘ background:url(“‘ + banner[random] + ‘”) no-repeat top left;’);
    document.write(” }”);
    document.write(“</style>”);
    </script>

 

  • Klik tombol Save Template Changes
  • Selesai.

    Untuk Template baru

  1. Sign in di blogger dengan id sobat
  2. Klik menu layout
  3. Klik menu Page Elements
  4. Klik tulisan Add a Page Element
  5. Klik tombol ADD TO BLOG di bawah tulisan HTML/JavaScript
  6. Copy paste kode berikut kedalamnya

    <script type=”text/javascript”>
    var banner= new Array()
    banner[0]=”http://i162.photobucket.com/albums/t253/rohman24/banner_1.gif&#8221;
    banner[1]=”http://i162.photobucket.com/albums/t253/rohman24/banner_2.gif&#8221;
    banner[2]=”http://i162.photobucket.com/albums/t253/rohman24/banner_3.gif&#8221;
    banner[3]=”http://i162.photobucket.com/albums/t253/rohman24/banner_4.gif&#8221;
    banner[4]=”http://i162.photobucket.com/albums/t253/rohman24/banner_5.gif&#8221;
    banner[5]=”http://i162.photobucket.com/albums/t253/rohman24/banner_6.gif&#8221;
    banner[6]=”http://i162.photobucket.com/albums/t253/rohman24/banner_7.gif&#8221;
    banner[7]=”http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif&#8221;
    banner[8]=”http://i162.photobucket.com/albums/t253/rohman24/banner_9.gif&#8221;
    banner[9]=”http://i162.photobucket.com/albums/t253/rohman24/banner_10.gif&#8221;
    var random=Math.floor(10*Math.random());
    document.write(“<style>”);
    document.write(“#header {“);
    document.write(‘ background:url(“‘ + banner[random] + ‘”) no-repeat top left;’);
    document.write(” }”);
    document.write(“</style>”);
    </script>

  7. Klik tombol SAVE CHANGES
  8. Selesai.

Sekedar tambahan (padahal masih banyak ), kode diatas adalah sekedar contoh, silahkan ganti address bannernya dengan yang di miliki sobat.

Mungkin ada beberapa template yang di pakai sobat saat ini banner headernya tidak sesuai dengan keinginan sobat, sebenarnya ukuran tersebut bisa kita ganti. Contoh untuk template minima sebagai berikut :

@media all {
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
}

Pada kode diatas terlihat bahwa untuk lebar banner header sebesar 660p(width:660px;), nilai tersebut bisa kita rubah sesuai dengan keinginan. Dan untuk tinggi dari banner header tidak di definisikan, nah agar banner kita sesuai dengan keinginan maka kita harus menyelipkan kode tambahan sebagai definisi, contoh lebar yang di inginkan adalah sebesar 150px, maka kode yang di tambahkan adalah height:150px; sehingga kode di atas menjadi seperti ini :

@media all {
#header {
width:660px;
height:150px;
margin:0 auto 10px;
border:1px solid #ccc;
}

Untuk masing-masing template tentunya akan sangat berbeda, akan tetapi untuk template milik blogger, biasanya untuk bagian header di beri nama #header.

Untuk melihat contoh nyata dari efek script diatas, saya sudah membuat satu blog sebagai percontohan, blog tersebut sudah di pasang 10 banner seperti yang saya terangkan di atas, untuk melihat perubahannya sobat harus mengklik susuatu agar layar browser menjadi berubah baru, saya beri contoh dengan mengklik judul arsip atau yang lainnya. Untu melihat contoh silahkan lihat di sini

Selamat mencoba !!!!

Cara pasang search Engine

Sebenarnya petanyaan ini sudah pernah di tanyakan oleh salah seorang sobat pengunjung blog ini, namun jika di tunda untuk menjawabnya terkadang saya lupa atau memang masih belum menemukan kata-kata yang tepat untuk menerangkannya, pertanyaannya kira-kira seperti ini :

Mas rohman, bagaimana caranya memasang Search Engine pada blog?

Baikklah, saya akan mencoba menjawabnya. Semoga mudah untuk di mengerti. Bagi sobat yang sudah bergabung di Google adsense, tentunya untuk memasang sebuah search engine bisa memakai layanan dari Google adsense tersebut. Selain berfungsi sebagai search engine, tentunya sobat akan mendapatkan imbalan dari Google setiap ada pegunjung yang menggunakan search engine tersebut. Contoh yang nyata adalah Search Engine yang terpampang di sebelah atas blog ini, jika sobat bermaksud ingin menyumbang ke saya maka tidak usah mengeluarkan kocek dari kantong sobat sendiri akan tetapi cukup dengan terbiasa menggunakan Search Engine tersebut apabila berniat ingin mencari sesuatu yang ada di Web, biarlah Google adsense yang membayar saya.

Pertanyaan berikutnya yang mungkin muncul yaitu :

Bagaimana kalau saya belum tergabung di Google adsense, akan tetapi tetap ingin memasang Search Engine di blog saya agar pengunjung lebih mudah untuk mencari apa yang mereka inginkan di blog saya?

Seandainya kasusnya seperti itu, maka janganlah sobat merasa risau karena sobat bisa membuatkan search engine untuk blog sobat tanpa harus tergabung di Google adsense. Mau tahu caranya? baca aja sampai akhir tulisan ini.

Untuk membuat sebuah Search Engine pada sebuah blog, sebenarnya mudah karena sobat hanya membuatkan sedikit kode HTML, scriptnya seperti ini :

<form id=”searchform” action=”http://AlamatBlogAnda.blogspot.com/search&#8221; name=”searchform” method=”get”>
<input id=”s” value=”” name=”q” type=”text”> <input id=”searchsubmit” value=”Search” type=”submit”> </form>

Yang perlu sobat perhatikan adalah tulisan yang saya cetak merah yaitu http://AlamatBlogAnda.blogspot.com/search, tulisan AlamatBlogAnda harus sobat ganti tentunya dengan alamat blog sobat yang ingin di pasangi seacrh engine, misalkan apabila di pasang untuk blog ini maka tulisan tersebut di ganti dengan http://kolom-tutorial.blogspot.com/search. Selain itu, ada juga yang bisa sobat ubah yaitu di bagian kode –> value=”Search”. Tulisan Search ini adalah tulisan yang akan muncul pada tombol search engine, apabila sobat ingin mengubahnya, silahkan ubah dengan keinginan, contoh : tulisan tersebut ingin di ubah menjadi Cari atau Go.

Sebagai contoh hasil dari search engine dari script diatas adalah seperti ini :

Top of Form

 

Bottom of Form

Atau seperti ini :

Top of Form

 

Bottom of Form

Atau juga seperti ini :

Top of Form

 

Bottom of Form

Silahkan coba fungsinya, apakah berfungsi dengan baik atau tidak?

Untuk cara pemasangan sama seperti kode HTML lainya, untuk template klasik silahkan sobat cari sendiri karena masing-masing template mempunyai kode yang berbeda-beda. Untuk yang template baru, sobat bisa memasukannya melalui Elemen Halaman kemudian pilih yang HTML/Javascript.

Saya rasa pembahsanya sudah cukup.

Bagi yang ingin melihat-lihat template, template yang satu ini boleh juga untuk di pertimbangkan, silahkan klik di sini !

Selamat mmencoba !

Membuat Banner Animasi

Agar blog kita tampil dinamis dan lebih atraktif, salah satu caranya adalah dengan memajang banner animasi.karena dengan banner animasi, mata dari pengunjung akan langsung tertuju kepada banner tersebut, terutama apabila anda seorang pebisnis, banner animasi akan lebih efektif untuk iklan yang kita pasang di banding dengan banner biasa. Cara membuat banner animasi sangatlah mudah, mau yang gratisan ada, mau yang bayar juga ada.Tapi tentunya ada kelebihan dan kekurangannya.

bagi anda yang berminat dengan banner animasi gratis, anda bisa kunjungi http://www.addesigner.com Silahkan daftar (gratis), Jika sudah di terima anda tinggal memilih banner yang di sediakan, trus ya tinggal di masukin ke blog, mau di sidebar atau di dalam postingan tentu bisa. Untuk cara pemasangan silahkan anda baca postingan terdahulu bagaimana cara memasukan kode HTML kedalam blog.

Contoh banner animasi :

selamat mencoba.

Pasang Feed di Blog

Mengutip sebuah permintaan yang saya kutif dari shoutbox yang kira-kira seperti ini :

“aku mau tiap ada artikel baru di blog ni aku bisa tahu diblog aku”

Permintaan tersebut melukiskan keinginan untuk selalu mengetahui apakah ada artikel baru atau tidak di blog ini dengan tidak harus bercape ria bolak-balik membuka browser. Bila ada pertanyaan apakah bisa kita memasang sesuatu di blog milik sendiri agar mengetahui perkembangan atau update terbaru dari blog yang kita senangi? jawabannya bisa, bahkan banyak cara yang bisa di tempuh.

Agar tidak terlalu memakan space, saya akan menerangkan hanya dengan satu cara yaitu memakai RSS feed. Apa itu RSS? RSS singkatan dari Rich Site Summary atau jika dalam bahasa indonesia adalah ringkasan dari isi sebuah situs (blog juga termasuk di dalamnya). Tapi dalam postingan kali ini saya tidak akan menerangkan secara gamblang tentang RSS feed tadi, bagi yang ingin tahu lebih jauh tentang ini sobat bisa baca di wiki indonesia.

Dari mana kita mengetahui alamat RSS feed blog milik kita? biasanya untuk alamat di blogger ditambah dengan –> atom.xml , jadi alamat feed untuk blog ini adalah :

http://kolom-tutorial.blogspot.com/atom.xml

Sekarang bagaimana cara memasang kode feed di blog milik kita? bagi sobat yang menggunakan template baru alias new blogger template cara nya sangat mudah. Silahkan ikuti langkah-langkah berikut ini :

  1. Sig in di blogger dengan id sobat
  2. Klik menu layout
  3. Klik menu Elemen Halaman
  4. Klik tulisan Tambahkan sebuah Elemen Halaman
  5. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan Feed
  6. Tulis alamat ini pada kotak di samping tulisan URL feed –> http://kolom-tutorial.blogspot.com/atom.xml
  7. Klik tombol SIMPAN PERUBAHAN
  8. Pindahkan elemen yang baru saja di buat pada tempat yang sobat kehendaki
  9. Klik tombol SIMPAN
  10. Klik tulisan Lihat Blog untuk melihat hasil penambahan elemen yang baru di buat
  11. Selesai

Untuk melihat contoh, judul postingan terbaru pada blog ini bisa muncul di blog lain, silahkan klik di sini !

Ada satu lagi bagi sobat yang lebih mengutamakan penampilan, spring widget telah membuat suatu panel yang sangat unik sehingga akan bisa di jadikan sebagai aksesori blog. Contoh dari panelnya adalah seperti di bawah ini :

Bagaimana lebih menarik bukan di banding dengan tadi yang hanya menampilakan judul artikel saja. Bila tertarik memasang ini silahkan ikuti langkah-langkahnya.

Untuk template klasik :

  1. Sign in di blogger dengan id sobat
  2. Klik menu Template
  3. Klik menu Edit HTML
  4. Copy kode berikut, lalu paste pada sidebar

Top of Form

 

Bottom of Form

 

Sedikit clue, untuk bagian sidebar. jika template asli buatan blogger biasanya seperti ini :

<!——– Begin#sidebar———->
<div id=”sidebar”>

…………………..

…………………..

…………………..

</div>
<!——– End#sidebar———->

nah pasang kode tadi diantara kode diatas.

  1. Klik tombol Pratinjau, lihat hasilnya. jika sudah OK klik tombol Simpan Perubahan Template
  2. Selesai.

    Untuk yang template baru :

  1. Sign in di blogger
  2. Klik menu layout
  3. Klik menu Elemen Halaman
  4. Klik tulisan Tambahkan sebuah Elemen Halaman
  5. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript
  6. Copy kode berikut, lalu paste pada kotak yang ada :

Top of Form

 

Bottom of Form

  1. Klik tombol SIMPAN PERUBAHAN
  2. Pindahkan elemen yang baru saja di buat pada tempat yang sobat kehendaki
  3. Klik tombol SIMPAN
  4. Klik tulisan Lihat Blog untuk melihat hasil penambahan elemen yang baru di buat
  5. Selesai.

Untuk contoh bisa di lihat di sini !

Ada satu hal penting yang saya lupa, sobat harus mengatur menu setting agar bisa di menampilkan feed. Langkah-langkahnya yaitu :

  1. Sig in
  2. Klik menu layout (untuk template baru), atau klik menu Template (untuk template klasik)
  3. Klik menu Pengaturan
  4. Klik menu Feed situs
  5. Klik menu dropdown di samping tulisan Ijinkan Feed blog
  6. Pilih yang Penuh
  7. Klik tombol Simpan Setting
  8. Selesai.

Bagaimana sobat? mudah-mudahan dengan ini sobat tidak perlu bolak-balik karena setiap ada postingan terbaru akan langsung bisa di lihat di blog milik sobat sendiri.

Selamat mencoba !!!

Mengatur Hurup dan Warna

Untuk para blogger baru, sobat akan menikmati fasilitas baru dari blogger.com, yaitu sobat bisa mengatur jenis font (hurup) serta warna font dengan sangat mudah. Di bawah adalah langkah untuk mengatur Fonts And Colors (khusus untuk blogger baru dengan template baru, sedangkan untuk blogger yang memakai template klasik, menu ini tidak disediakan). Klik menu “Fonts and Colors”, maka akan muncul beberapa pengaturan : (ini khusus untuk template “minima”)

  1. Page Background color –> pengaturan warna background blog. Silahkan klik warna yang ada di sebelah kanan yang di sukai
  2. Text Color –> pengaturan warna hurup dari posting-an
  3. Link Color –> pengaturan warna hurup yang di link
  4. Blog Title Color –> pengaturan warna hurup judul Blog
  5. Blog Description Color –> pengaturan warna hurup deskripsi blog
  6. Post Title Color –> pengaturan warna hurup judul posting-an
  7. Border Color –> pengaturan warna kotak yang mengelilingi judul blog, serta garis pemisah
  8. Sidebar Title Color –> pengaturan warna hurup judul yang anda di sidebar (kolom samping)
  9. Sidebar Title Color –> pengaturan warna hurup yang ada di sidebar(kolom samping)
  10. Visited link Color –> pengaturan warna hurup link ketika pengunjung mengarahkannya ke tulisan yang mengandung link
  11. Text Font –> pengaturan jenis hurup,berlaku untuk hurup hasil dari posting-an ataupun hurup yang ada di sidebar
  12. Sidebar Title Font –> pengaturan jenis hurup untuk judul yang ada di sidebar serta tanggal postingan
  13. Blog Title Font –> pengaturan jenis hurup Judul blog
  14. Blog Description Font –> Pengaturan jenis hurup dekripsi blog
  15. Post Footer Font –> pengaturan jenis hurup footer (contoh : posted by )
  16. Klik “ SAVE CHANGES” untuk mengakhiri pengaturan. Selesai

 

Untuk template-template selain template “minima”, pada dasarnya sama aja, hanya saja ada sedikit perbedaan, tapi itu tidak sulit. Untuk mengetahui tulisan mana yang sedang di rubah oleh anda, anda cukup melihat mana yang berubah tulisannya pada preview yang terletak sebelah bawah.

Blogger Emoticons

Biar senyum nya makin lebar, and kalo ketawa makin ngakak dikala posting artikel, saya berikan perbendaharaan wajah-wajah kamu…

Blogger Emoticons

<img src=”http://photos1.blogger.com/blogger/7678/802/1600/wink.gif”&gt;

<img src=”http://photos1.blogger.com/blogger/7678/802/1600/biggrin.gif”&gt;

<img src=”http://photos1.blogger.com/blogger/7678/802/1600/cool.gif”&gt;

<img src=”http://photos1.blogger.com/blogger/7678/802/1600/mad.gif”&gt;

<img src=”http://photos1.blogger.com/blogger/7678/802/1600/sad.gif”&gt;

<img src=”http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif”&gt;

<img src=”http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif”&gt;

<img src=”http://photos1.blogger.com/blogger/7678/802/1600/smile.gif”&gt;

Selamat menghiasi postingannya…

Pasang Statistik dan Tracker

Salah satu blog tool sekaligus sebagai aksesori blog yang sering di gunakan oleh para blogger yakni memasang statistik dan tracker. Dengan adanya statistik blog, maka kita yang mpunya blog ataupun yang berkunjung pun dapat mengetahui berapa pengunjungkah yang pernah berkunjung ke blog kita. selain itu juga bisa sekaligus sebagai tracker yakni kita bisa mengetahui para pengunjung blog kita datang dari mana, apakah dari search engine, blog lain ataupun darimana saja kita dapat mengetahuinya.

Sekarang bagaimana caranya kita membuat statistik tersebut? cara yang mudah yaitu kita menggunakan situs penyedia statistik. Di internet banyak sekali situs penyedia statistik gratis, sebagai contoh adalah situs http://www.sitemeter.com. Berikut adalah contoh tool yang bisa kita pilih :

 

 

 

Untuk mendapatkannya silahkan ikuti langkah-langkah berikut :

  1. Silahkan kunjungi situs http://www.sitemeter.com.
  2. klik tulisan Sign Up untuk melakukan pendaftaran
  3. klik tombol bertuliskan Next
  4. Klik tombol Next lagi
  5. Isi semua tabel yang ada lalu klik tombol Next lagi
  6. Isi lagi tabel yang ada, lalu klik tombol Next lagi
  7. klik tombol Next lagi
  8. klik tombol Next lagi ( cape dech next..next melulu    )
  9. Setelah ada keterangan proses sign up selesai, anda harus melakukan veryfikasi, silahkan buka email yg anda berikan
  10. Buka email yang datang dari sitemeter.com, di dalamnya ada username dan password anda untuk login ke sitemeter.com
  11. Silahkan login dengan id anda
  12. Bila sudah login, Klik menu Manager
  13. Klik Menu Meter Style untuk memilih gaya dari site meter anda
  14. Pilih style yang anda sukai, kemudian klik tombol Select
  15. Klik menu HTML Code
  16. Klik tulisan Adding site Meter to a Blogger.com Site
  17. copy semua kode HTML yang di berikan lalu paste pada Notepad
  18. Klik menu Logout untuk keluar dari situs tersebut
  19. Selesai, tinggal memasukan kode yang kita dapat ke dalam blog kita

Sekarang tugas kita adalah memasukan kode yang sudah kita dapat ke dalam blog, ikuti langkah- langkah berikut :

khusus blog dengan template klasik :

  1. Sign in di blogger dengan id anda
  2. Klik menu TEMPLATE
  3. Klik Edit HTML
  4. Klik Edit (yang ada pada bar menu browser anda)
  5. Klik Find (on this page)… ⇒ untuk mempercepat pencarian
  6. Tuliskan kata dimana anda ingin tempatkan, contoh di blog saya adalah blogger (karena dekat dengan tombol blogger) klik Find
  7. Copy & paste kode yang telah di simpan di notepad tadi, lalu klik tombol Preview untuk melihat perubahan yang terjadi
  8. Jika sudah cocok dengan perubahan tadi, Klik Save Template Changes. Selesai

Sedikit tambahan, bila anda ingin site meter posisinya berada di tengah-tengah, tinggal tambah kode <center> …kode site meter… </center>

Untuk blog dengan Template baru :

  1. Login di blogger dengan ID anda
  2. Klik menu layout
  3. Klik Elemen Halaman
  4. Klik Tambahkan sebuah Elemen Halaman
  5. Klik TAMBAHKAN KE BLOG pada menu HTML/JavaScript
  6. Tulis Judul site meter anda pada isian di sebelah form judul (bila ingin ada keterangan. kalau tidak, ya kosongkan saja)
  7. Copy & paste kode Site meter pada kolom isian
  8. Klik tombol Simpan Perubahan
  9. Klik Elemen yang baru anda buat tadi, tahan lalu pindahkan ke tempat yang anda inginkan ( di drag & drop)
  10. Klik tombol PRATINJAU untuk melihat perubahan yang baru di lakukan
  11. Bila sudah cocok dengan perubahan tadi, klik tombol SIMPAN
  12. Selesai

Untuk fungsi site meter sebagai tracker, silahkan anda login ke sitemeter.com trus ya acak-acak deh isinya pasti ketemu….     

Selamat mencoba.

 

 

Menghilangkan Tanda Obeng Dan Tang

Kalian Tau kan disetiap Widget yang kita pasang di blog di bawah Widget tersebut pasti ada tanda obeng dan tang, nah itu gunanya untuk mempercepat pengeditan widget yang kita pasang. Namun ada juga yang merasa terganggu oleh keberadaan Obeng Dan Tang tersebut. Tetapi menurut saya itu tidak mengganggu karena Obeng dan Tang tersebut hanya muncul pada saat kita login,

jika kita sudah logout maka otomatis Obeng dan Tang tersebut akan hilang :z .
OK deh bagi yang merasa terganggu atas keberadaan Obeng dan Tang Tersebut, Untuk menghilangkannya ikuti langkah – langkah berikut :

1. Login ke blogger kamu seperti biasa
2. Pilih Tata Letak (layout)
3. Pilih Edit HTML.
4. Cari kode seperti ini :

]]> </b:skin>

5.Copy paste kode berikut persis di atas kode yang tadi :

.quickedit{
display:none;
}

  1. Klik SIMPAN TEMPLATE dan lihat hasilnya…….
    7. Ucapkan Selamat Tiggal Pada Obeng dan Tang :O

 

 

 

 

Membuat menu navigasi horizontal Om-Om

 

Pertama masuk halaman Edit HTML, kemudian copi-paste semua kode CSS dibawah ini lalu letakan diatas kode ]]></b:skin>

 

/*– (Menu/Nav) –*/
#nav{background:#222; height:32px; padding:4px 0 0; margin-bottom:0px}
#nav-left{float:left; display:inline; width:600px}
#nav-right{float:right; display:inline; width:100px}
#nav ul{position:relative; overflow:hidden; padding-left:0px; margin:0; font:1.0em Arial,Helvetica,sans-serif}
#nav ul li{float:left; list-style:none}
#nav ul li a, #nav ul li a:visited{display:block; color:#fff; margin:0 5px; padding:5px 4px; text-decoration:none}
#nav ul li a:hover{color:#800000; background-color:#fff; margin:0 5px; padding:5px 4px}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{margin:0 8px; background-color:#fff; color:#fff; padding:5px 7px}

 

/*– (Search) –*/
#search{background:#f9f9f9 url(http://oom.blog.googlepages.com/search.gif) 6px 2px no-repeat; -moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px; border:1px solid #b3b3b3; float:right; height:25px; margin:0 0px 0 0; width:180px}
* html #search{margin-right:8px}
#search input{font-family:Verdana,Arial,Helvetica,sans-serif; background:transparent; border:0; color:#555; float:left; font-size:12px; margin:5px 0 0; padding:0px 2px 2px 27px; width:140px}

 

Masih pada halaman Edit HTML kemudian cari kode  <div id=’outer-wrapper’><div id=’wrap2′> biasanya kode ini terletak di bawah html tag <body> kemudian copi-paste semua kode dibawah ini, dan letakan kodenya dibawah kode warna hijau diatas.

 

<div id=’nav’>
<b:section class=’header-tabs’ id=’header-tabs’ preferred=’yes’ showaddelement=’no’>
<b:widget id=’LinkList1′ locked=’true’ title=’Top Tabs’ type=’LinkList’>
<b:includable id=’main’>
<div class=’widget-content’>
<b:if cond=’data:title’/>
<div id=’nav-left’>
<ul>
<li><a href=’/’>Home</a></li>
<b:loop values=’data:links’ var=’link’>
<li><a expr:href=’data:link.target’><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
<b:widget id=’HTML3′ locked=’true’ title=’Search’ type=’HTML’>
<b:includable id=’main’>
<div id=’nav-right’>
<form expr:action=’data:blog.homepageUrl + &quot;search&quot;’ id=’searchform’ method=’get’ name=’searchform’>
<b:if cond=’data:title’/>
<div id=’search’>
<input class=’s’ id=’s’ name=’q’ onblur=’if (this.value == &apos;&apos;) {this.value = &apos;Cari artikel disini&apos;;}’ onfocus=’if (this.value == &apos;Cari artikel disini&apos;) {this.value = &apos;&apos;;}’ type=’text’ value=’Cari artikel disini’/>
<input id=’searchsubmit’ type=’hidden’ value=’Search’/>
<data:content/>
</div>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

 

Silahkan disimpan dan lihat hasilnya. oh hampir lupa..rekan bisa menyesuaikan warna latar dan textnya sendiri ya🙂

 

Untuk menambah menu, silahkan buka kembali “Elemen Halaman” kemudian perhatikan widget paling atas, disitu sudah terlihat witget baru dengan title “Top Tabs” silahkan klik edit dan tambahkan menu yang ingin ditampilkan. Selamat Mencoba🙂

 

Menu Horisontal Optimasi Blog SPOT

 

Menu horizontal merupakan kumpulan beberapa link yang diletakkan secara horizontal dan biasanya ditempatkan di bawah header. Pada kesempatan ini, kita akan mengulas trik blogger tentang membuat menu horizontal secara sederhana. Mengapa dikatakan sederhana? Karena jika kita optimasi lebih mendalam, ternyata terdapat beberapa varian dari menu horizontal tersebut. Fungsi dari trik blogger ini adalah sebagai salah satu navigasi dalam blog agar memberikan layanan kemudahan shortcut link bagi pengunjung blog kamu.

 

Singkat kata, berikut langkah membuat menu horizontal dalam blog kamu :

  • Login ke account blogger kamu.
  • Pilih Tata Letak –> Edit HTML –> centang “Expand Template Widget”.

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

  • Cari Kode kode ]]></b:skin> dan Copy-Paste (copas) kode berikut di atasnya.

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

 

/* navbar
================== */

#bg_nav {
background: #ffffff;
width: 850px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #000000;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #000000;
border-bottom: 1px solid #ffffff;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #000000;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}

#bg_nav a:hover {
color: #000000;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}

#navleft {
width: 500px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 220px;
font-size: 11px;
float: right;
margin: 0px;
padding: 3px 5px 0px 0px;
}
#navright a img {
border: none;
margin: 0px;
padding: 3px 5px 0px 0px;
}

#nav {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}

#nav a, #nav a:visited {
background: #ffffff;
color: #000000;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px solid #ffffff;
}
#nav a:hover {
background: #c06000;
color: #000000;
margin: 0px;
padding: 8px 15px 8px 15px;
text-decoration: none;
}

#nav li {
float: left;
margin: 0px;
padding: 0px;
}
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
#nav li li a:hover, #nav li li a:active {
background: #c06000;
padding: 7px 30px 7px 10px;
}

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li:hover ul {
left: auto;
display: block;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

Catatan :

  1. Agar menu horizontal sesuai dengan template blog, kamu perlu mengganti kode-kode yang berwarna hijau dan merah.
  2. Khusus untuk kode yang berwarna hijau, sangat penting disesuaikan dengan lebar blog kamu.
  3. Untuk kode pewarnaan, kamu bisa melihatnya di kode warna ini.

 

  • Kemudian cari kembali kode seperti di bawah ini.

<div id=’header-wrapper’>
<b:section class=’header’ id=’header’ maxwidgets=’1′
showaddelement=’no’>
<b:widget id=’Header1′ locked=’true’ title=’test
(Header)’ type=’Header’/>

… dan seterusnya …

</b:section>
</div>

 

  • Copas kode berikut tepat di bawah kode yang berwarna hijau atau berwarna merah (sesuaikan dengan template blog kamu).

<div id=’bg_nav’>

<div id=’navleft’>
<div id=’nav’>
<ul>
<li><a href=’http://Alamat_Blog_Kamu.blogspot.com/‘>home</a></li>
<li><a href=’http://Link_yang_dituju‘>Add Link</a></li>
<li><a href=’http://Link_yang_dituju‘>Add Link</a></li>
<li><a href=’http://Link_yang_dituju‘>Add Link</a></li>
<li><a href=’http://Link_yang_dituju‘>Add Link</a></li>
</ul>
</div>
</div>

<div id=’navright’>

<form action=’http://Alamat_Blog_Kamu.blogspot.com/search’ id=’searchform’ method=’get’ name=’searchform’> <input id=’s’ name=’q’ type=’text’ value=”/> <input id=’searchsubmit’ type=’submit’ value=’Cari’/>
</form>

</div>

</div><!– akhir bg_nav –>

MEMBUAT Form Berlangganan

Pengunjung Blog terkadang merasa tertarik dengan posting yang kamu tulis, apalagi posting kamu mempunyai topik yang “hot” dan “up to date”. Dan saking sukanya, ia selalu merindukan posting-posting terbaru kamu. Kalau hanya sekedar mem-bookmark blog kamu, kemungkinan upaya tersebut masih kurang begitu mantap. Why? Karena suatu ketika jaringan sedang down atau host penyimpanan blog kamu sedang melakukan perbaikan atau gangguan lainnya, maka pada waktu itu pula ia tidak dapat mencapai hasratnya untuk membaca posting terbaru dari blog kamu. Nah, untuk menghindari terjadinya hal-hal yang demikian, alangkah lebih baiknya apabila kamu membuat form berlangganan melalui RSS. Form tersebut berguna untuk memudahkan pengunjung blog melakukan subcribe, sehingga ia akan selalu mendapatkan update posting kamu baik melalui email maupun reader.

Sebelum kamu menggunakan trik ini, terlebih dulu kamu harus memasukkan blog kamu dalam akun Feedburner. Kalau sudah mari kita mulai trik blogger untuk membuat form berlangganan, seperti yang kamu lihat di sidebar kanan blog optimasi blog :

  • Login dulu ke account blogger kamu.
  • Pilih tab Tata Letak –> Elemen Halaman.
  • Tambah Gadget dalam elemen blog kamu.
  • Di jendela “Tambahkan Gadget”, pilih HTML/JavaScript.
  • Kemudian copy dan pastekan kode di bawah ini.

<div style=”background:url(http://i647.photobucket.com/albums/uu191/ariamsi/flying_bird.gif) no-repeat top right;padding:10px 0px”>
<form action=”http://feedburner.google.com/fb/a/mailverify” style=”border:1px solid #ccc;padding:3px 3px 5px 3px;text-align:left;” target=”popupwindow” method=”post” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=Optimasi-Blog‘, ‘popupwindow’, ‘scrollbars=yes,width=300,height=320‘);return true”>

<a href=”http://feeds2.feedburner.com/Optimasi-Blog” rel=”alternate” type=”application/rss+xml”><img alt=”RSS Feed” style=”vertical-align:middle;border:0″ src=”http://www.feedburner.com/fb/images/pub/feed-icon16x16.png“/> Berlangganan posting via RSS FEED</a><br/><br/>

Atau berlangganan posting via email:<br/><input style=”width:190px” value=”” name=”email” type=”text”/><input value=”Optimasi-Blog” name=”uri” type=”hidden”/><input value=”en_US” name=”loc” type=”hidden”/><input value=”Berlangganan” type=”submit”/><br/><br/>

<a href=”http://feeds2.feedburner.com/Optimasi-Blog“><img width=”88” style=”border:0″ alt=”” src=”http://feeds2.feedburner.com/~fc/Optimasi-Blog?bg=FFFFFF&fg=000000&anim=0″ height=”26“/></a></form>
</div>

Catatan :

  1. Ganti http://i647.photobucket.com/albums/uu191/ariamsi/flying_bird.gif (burung terbang) dengan alamat penyimpanan file image kamu.
  2. Ganti Optimasi-Blog dengan nama feed blog kamu.
  3. Ganti nilai width dan height (warna merah) sesuai dengan ukuran template elemen halaman blog.
  4. Ganti warna feed-count (bg=FFFFFF&fg=000000) sesuai dengan warna blog kamu.

 

  • Lihat blog kamu.

Selamat membuat form berlangganan…

 

Contact Me

Jika Anda memiliki pertanyaan mengenai konten dalam situs ini, tentang produk-produk yang disebutkan, atau pertanyaan lainya silakan bisa menghubungi saya di alamat berikut:

Jl. Mayjen sungkono No.20 Malang – JATIM
Telepon: (0341) 864 2727
SMS: 081 853 854 6
ym id: caksub
email: admin@caksub.com

 

 

Daftarkan Blog di Google Ad Planner untuk Dapatkan Iklan

Google punya banyak fasilitas. Soal bisnis Online Google Adsense menjadi primadona. Google menjadi perantara Anda dengan pengiklan. Jika mungkin Anda Stress ditolak Google Adsense (Baca: Jangan Stress Ditolak Google Adsense), coba Anda daftarkan blog Anda ke Google Ad Planner. Sistemnya berbeda, bukan klik-klik-an dengan script iklan dari Google, tapi lebih Google hanya tempat negosiasi antara Anda dan pengiklan. Jadi, kemungkinan jenis iklan lebih luas tergantung kesepakatan Anda.

1. Silahkan Anda meluncur ke Google Ad Planner
2.Loginlah dengan akun gmail Anda.

 

3. Centang persetujuan aturan dan klik Continue

 

4. Tulis alamat blog Anda pada kolom Search by site. Kemungkinan data Anda masih kosong karena Anda belum edit.

 

5. Lakukan pengeditan tentang informasi situs Anda. Ini dijadikan rujukan agar pengiklan mau melirik situs Anda. Jika Anda belum daftar Google Analytics (Baca: Daftar Google Analytics)  silahkan daftar dahulu karena Google Ad Planner membutuhkan data anaytics Anda. Untuk edit silahkan klik link edit seperti gambar.

6. Klik tombol Select Sites to Include

 

7. Muncul Kotak Dialog, Centang situs Anda lalu klik Ok.

 

8. Setelah itu silahkan isi detail informasi mengenai situs Anda dengan klik link Edit Site Info pada bagian kanan.

 

9. Anda bisa atur iklan apa yang ingin Anda terima. Anda bisa atur data apa yang akan ditampilkan dari Analytics Anda. Berikan deskripsi yang jelas dan pilih kategori yang sesuai dengan situs Anda. Jangan lupa untuk cantumkan link url Informasi Pengiklanan. Buatlah postingan (sebaiknya berbahasa Inggris) khusus untuk halaman ini.

 

10 Jika sudah silahkan klik Save.

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s