Selasa, 24 Mei 2011

Membuat Daftar Link Marquee

Halo sobat blogger semua, Dalam Postingan Kali ini saya akan
Membahas cara Membuat Daftar link Marquee Yang Rapi.....!!


Memang Kita bisa buat Daftar Link marquee Tapi setelah saya
Coba di sidebar saya ya ampun................berantakan banget...hasilnya..

Dan biasa pula saya blogging di blog para blogger, dan melihat daftar
Link banner para sobat blogger, waduhh kacau......berantakan bukan

Menghina, tapi saya juga sempat terjadi seperti itu saat membuat marquee
daftar banner para sobat blogger....

Nah maka dari itu disini, Di postingan kali ini saya akan memberikan
kode marquee yang bener,....biar Dafatar Banner Sobat Blogger Semua

Rapi dan terlihat Indah....dI Pandang Mata.....
OKe untuk cara nya silahkan ikuti Langkah2 nya


1. Log in ke blog anda

2. Klik Rancangan / Layout

3. Klik Tambah gadget atau Add gadget ( sama saja )

4. Klik Html / Javascript..

Lalu masukan kode ini,


<center><marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="8" direction="up" width="100%" height="200" align="center">


<a href="Link sahabat" target="_blank"/>Nama Link sahabat</a><br /><br />


<a href="Link sahabat" target="_blank"/>Nama Link sahabat</a><br /><br />


<a href="Link sahabat" target="_blank"/>Nama Link sahabat</a><br /><br />


<a href="Link sahabat" target="_blank"/>Nama Link sahabat</a><br /><br />


<a href="Link sahabat" target="_blank"/>Nama Link sahabat</a><br /><br />


<a href="Link sahabat" target="_blank"/>Nama Link sahabat</a><br /><br />


<a href="Link sahabat" target="_blank"/>Nama Link sahabat</a><br /><br />


</marquee></center>





Sebelum di masukan silahkan ganti kode-kode berwarna Biru dengan link atau URL,
sedangkan kode Warna Merah dengan Nama URL atau Link tadi.


Jika berbentuk Banner,


Caranya, sama saja seperti di atas, silahkan lihat contoh di bawah ini, agar anda lebih mengerti,


<center><marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="8" direction="up" width="100%" height="200" align="center">

<a href="http://www.blog-santai.com/" target="_blank"><img alt="blog-santai, Segitiga bermuda, Info Sains dan Teknologi" border="0" src="http://i945.photobucket.com/albums/ad291/zeromania/blogsantai1.gif" /></a><br /><br />

<a href="http://sweetblinx.blogspot.com/" target="_blank"><img alt="Seto Enggar T" border="0" src="http://sites.google.com/site/sweetblinx/blinx/logo.gif" /></a><br /><br />

</marquee></center>


Gimana Udah ngerti Kan.....

kalau udah, sekian dari saya semoga bermanfaat bagi Anda semua..........!!!
»»  Baca Selengkapnya...
Diposting oleh ruang solusi di 8:08 AM 0 komentar

Meta keyword

Meta Keyword Sangat Berguna untuk menaikkan Posisi blog anda di serach engine. Berikut ini cara menambah Meta Keyword jenis ini dalam bloga anda. Caranya Letakkan kode dibawah ini diatas <head> :

http://blogmagis.com/wp-content/uploads/2010/05/meta-keywords.jpg

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:section id='meta1' showaddelement='no'>
<b:widget id='Blog2' locked='false' title='Blog Posts' type='Blog'>
<b:includable id='nextprev'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='post' var='post'/>
<b:includable id='status-message'/>
<b:includable id='comment-form' var='post'/>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='postQuickEdit' var='post'/>
<b:includable id='main' var='top'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
&lt;meta name=&quot;keywords&quot; content=&quot;<b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop>&quot; /&gt;
</b:if>
</b:loop>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='feedLinks'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='comments' var='post'/>
</b:widget>
</b:section>
</b:if>

Lalu Simpan Template....Semoga bermanfaat....
»»  Baca Selengkapnya...
Diposting oleh ruang solusi di 12:11 AM 0 komentar

Senin, 23 Mei 2011

Membuat Menu di Blog

Caranya silahkan arahkan mouse sobat ke deretan menu yang ada pada halaman demo lalu klik untuk membuka submenu yang ada di dalamnya dan untuk menutupnya kembali sobat klik sekali lagi ke menu yang ingin di tutup, silahkan mencoba :

Bagaimana sudah di coba belum? kalau belum, coba dulu deh biar agak seru pembahasannya! Nah kalau sudah, bagaimana tanggapannya, seru tidak? kalau seru silahkan sobat baca artikel ini sampai tuntas (kaya adu banteng aja pake acara seru apa kagak), nah kalau sekiranya tidak seru, ya mending cari topik lain biar semangat bacanya.

Oke biar tidak terlalu ngelantur, kita langsung ke topik bahasan. Untuk membuat menu seperti di atas, kita perlu memasang kode JavaScript serta stylesheet CSS pada template blog kita, akan tetapi karena di blogger terdapat dua pemakaian template yaitu template klasik dan template baru, maka tentu saja dalam membuat menu dropdown tersebut caranya berbeda pula. Oleh karena itu, pembahasannya pun akan saya bagi dua juga yaitu untuk template klasik serta untuk template baru. Akan tetapi karena pembahasannya terlalu panjang, maka kali ini akan saya bahas untuk template baru saja, dan untuk template klasik akan saya bahas pada postingan berikutnya.

Untuk membuatnya silahkan ikuti langkah-langkah berikut ini :


  • Langkah pertama yaitu membuat dua buah tombol untuk background dari tulisan menu, sebaiknya warna ataupun style nya di bedakan, ini dimaksudkan agar antara menu utama dengan sub menu akan terlihat perbedaannya. sebagai contoh lihat gambar tombol di bawah ini :









  • Langkah kedua adalah menyimpan file gambar tombol tersebut pada hosting untuk menyimpan gambar, bisa di blogger sendiri atau dengan hosting lain. Agar lebih terarah, saya ambil contoh menggunakan hosting lain yaitu www.photobucket.com. Untuk cara upload gambar ke situs ini sudah saya terangkan pada postingan terdahulu, jika ingin baca - baca lagi silahkan klik di sini. Saya ambil contoh kedua tombol tadi sudah saya upload dan mempunyai URL address sebagai berikut :

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

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



  • Langkah ketiga adalah memasukan kode JavaScript serta stylesheet CSS pada kode template blog, silahkan ikuti langkah-langkahnya :



    1. Sign in di blogger.com 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 <title><data:blog.pageTitle/></title>
      8. <script> var last_expanded = ''; function showHide(id) { var obj = document.getElementById(id); var status = obj.className; if (status == 'hide') { if (last_expanded != '') { var last_obj = document.getElementById(last_expanded); last_obj.className = 'hide'; } obj.className = 'show'; last_expanded = id; } else { obj.className = 'hide'; } } </script>
    8. Masukan kode berikut di dalam stylesheet CSS, atau untuk lebih mudah silahkan cari kode ]]></b:skin>, lalu simpan kode berkut di atasnya
      9. .ogah{ background-image:url('http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif'); text-align:center; width:90%; font-family: georgia, Helvetica, sans-serif; padding-left:20px; padding-right:20px; padding-top:10px; padding-bottom: 10px; display:block; text-decoration: none; color: #000000; height: 20px; } .ogahniye{ background-image: url('http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif'); text-align:center; width:90%; font-family: georgia, Helvetica, sans-serif; padding-left:20px; padding-right:20px; padding-top:13px; padding-bottom: 10px; display:block; text-decoration: none; color: #000000; height: 20px; } .hide{ display: none; } .show{ display: block; } a{cursor: hand}
    9. Klik tombol SAVE TEMPLATE
      10. Sedikit unek-unek, kode-kode diatas tentunya tidak seratus persen mutlak harus begitu, tapi bisa di sesuaikan dengan kondisi blog sobat.Contoh : width:90%; --> angka "90" artinya lebar dari gambar yang akan tampil sebesar 90%, nilai ini bisa diganti dan di sesuaikan dengan blog sobat, misal di ganti menjadi "80" atau berapa saja.
    10. Klik menu Page Elements
    11. Klik tulisan Add a Page Element
    12. Klik tulisan ADD TO BLOG di bawah tulisan HTML/JavaScript
    13. Masukan kode berikut :
      14. <a class="ogah" onclick="showHide('ogahku1')">Menu utama 1</a> <div id="ogahku1" class="hide"> <a href="#" class="ogahniye">Link 1 di sini</a>> <a href="#" class="ogahniye">Link 2 di sini</a> <a href="#" class="ogahniye">Link 3 di sini</a> <a href="#" class="ogahniye">Link 4 di sini</a> </div> <a class="ogah" onclick="showHide('ogahku2')">Menu utama 2 </a> <div id="ogahku2" class="hide"> <a href="#" class="ogahniye">Link 1 di sini</a> <a href="#" class="ogahniye">Link 2 di sini</a> <a href="#" class="ogahniye">Link 3 di sini</a> <a href="#" class="ogahniye">Link 4 di sini</a> </div> <a class="ogah" onclick="showHide('ogahku3')">Menu utama 3 </a> <div id="ogahku3" class="hide"> <a href="#" class="ogahniye">Link 1 di sini</a> <a href="#" class="ogahniye">Link 2 di sini</a> <a href="#" class="ogahniye">Link 3 di sini</a> <a href="#" class="ogahniye">Link 4 di sini</a> </div> <a class="ogah" onclick="showHide('ogahku4')">Menu utama 4 </a> <div id="ogahku4" class="hide"> <a href="#" class="ogahniye">Link 1 di sini</a> <a href="#" class="ogahniye">Link 2 di sini</a> <a href="#" class="ogahniye">Link 3 di sini</a> <a href="#" class="ogahniye">Link 4 di sini</a> </div>
    14. Klik tombol SAVE CHANGES
    15. Klik pada element yang baru di buat, tahan lalu pindahkan di tempat yang di sukai ( di drag & drop )
    16. Klik tombol SAVE
    17. Selesai



    Keterangan : pada kode diatas ada tanda pagar (#), tanda itu harus di ganti dengan URL yang mau di pasang.


    Jika di lihat dari reaksi menu ini yang bersifat membuka dan menekan isi yang ada di bawahnya, maka menu ini hanya cocok di simpan pada sidebar dan tidak cocok apabila di simpan pada header.


    Mudah-mudahan dapat di mengerti. Selamat mencoba !
    »»  Baca Selengkapnya...
    Diposting oleh ruang solusi di 10:38 PM 0 komentar

    Tentang Avail

    produk perawatan kesehatan berkualitas, khususnya untuk wanita. Avail menghadirkan produk FC Bio Sanitary Pad , dan masih banyak produk lain lagi di masa depan. Produk – produk berkualitas tersebut adalah khusus dirancang untuk Anda dalam memulai bisnis di Avail.
    Avail adalah sebuah platform bagi Anda dalam mencapai tujuan – tujuan Anda . Keyakinan dari Avail adalah bahwa “ tindakan yang secara besar -besaran dan berkonsekuensi dengan ketekunan dan rasa fleksibilatas dalam mengejar tujuan , pada akhirnya akan memberikan kepada Anda apa yang Anda inginkan, tetapi Anda harus membuang segala perasaan yang menyatakan bahwa segala sesuatu “ tidak ada solusinya ”. Avail akan selalu memberikan kerjasama penuh dan akan bekerja bersama – sama dengan Anda agar supaya Anda bisa menjadi orang yang lebih baik di masa depan.
    Berbisnis di Avail 100% tanpa resiko
    - Bermanfaat bagi kesehatan
    - Berkualitas dan produk dijamin dengan perlindungan asuransi Rp. 8 Milyar
    - Produk wajib
    - Harga Terjangkau
    - Kegunaan harian
    - Peluang pasar dengan permintaan yang sangat besar
    - Ada Repeat Order
    - Mudah untuk disimpan
    - Produk tidak mudah rusak
    Tiada sebab,Tiada alasan,dan tidak seorangpun MERNGGUT IMPIAN SAYA
    Ceria....Cemerlang.....Kita Raih Bersama Avil....
    Avail....no.1        Avail.....no.1    Avail.....no.1
    »»  Baca Selengkapnya...
    Diposting oleh ruang solusi di 5:37 PM 0 komentar

    Paket Promo

    Promo VIP & 4+2



    Nb. Paket +2 (@Rp 25.000) di paket VIP tidak untuk produk FC Bio Sanitary Pad (Pantiliner/Day/Night)
     Mengapa Paket VIP?
    - Paling Mudah dan cepat untuk memulai bisnis Avail, karena stock selalu tersedia.
    - Memaksimalkan keuntungan (± 65%)
     
     
    Promo Wisata

    »»  Baca Selengkapnya...
    Diposting oleh ruang solusi di 5:06 PM 0 komentar
    Langganan: Postingan (Atom)