Free Template : Magazine Template 2

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.



Jika anda ingin mereview template ini, silahkan! namun diharapkan untuk tidak membuat link sendiri. Silahkan link langsung ke posting ini.



Yang berminat silahkan Download



Download Magazine Template 2

Membuat Sidebar Dalam Kotak-Kotak Terpisah

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.

Membuat Read more Plus Judul Artikel

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 :

 

<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>Selengkapnya...</strong></a></p>

</b:if>

 

Maka anda perlu mengubahnya 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/></p>

<strong><a expr:href='data:post.url'>Lanjut membaca   &#8220;<data:post.title/>&#8221; &#160;&#187;&#187; </a></strong>

</b:if>

 

Jangan lupa untuk menekan tombol SIMPAN TEMPLATE untuk mengakhirinya. Mudah sekali bukan?

 

Selamat mencoba!

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 :

 

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 ]]></b:skin>
6. simpan kode berikut di atas kode yang tadi :

    

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

    

7. Klik tombol Simpan Template.

8. Selesai.

Jika anda sudah melakukan langkah-langkah di atas, maka langkah selanjunya tinggal ucapkan “bye bye dech loe”.

 

Cobain dech biar seru!

Elemen Halaman Mempunyai Fungsi Scroll

Menanggapi salah satu pertanyaan dari pembaca blog ini tentang “bagaimana cara membuat elemen halaman yang mempunyai fungsi scroll seperti milik kang Rohman tentang Blog Tutorial untuk pemula yang ada di bagian atas blog ini?” Jawabannya boleh di bilang sederhana, sebab untuk membuat halaman seperti itu tidaklah harus membuat kode html yang sangat banyak, melainkan hanya sedikit kode untuk membuatnya. Penasaran seperti apa kodenya, ini dia yang di maksud.

Untuk membuat halaman seperti itu, anda hanya membuat kode seperti ini :

<div style="overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #eee">

isi halaman

</div>

Contoh :

 

<div style="overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #eee">
<ol>
<li><a href="http://kolom-tutorial.blogspot.com/2007/04/bikin-blog.html"> Panduan membuat blog</a></li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/04/cara-setting-blog.html">Cara setting blog</a></li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/04/memilih-template.html">Memilih template</a> </li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/04/mengatur-hurup-dan-warna.html">Mengatur huruf dan warna</a></li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/04/cara-memposting-artikel.html">Cara memposting artikel</a></li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-read-more-1.html">buat Read more pada template klasik</a></li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-text-area.html">Cara membuat Text Area</a></li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-menu-dropdown.html">Cara membuat menu dropDown</a><li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/04/upload-gambar-dan-foto-profile.html">cara Upload foto</a></li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-link-1.html">Cara membuat Link(1)</a> </li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-link-2.html">Cara membuat Link(2)</a> </li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-marquee.html">Cara membuat marquee (text berjalan)</a></li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-refresh.html">Cara membuat efek Refresh</a></li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/04/kode-html-tampil-di-posting.html">Kode HTML tampil pada postingan</a></li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/05/masalah-posting-artikel.html">Masalah posting artikel</a></li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/04/yahoo-messenger-emoticons.html">Simbol Yahoo! Emoticons</a></li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/04/blogger-emoticons.html">Simbol Blogger Emoticons</a></li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/05/pasang-jam-blog-di-sidebar.html">Cara Pasang jam </a></li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/05/membuat-banner-animasi.html">Cara membuat banner animasi</a></li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/05/pasang-buku-tamu-di-sidebar.html">Cara membuat buku tamu</a></li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/05/tutorial-html.html">HTML Tutorial</a></li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/04/download-gratis.html">Free Download</a> </li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/05/membuat-foto-animasi.html">Foto animasi</a> </li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/05/pasang-statistik-tarcker.html">Cara pasang Statistik &amp; Tracker</a></li>
<li><a href="http://kolom-tutorial.blogspot.com/2007/05/ie-firefox-dalam-satu-komputer.html">Perlunya IE dan FireFox</a></li>
</ol>
</div>

 

Maka hasilnya akan seperti ini  :

 

1. Panduan membuat blog


2. Cara setting blog


3. Memilih template


4. Mengatur huruf dan warna


5. Cara memposting artikel


6. buat Read more pada template klasik


7. Cara membuat Text Area


8. Cara membuat menu dropDown


9. cara Upload foto


10. Cara membuat Link(1)


11. Cara membuat Link(2)


12. Cara membuat marquee (text berjalan)


13. Cara membuat efek Refresh


14. Kode HTML tampil pada postingan


15. Masalah posting artikel


16. Simbol Yahoo! Emoticons


17. Simbol Blogger Emoticons


18. Cara Pasang jam


19. Cara membuat banner animasi


20. Cara membuat buku tamu


21. HTML Tutorial


22. Free Download


23. Foto animasi


24. Cara pasang Statistik & Tracker


25. Perlunya IE dan FireFox

 

Sedikit saya terangkan agar sedikit jelas.

 

Didalam kode tersebut, yang berperan besar adalah kode yang ada dalam style. Dengan style itulah kita bisa membuat apa yang kita inginkan. Berikut adalah perintah-perintah yang di pakai :

 

overflow:auto; » kode ini agar tercipta scrolling atau penggulung halaman apabila isi dari halaman tersebut sudah melampaui batas tinggi atau lebar yang telah di tentukan.

width:300px; »  adalah lebar bidang yang di inginkan, dalam hal ini adalah sebesar 300 pixel, nilai ini tentunya di sesuaikan dengan keinginan atau di sesuaikan dengan lebar sidebar yang ada. namun, agar selalu sesuai dengan sidebar maka sebaiknya memakai nilai 100% (width:100%).

height:200px; »  adalah tinggi bidang yang di inginkan, nilai ini bisa di ubah sesuai keinginan, misal jadi 250px atau nilai yang lainnya.

padding:10px; »  adalah kode pembuat jarak agar tulisan yang ada dalam halaman tersebut tidak menabrak dinding halaman, nilai ini tentu saja bisa di ubah sesuai keinginan. misal : padding:5px;

border:1px solid #eee  » agar bidang tersebut terlihat ada kotaknya, jika anda tidak menginginkan ada terlihat kotaknya, maka tinggal di hapus saja.

 

Selain kode-kode tersebut, tentu saja anda bisa menambahkan berbagai variasi sesuai dengan keinginan, misalkan backgroundnya berbentuk gambar, fontnya yang berbeda atau apa saja sesuai dengan keinginan anda.

Isi dari halaman tersebut tentu saja bukan hanya berisi link seperti yang kang Rohman contohkan, anda bisa mengisinya dengan yang anda inginkan. Misalkan tulisan biasa, gambar, iklan atau apa saja.

Saya masih bingung di mana nyimpen kode di atasss? hiksss…. seperti biasanya, anda tinggal masuk ke halaman dashbord » Rancangan » Elemen Halaman » Tambah Gadget » Pilih untuk JavaScript/HTML » Masukan kodenya » Simpan » selesai.

 

Selamat bereksperimen !

Cara membuat Contact form / Kontak Kami

Akibat dari Kang Rohman memasang fasilitas kontak kami di blog ini, maka banyak sekali email masuk yang menanyakan bagaimana cara membuat contact form seperti itu. Hmmm.. gimana ya? lupa lagi dhenk, soalnya dulu tidak saya catat langkah-langkah nya… sebentar ya Kang Rohman ingat-ingat dulu .

Sebelum anda memasang kontak form di blog, ada baiknya mempertimbangkan baik dan buruknya terlebih dahulu. Salah satu kebaikan atau kelebihan dari mamasang fasilitas kontak form yaitu mempermudah pengunjung untuk mengirimkan pesan ke anda. Lalu kekukarangan atau keburukannya yaitu karena sangat mudahnya orang mengirimkan pesan, maka anda harus bersiap-siap kebanjiran email di inbox anda dan tentunya anda harus meluangkan waktu untuk membalasnya, betul tidaaakk? dan sekaian saja Kang Rohman mohon maaf kepada pengirim email yang belum sempat kang Rohman balas, karena banyak sekali email yang masuk sehingga belum sempat kang Rohman jawab semuanya.

Dimanakah kita bisa mendapatkan kontak form? di luar sana banyak sekali website yang menyediakan fasilitas ini, selain yang berbayar ada juga yang gratisan. Dan Kang Rohman sebagai  peramal masa depan sudah tahu isi kepala anda, pasti ingin tahu yang gratisan bukan? o’o….. kamu ketauan… suka gratisan… karna dirimu sama dengan aku . Web penyedia kotak form secara gratisan antara lain http://www.emailmeform.com, http://kontactr.com, http://www.zoho.com dan banyak lagi yang lainnya.

Kontak form yang kang Rohman pergunakan adalah kontak form dari http://www.emailmeform.com, dan agar seragam maka tutorial yang akan kang rohman terangkan adalah tentunya dari web ini. Masih ingin lanjut? berikut adalah langkah-langkah membuat sebuah kontak form :

 

1. Silahkan kunjungi situs http://www.emailmeform.com.
2. Arahkan pandangan anda ke sebelah kanan atas monitor.
3. Klik pada tulisan Sign up for free.
4. Isilah form yang ada dengan data diri anda :

    

   First Name : » isi dengan nama depan anda. Misal : jaka.

   Last Name  : »  isi dengan nama belakang anda. Misal : tingkir.

   Username   : » isi dengan username yang di inginkan. Misal : jaka25.

   Password    : » isi dengan kata kunci yang di inginkan. Misal : juralitjungkel.

   Retype Password : » isi dengan kata kunci yang tadi di isikan. Misal : juralitjungkel.

   Your Email  : » isi dengan alamat email anda. Misal : jakatingkir25@yahoo.com.

    

5. Klik tombol Sign up.

6. Setelah muncul tulisan terima kasih, silahkan cek email yang tadi di masukan oleh anda untuk memeriksa email verifikasi.

7. Buka email kiriman dari EmailMeForm yang bertajuk Your new account information.

8. klik link yang di berikan di email tersebut atau kalau tidak bisa, copy alamat URL tersebut lalu paste di address bar browser internet anda untuk melakukan verifikasi bahwa email yang tadi di masukan adalah benar-benar milik anda.

9. Setelah proses verifikasi selesai, silahkan klik tulisan click here untuk menuju halaman akun kontrol panel anda.

10. Alihkan perhatian anda ke sebelah kanan monitor. Klik tulisan Create new form.

11. Ada beberapa form yang perlu di sisi :

     

    Web form Name : » isi dengan nama yang anda inginkan, atau biarkan saja (di sana sudah tertera Contact Webmaster).

    Recipients Emails : » isi dengan alamat email yang akan menerima pesan.

    Spam Email address : » isi dengan alamat email yang di inginkan untuk menerima pesan spam (email sampah, email iseng doank, email iklan, dll) atau kosongkan saja bila tidak mau menerima pesan email spam.

    Thank you page : » isi dengan alamat URL yang memuat tulisan terima kasih, contoh postingan yang ini. Atau jika bingung, tulis saja alamat blog anda.

    Number of fields : » biarkan 4 saja.

     

12. Klik tombol next yang ada di sebelah kanan.

13. Ada beberapa field name yang bisa di ganti sesuai keinginan, misal : Your Name jadi Nama, Your Email Address jadi alamat Email, dst. Atau biarkan saja seperti itu.

14. Klik tombol next yang ada di sebelah kanan.

15. Klik tombol next lagi.

16. Silahkan isi dengan keinginan anda ( hehehe… cape kalau nerangin yang ini) atau biarkan saja seperti itu.

17. Klik tombol next lagi.

18. Klik tombol next lagi.

19. Akan di perlihatkan contoh tampilan kontak form yang tadi di buat oleh anda.

20. Klik tombol Finish.

21. Klik tulisan Get the HTML codes.

22. Copy kode yang ada di text area, di bawah tulisan Copy and paste this HTML code into your page. Lalu paste pada notepad atau text editor lainnya.

23. Selesai.

 

 

Untuk membuat sebuah halaman kontak kami, anda tinggal membuat sebuah postingan seperti biasa. Untuk memasukan kode yang tadi di dapat dari EmailMeForm, anda pindah dulu dari menu compose ke Edit HTML lalu paste di situ. publish dech. Beres.

 

Selamat berbingung ria bagi yang masih bingung.