Memasang Like Box Melayang Di Blog


Kali Ini kita akan membuat atau memasang like box fans page facebook melayang di blog atau blogger dan tentunya dengan menyertakan tombol keluar atau close hanya dengan satu klik saja, untuk panduan Memasang Like Box Melayang Di Blog ini akan menghasilkan tampilan seperti pada gambar di samping yang tepatnya like box ini akan tampil setelah loading page selesai yang langsung berada di tengah pada atas halaman blog kita, yang akan kita buat ini ialah like box melayang yang di sertai border/garis dengan menggunakan table yangdi beri background warna putih, baiklah mari kita langsung saja menuju langkah-langkah berikut ;

1. Login ke Blogger.com
2. Klik Rancangan
3. Di Elemen Laman klik Tambah Gadget
4. Lalu tambahkan HTML/JavaScript dengan cara klik tanda +
5. Masukan script di bawah ini kedalamnnya Lihat Langkah-Langkah Tambah Gadget HTML/Javascript 


















Letakan Script/code Like Box fans page Anda di sini










6.Simpan dan Lihat Hasilnya

Penting...!!!
Gantilah Letakan Script/code Like Box fans page Anda di sini dengan script Anda sendiri jika belum buat lihat Cara Membuat Account di free-shoutbox.net lalu cara Membuat Shoutbox Di free-shoutbox.net dan langkah terakhir Anda hanya tinggal Memasang Shoutbox di Blogger


Selamat mencoba, semoga berhasil dan terima kasih telah berkunjung.
9 out of 10 based on 10 ratings. 9 user reviews.

Free Template : Magazine Template 2



magazine2 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
9 out of 10 based on 10 ratings. 9 user reviews.

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 :
sidebar-kotak

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.
9 out of 10 based on 10 ratings. 9 user reviews.

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 :








Selengkapnya...


Maka anda perlu mengubahnya menjadi seperti ini :









Lanjut membaca   “”  »»

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

Selamat mencoba!
9 out of 10 based on 10 ratings. 9 user reviews.

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 :

isi halaman

Contoh :



Maka hasilnya akan seperti ini  :


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 !
9 out of 10 based on 10 ratings. 9 user reviews.

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.
9 out of 10 based on 10 ratings. 9 user reviews.

Zoom Efek Dengan Script Fancy Zoom



Bagi anda yang ingin menyimpan gambar dalam ukuran besar pada halaman  blog, tentunya akan mengalami kesulitan karena keterbatasan kolom posting ataupun sidebar. Untuk mengatasi hal ini, banyak cara yang bisa kita lakukan, diantaranya adalah dengan memakai scrip fancy zoom. Dengan menggunakan script fancy zoom, anda cukup menempatkan gambar berukuran kecil pada halaman blog anda, baik itu di tempatkan pada halaman posting ataupun sidebar atau juga di bagian footer. Prosesnya adalah ketika gambar tersebut di klik oleh pengunjung blog, maka gambar yang tadinya berukuran kecil akan di zoom sehingga tampak gambar yang berukuran besar. Untuk melihat contoh efek menarik dari fancy zoom, silahkan klik di sini! 
Untuk membuat efek zooming seperti yang di contohkan, anda memerlukan script yang di namakan fancyzoom. Sebenarnya script ini di pakai biasanya di pakai pada blog wordpress, namun setelah kang rohman coba, ternyata bisa berjalan di mesin blogger dengan baik. Tertarik membuat efek zoom seperti ini, silahkan lanjut samapai akhir. Berikut langkah-langkahnya :

Silahkan download terlebih dahulu script fancy zoom, klik pada banner di bawah ini :
Mirror 1 (ziddu) Mirror 2 (bizhat)
download_thumb[1] download_thumb[1]

Jika sudah di download, silahkan di ekstrak terlebih dahulu dengan memakai software ekstraktor seperti winzip atau winrar. Nanti akan terdapat dua file script java :

ektrak

Nanti akan ada dua file java yang file name nya yaitu : FancyZoom.js dan FancyZoomHTML.js. Tugas anda selanjutnya adalah mengupload file java tersebut ke server tempat anda biasa menyimpan file java, misalkan ke yahoo geocities atau yang lainnya. Setelah di upload, kemudian copy kedua alamat file tersebut, misalkan kang rohman sudah mempunyai alamat sebagai berikut (hanya contoh saja, jangan di pakai) :
http://www.geocities.com/amn_tea/FancyZoom.js
http://www.geocities.com/amn_tea/FancyZoomHTML.js

Dari alamat tersebut, buatlah kode seperti ini (contoh juga) :


Kemudian masukan kode tersebut di atas kode
di dalam template blog anda. Bingung? ya sudah, lengkapnya begini nih caranya :
  1. Silahkan login ke blogger dengan Id anda.
  2. Klik Tata Letak.
  3. Klik tab Edit HTML.
  4. Klik tulisan Download template Lengkap. Silahkan di backup dulu templatenya (penting).
  5. Cari kode

  • Simpanlah kode yang tadi di buat di atas kode
  • . Contoh :  kode 

  • Lihat sedikit ke bawah, dan temukan kode ini
  • Hapus kode lalu ganti dengan kode :

  • Klik tombol SIMPAN TEMPLATE.
  • Untuk langkah awal sudah OK, langkah selanjutnya adalah upload gambar-gambar yang berukuran besar ke server tempat biasa anda menyimpan file gambar, misal ke photobucket.com atau imageshack.com atau di mana saja. kemudian copy alamat gambar tersebut. Misalkan kang rohman sudah mengupload gambar ke google pages dan mempunyai alamat gambar sebagai berikut : http://kangrohman.googlepages.com/Waterlilies.jpg Pola pemanggilan gambar yang akan di zoom adalah sebagai berikut :
    Jadi untuk contoh alamat di atas, kode yang di buat bisa seperti ini :
    
    height="200"
    src="http://kangrohman.googlepages.com/Waterlilies.jpg" width="300" border="0" />
    Kode width="300" dan height="200" adalah ukuran agar gambar yang tampil bisa menjadi berukuran lebih kecil daripada ukuran aslinya, dan tentu saja nilai ini bisa anda ganti dengan nilai yang anda inginkan.
    Semoga bermanfaat.
    9 out of 10 based on 10 ratings. 9 user reviews.