Bimantara: Blogspot

Cara Mengganti Tulisan Posting Baru - Home - Posting Lama Dengan Gambar

Pada kesempatan kali ini saya akan mencoba memberikan tips , bagaimana cara mengganti tulisan pada akhir postingan yaitu Postingan lebih baru - Beranda - Posting lebih lama dengan sebuah gambar, pastinya tips ini akan menambah cantik blog anda... hehe..

Ok langsung saja, berikut langkah langkahnya...

Pertama Login dulu ke Blog anda
Kedua klik Rancangan lalu Edit html.
Download dulu Templete anda agar nanti jika terjadi kesalahan anda bisa upload lagi templete anda.
Selanjutnya Expand templete

*Untuk Mengganti tulisan Home, cari kode seperti ini

<data:homeMsg/>

Kemudian ganti dengan kode dibawah ini

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8mgWC1OuJvzcSg9NZTcmV5eJjLw7l4jG0j-P4rzUHfObkLCc6a__oGT3iK_yMyJf5_aaxN5QPGrNrLD0XqtzbS-mUcjd7jv2nnV7xnfpK-COJ21_TIlT367L5N87kx5rmARC1Wkn-EYUc/s1600/Home.png' title='Halaman Awal'/>

*Untuk Mengganti tulisan Posting Lebih Baru, cari kode seperti ini

<data:newerPageTitle/>

kemudian ganti dengan kode di bawah ini

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4ONBn-OsQZfSAvLt2UN3h1G9JkG3wUsS2PxMVYjw4d9jF-UlitFAf_swJzvTf0jgJPMyLa7ni-YFAp8k3A16ZIsa7JU390MsesWP74BBO0UPCLayClEZR1n7gUhvEfyHwSlVzHjTclo-E/s1600/Left+arrow.png'/>

*Untuk mengganti tulisan Posting Lebih Lama, cari kode seperti ini

<data:olderPageTitle/>

kemudian ganti dengan kode dibawah ini

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje546EbBp80EAEyFVSjj07spputjxTZHjrwzHAmIiM2bdiNdIeEhVYQa46zPPCpPVQ-glv3ShqRZr7vbieXQErN5NHUQWqo3QAG5-SltCnhwcgshzzkvIr0iS4e-uf_nobnS8HmczH33Zx/s1600/Right+arrow.png'/>

Catatan:
-Ganti Tulisan warna Merah dengan alamat url gambar Anda

Jangan Lupa Save Templete anda lalu lihat hasilnya.
Selamat mencoba....

Cara Menghilangkan Tulisan Langgan entri (atom) di bawah posting.

Ada beberapa tampilan di blogspot yang kadang-kadang tidak disukai kemunculannya. Salah satunya seperti tampilan Langgan : entri (atom) atau Subsribe :to post (atom) yang letaknya dibawah postingan.
Sebenarnya penampilan itu memiliki fungsi tersendiri yaitu agar pengunjung bisa dengan mudah menemukan alamat feed anda. Tetapi tulisan tersebut menjadi tidak penting lagi jika anda sudah menggunakan layanan feed dari Feedburner.
Pada postingan kali ini Kami akan coba membahas bagaimana cara menghilangkan tampilan Langgan : entri (atom) tersebut, Ok langsung saja jika anda belum tau caranya ikuti langkah langkah berikut:

Sign ke Blogger.
Pilih Tata Letak.
Pilih Edit HTML.
Back up template anda, untuk menjaga jika terjadi kegagalan.
Beri tanda centang pada Expand Widget Template.

Cari kode seperti dibawah ini :

Hapus/delete kode diatas.
Simpan Template.
Lihat Blog anda sekarang.

Cara Menghilangkan Tulisan Tampilkan Entri Lawas di Atas Posting Blog

Bila sebuah blog sudah di pasang widget label atau kategori, maka begitu diklik salah satu labelnya maka akan muncul tampilan di atas posting seperti ini:

Menampilkan entri terbaru dengan label Blogspot.Tampilkan entri lawas

Itulah pengaturan standar dari blogspot. Tetapi sebagian blogger merasa terganggu dengan tampilan lawas ini. Alasannya membuat halaman posting kurang rapi, terlalu ribet dan mempengaruhi loading blog. Nah, terlepas dari apa yang menjadi alasan, jika anda juga ingin menghilangkan kotak tampilan entri lawas ini, anda bisa lakukan langkah-langkah berikut:

Login pada Blogger
klik pada Tata Letak.
Klik pada Edit HTML
Centanglah Expand Template Widget.
Carilah kode: <b:includable id='status-message'>

Agar lebih mudah mencarinya tekan (Ctrl + F) pada keyboard lalu tekan Enter. Maka akan muncul kotak Find. Ketiklah kode yang akan dicari pada kotak tersebut lalu tekan Enter, maka secara otomatis akan muncul kode yang dicari dalam keadaan terseleksi dengan warna Merah tebal.

<b:includable id='status-message'>

<b:if cond='data:navMessage'>

<data:navMessage/>

</div>

</div>

</b:if>

</b:includable>

Ganti kode di atas dengan yang di bawah ini:

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Lalu simpan templete

Selamat Mencoba...

Tips Cara Buat Spoiler

Mungkin sobat bertanya-tanya apa sih spoiler itu,mungkin bagi yg sudah ahli ngeblog sudah tidak heran lagi dengan Spoiler,namun tidak demikin dengan anda dan termasuk saya yg baru bisa ngeblog..
banyak kegunaan dan pungsinya terhadap Blog kita bila menggunakan Spoiler ini..
Spoiler adalah cara untuk menyembunyikan seluruh atau sebagian isi dari konten blog kita. Spoiler juga bermanfaat agar konten yang berat seperti gambar dalam ukuran besar dan video tidak diload sebelum menekan tombol show. Dengan kata lain spoiler membantu kita mengurangi waktu load konten blog dan memberikan pilih kepada pembaca blog untuk membuka atau tidak isi spoiler

Baik kita mulai saja Tips dan Trik Cara Buat Spoiler

1. Cara membuat Spoiler tanpa warna background.
Kodenya adalah :

aa; padding: 2px; width: 98%;"><p style="text-align: justify;">Mungkin sobat bertanya-tanya apa sih spoiler itu,mungkin bagi yg sudah ahli ngeblog sudah tidak heran lagi dengan Spoiler,namun tidak demikin dengan anda dan termasuk saya yg baru bisa ngeblog..<br /> <br /> banyak kegunaan dan pungsinya terhadap Blog kita bila menggunakan Spoiler ini..<br /> <br /> Spoiler adalah cara untuk menyembunyikan seluruh atau sebagian isi dari konten blog kita. Spoiler juga bermanfaat agar konten yang berat seperti gambar dalam ukuran besar dan video tidak diload sebelum menekan tombol show. Dengan kata lain spoiler membantu kita mengurangi waktu load konten blog dan memberikan pilih kepada pembaca blog untuk membuka atau tidak isi spoiler<br /> <br /> <br /> .</p></div><div id="hide"></div></div></div>

2. Cara membuat Spoiler dengan border dan warna background.
Kodenya adalah :

<br /> <div id="spoiler"><div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT LAGI'; }" name="button" type="button" value="CONTOH SPOILER DENGAN BORDER DAN WARNA BACKGROUND" /></div><div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;"><div style="color: #000000; background: none repeat scroll 0% 0% #ebf3fb; border: 1px solid #aaccee; padding: 7px; margin: 0px;"><p style="text-align: justify;">Mungkin sobat bertanya-tanya apa sih spoiler itu,mungkin bagi yg sudah ahli ngeblog sudah tidak heran lagi dengan Spoiler,namun tidak demikin dengan anda dan termasuk saya yg baru bisa ngeblog..<br /> <br /> banyak kegunaan dan pungsinya terhadap Blog kita bila menggunakan Spoiler ini..<br /> <br /> Spoiler adalah cara untuk menyembunyikan seluruh atau sebagian isi dari konten blog kita. Spoiler juga bermanfaat agar konten yang berat seperti gambar dalam ukuran besar dan video tidak diload sebelum menekan tombol show. Dengan kata lain spoiler membantu kita mengurangi waktu load konten blog dan memberikan pilih kepada pembaca blog untuk membuka atau tidak isi spoiler<br /> <br /> <br /> </p></div><div id="hide"></div></div></div>

Keterangan :
<div style=”color: #000000;= Ini untuk mengganti warna teks
background: #EBF3FB; = Ini untuk mengganti warna background
border: 1px solid #AACCEE; = Ini untuk ukuran dan warna border

3. Cara membuat Spoiler untuk menyembunyikan gambar.
Kodenya adalah :

Keterangan :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv7H-KzAlFO1LKo10FNdB-65qQ3s3M-vKLnuuMEv6388m39E0OJDm5NtZXhyphenhyphen412yLTjt9ZL3uPpdF8ZsRdRTRlNCi4i-cQpVS1Roj6DuOBNi2LJe-yKi95kPDVAUVvkf9dt7wMJ3YtMK4m/s1600/my_Logo.png dengan URL gambar yang ingin disembunyikan. OK, untuk Spoiler yang lainnya seperti Video, daftar link dan lain-lain baik di dalam postingan atau di sidebar tinggal disesuaikan, kodenya hampir sama.bisa menempatkan button di tengah dengan menambahkan kode ini <div align=”center”> pada baris kedua.

Semoga Bermanfaat

Cara Buat Menu Melayang Di Bagian Kiri Blog

enampilkan menu melayang merupakan usaha peblogger untuk menghemat ruang blog, terutama yang isi dari blog sudah sangat banyak, baik label maupun post.
Menu melayang ini dapat kita tampilkan di bagian kiri maupun di bagian kanan blog, tinggal anda memilih mana yang lebih cocok untuk blog anda.
Script dibawah ini dibuat untuk tampilan dibagian kiri blog. Anda tinggal mengubah sedikit kode untuk menampilkan di sebelah kanan blog.
Ikuti langkah-langkahnya....
LANGKAH PERTAMA

Masuk ke Blogger dengan ID anda.
Pilih Rancangan kemudian klik Edit HTML.
Back up template dulu, kalau takut gagal.
Cari kode ini : </head> pada template anda.
Copy Seluruh kode dibawah ini, kemudian paste tepat diatas kode tadi :

<script src='https://sites.google.com/site/epgstudiosite/javascript/floating1.js' type='text/javascript'/> <script> YOffset=150; XOffset=0; staticYOffset=30; slideSpeed=20 waitTime=100; menuBGColor="red"; menuIsStatic="yes"; menuWidth=150; menuCols=2; hdrFontFamily="verdana"; hdrFontSize="2"; hdrFontColor="black"; hdrBGColor="#FF0000"; hdrAlign="left"; hdrVAlign="center"; hdrHeight="15"; linkFontFamily="Verdana"; linkFontSize="2"; linkBGColor="white"; linkOverBGColor="#FFFF99"; linkTarget="_top"; linkAlign="Left"; barBGColor="red"; barFontFamily="Verdana"; barFontSize="2"; barFontColor="white"; barVAlign="center"; barWidth=20; // no quotes!! barText="TUTORIAL BLOGGER"; // ----- Masukkan menu blog anda dibawah ini ssmItems[0]=["LABEL"] //Header Menu ssmItems[1]=["Beranda", "/", ""] ssmItems[2]=["Postingan Artikel", "http://epg-studio.blogspot.com/search/label/POSTINGAN%20ARTIKEL",""] ssmItems[3]=["Pengaturan Image", "http://epg-studio.blogspot.com/search/label/PENGATURAN%20IMAGE",""] ssmItems[4]=["Elemen Halaman", "http://epg-studio.blogspot.com/search/label/ELEMEN%20HALAMAN",""] ssmItems[5]=["Asesoris Blog", "http://epg-studio.blogspot.com/search/label/AKSESORIS%20BLOG", "_new"] ssmItems[6]=[" Komentar", "http://epg-studio.blogspot.com/search/label/KOMENTAR", ""] ssmItems[7]=["Fasilitas Chat", "http://epg-studio.blogspot.com/search/label/FASILITAS%20CHAT", ""] ssmItems[7]=["Fasilitas Chat", "http://epg-studio.blogspot.com/search/label/FASILITAS%20CHAT", ""] buildMenu(); //----- Selesai mengedit menu </script>
Klik tombol Simpan Template

Penulis

Cara Membuat Label Berputar ( Label Cloud )

Dalam pemasangan label menu Blog selera orang memang berbeda beda, ada yang suka menampilkan dalam
bentuk deretan menu horizontal, menu vertikal, berdasarkan alphabet, berdasarkan tanggal dan yang lainnya. Untuk melengkapi keinginan para peblogger dalam menampilkan label, dalam post kali ini akan dibahas tentang label yang penampilannya selalu berputar atau lebih dikenal dengan nama label clouds.
Contohnya bisa di lihat di bawah ini

Bagi yang ingin menampilkan label dam bentuk berputar (label clouds), silahkan anda ikuti langkah-langkah dibawah ini.

Masuk ke Blogger dengan ID anda
Pilih Rancangan
Pilih Edit HTML
Kasih tanda contreng pada Expand Template Widget
Back up dulu template kalau takut gagal
Cari kode ini : <b:section class='sidebar' id='sidebar' preferred='yes'>
Copy seluruh kode dibawah ini, kemudian paste tepat dibawah kode tadi.

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Gantilah tulisan yang berwarna merah dengan tulisan yang ingin anda tampilkan

Angka 240 dan 300 merupakan width dan height dari label clouds, ganti oleh anda sesuai dengan ukuran lebar sidebar blog anda
Kode warna #ffffff merupakan kode dari warna hitam yaitu warna dari lay out label clouds, gantilah dengan warna pilihan anda
Kode 0x333333 merupakan kode warna putih dari tulisan yang akan muncul, ganti kode warna tersebut dengan warna pilihan anda.
Angka 100 merupakan kecepatan perputarantulisan dalam label clouds, semakin besar angkanya semakin cepat berputarnya tulisan dalam label clouds, begitu juga sebaliknya bila angkanya makin kecil semakin lambat tulisannya berputar.
Angka 12 merupakan ukuran tulisan yang akan muncul di dalam label clouds, semakin besar angkanya semakin besar tulisan yang muncul, begitu juga sebaliknya semakin kecil angkanya semakin kecil pula tulisan yang muncul di dalam kabel clouds.

Setelah selesai pengeditan klik tombol Simpan template.
Lihat blog anda sekarang, jika sukses maka tag cloud anda akan terlihat.

Catatan,
Jika di blog tempat memasang tag cloud dan tag daftar/text, biasanya tag cloudnya belum muncul.Jika tag cloudnya belum muncul coba di setting manual widget label yang ada di sidebar blog. Pilih option Cloud
Selamat mencoba semoga sukses...

Cara membuat Menu Multi Kolom

Pada blog tutorial kali ini akan membahas tentang membuat menu multi kolom, yang mana walaupun trik ini sudah lama dan sudah banyak bertebaran di maya internet, namun tak ada salahnya kalau menulisnya kembali. Mungkin saja para newbie belum ada yang tahu dan kebetulan nemu di sini

Menu Multi Kolom ini banyak fungsinya, yang mana fungsi utama di ciptakannya multi kolom ini yakni memampatkan widget-widget ke dalam 1 menu atau menggabungkan beberapa widget ke dalam 1 widget melalui menu multi kolom.

Biasanya menu ini di ěsi dengan daftar link blog, recent comment, dll sesuai kehendak si pemilik dan pembuat blog. Dan yang pasti menu ini menhemat space (ruang) blog pada sidebar.

Contoh tampilan dari Menu Multi Kolom atau Menu Multi Tab seperti gambar di bawah ini:

cara membuat menu multi kolom, membuat kolom multi tab

Gimana, apa kamu tertarik untuk membuatnya? Jika ya, mari kita lakukan experimen-nya Ikuti tutorialnya yah jangan saling mendahului, kalau mau mendahului lewat lajur kanan

Login ke dashboard blog kamu.
Pilih Rancangan »» Edit HTML
Download template lengkap dulu untuk berjaga-jaga kalau terjadi kesalahan.
tandai pada Expand widget template.
kemudian tempatkan script berikut sebelum kode ]]></b:skin>

div.TabView div.Tabs { height:24px; overflow:hidden;}
div.TabView div.Tabs a { float:left; display:block; width:90px; text-align:center; height:24px; padding-top:3px; vertical-align:middle; border:1px solid #ddd; border-bottom-width:0; text-decoration:none; font-family:verdana,arial,sans-serif; font-weight:bold; color:#000;}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color:#fff;}
div.TabView div.Pages {clear:both; border:1px solid #ddd; overflow:hidden; background-color:#fff;}
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden;}
div.TabView div.Pages div.Page div.Pad {padding:3px 5px;}

Sesuaikan kode warnanya dg blog kamu,
masukan script pemanggil berikut sebelum kode </head>

<script src='http://blogtegal.googlecode.com/files/tabview.js' type='text/javascript'/>
Terakhir klik SIMPAN

Kemudian langkah berikutnya yakni menambahkan widgetnya pada sidebar blog. Pada Rancangan element klik ''Tambah Gadget'' dan pilih widget ''HTML/Javascript'' dan masukan kode berikut kedalamnya:

<form action="tabview.html" method="get"> <div class="TabView" id="TabView"> <div class="Tabs" style="width:350px;"> <a>Sub judul 1 </a> <a>Sub judul 2 </a> <a>Sub judul 3 </a> </div> <div class="Pages" style="width:350px; height:260px;"> <div class="Page"> <div class="Pad"> Link 1 di menu 1 Link 2 di menu 1 Link 3 di menu 1 </div> </div> <div class="Page"> <div class="Pad"> Link 1 di menu 2 Link 2 di menu 2 Link 3 di menu 2 </div> </div> <div class="Page"> <div class="Pad"> Link 1 di menu 3 Link 2 di menu 3 Link 3 di menu 3 </div> </div> </div> </div> </form> <script type="text/javascript"> tabview_initialize ('TabView'); </script>

Terakhir klik SIMPAN.Selamat berexperimen untuk membuat menu multi kolom atau menu multi tab
Sumber

Cara Mengatur Judul Posting

Pada postingan sebelumnya saya sudah membahas tentang Cara mengatur judul sidebar, maka kali ini saya coba untuk membahas tentang cara mengatur judul posting, barang kali masih ada sobat blogger yang masih bingung bagaimana cara mengatur judul postinganya. Ok langsung saja...
Untuk mengatur tampilan judul posting, pada intinya sama dengan mengatur judul sidebar, anda bisa mengatur besarnya hurup, warna hurup, warna background, gambar background, besarnya padding, ingin bergaris atau apapun namanya. Jika masih bingung saya beri sedikit gambaran.
Jika mengacu pada template buatan blogger (minima), maka judul postingan akan di atur pada kode css seperti ini :

.post h3 {
...........
...........
...........
}

Namun pada template baru, judul postingan merupakan sebuah link sehingga anda harus mengatur juga kode yang ada pada kode css seperti ini :

.post h3 a, .post h3 a:visited, .post h3 strong {
............
............
............
}

.post h3 strong, .post h3 a:hover {
............
............
............
}

Anda tinggal menambahkan atau mengurangi kode yang ada di posisi titik-titik, caranya tinggal baca postingan tentang cara mengatur judul sidebar. kira kira hampir sama persis seperti itu.
Selamat mencoba Semoga bermanfaat

Cara Mengatur Judul Sidebar

Sidebar atau tempat untuk tambah gadget pastinya sobat blogger sudah banyak yang tau, tapi mungkin masih ada beberapa blogger pemula seperti saya yang sekali lagi mungkin masih belum begitu tau tentang sidebar. Baiklah saya akan coba membahas tentang judul sidebar siapa tau sobat sobat pemula blogger yang tadinya masih bingung tentang sidebar jadi tau tentang sidebar. ok langsung saja

1. Login ke blog anda > Layout (tata letak) > Edit HTML
2. Cari kode h2 { (untuk lebih mudah ketik F3 pada keyboard)
3. Di sini kita akan mulai utak-atik kode

Perhatikan kode di bawah ini

h2 {
font-size:110%;
font-weight:bold;
text-transform:uppercase;
text-align:right;
border: 1px solid #000;
background:#6df466;
padding;5px;
}

* font-size:110%; : berfungsi untuk mengatur besarnya huruf. Satuan yang digunakan bisa pakai % atau pixels (px). Angkanya dapat sobat ganti sesuai keinginan

* font-weight:bold; : menunjukan judul yang tampil dengan huruf tebal. Kata bold dapat sobat ganti dengan normal jika penampilanya tidak ingin tebal atau ganti dengan italic jika ingin penampilan hurufnya miring.

* text-transform:uppercase; : menunjukan bahwa huruf yang tampil semuanya berupa huruf kapital (besar). Sobat dapat mengganti dengan kata lowercase (semuanya huruf kecil) atau capitalize (hanya huruf depannya yang besar).

* text-align:right; : Letak judul sidebar di bagian kanan. Sobat dapat mengganti dengan left jika ingin berada dikiri atau center jika ingin berada di tengah.

* border: 1px solid #000; : berfungsi untuk menampilkan garis di sekeling judul sidebar. Sobat dapat mengganti ukuranya dan warna dari garis tersebut.

* background:#6df466; : untuk menampilkan warna latar dari judul sidebar. Ganti kode warnanya dengan warna kesukaan sobat. Selain dengan menampilkan warna, sobat juga dapat menampilkan sebuah image sebagai background judul sidebar. perhatikan yang di bawah ini

Contoh

background: url(alamat gambar background);

* padding;5px; : untuk memberi jarak antara bagian pinggir judul sidebar dengan tulisan judul sidebarnya, dengan maksud agar kelihatan tidak mepet ke bagian pinggir.

Keterangan : jika tidak ada kode h2 { coba .sidebar h2 { .Jika ada beberapa kode yang tidak ada pada templates anda, anda bisa tambahkan sendiri dan jika ada kode yang tidak anda inginkan, anda bisa hapus kode itu.

4. save (simpan) selamat mencoba

Cara Membuat Kotak Iklan atau Banner Box

Saya yakin teman teman blogger semua sudah pada tau apa itu Banner ads jadi rasanya ndak perlu lagi saya jelasin fungsinya. Di setiap blog rasanya tak ada salahnya jika di pasang Banner ads / Kotak iklan, di samping sedikit nambahin rame halaman blog bisa juga sedikit bisa nambahin uang saku kita, jika..??? hehehe...., jika ada yang mau pasang iklan di blog kita, kan lumayan bisa buat beli kopi di warung sebelah hehehe...

Ya sudah sesuai judul postingnya saya akan coba tulis Tutorialnya, siapa tau ada temen temen blogger yang masih belum tau cara membuat Banner ads atau Kotak iklan seperti gambar di bawah ini:

Seperti biasa.. langkah pertama Login dulu ke blogger dengan ID Anda, pilih Rancangan, Edit Html, lalu masukkan kode di bawah ini tepat di bawah kode <b:skin><![CDATA[

#Box-Banner-ads  {

margin: 0px;

padding: 5px;

text-align: center;

}

#Box-Banner-ads  img {

margin: 0px 4px 4px 0px;

padding: 3px;

text-align: center;

border: 1px solid #c0c0c0;

}

#Box-Banner-ads  img:hover {

margin: 0px 4px 4px 0px;

padding: 3px;

text-align: center;

border: 1px solid #333;

}

Setelah selesai Simpan Templete Anda.

Selanjutnya buka Rancangan, Tambah Gadget, JavaScript lalu masukan kode berikut


<div id="Box-Banner-ads">

<a target="_blank" href="http://blogbimantara.blogspot.com/"><img 
border="0" alt="ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi40d7wYvz0EQ5rX8Ognm8_yoU2kzmwC2AxhAXVVhLdAbKfFI3igds9yuVyxLy3MXZ4empQvSLWvTEp_pCxupaDNWCsG58-hDbe6op3N4LefMCnY59Bj67OzSHDdeaoPmXRjkv92nv4EWZr/s1600/img+advertise.jpg"/></a>

<a target="_blank" href="http://blogbimantara.blogspot.com/"><img 
border="0" alt="ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi40d7wYvz0EQ5rX8Ognm8_yoU2kzmwC2AxhAXVVhLdAbKfFI3igds9yuVyxLy3MXZ4empQvSLWvTEp_pCxupaDNWCsG58-hDbe6op3N4LefMCnY59Bj67OzSHDdeaoPmXRjkv92nv4EWZr/s1600/img+advertise.jpg
"/></a>
<a target="_blank" href="http://blogbimantara.blogspot.com/"><img 
border="0" alt="ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi40d7wYvz0EQ5rX8Ognm8_yoU2kzmwC2AxhAXVVhLdAbKfFI3igds9yuVyxLy3MXZ4empQvSLWvTEp_pCxupaDNWCsG58-hDbe6op3N4LefMCnY59Bj67OzSHDdeaoPmXRjkv92nv4EWZr/s1600/img+advertise.jpg
"/></a>
<a target="_blank" href="http://blogbimantara.blogspot.com/"><img 
border="0" alt="ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi40d7wYvz0EQ5rX8Ognm8_yoU2kzmwC2AxhAXVVhLdAbKfFI3igds9yuVyxLy3MXZ4empQvSLWvTEp_pCxupaDNWCsG58-hDbe6op3N4LefMCnY59Bj67OzSHDdeaoPmXRjkv92nv4EWZr/s1600/img+advertise.jpg
"/></a>

</div>

Untuk jumlah iklan tentukan sesuai selera, Anda bisa menambah atau mengurangi sesuai kode di bawah ini

<a target="_blank" href="http://blogbimantara.blogspot.com/"><img 
border="0" alt="ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi40d7wYvz0EQ5rX8Ognm8_yoU2kzmwC2AxhAXVVhLdAbKfFI3igds9yuVyxLy3MXZ4empQvSLWvTEp_pCxupaDNWCsG58-hDbe6op3N4LefMCnY59Bj67OzSHDdeaoPmXRjkv92nv4EWZr/s1600/img+advertise.jpg
"/></

Ganti Warna Merah sesuai alamat Url anda.

selamat mencoba dan semoga berhasil..

more

Cara menampilkan Judul Posting Saja Tanpa isi Halaman

Ketika melakukan pencarian atau membuka isi label (kategory) di blog saya pasti akan melihat hasil tampilan berupa link judul posting beserta tanggal tanpa menampilkan isi posting sama sekali, tentu saja dengan cara ini sangat menguntungkan dan mempermudah mengunjung ketika berselancar di blog kita, coba bayangkan ketika pengunjung membuka label atau kategory yang isinya ada 100 posting, tentu hal ini menjadi masalah nantinya dan membutuhkan waktu yang lama sampai halaman benar-benar terbuka sempurna.

Untuk mengatasi masalah diatas ada baiknya kita hanya menampilkan judul posting beserta tanggal posting saja, selain mempermudah, tentu saja loading page kita akan 50x lebih cepat dari biasanya ketika membuka halaman label.

Jika Ingin Pengen tau cara buatnya ikuti langkah dibawah ini:

Pertama :

Buka Template -> Edit HTML -> Jangan lupa lakukan backup template :) -> kemudian beri tanda cek pada 'Expand Widget Templates'

Kedua :

Lihat kode dibawah ini:

 <!-- posts -->
<div class='blog-posts hfeed'>

<b:include data='top' name='status-message'/>

<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

<b:include data='post' name='post'/>

Kemudian cari kode warna merah diatas, jika sudah ketemu ganti kode warna merah diatas dengan kode dibawah ini :

 <b:if cond='data:blog.homepageUrl !=
                data:blog.url'>
     <b:if cond='data:blog.pageType != "item"'>
         <a expr:href='data:post.url'>
         <data:post.title/></a><br/><br/>
     <b:else/>
         <b:include data='post' name='post'/>
     </b:if>
 <b:else/>
     <b:include data='post' name='post'/>
 </b:if>

Ketiga :

Jangan lupa disimpan dan lihat hasilnya. selamat mencoba :)

Sumber

Cara Custom Domain di Blogger / blogspot

Sebelum melangkah ke Tutorial Bagaimana cara setting Domain di Blogspot Berikut saya jelaskan singkat saja keuntungan jika menggunakan custom domain pada blogspot.

Ada empat Nilai lebih jika menggunakan TLD atau custom domain pada blogspot:

Domain Lebih Bergengsi
Bukan begitu? Coba pikir, http://blogbimantara.blogspot.com dengan http://blogbimantara.com lebih kerenan mana? vote terbanyak tentunya yang dot com saja tanpa blogspot. Nah, ini nilai plus pertama jika menggunakan custom domain pada blogspot.
Lebih Profesional
Kebanyakan orang berasumsi bahwa suatu blog dengan subdomain seperti blogspot itu hanya sebagai hobby saja, meskipun ada yang menjadikan blog gratisan dengan subdomain sebagai ladang bisnis atau semacamnya. Mereka beranggapan blog dengan nama domain masih dengan subdomain ( misal: http://blogbimantara.blogspot.com ) kurang profesional, karena terkesan gratis-gratis gimana. Nah, nilai plus lagi akan Anda dapatkan jika blogspot Anda diganti dengan nama domain TLD (Top Level Domain ), orang akan lebih memberikan kesan profesional terhadap blog Anda meskipun blog Anda adalah blogspot.
Hosting Gratis di Blogspot
Banyak blogger memiliki blog dengan domain TLD dan Hosting sendiri juga. Jadi mereka tindak menggunakan blogger.com sebagai tempat ngeblognya. Nah, jika kita menggunakan blogspot sebagai tempat ngeblog kita maka kita akan mendapatkan fasilitas atau temtap ngeblog tak terbatas dan gtratis! itu kelebihan memakai blogspot sebagai hosting. Jadi, kita hanya mengubah alamat atau nama domainnya saja dari http://blogbimantara.blogspot.com menjadi http://blogbimantara.com
Keamanan Terjamin di Blogspot
Untuk masalah safety, insyaallah blogspot terjamin deh

Nah, demikian 4 keuntungan jika menggunakan custom domain di blogspot.
Nah sekarang bagaimana cara mengubah domain blogspot menjadi custom domain atau domain sendiri?
Berikut langkah singkat mengubah domain blogspot.com menjadi domain sendiri atau custom domain:

Beli Domain
Anda bisa membeli domain TLD (com, net, info, org, dll) atau domain ID (co.id, web.id, dll) atau 2nd domain (co.uk, co.in, dll) di tempat penjualan domain.
Solusi:
Belilah domain sesuai mod Anda di tempat yang Anda sukai, pilihlah nama domain yang Anda sukai juga. Tempat pembelian domain sangat banyak, silahkan cari di Google ataupun di forum forum diskusi separti: kaskus.us, adsense-id.com dsb)
Setting Domain di Panel Tempat Pembelian
Ini penting. Sebelum mengubah nama domain blogspot menjadi custom domain yang sudah Anda beli, maka Anda harus melakukan penyetingan terlebih dahulu domain Anda.
Note: Tutorial penyettingan ini saya ambilkan contoh dari tempat pembelian domain di rumah web
Caranya:
- Login lah ke tempat dimana Anda membeli domain singkatnya masuk ke akun Anda
- Klik menu domain saya, lalu pilih nama domain yang sudah Anda beli (misal: indodesigner.net)
- Klik tab menu DNS, lalu klik tombol Active DNS
- Klik tombol Auto-update nameservers
- Akan ada keterangan bahwa nameserver yang baru bisa aktif dalam waktu 24-72 jam.
  
  Nameserver Modifications completed successfully. You will need to allow a 24-72 hour propagation time for the DNS service to begin working.
- Masih dalam tab menu DNS, klik tombol Manage DNS, akan muncul halaman baru, kemudian klik tab menu CNAME Records, lalu klik tombol Add CNAME Record
- Isi Host Name dengan www , lalu isi Value dengan ghs.google.com , untuk TTL biarkan saja. Akhiri dengan klik tombol Add Record.
- Setelah proses selesai, klik tab A Records. kemudian klik tombol Add A Record
- Untuk Host Name biarkan kosong, isi Destination IPv4 Address dengan 216.239.32.21 , untuk TTL biarkan apa adanya. Kemudian klik tombol Add Record
- Lakukan langkah Add A record sebanyak 3 kali lagi, namun IP yang di masukkan adalah nomor 216.239.34.21 , 216.239.36.21 , 216.239.38.21 . Sehingga nanti akan ada 4 records yang dihasilkan
- Langkah penambahan IP diatas dimaksudkan agar blog anda tidak mengalami error apabila diakses tanpa www.
- Untuk setting CNAME pada domain telah selesai, langkah selanjutnya adalah setting pada blog anda yang di blogger.
Cara Setting Custom Domain di Akun Blogger
- Masuk ke Akun blogger
- Klik Pengaturan untuk yang mau di custom domain
- Klik tab Publikasikan
- Klik Domain Ubahsesuaian
- Klik Beralihlah ke pengaturan lanjut
- Isilah Domain Anda dengan nama domain yang tadi disetting DNS nya, jangan lupa sertakan www didepannya. formatnya adalah www.domainanda. Contoh www.indodesigner.net. Isilah verifikasi kata yang ada dan akhiri dengan klik tombol SIMPAN SETELAN.
- Selesai. Jika Anda disuruh untuk mengklik OK sekali lagi, maka kliklah ok satu kali lagi

Proses Custom domain blogger telah selesai, namun biasanya memerlukan waktu agar blog anda bisa diakses menggunakan domain baru. Proses ini biasanya memakai waktu paling lama 24 jam, namun banyak yang hanya dua atau tiga jam telah selesai, dan blog anda bisa diakses dengan domain anda.

Selamat mencoba dan semoga blog anda semakin tampil lebih professional.

Cara Buat Text Area

Teks Area adalah tempat untuk kita menuliskan teks. Teks area dapat dapat digunakan untuk tempat kode banner yang siap untuk dicopy oleh pengunjung, ataupun pesan admin kepada pengunjung. Teks area ini dapat digunakan juga sebagai tempat posting kode HTML, tetapi banyak sekali kekurangannya dan kurang efisien. Kalo belum tahu apa itu teks area, ini adalah contoh teks area dan sekaligus cara membuatnya.

Pembuatan teks area standar

<textarea rows="5" cols="25" style="display: inline;" name="txt">Isi teks area taruh sini, bisa berupa code script ataupun teks biasa kayak ini</textarea>

Hasilnya akan nampak seperti dibawah ini

Keterangan :
rows = tinggi
cols = lebar

Pembuatan textarea dengan tombol higtlight

Untuk yang ini, adalah memudahkan pengunjung blog anda untuk memberi tanda hightlight

<center><form name="copy"><input value="Klik Tandai" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/><textarea rows="5" cols="25" style="display: inline;" name="txt">Isi teks area taruh sini, bisa berupa code script ataupun teks biasa kayak ini</textarea></form></center>

Hasilnya akan nampak sperti dibawah ini.

Pembuatan teksarea dengan On click hightligt

Untuk contoh yang ini hampir sama dengan textarea yang ada button hightlighnya, cuman bedanya yg tanpa menggunkan bantuan form.. nah untuk mencobanya silahkan anda klik pada halaman teksarea contoh hasil dibawah ini..

<textarea rows="5" cols="25" style="display: inline;" name="txt" onclick="this.focus();this.select()">Isi teks area taruh sini, bisa berupa code script ataupun teks biasa kayak ini</textarea>

Hasilnya akan nampak seperti dibawah ini, anda klik aja di bagian teksareanya

pembuatan textarea sensitif hightlight

Untuk teks area yang ini fungsinya hampir sama dengan teks area yang barusan dicontohkan diatas ini, tapi lebih sensitif, maksudnya ketika mouse berada di wilayah teks area walaupun tanpa ngeklik tapi suda ter hightlight sendiri, ni dia contoh codenya..

<textarea rows="5" cols="25" onfocus="this.select()" style="display: inline;" onmouseover="this.focus()" name="txt" onclick="this.focus();this.select()">Isi teks area taruh sini, bisa berupa code script ataupun teks biasa kayak ini</textarea>

Hasilnya akan nampak dibawah ini, letakkan mouse anda di wilayah teks area dibawah ini agar menegetahui efek hightlight nya..

Untuk merubah lebar dan tinggi tampilan textarea silahakn ganti angka angka pada kata " rows " dan " cols "
Contoh contoh diatas adalah sebagai contoh aja dan sebagai pembelajaran dan bisa anda kembangkan sendiri sesui dengan fungsional nya..
Moga aja membantu...

Cara Buat Fungsi Scroll Pada Arsip Blog

Untuk membuat arsip blog memiliki fungsi scroll sangat mudah, untuk membuatnya silahkan ikuti langkah-langkah berikut :

Pertama Kita harus membuat dulu Arsip Blog

• Masuk ke blogger
• Klik Tata Letak
• Klik Elemen Halaman
• Tambahkan sebuah elemen halaman=> Tambah elemen Arsip Blog
• Tapi Anda harus pilih gaya Hierarki

Pada Menu Diatas Itu belum terdapat fungsi scroll, untuk membuatnya memiliki fungsi scroll ikuti langkah-langkahnya lagi !

• Setelah itu, klik Edit Html
• Beri tanda centang pada tulisan Expand Widget Template
• Lalu Anda cari kode seperti ini

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>

Anda akan menemukan kode lengkapnya seperti ini :

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:100px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul>
<li expr:class='"archivedate " + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
<span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:loop>
</b:includable>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == "expanded"'>
<a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=close&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'>
<span class='zippy toggle-open'>▼ </span>
</a>
<b:else/>
<a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=open&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'>
<span class='zippy'>
<b:if cond='data:blog.languageDirection == "rtl"'>
◄
<b:else/>
►
</b:if>
</span>
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
</b:widget>

Kode warna merah dan hijau adalah kode yang ditambahkan kedalam script tersebut
Kode warna hijau yang dicetak tebal adalah tinggi dari elemen tadi, silahkan kawan ganti agar sesuai dengan blog kawan
Lalu jangan lupa untuk menyimpannya=> Klik Simpan

Cara buat Read more Plus Judul Artikel

Pada artikel/Postingan yang lalu kita telah membahas cara Cara buat Read More pada setiap postingan atau jika belum tahu,lihat dulu Lihat di Sini,tetapi pada postingan tersebut tidak ada judul artikel pada read more nya.untuk menambahkannya sangat mudah,masuk ke Account blogger dengan ID anda dan ikuti tutorial berikut ini..
Cari kode read more yang ditambahkan dulu atau kode read more yang lama yang saya jelaskan disini.kira-kira bentuknya seperti ini:

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

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

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

<b:else/>

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

<p><data:post.body/>

<a expr:href='data:post.url'><strong>ReadMore...</strong></a></p>

</b:if>

Anda tinggal mengubah kode tersebut menjadi seperti ini:

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

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

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

<b:else/>

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

<p><data:post.body/>

<strong><a expr:href='data:post.url'>ReadMore “<data:post.title/>”  »» </a></strong>

</b:if>

Setelah selesai jangan lupa simpan template anda,lalu coba lihat blog anda.

Cara buat Red More

Read More ini berfungsi untuk mengecilkan artikel di halaman blog, dengan artian blog anda tidak akan tampail memanjang kebawah kalau di buka halam utamanya, berikut caranya :

1. Buka menu Layout kemudian pilih Edit HTML.

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

3. Cari kode berikut di Template blog kamu(kode dimasing2 template berbeda-beda,jadi cari aja yang hampir sama.

<data:post.body/>

Atau seperti ini(sama saja)

Atau begini(sama saja)

4. Kalau sudah ketemu,Hapus kode diatas lalu ganti dengan kode dibawah ini.

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>ReadMore...</strong></a></p>
</b:if>

Pada bagian Read More...... dapat anda ganti dengan tulisan yang lain seperti Baca Selengkapnya

5. Simpan hasil Pengeditan

6. Kemudian pilih menu Setting lalu pilih Formatting

7. Pada kotak Post Template isikan kode berikut:

8. Letakkan abstraksi posting atau artikel yang akan ditampilkan dihalaman utama (sebelum tulisan "Redmore") sebelum kode ini <span class="fullpost"> dan selebihnya letakan sesudah kode <span class="fullpost"> dan sebelum kode </span>

Letakan postingan yang ditampilkan dihalaman utama disini

<span class="fullpost">

Dan selebihnya tulis disini

</span>

Selamat Mencoba

Cara Membuat Marquee (Text Bergerak)

Cara membuat marquee (text bergerak). Mungkin anda pernah melihat sebuah efek text bergerak di salah satu web atau blog yang pernah anda kunjungi. Efek text bergerak tersebut dalam program HTML dinamakan marquee. Berikut adalah sedikit penjelasan tentang marquee dan bagaimana cara membuat marquee.

Apa itu Marquee

Marquee merupakan tag non-standard element HTML yang menyebabkan suatu text / gambar bergerak ke atas, bawah, kanan, atau kiri secara otomatis. Untuk membuat marquee, caranya cukup simple dan mudah sekali. Kita hanya perlu menyisipkan kode HTML untuk membuat marquee, diantara text / gambar yang akan kita buat bergerak. Berikut kode dasar HTML marquee :

<marquee>Text atau gambar disini</marquee>

Dari kode HTML dasar marquee tersebut, jika kita aplikasikan dalam web / blog, maka hasilnya menjadi seperti ini :
Text atau Gambar disini

Marquee Attribute

Untuk lebih memperjelas dalam membuat marquee, berikut beberapa attribute yang sering digunakan dalam tag marquee :

WIDTH = menentukan lebar area marquee, value yang digunakan yaitu berupa angka dalam piksel (px) dan persen (%). Contoh :

Kode HTML Marquee	Hasil
`<marquee width="50%">Text atau Gambar Disini</marquee>`	Text atau Gambar Disini

Jika attribute width tidak digunakan, maka secara default width yang digunakan yaitu 100%. Misalnya marquee disimpan di bagian sidebar yang memiliki width 300px, maka width marquee pun memiliki width 300px.

HEIGHT = menentukan lebar area marquee, value yang digunakan yaitu berupa angka dalam piksel (px) dan persen (%). Contoh :

Kode HTML Marquee	Hasil
`<marquee height="50px">Text atau Gambar Disini</marquee>`	Text atau Gambar Disini

Jika attribute height tidak digunakan, maka secara default height yang digunakan sesuai dengan ukuran font (font-size).

DIRECTION = menentukan arah pergerakan marquee, value yang digunakan yaitu left, right, up, dan down. Contoh :

Kode HTML Marquee	Hasil
`<marquee direction="left">Text atau Gambar Disini</marquee>`	Text atau Gambar Disini
`<marquee direction="right">Text atau Gambar Disini</marquee>`	Text atau Gambar Disini
`<marquee direction="up">Text atau Gambar Disini</marquee>`	Text atau Gambar Disini
`<marquee direction="down">Text atau Gambar Disini</marquee>`	Text atau Gambar Disini

Jika attribute direction tidak digunakan, maka secara default direction yang digunakan adalah left. Khusus untuk direction up dan down, sebaiknya tentukan juga tinggi dari area marquee tsb, yaitu dengan menambahkan attribute height. Hal ini dimaksudkan untuk mengatasi value height secara default untuk attribute direction up dan down yaitu sekitar 150px – 200px (kalo ga salah )

BEHAVIOR = menentukan perilaku pergerakan marquee, value yang digunakan yaitu scroll, slide dan alternate. Contoh :

Kode HTML Marquee	Hasil
`<marquee behavior="scroll">Text atau Gambar Disini</marquee>`	Text atau Gambar Disini
`<marquee behavior="slide">Text atau Gambar Disini</marquee>`	Text atau Gambar Disini
`<marquee behavior="alternate">Text atau Gambar Disini</marquee>`	Text atau Gambar Disini

Jika attribute behavior tidak digunakan, maka secara default value yang digunakan adalah scroll.

SCROLLAMOUNT = menentukan kecepatan pergerakan dalam piksel. Value yang digunakan berupa angka (integer). Contoh :

Kode HTML Marquee	Hasil
`<marquee>Text atau Gambar Disini</marquee> tanpa scrollamount`	Text atau Gambar Disini
`<marquee scrollamount="15">Text atau Gambar Disini</marquee>`	Text atau Gambar Disini
`<marquee scrollamount="50">Text atau Gambar Disini</marquee>`	Text atau Gambar Disini

Jika attribute scrollamount tidak digunakan, maka secara default akan menggunakan value 6.

SCROLLDELAY = menentukan kecepatan pergerakan marquee dalam milisecond. Value yang digunakan berupa angka (integer). Contoh :

Kode HTML Marquee	Hasil
`<marquee>Text atau Gambar Disini</marquee> tanpa scrolldelay`	Text atau Gambar Disini
`<marquee scrolldelay="300">Text atau Gambar Disini</marquee>`	Text atau Gambar Disini
`<marquee scrollamount="600">Text atau Gambar Disini</marquee>`	Text atau Gambar Disini

Jika attribute scrolldelay tidak digunakan, maka secara default akan menggunakan value 85.

BGCOLOR = menentukan warna background dari marquee. Value yang digunakan berupa nilai warna dalam hexa atau text.

Kode HTML Marquee	Hasil
`<marquee>Text atau Gambar Disini</marquee> tanpa bgcolor`	Text atau Gambar Disini
`<marquee bgcolor="green">Text atau Gambar Disini</marquee>`	Text atau Gambar Disini

Secara default, value dari attribute bgcolor yaitu none (tanpa warna).

LOOP = menentukan jumlah pengulangan marquee. Secara default jika attribute ini tidak digunakan, maka marquee akan melakukan pengulangan secara terus menerus.

Kode HTML Marquee	Hasil
`<marquee loop="2">Text atau Gambar Disini</marquee>`	Text atau Gambar Disini

salah satu masalah yang sering dialami ketika menggunakan attribute loop yaitu text / gambar yang ada di dalam marquee akan menghilang setelah pengulangan selesai (seperti contoh diatas). Untuk mengatasi hal ini, jangan lupa setiap kali menggunakan attribute loop sebaiknya sertakan juga attribute behavior dengan value slide atau alternate. Contoh :

Kode HTML Marquee	Hasil
`<marquee loop="2" behavior="alternate">Text atau Gambar Disini</marquee>`	Text atau Gambar Disini
`<marquee loop="2" behavior="slide">Text atau Gambar Disini</marquee>`	Text atau Gambar Disini

HSPACE dan VSPACE = menentukan spasi dari kiri dan kanan (hspace) dan spasi dari atas dan bawah (vspace). Value dalam angka (integer). Contoh :

Kode HTML Marquee	Hasil
`Paragraph <marquee hspace="10" bgcolor="yellow">Ini contoh hspace</marquee> Paragraph`	Paragraph Text atau Gambar DisiniParagraph
`Paragraph <marquee vspace="30" bgcolor="yellow">ini contoh vspace</marquee> Paragraph`	Paragraph Text atau Gambar DisiniParagraph

Nah…demikianlah pembahasan lengkap tentang HTML Marquee berikut cara membuat marquee. Semoga bermanfaat dan silahkan dicoba

Cara mengganti Warna Background

Warna default template blogger memang sangat terbatas. Ada kalanya Anda menginginkan warna ynag spesifik. Mungkin karena warna ini terkait dengan warna brand tertentu, atau Anda memang punya warna yang mengingatkan pada Anda . Misalnya #660989.

Sign in ke blogger
Di halaman Dashboard, klik Layout
Klik Edit HTML.
Cari kode berikut...

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Ganti $bg color dengan kode warna. Bentuk kode warna itu seperti #cccccc. Akan lebih baik untuk mencari kode warna anda bisa menggunakan software grafis: adobe photoshop, atau macromedia Fireworks

Setelah mendapat warna dan kode warna sesuai dengan keinginan Anda,
Klik Save Templates

Cara Mudah Mengganti Warna Dan Font Template

Sebenarnya banyak cara untuk membuat sebuah blog terlihat unik. Salah satu cara yaitu mengganti warna dan font template.

Cara ini sangat mudah karena fasilitas ini sudah disediakan oleh blogger jadi kita tinggal atur saja . Bagi yang ingin mencoba, silahkan ikuti langkah-langkah dibawah ini:

1. Login ke Blogger. Klik menu Design -> Template Designer -> Advanced. Disana terdapat beberapa elemen yang dapat Anda atur seperti:

Page Background Color: Mengganti warna background template yang diluar
Main Background Color: Mengganti warna background template yang didalam
Text Color: Mengganti warna teks postingan/ artikel
Blog Title Color : Mengganti warna judul blog
Blog Description Color : Mengganti warna deskripsi blog
Post Title Color: Mengganti warna judul postingan
Date Header Color: Mengganti warna teks tanggal
Border Color: Mengganti warna garis tepi template
Sidebar Title Color: Mengganti warna judul pada kolom sidebar misalnya teks Blog Archive, Blogroll, Labels, dan lain-lain
Link Color: Mengganti warna teks yang dipasang link
Visited Link Color: Mengganti warna teks link ketika pengunjung mengarahkan kursor pada linknya
Sidebar Link Color: Mengganti warna teks yang dipasang link pada kolom sidebar
Sidebar Visited Link Color: Mengganti warna teks link ketika pengunjung mengarahkan kursor pada link yang terletak pada kolom sidebar
Text Font: Mengganti bentuk huruf/ teks pada postingan
Sidebar Title Font: Mengganti bentuk huruf judul pada kolom sidebar
Blog Title Font: Mengganti bentuk huruf judul blog
Blog Description Font: Mengganti bentuk huruf deskripsi blog
Post Footer Font: Mengganti bentuk huruf footer pada postingan. Misalnya: Diposkan oleh, Posted by

Itulah beberapa elemen dasar yang paling sering ditemukan dalam template blogger. Setiap template memiliki elemen yang berbeda-beda. Silahkan dicoba sendiri dengan menggonta-ganti warnanya.

2. Jika sudah tinggal klik Apply to Blog maka warna template akan berubah sesuai dengan keinginan Anda. Lalu klik View Blog untuk melihatnya.

Jika Anda ingin mengembalikan template ke bentuk semula. Tinggal klik Clear advanced changes to ... lalu klik Apply to Blog. Selesai.

Setelah saya coba ternyata ada sebagian template modern yang tidak bisa menggunakan fasilitas ini. Jadi jangan panik jika template yang Anda gunakan ternyata tidak mendukung fasilitas ini.

Cara menambah elemen halaman diatas header

Tutorial kali ini saya akan mengejak anda untuk menambah elemen halaman diatas Header. Untuk menambahkan elemen halaman diatas header tidak ada yang susah seperti trik-trik sebelumnya yang sudah dibahas. yang saya maksut menambah elemen halaman diatas header adalah seperti ini:

jika anda ingin menambahkan elemen diatas header misalnya untuk meletakkan tap menu diatas header seperti pada blog ini ,langkah-langkah nya adalah sebagai berikut:

Login ke blog anda
Pilih Rancangan >Tata letak/Layout >Edit HTML
Expand Templete Widget.
Cari kode ]]></b:skin> gunakan tombol F3 untuk memudahkan pencarian
Jika sudah Copas kode berikut dan letakan diatas kode ]]></b:skin>
Kemudian cari kode <div id='header-wrapper'> atau <div class='header-outer'>
Copas kode berikut diatas salah satu kode diatas.

<div id="gadget_header"> <b:section class='header' id='gadgetheader' preferred='yes'/> </div>
8. Simpan Templete

Lihat hasilnya, klik pada Elemen halaman jika ada kolom bertulisan edd gadget seperti ini dibawah ini berarti anda berhasil menambahkan elemen halaman di atas header.

Bimantara