Tips Menghilangkan Border Image

Bagi sobat yang gemar memasang gambar ataupun emoticons pada postingan, sering kali menghadapi sedikit ganjalan yaitu gambar yang di pasang mempunyai border/bingkai gambar berbentuk kotak. nah bagi sobat yang ingin menghilangkan border ini, saya ada sedikit tips untuk menghilangkannya.

Contoh gambar yang mempunyai border :





Atau seperti ini :





Bandingkan dengan yang ini :





Atau seperti ini :





Lebih asyik bukan jika gambar yang kita posting tidak mempunyai border/bingkai. Cara untuk menghilangkan border adalah sobat harus membiasakan diri menambahkan kode border="0" pada setiap gambar yang di pasang. Sebagai contoh saya mempunyai alamat gambar seperti ini :

http://amen24.googlepages.com/face5.gif

Untuk membuat gambar, bisakan menyisipkan kode border="0", contohnya :



Bagaimana jika sobat sudah menambahkan kode border="0", akan tetapi gambar masih tetap mempunyai border/kotak. Nah untuk kejadian yang satu ini, maka style sheet css sobat ada yang harus di modifikasi. Silahkan ikuti langkah-langkah berikut ini!

Untuk yang memakai template klasik :

1. Sign in di blogger


2. Klik menu Template


3. Klik menu Edit HTML


4. Copy seluruh kode HTML template sobat, lalu paste pada notepad, kemudian save untuk backup apabila ada kesalahan editting


5. Cari kode berikut pada css sobat (ini contoh saja):



.post img { <-- perhatikan kode ini
padding:4px;
border:1px solid $bordercolor; <-- yang di rubah kode yg ini
}


tentunya setiap template berbeda-beda, akan tetapi biasanya selalu ada kode .post img

6. Rubah angka 1 (satu) menjadi angka 0 (nol), sehingga kodenya menjadi seperti ini :


.post img {
padding:4px;
border:0px solid $bordercolor;
}


7. klik tombol Simpan Perubahan Template

8. Selesai.




Untuk yang memakai template baru :

1. Sign in


2. Klik menu Layout


3. Klik menu Edit HTML


4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data


5. Klik kotak kecil di samping tulisan Expand Template Widget


6. Tunggu beberapa saat sampai proses selesai



7. Cari kode berikut pada css sobat (ini contoh saja):



.post img { <-- perhatikan kode ini
padding:4px;
border:1px solid $bordercolor; <-- yang di rubah kode yg ini
}


tentunya setiap template berbeda-beda, akan tetapi biasanya selalu ada kode .post img

8. Rubah angka 1 (satu) menjadi angka 0 (nol), sehingga kodenya menjadi seperti ini :


.post img {
padding:4px;
border:0px solid $bordercolor;
}

9. Klik tombol SIMPAN TEMPLATE


10. Selesai.

Hilangkan Tulisan subcribe

Menyikapi pertanyaan dari beberapa sobat baik itu melalui email ataupun shoutbox mengenai bagaimana cara menghilangkan tulisan Subcribe to : Post (atom) atau Berlangganan : post (atom) yang berada di bagian bawah setiap postingan artikel yang di rasa sedikit menggangu dan mengurangi kerapihan dari sebuah artikel. Apakah itu bisa di lakukan? jawabnya bisa saja atau mau dipindah ke sidebar pun bisa kalau kita mau.

Untuk menghapus tulisan Subcribe to : post (atom) silahkan ikuti langkah-langkah berikut ini :

1. Sign in di blogger



2. Klik menu Layout



3. Klik menu Edit HTML



4. Klik tulisan Download Full Template, trus save dulu untuk backup data



5. Beri tanda centang pada kotak kecil di samping tulisan Expand Widget Template, jangan lupa yang ini.



6. Cari kode seperti di bawah ini, kemudian hapus/delete kode tersebut




<div class="'feed-links'"> <data:feedlinksmsg/> <b:loop values="'data:links'" var="'f'"> <a class="'feed-link'" href="'data:f.url'" type="'data:f.mimeType'" target="'_blank'"><data:f.name/> (<data:f.feedtype/>)</a> </b:loop> </div>




7. Klik tombol SIMPAN TEMPLATE



8. Selesai, silahkan lihat hasilnya

Mengenal perintah IFRAME

Untuk tutorial kali ini saya ingin sedikit mengulas tentang salah satu fungsi kode HTML yakni perintah

Beberapa atribut yang sering di pasang dalam iframe adalah :

ALIGN="left/right" --> Untuk mengatur posisi iframe

WIDTH="lebar" -->: Mengatur lebar IFRAME dalam pixel atau persen

HEIGHT="tinggi" --> Untuk mengatur tinggi dari iframe dalam pixel atau persen

FRAMEBORDER="garis pembatas" --> Untuk memberi garis pembatas

SCROLLING="auto/yes/no" --> Untuk memberi atau tidak memberi scrolling pada iframe

SRC="url yg ingin di tampilkan" --> alamat sumber yang ingin di tampilkan pada iframe

Agar lebih mudah untuk di fahami, maka saya akan memberikan dua contoh dari fungsi perintah iframe. Misalkan alamat sumber yang ingin saya tampilkan adalah isi dari blog saya yang lain yang beralamat di http://unique-r1-8.blogspot.com/, lebar yang ingin saya gunakan adalah sebesar 500 pixel, dan tinggi sebesar 300 pixel.

IFRAME yang tidak mempunyai garis pembatas dan tidak mempunyai fasilitas scrolling

contoh kode yang di pasang seperti ini :

hasilnya seperti ini :

IFRAME yang mempunyai garis pembatas dan mempunyai fasilitas scrolling

contoh kode yang di pasang seperti ini :

hasilnya seperti ini :























Bagaimana sobat, tentunya dengan iframe kita dapat mengintip isi dari blog milik orang lain pada blog milik kita. Akan tetapi jangan lupa untuk meminta ijin terlebih dahulu kepada pemiliknya apabila tidak ingin kena damprat sang pemilik blog.

Menghilangkan Icon Obeng dan Tang / Quick edit Blogger

Menanggapi pertanyaan dari beberapa blogger… hehehe… kang Rohman serasa jadi konsultan blogger saja ya kalau posting biasanya pake kata-kata tersebut soalnya “ Your Questions is my inspiration” pertanyaan anda adalah inspirasiku. Jadi rahasia kenapa blog ini masih bisa bertahan sampai sekarang adalah karena masih ada yang bertanya ke kang Rohman. So, tentu saja ide untuk posting selalu ada. Eh..eh.. ko…gitu sich.. la ko jadi ngelantur nih, kembali ke judul posting ini ah.

Apa sih maksud dari judul posting ini, sepertinya agak aneh? begini nih teman-teman, jika kita sedang mengedit template dan melihat hasilnya maka pada sudut-sudut element akan terlihat icon bergambar obeng dan tang. berikut contoh screenshotnya :

Icon tersebut di sebut juga dengan icon Quick Edit atau dengan kata lain untuk mengedit secara cepat. Fungsinya jika kita ingin melakukan editing terhadap elemen tersebut tinggal klik saja icon nya dan kita bisa langsung mengeditnya. Icon tersebut sebenarnya hanya bisa di lihat apabila kita sedang login ke blogger saja, sedangkan pengunjung yang lain tidak bisa melihat icon tersebut.

Namun ternyata ada beberapa blogger yang tidak suka dengan kehadiran icon tersebut dan ingin menghapusnya. Apakah kita bisa menghapus icon tersebut? Jawabannya tentu saja bisa, dan sangatlah gampang karena kita hanya melakukan perintah agar icon itu tidak di munculkan dengan hanya manambahkan sedikit kode pada kode CSS template kita. Ingin tahu kodenya seperti apa, nih ini dia kodenya, coba pasang saja di Style Sheet CSS anda :

.quickedit{
display:none;
}

Mudah sekali bukan? atau masih bingung. Ok deh, ini dia cara lengkapnya :

1. Login ke blogger dengan ID anda tentunya.
2. Klik Tata Letak.
3. Klik tab Edit HTML.
4. Cari kode seperti ini :

   ]]>

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

   .quickedit{
   display:none;
   }

6. Klik tombol Simpan template.

7. Selesai.

Tips Menghilangkan Pesan Pencarian Blogger

Jika anda melakukan pencarian di blog, baik itu melalui mesin pencari yang di pasang pada blog tersebut atau melalui label ataupun arsip blog, maka biasanya di atas halaman pencarian akan muncul pesan seperti ini :

pesan-pencarian

Rupanya ada blogger yang tidak suka dengan kehadiran pesan ini dan menanyakan ke kang Rohman, apakah pesan ini bisa di hilangkan atau tidak? jawabannya tentu saja bisa, dan sangat mudah sekali. anda cukup menambahkan sedikit kode pada style sheet CSS anda. Kodenya seperti ini :

.status-msg-wrap{
display:none;
}

Kalau anda sudah memasang kode tersebut, niscaya pesan pencarian yang biasanya muncul akan malu-malu untuk menampakkan diri lagi. Aihhh.. kang Rohman suka bingungin dech, kasih tau donk cara lengkapnya bagaimana, masa gitu doank? hihihi.. bingung yach, ya sudah, saya kasih cara lengkapnya. Berikut langkah-langkah untuk menghilangkan pesan pencarian di blogger :

1. Sign in ke blogger dengan ID anda.
2. Klik Tata Letak.
3. Klik tab Edit HTML.
4. Klik tulisan Download Template Lengkap. silahkan di backup dulu biar aman.
5. Cari kode seperti ini ]]>
6. simpan kode berikut di atas kode yang tadi :


.status-msg-wrap{
display:none;
}


7. Klik tombol Simpan Template.
8.

Selesai.

Menyimpan Widget Persis Dibawah header

Beberapa hari yang lalu ada bertanya “bagaimana cara menyimpan widget persis di bawah header?”. Memang pada umumnya pada template blogger tidak bisa untuk menyimpan widget atau elemen langsung di bawah header, biasanya hanya bisa menyimpan di atas elemen post namun tentu saja lebar dari elemen tersebut hanya selebar elemen post. Apakah ada cara agar kita bisa menyimpan widget atau elemen persis di bawah header? tentu saja bisa dan bahkan banyak cara untuk melakukan ini. Namun karena keterbatasan waktu dan tempat maka tidak akan kang rohman tulis semua di sini, kang rohman akan mencoba menerangkan dengan satu cara (soalnya sudah siang nih, mau kerja). Ingin tahu seperti apa caranya, yuk kita lanjut saja.

Silahkan ikuti langkah-langkah berikut :

1. Login ke blogger dengan id anda.
2. Klik Tata Letak.

3. Klik tab Elemen Halaman, lihat pada struktur layout template anda. Biasanya bagian header akan seperti ini :

   

4. Sekarang kita akan memodifikasinya, let’s go to party.

5. Klik Tab Edit HTML.

6. Klik Tulisan Download Template Lengkap, silahkan di backup dulu (penting).

7. Cari Kode yang mirip seperti ini :

8. Hapus kode di atas dan ganti dengan kode di bawah ini :

9. Klik tombol Simpan template. Tunggu beberapa saat sampai template anda tersimpan.

10. Klik tab Elemen halaman. Dan sekarang layout template anda akan menjadi seperti ini :

    

11. Sekarang anda bisa menambahkan berbagai elemen langsung di bawah header.
12. Untuk menambah elemen halaman tinggal klik Tambah Elemen Halaman. Silahkan tambahkan apa yang anda mau, apabila sudah di tambahkan tinggal geser elemen yang baru di buat tadi ke bawah elemen header.
13. Klik Tombol SIMPAN yang ada di bagian atas.
14. Selesai, sekarang tinggal lihat hasilnya.

Free Logo Maker

Sebuah informasi ringan namun mudah-mudahan bermanfaat. Bagi anda yang ingin membuat sebuah logo yang unik untuk blognya, namun sedikit gaptek terhadap software-software grafik design, anda tidak usah berbingung ria dan larut dalam kesedihan yang amat sangat mendalam karena di alam cyber sana banyak sekali situs alias website yang menyediakan tool pembuat logo atau istilah kerennya yaitu Logo Maker Tool (hihihi.. ko segala istilah yang berbau bahasa bule di bilang keren ya. Padahal belum tentu lho!) yang di persembahkan untuk anda secara gratiss..tiss..tiss alias tidak bayar dhenk. Satu diantara ribuan website penyedia layanan ini yang perbah kang rohman jajal kemampuanya yaitu situs yang beralamat di http://www.logoease.com. Logo sederhana yang pernah saya coba adalah seperti gambar berikut ini :





Buat anda yang ingin mencoba, silahkan daftar dulu sebelum membuat sebuah logo, karena itu salah satu syarat yang dia minta. Proses cepat dan tidak rumit. Jika penasaran, coba saja kunjungi http://www.logoease.com.

Buat Frame Iklan

Sobat fajar widodo rupanya tertarik untuk mengetahui bagaimana cara membuat frame seperti frame iklan yang ada di blog ini. Apakah sobat juga sama tertarik untuk membuat frame tersebut? baca saja sampai akhir, saya akan memberitahu caranya.


Untuk membuat frame seperti itu banyak cara yang bisa di tempuh, diantaranya bisa menggunakan kode HTML

atau bisa juga dengan menggunakan kode HTML . Langkah yang harus di persiapkan adalah tentukan dahulu lebar, warna latar belakang, warna huruf, jenis huruf, besarnya huruf, serta hal lain yang sekiranya berhubungan. Agar lebih mudah untuk di mengerti, saya buatkan sebuah contoh frame sebagai berikut:

Belajar membuat website »
Membuat website itu sangatlah mudah, dapatkan panduannya di sini ! ditunjang berbagai software & full support. daftar segera !!
http://www.resepbisnis.com/?id=rohman



Kode asli dari frame di atas adalah sebagai berikut :

Belajar membuat website »

Membuat website itu sangatlah mudah, dapatkan panduannya di sini ! ditunjang berbagai software & full support. daftar segera !!

http://www.resepbisnis.com/?id=rohman

Jika saya membuat spesifikasi pada frame iklan di atas, maka akan seperti ini :

warna pembatas : merah
style dari pembatas : garis putus-putus dengan lebar 3 pixel
jarak hurup dengan batas terluar : 10 pixel
lebar frame: 330 pixel
posisi hurup : rata kiri
warna hurup : putih
warna latar belakang : biru
warna link : kuning


Bagaimana sudah agak faham? kemungkinan besar masih bingung deh. Agar lebih mudah cobalah sobat otak-atik sendiri kode di atas, saya sedikit malas untuk menerangkan secara terperinci dari kode yang saya buat.

ooo... iya lupa... sobat fajar widodo lebih spesifik menanyakan kode untuk membuat garis putus-putus. Untuk garis putus-putus perintahnya seperti ini :

border : 3px dashed red;

3px menandakan lebar dari garis, dashed berarti garis putus-putus, red adalah kode warna merah.

Ada juga style yang lain yaitu berupa garis berbentuk garis yang solid ada juga yang berupa titik-titik.

border : 3px dashed red; --> untuk garis solid
border : 3px dotted red; --> untuk garis berupa titik-titik


Sepertinya cukup dulu deh, silahkan untuk bereksperimen menciptakan variasi-variasi baru dari bentuk frame. Salam !

Membuat Banner Bertaburan

Pernah melihat blog yang terdapat banner bertaburan di halamannya? ingin mengetahui cara membuatnya? jika tertarik silahkan baca artikel di bawah ini sampai selesai !. Untuk membuat banner bertaburan, yang akan saya gunakan adalah memakai perintah marquee. Tentang marquee sudah saya bahas pada postingan terdahulu dan kali ini akan saya bahas variasi lain dari perintah marquee ini. Agar banner yang di gunakan lebih menarik untuk di lihat, maka sebaiknya kita menggunakan banner yang berisifat animasi. Animasi ini bisa berupa putaran, terbalik atau mungkin dalam bentuk terbang. Untuk membuat animasi, sobat bisa menggunakan berbagai software pembuat animasi semisal Ulead cool 3D ataupun program yang lainnya. Sedikit kabar gembira, bagi sobat yang belum mempunyai software Ulead cool 3D sobat bisa mendowload secara gratis di blog miliknya bang iwan yaitu di http://free7.blogspot.com. Bagi sobat yang sudah terbiasa dengan program-program animasi, tentu tidak akan menemui masalah dalam hal membuat banner animasi, akan tetapi bagi sobat yang sama seperti saya ini yakni masih banyak bingungnya kalau membuat animasi maka ada jalan lain yakni kita bisa mencari situs-situs penyedia animasi. Bagaimana cara mencarinya? ini hal yang mudah, pada akhir artikel ini saya sediakan search engine dari google. Tugas sobat hanya mengisi kotak isian dengan keyword yang di inginkan, misal : free animation, animasi gratis, Free banner animation atau keyword lain yang sekiranya bisa memunculkan berbagai situs penyedia animasi gratis, kemudian setelah kotak isian di tulis silahkan klik tombol search maka nanti akan keluar ratusan atau bahkan ribuan situs penyedia animasi, silahkan sobat cari sendiri mana yang cocok. OK kita kembali ke.....topik bahasan tentunya. Sebagai contoh saya telah mendapatkan sebuah file banner animasi, tugas selanjutnya adalah mengupload file tersebut ke hosting penyimpan gambar. Ambil contoh, saya telah mengupload banner animasi di google pages dan mempunyai alamat seperti ini : http://amen24.googlepages.com/face5.gif Untuk membuat gambar ini bisa tampil kodenya seperti ini : hasilnya seperti ini : Atau sobat bisa memperbesar atau memperkecil animasi ini dengan mengatur tinggi serta lebar gambar, contoh di perbesar : hasilnya akan seperti ini : contoh di perkecil : hasilnya akan seperti ini : Langkah selanjutnya adalah membuat variasi perintah marquee, saya berikan contoh perintahnya seperti ini : Agar lebih faham, saya bahas sedikit tentang fungsi-fungsi dari atribut yang saya berikan : behavior="scroll" --> behavior atribut untuk mengatur perilaku gerakan. scroll perilaku yang di pilih yaitu teks atau image bergerak berputar/berulang-ulang. direction="down" --> direction atribut untuk mengatur arah gerakan teks/image. down arah yang di pilih adalah ke bawah, sobat bisa merubah arah ini sesuai keinginan, tinggal ganti dengan Up untuk keatas, Left untuk ke pinggir dan right untuk ke kanan. style="position: absolute; right: 1100px; top: 52px; width: 100px; height: 900px;" --> position: absolute; posisi yang di pilih adalah absolut atau tersendiri. right: 1100px; posisi terletak sebesar 1100 pixel diukur dari sebelah kanan layar. top: 52px; posisi juga terletak pada 52 pixel di ukur dari sebelah atas layar. width: 100px; lebar untuk tempat gambar sebesar 100 pixel. height: 900px; tinggi untuk tempat gambar sebesar 900 pixel. scrollamount="14" --> scrollamount atribut untuk mengatur kecepatan gerakan. 14 adalah kecepatan yang dipilih, silahkan ganti nilainya, semakin kecil nilai maka gerakan semakin lambat, semakin besar nilainya maka gerakannya semakin cepat. Contoh di atas merupakan hanya untuk satu gambar animasi saja, biar lebih menarik dan supaya gambarnya banyak bertebaran maka perintah yang di buat harus beberapa perintah, akan tetapi posisinya harus di bedakan agar terlihat bertebaran. Dan ada yang harus di ingat yaitu kita harus membuat posisi yang kira-kira tidak mengganggu pembaca yakni tidak menutupi artikel yang kita posting. Contoh perintahnya seperti ini : Contoh gambar animasi diatas adalah memakai gambar milik saya, silahkan sobat ganti dengan gambar yang sobat sukai. Cara memasang kode-kode diatas, silahkan ikuti langkah berikut ini : Untuk template klasik :

1. Sign in di blogger
2. Klik menu Template
3. Klim menu Edit HTML
4. Copy seluruh kode HTML yang ada lalu paste pada notepad kemudian save, ini sebagai backup data apabila kita melakukan kesalahan dalam proses edtitting template
5. Simpan kode berikut antara kode ........ :
<br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 1100px; top: 52px; width: 100px; height: 900px;" scrollamount="14"><br /><img src="http://amen24.googlepages.com/face5.gif" width="100" height="100" /><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 358px; top: 2px; width: 60px; height: 450px;" scrollamount="5"><br /><img src="http://amen24.googlepages.com/face5.gif" width="30" height="30" /><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 441px; top: 55px; width: 60px; height: 250px;" scrollamount="9"><br /><img src="http://amen24.googlepages.com/face5.gif" width="30" height="30" /><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 498px; top: 53px; width: 60px; height: 380px;" scrollamount="6"><br /><img src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 800px; top: 51px; width: 60px; height: 350px;" scrollamount="7"><br /><img src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 390px; top: 55px; width: 60px; height: 450px;" scrollamount="5"><br /><img src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 749px; top: 54px; width: 60px; height: 250px;" scrollamount="5"><br /><img src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 325px; top: 52px; width: 60px; height: 300px;" scrollamount="10"><br /><img src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 600px; top: 49px; width: 60px; height: 350px;" scrollamount="8"><br /><img src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 873px; top: 52px; width: 60px; height: 400px;" scrollamount="3"><br /><img src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 50px; top: 55px; width: 60px; height: 700px;" scrollamount="12"><br /><img src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br />

6. Klik tombol Pratinjau untuk melihat perubahan
7. Jika sudah OK, klik tombol Simpan Perubahan Template
8. Selesai.

Untuk template baru :

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
6. Copy kode di bawah lalu paste pada kotak yg tersedia, jangan lupa ganti alamat gambarnya dengan yang sobat miliki
<br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 1100px; top: 52px; width: 100px; height: 900px;" scrollamount="14"><br /><img src="http://amen24.googlepages.com/face5.gif" width="100" height="100" /><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 358px; top: 2px; width: 60px; height: 450px;" scrollamount="5"><br /><img src="http://amen24.googlepages.com/face5.gif" width="30" height="30" /><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 441px; top: 55px; width: 60px; height: 250px;" scrollamount="9"><br /><img src="http://amen24.googlepages.com/face5.gif" width="30" height="30" /><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 498px; top: 53px; width: 60px; height: 380px;" scrollamount="6"><br /><img src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 800px; top: 51px; width: 60px; height: 350px;" scrollamount="7"><br /><img src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 390px; top: 55px; width: 60px; height: 450px;" scrollamount="5"><br /><img src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 749px; top: 54px; width: 60px; height: 250px;" scrollamount="5"><br /><img src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 325px; top: 52px; width: 60px; height: 300px;" scrollamount="10"><br /><img src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 600px; top: 49px; width: 60px; height: 350px;" scrollamount="8"><br /><img src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 873px; top: 52px; width: 60px; height: 400px;" scrollamount="3"><br /><img src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 50px; top: 55px; width: 60px; height: 700px;" scrollamount="12"><br /><img src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br />

7. Klik tulisan Lihat Blog untuk melihat hasilnya
8. Selesai.

Cara Menghilangkan Angka Dalam Label

Sewaktu saya kemarin melakukan tapa brata di dalam goa yang pengap selama beberapa hari, ternyata masih tetap ada yang mencoba mengajukan pertanyaan melalui kotak komentar. Salah satunya adalah seperti ini :

Kang,tanya nih, cara buat ngilangin angka yang didalam kurung pada label gimana? misal :

Serba-serbi (3)

jumlah post-nya itu di ilangin bisa gak?



Jawabannya tentu saja bisa, dan untuk melakukan ini anda tidak harus mengeluarkan keringat yang banyak karena hanya dengan menghapus sedikit kode di dalam kode template, maka keinginan anda akan segera tercapai. Caranya adalah seperti ini :

1. Sign in ke blogger dengan ID anda.


2. Klik Layout.


3. Klik menu Elemen Halaman.


4. Klik tab Edit HTML.


5. Klik tulisan Download Template Lengkap, silahkan di save dulu untuk backup (penting untuk di lakukan).


6. Beri tanda centang pada kotak di samping tulisan Expand Template Widget , lihat gambar di bawah :


expand widget template


7. Tunggu beberapa saat ketika proses sedang berlangsung.


8. Silahkan anda cari kode berikut pada kode template milik anda :




()



9. Jika anda sudah menemukan kode yang seperti di atas, silahkan hapus/delete.


10. Klik tombol Simpan Template.

11. Selesai. Silahkan lihat hasilnya !



Apabila anda sudah melakukan langkah di atas, maka dapat di pastikan angka yang menyertai Label akan menghilang entah kemana.

Selamat mencoba !

Membuat Navbar

Setelah beberapa hari tidak ada tulisan baru di blog ini, akhirnya saya tulis juga tutorial baru. Kali ini saya akan memenuhi hasrat sobat-sobat yang pantang menyerah, jika di hitung mungkin sudah tiga kali lebih beliau menanyakan tentang hal ini yaitu cara membuat navbar yang berada di bagian footer seperti yang ada pada blognya mas anang.

Ada kemungkinan bahwa navbar yang saya buat ini agak berbeda dengan miliknya mas anang, maklum lah lain orang lain ilmu, walaupun sebenarnya ilmu ini saya pelajari dari templatenya mas anang sendiri. Apa itu navbar? agar tidak bingung, coba alihkan pandangan sobat ke bagian paling atas blog ini ! di sana terlihat satu frame miliknya blogger untuk memudahkan kita sigin di blogger, nah seperti itulah navbar yang saya maksud.


Untuk membuat gambar seperti itu, ada beberapa langkah yang harus sobat lakukan, di antaranya :

1. Jika sobat menginginkan dalam navbar tersebut terpampang foto atau logo ataupun tanda tangan seperti miliknya mas anang, maka buatlah terlebih dahulu foto/logo atau gambar berbentuk tanda tangan, tapi tentunya dalam ukuran yang kecil. Contoh seperti gambar berikut ini :




atau gambar tanda tangan seperti ini (tanda tangan saya agak mirip dengan yang punya mas anang) :



2. jika foto/logo atau gambar tanda tangan sudah selesai di buat, maka langkah selanjut adalah meng upload foto tersebut ke hosting untuk menyimpan gambar, bisa ke blogger ataupun hosting lain. setelah di upload, catatlah alamat gambar tersebut untuk keperluan nanti di simpan di dalam navbar. Contoh alamat foto dan tanda tangan di atas seperti ini :


http://favatar.myfavatar.com/amen24.png

http://amen24.googlepages.com/TandaTangan_03.gif

3. Langkah selanjutnya adalah memasukan kode CSS untuk navbar yang di buat, contoh kodenya seperti ini :


/* kode untuk navbar
--------------------------------------- */

#navbar-bawah img {
/* margin: 0px 0px -8px 0px; */
vertical-align: middle;
}

#navbar-bawah p.info {
float: right;
padding-right:40px;
line-height: 1.5;
height: 100%;
vertical-align: bottom;
}

#navbar-bawah p {
float: left;
margin: 0px;
padding-top:4px;
padding-left:40px;
line-height: 1.2;
vertical-align: bottom;
}

#navbar-bawah a {
color:#00CCFF;
text-decoration:none;
}
#navbar-bawah a:hover{
color: #00FFFF;
}
#navbar-bawah {
align: center;
position: fixed;
border-top: 1px solid #ddd;
border-bottom: 5px solid #003366;
background-color: #114477;
width: 100%;
left: 0px;
text-align: left;
color: #ffffff;
font-family: verdana;
font-size: 12px;
z-index:10000;
bottom:0;
}


4. Langkah berikutnya adalah memasukan kode navbar pada body template, contoh kodenya seperti ini :

Template Unik
© 2007 |
Design by Rohman Abdul Manap

Powered by Blogger |
thanks to Feed burner

Best viewed in Firefox 1.5+ at 1024x768 or higher resolution

Tadinya saya mau menerangkan tentang kode CSS yang saya pasang di atas, akan tetapi rasanya saya agak kurang enak badan jadi pinginnya singkat saja. sebagai catatan, kode yang saya cetak merah berarti harus di ganti dengan link atau tulisan yang sobat miliki.

Untuk cara pemasangan kode di atas, silahkan ikuti langkah berikut ini :

Untuk Template Klasik

1. Sign in di blogger


2. Klik menu Template


3. Klik menu Edit HTML


4. Copy seluruh kode template sobat, paste di notepad kemudian save di komputer sobat sebagai backup data


5. Copy paste kode berikut ! simpan antara kode . atau jika bingung, simpan saja persis di atas kode


/* kode untuk navbar
--------------------------------------- */

#navbar-bawah img {
/* margin: 0px 0px -8px 0px; */
vertical-align: middle;
}

#navbar-bawah p.info {
float: right;
padding-right:40px;
line-height: 1.5;
height: 100%;
vertical-align: bottom;
}

#navbar-bawah p {
float: left;
margin: 0px;
padding-top:4px;
padding-left:40px;
line-height: 1.2;
vertical-align: bottom;
}

#navbar-bawah a {
color:#00CCFF;
text-decoration:none;
}
#navbar-bawah a:hover{
color: #00FFFF;
}
#navbar-bawah {
align: center;
position: fixed;
border-top: 1px solid #ddd;
border-bottom: 5px solid #003366;
background-color: #114477;
width: 100%;
left: 0px;
text-align: left;
color: #ffffff;
font-family: verdana;
font-size: 12px;
z-index:10000;
bottom:0;
}




6. Copy paste kode berikut persis di atas kode (ganti yang tercetak merah dengan milik sobat) :

Template Unik
© 2007 |
Design by Rohman Abdul Manap

Powered by Blogger |
thanks to Feed burner

Best viewed in Firefox 1.5+ at 1024x768 or higher resolution

7. Klik tombol Simpan Perubahan Template


8. Selesai.




Untuk Template baru (new blogger template)

1. Sign in di blogger


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. Copy paste kode berikut ! simpan di atas kode ]]>


/* kode untuk navbar
--------------------------------------- */

#navbar-bawah img {
/* margin: 0px 0px -8px 0px; */
vertical-align: middle;
}

#navbar-bawah p.info {
float: right;
padding-right:40px;
line-height: 1.5;
height: 100%;
vertical-align: bottom;
}

#navbar-bawah p {
float: left;
margin: 0px;
padding-top:4px;
padding-left:40px;
line-height: 1.2;
vertical-align: bottom;
}

#navbar-bawah a {
color:#00CCFF;
text-decoration:none;
}
#navbar-bawah a:hover{
color: #00FFFF;
}
#navbar-bawah {
align: center;
position: fixed;
border-top: 1px solid #ddd;
border-bottom: 5px solid #003366;
background-color: #114477;
width: 100%;
left: 0px;
text-align: left;
color: #ffffff;
font-family: verdana;
font-size: 12px;
z-index:10000;
bottom:0;


6. Copy paste kode berikut persis di atas kode (ganti yang tercetak merah dengan milik sobat) :

Template Unik
© 2007 |
Design by Rohman Abdul Manap

Powered by Blogger |
thanks to Feed burner

Best viewed in Firefox 1.5+ at 1024x768 or higher resolution

7. Klik tombol Simpan Template


8. Selesai.