tutorial

Menghilangkan Icon Obeng dan Tang / Quick edit Blogger

Oleh kang Rohman. Monday, September 22, 2008

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 :

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

]]>
Copy paste kode berikut persis di atas kode yang tadi :

.quickedit{
display:none;
}
Klik tombol Simpan template.
Selesai.

Selain langkah di atas, sebenarnya masih ada yang harus anda lakukan yaitu silahkan ucapkan “ Selamat tinggal Obeng dan Tang…dadaaahhhhh “ hehehe….

Selamat mencoba!

Lanjut baca “Menghilangkan Icon Obeng dan Tang / Quick edit Blogger”»»

Tanya Jawab seputar Template magazine 2

Oleh kang Rohman. Sunday, September 21, 2008

Bagi anda para pengguna Template Magazine 2 yang Kang rohman launching pada postingan ini, ada kabar baik bagi anda. Postingan kali ini kang Rohman akan membahas tentang beberapa hal yang berhubungan dengan template tersebut. Jadi jangan khawatir anda akan kelimpungan dalam hal memakai template itu. Berikut adalah beberapa pertanyaan yang sering di tanyakan ke kang Rohman.

Tanya :

Bagaimana cara mengupload Template Magazine 2 ke blogger?

Jawab :

Pertama, silahkan download dulu templatenya di sini! atau di sini! File yang anda download pertama kali adalah masih dalam bentuk file zip, oleh karena itu anda perlu mengekstraknya dengan tool ekstraktor misal seperti winzip atau winrar. Setelah di ekstrak, maka akan ada satu folder silahkan di open saja. Dalam folder tersebut ada beberapa buah file yaitu file yang memuat gambar-gamabar, file xml, serta file readme.

File gambar, adalah memuat gambar-gambar background untuk template tersebut, silahkan di upload ke hosting gambar tempat anda biasa menyimpan gambar. Kemudian ambil URL gambar tersebut untuk nanti menggantikan alamat gambar yang kang rohman gunakan pada template tersebut, ini di maksudkan agar tidak terlalu banyak yang menggunakan sumber gambar yang kang rohman gunakan, karena jika terlalu banyak yang memakainya maka nanti server gambar yang kang Rohman gunakan akan down sehingga template anda akan terlihat sangat jelek karena background gambarnya hilang.

Ketika anda mengupload file xml ke blogger, kang rohman sarankan untuk tidak menggunakan browser FireFox 3, karena menurut pengalaman pribadi kang rohman ketika mengedit template menggunakan firefox 3 sering terjadi error, sedangkan memakai browser yang lain tidak ada masalah. hal lain yang tak kalah penting ketika mengganti template adalah sebelum mengganti template, backup lah terlebih dahulu widget-widget anda. belum tahu bagaimana cara membackup widget? silahkan baca di sini! Untuk cara mengganti template, silahkan baca di sini!

Tanya :

Bagaimana cara membuat fungsi Read more (baca selengkapnya) ?

Jawab :

Untuk membuat fungsi Read more / Baca selengkapnya, silahkan baca di sini! atau di sini!

satu catatan kecil : kode di bawah ini

itu sama saja dengan kode :

Jadi jangan bingung tujuh keliling ya!

Tanya :

Bagaimana cara mengganti header dengan gambar buatan sendiri?

Jawab :

Bagian header template ini di buat dalam dua kolom, yaitu samping kiri dan kanan. Untuk header yang asli adalah kolom yang sebelah kiri, yang kanan bisa anda masukan apa saja. Untuk membuat header banner yang di header, silahkan buat banner berukuran 420 X 100 pixel, misal seperti gambar ini :

Di sarankan mempunyai background hitam karena background headernya berwarna hitam. jika bannernya sudah di buat, silahkan ikuti langkah-langkah berikut :

Login ke blogger >> Tata Letak >> Elemen Halaman >> klik tulisan Edit Pada kolom header nya >> Klik tombol browse.. >> masukan banner yang tadi anda buat >> pilih selain judul dan keterangan >> Klik tombol SIMPAN >> Selesai. Perhatikan ilus trasi gambar berikut :

edit header

Tanya ;

Bagaimana cara mengedit menu navigasi yang ada di header?

Jawab :

Untuk mengedit menu navigasi yang ada di bawah header, berikut adalah langkahnya :

home

#'>edit-me

#'>edit-me

#'>edit-me

#'>edit-me

Silahkan ganti tanda pagar dengan link yang anda inginkan, ganti pula tulisan edit-me dengan tulisan yang ingin muncul pada menu navigasi tersebut, misal :

http://www.blosgpottutorial.com'>Blog tutorial

Jangan lupa untuk klik tombol SIMPAN TEMPLATE. selesai.

Mungkin itu saja untuk sementara, semoga tidak ada pertanyaan lain lagi.

NB : template ini akan di launching dalam beberapa pilihan warna lho. So, don’t miss it my friends.

Lanjut baca “Tanya Jawab seputar Template magazine 2”»»

Free Template : Magazine Template 2

Oleh kang Rohman.

Setelah satu minggu kang Rohman berpuasa untuk posting di blog ini, akhirnya saya sempatkan juga mampir di sini agar para pengunjung tidak merasa jemu dengan tampilan blog Kang Rohman yang tulisannya itu itu melulu tiap hari.

Namun, hari ini pun bukan mau nulis tentang tutorial tapi mau bagi-bagi template. Nah, template yang akan saya bagi-bagi gratis ini di beri nama " Magazine Template 2 ", karena template yang dulu namanya " Magazine template 1 ". bener ngga ya sehabis 1 itu 2? hihihi...

Yang mau lihat demonya, silahkan kunjungi http://magazinetemplate2.blogspot.com

Bagi anda yang berminat dengan template ini, silahkan download. Namun tolong hargai hasil kerja saya dengan tidak menghapus link credit yang ada di footer template tersebut. Anda tidak suka dengan link tersebut? silahkan jangan pake template buatan saya.

Apabila anda menginginkan full support dari saya tentang template ini, silahkan kirimkan donasi Via Paypal atau Bank BCA. Bagi yang gratisan, mohon maaf! silahkan berusaha sendiri karena saya pun harus mengerjakan kegiatan yang lain untuk menghidupi keluarga saya.

Tidak sabar ingin mendownload? silahkan download di sini! atau disini!

Lanjut baca “Free Template : Magazine Template 2”»»

Membuat Sidebar Dalam Kotak-Kotak Terpisah

Oleh kang Rohman. Monday, September 15, 2008

Setelah berlibur selama dua hari ke kampung halaman, akhirnya hari ini terpaksa harus balik lagi ke tempat biasa kang Rohman mencari rezeki, sedih memang karena harus selalu terpisah dari keluarga. By the way, mungkin memang sudah suratan untuk jauh dari mereka, * ah kenapa harus mengeluh ya, mending syukuri saja apa yang telah tuhan berikan kepada saya *. Biar tidak mengeluh terus, lebih baik mijit-mijit papan keyboard saja barangkali akan keluar suatu tulisan yang di minati para sahabat semua.

Setelah membaca beberapa pertanyaan yang ada, rupanya banyak sekali yang tertarik untuk membuat sidebar atau pun kotak posting terlihat dalam bentuk kotak-kotak terpisah seperti yang tampak pada screenshot di bawah ini :

Dari gambar di atas terlihat bahwa setiap widget yang di masukan baik itu sidebar ataupun posting akan terlihat dalam kotak sendiri-sendiri yang katanya lebih menarik dan terlihat lebih rapih. Bagaimanakah cara membuat layout seperti itu? ini sangatlah mudah, terutama bagi anda yang sudah familiar dengan yang namanya kode CSS namun tentu saja sangat sulit bagi meraka yang belum mengenalnya. Jadi, dalam tutorial kali ini sepertinya kang Rohman tujukan bagi mereka yang sedikiit familiar dengan kode CSS.

Tekniknya simpel, yaitu anda tinggal memberi warna yang berbeda antara background widget dengan background di mana widget itu berada, kemudian beri jarak antara widget yang satu dengan yang lain dengan menggunakan perintah “margin” dalam hal ini margin-bottom (margin bawah), dan agar lebih terkesan kotak, maka widget tersebut di beri perintah border. Bingung? hehehehehe……. kacian dech loe, minum obat bingung dulu gih biar bingungnya hilang.

Dimanakan kode wiget itu berada? setiap template tentunya berbeda satu sama lain, sehingga kang Rohman pun tidak bisa mematok kode itu harus bagaimana, namun sebagai contoh kang Rohman ambil Template minima. Di dalam template minima, kode widgetnya adalah seperti ini :

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Jadi untuk mengetahui di manakah kode widget itu? jawabnya yang ada kata-kata widget nya (bener ngga? hehehe..). Namun dalam kasus di atas, ada dua kode widget yang di definisikan sama yaitu sidebar widget (halaman sidebar) dengan main widget (halaman posting) sehingga kedua widget tersebut akan selalu sama. Agar lebih flexibel dalam proses pengaturan widget, sebaiknya kode tersebut kita buat terpisah, sehingga kodenya jadi seperti ini :

.sidebar .widget{
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Dengan kode di atas, maka anda bisa lebih berexplorasi. Ok para sedulur semua, kita fokus satu satu dulu yaitu ke widget sidebar. Untuk memberikan kesan sidebar widget mempunyai kotak yang terpisah-pisah anda bisa membuat variasi kode seperti ini (contoh saja) :

.sidebar .widget{

background:#fff;
border:1px dotted #6c6b6b;
margin:0 0 1.5em;
padding:0.5em;
}

Arti kode di atas kurang lebih seperti ini : warna background akan putih, garis mengelilingi widget sebesar 1 pixel (sehingga terkesan terlihat kotak), jarak ke bawah antara widget yang satu dengan yang lain sebsar 1.5em, dengan nilai padding (pemberi sela) sebesar 0.5em.

Dengan memodifikasi seperti kode di atas saja, anda sudah punya sidebar dengan bentuk kotak-kotak terpisah. Apakah kode-kode tersebut mutlak? oh tentu saja tidak, berbagai variasi bisa anda ciptakan, misal memberi widget tersebut dengan background gambar, grid atau lain sebagainya, ini tidak lepas dari kreatifitas anda masing-masing.

Bagaimana dengan nasib main widget? main widget itu untuk mengatur widget posting, jadi tinggal kreasikan saja seperti halnya sidebar widget, simpel kan? hihihi…. ah cape nih ngetiknya, mudah-mudahan saja mengerti, soalnya saya juga bingung nih cara penyampaian yang mudah di mengerti seperti apa, mudah-mudahan bisa di mengerti dech.

Satu yang pasti, lebih banyak yang bingung daripada yang mengerti. Di jamin….. halal.

Lanjut baca “Membuat Sidebar Dalam Kotak-Kotak Terpisah”»»

Membuat Read more Plus Judul Artikel

Oleh kang Rohman. Thursday, September 11, 2008

Semenjak kang Rohman mengganti template dengan yang baru, ada sedikit yang berbeda dari sebelumnya. Apaan tuh? yang beda adalah kang Rohman menambahkan sedikit variasi pada link Baca selengkapnya ( Read more ) menjadi Lanjut membaca plus “Judul Artikel”. Variasi ini terinspirasi dari blog milik mas eko. Walaupun notabene blog mas eko menggunakan mesin wordpress, kang Rohman mempunyai pemikiran bahwa hal itu bisa juga di lakukan pada mesin blogger yang Kang Rohman gunakan. Setelah melakukan sedikit percobaan, akhirnya berhasil juga deh…. hehehe… seneng aku.

Rupanya ada dari pembaca blog ini yang ingin tahu tentang trik tersebut. Oleh karena itu pada posting kali ini, Kang Rohman mencoba untuk menuliskannya, walaupun setelah melakukan blog walking ternyata ada dari teman-teman blogger lainnya yang telah memposting trik ini terlebih dahulu, ah biarin saja itung-itung nambahin keyword buat mbah google..hihihi.

Perlu anda ketahui terlebih dahulu bahwa trik ini khusus di tujukan bagi anda yang telah menggunakan trik Read more seperti postingan Kang Rohman yang di sini. Jika pada postingan tersebut, kode read more yang di pasang adalah seperti ini :