2 Cara Membuat Menu Accordion Dengan CSS 3

Pada saat membuat template Black Accordion, gw menyadari bahwa sebenarnya efek accordion itu bisa di buat hanya dengan kode CSS 3 saja. Kenapa? salah satu alasannya adalah adanya penambahan fungsi :target pada CSS3.. dimana kode ini bisa membuat koneksi antar element yang berada pada satu tag id. Apa sih maksudnya?

<div id="test">
Elemen-1
Elemen-2
</div>

Contoh diatas menandakan bahwa Elemen-1 dan Elemen-2 berada dalam satu tag id. Yaitu id "test" (teks Hijau). Nah,dalam teknik membuat Accordion ini sendiri,pengunaan kode :target berarti membuat Elemen-2 hanya terlihat ketika kita meng-klik Elemen-1.

Kasarnya,target Elemen-1 ketika di klik adalah membuka Elemen yang kedua. Kira-kira sudah cukup paham kan..?

Biasanya,efek Accordion di buat dengan Jquery yang digabungkan dengan perintah JavaScript.. dan hasilnya memang bagus. Namun permasalahannya, penggunaan script-script tersebut terkadang malah menambah lemot loading page template kita.

Disatu sisi,memasang efek-efek keren untuk mempercantik tampilan blog kita memang hal yang bagus..,tetapi akan jadi merugikan,kalo akhirnya script-script tersebut malah membuat pengunjung kabur karena bosan menunggu loading page blog kita. tul..?

Tidak hanya itu saja,permasalahan lain yang sering dialami oleh para blogger ketika mempercantik blognya adalah  masalah ruang. Keterbatasan ruang pada template sering mengakibatkan widget-widget terlihat menumpuk dan berantakan. Hal ini akhirnya mengurangi kenyamanan pengunjung saat membaca artikel kita.

Nah,salah satu cara yang bisa mengatasi semua permasalahan itu,adalah memasang Menu Accordion CSS3. Selain mengirit ruang dalam template,Accordion yang satu ini juga tidak membuat berat loading page. Untuk masalah efek,juga tidak kalah koq dengan Accordion yang di buat menggunakan Jquery dan JavaScript.

Tutorial mengenai Menu Accordion CSS3 sebenarnya sudah agak banyak diajarkan di beberapa web.. namun,apa yang mereka terapkan itu terkesan rumit bagi para pemula. Kode –webkit-transition yang mereka gunakan terkesan sulit di terapkan.

Maka,gw pun mencari cara lainnya yang lebih sederhana dalam membuatnya. Dan,Bingo! gw berhasil membuat Efek Accordion yang lebih sederhana yang gw yakin belum ada di tutorial-tutorial lainnya. Kode CSS yang gw gunakan sebenarnya simple.. hanya pada kode display.Namun,dengan sedikit ber-kreasi,ternyata bisa memberi efek yang bagus.Bahkan bisa membuat warna berbeda pada tab yang aktif tanpa javascript.

Sebelum kita mulai belajar cara membuat nya,sobat bisa melihat dulu preview Menu Accordion melalui link Demo CSS 3 Accordion.

Kalo sudah,sekarang saatnya kita belajar cara membuatnya.. Ready Go!

* Login ke Account Blogger,kemudian ke Design/Rancangan dan pilih tab EDIT HTML.
(Jangan lupa klik Download Template Lengkap untuk berjaga” apabila ada kesalahan dalam mengedit nantinya)


* Masukkan kode berikut ini sebelum kode ]]></b:skin>

#acc{background:#666;font:13px trebuchet ms;
line-height:1.2em;padding:10px;margin:0;}
#acc h3{background:-moz-linear-gradient(top,#ccc,#999);padding:5px 10px;margin:0;color:#222;
text-shadow:0px 1px 1px #fff;
border-bottom:2px solid #444;}
#acc h3 a{color:#555}
#acc h3 a:hover{color:#000}
#acc .post{background:#fff;color:#000;padding:10px;margin:10px 0px;display:none;
border-bottom:2px solid #222;}
#acc :target h3 + .post {display:block;height:150px;overflow:auto;}
#acc :target h3 a{color:#aa5500}

* Save template sobat. Selanjutnya yang perlu kita lakukan adalah memasukkan kode HTML nya.

* Masuklah ke menu Page Element,klik Add a Gadget pada letak yang sobat inginkan,kemudian pilih HTML/Javascript.

 

 

 

 

 

* Layar baru akan terbuka.

* Masukkan kode dibawah ini ke dalam kolom Content/Konten.

<div id="acc">
<div id="isi1">
<h3><a href="#isi1">Judul 1</a></h3>
<div class="post">
Masukkan item anda disini,bisa berupa teks atau widget
</div>
</div>
<div id="isi2">
<h3><a href="#isi2">Judul 2</a></h3>
<div class="post">
Masukkan item anda disini,bisa berupa teks atau widget
</div>
</div>
<div id="isi3">
<h3><a href="#isi3">Judul 3</a></h3>
<div class="post">
Masukkan item anda disini,bisa berupa teks atau widget
</div>
</div>
</div>

Note:
Ganti teks berwarna merah dengan pesan ataupun kode widget yang sobat inginkan.
Ganti teks berwarna hijau dengan judul dari widget / teks yang sobat pasang.

* Save hasil kerja sobat,dan lihat hasilnya. Semoga bermanfaat.. ^^

1 comments Tips Membuat Artikel Menjadi Lebih Menarik

Sekarang,internet bukan lagi hal yang asing bagi kita,khusunya di Indonesia.Gx usah jauh" deh,gw ambil contoh abang nasi goreng di depan gang rumah gw.Walaupun tampangnya udik,tapi handphone nya BB cuy! katanya sih,tuh BB cuma dipake buat maen pesbuk ama chatting doank,Dan yang jelas gx ada hubungannya sama sekali dengan teknik menggoreng nasi ataupun teknik mendorong gerobaknya.

Siapapun bisa dengan mudah mengakses internet dimanapun dan kapanpun sekarang.. Dan sejalan dengan meningkatnya user internet tersebut,puluhan ribu blog-blog baru pun lahir setiap harinya,dengan topik dan tujuan yang berbeda satu sama lainnya. Mulai dari yang iseng" sampe yang bener" buat nyari duit dari blognya.

Terlepas dari apapun alasan dan tujuan seseorang saat membuat blog,tentunya setiap orang ingin blognya ramai pengunjung kan..? Lupakan dulu masalah materi/profit,itu urusan belakangan. Yang jelas,kepuasan paling utama dalam nge-blog adalah saat tulisan-tulisan kita bisa menjadi berguna bagi orang banyak. Betul..?^^

*Kalo begitu,kita tinggal mencari topik yang lagi HOT,kemudian ikut"an membuat artikelnya di blog kita.. begitu?"

Itu cara yang bagus!.Tapi itu juga belum bisa dijadiin sebuah rumus agar blog menjadi ramai. Kriterianya bukan hanya terpaku pada berapa pengunjung yang datang, tetapi juga pada berapa banyak pengunjung yang berkunjung kembali dan menjadi pembaca setia blog kita.Menurut pandangan gw,sebuah blog yang eksis dan ramai gx akan bisa lepas dari cara penyampaian atau penulisan artikelnya.

Topik yang bagus,bisa berubah menjadi topik yang membosankan saat di kemas dengan gaya penulisan yang buruk. Sebaliknya,sebuah topik yang paling sederhana sekalipun bisa menjadi topik menarik ketika di kemas dengan baik.

Mengacu pada hal tersebut,bisa kita pahami bahwa poin utama nge-blog itu gx tergantung pada topik yang dibahas, tapi pada cara pengemasannya.Dan celakanya, kita kadang menomor-duakan poin ini.Tapi jangan kuatir sob,ini ada  beberapa tips dari para pakar agar artikel kita bisa lebih menarik buat pembaca. check it out!

1. Padat
Sebisa mungkin usahakan agar artikel yang sobat bikin gx berbelat-belit. Pergunakanlah kalimat" yang padat dan berisi.. persempitlah kalimat dengan menggunakan kata-kata yang lebih sedikit tapi dengan arti yang sama.

Contohnya:

"Saya sama sekali tidak tahu apa yang harus saya lakukan untuk membuat dia percaya."
bisa diganti dengan kalimat,
"Saya bingung harus berbuat apa untuk meyakinkannya"

See? Kalimat yang kedua terlihat lebih ringan namun mempunyai arti yang sama.

2. Pergunakan kalimat" yang lebih aktif
Penulisan kalimat dalam bentuk aktif akan membuat pembaca bisa membayangkan kalimat tersebut dengan lebih visual. Kalimat aktif juga membuat pembaca merasa tulisannya bergerak maju, dan orang-orang ditulisan tersebut terasa melakukan kegiatan.

Contohnya:

"Pisau itu diambil Robert"
bisa dirubah menjadi kalimat yang lebih aktif,
"Robert mengambil pisau itu"

3. Speaker attribution

Speakter attribution berarti frase yang menandakan siapa yang berbicara dalam kalimat langsung. Misalnya “kata Edgar”, atau “kata saya”, atau “kata Nyokap”. Biasanya dialog bisa menjadi lebih enak divisualkan dengan cara mengganti/mencampurkan speaker attribution dengan sebuah kegiatan.

Contohnya:

“Dith, di buku Idunk Dan Kawan-Kawan gue masukin cerita tentang loe lagi ya!” seru gue.
“Sudah cukup, Yo! Gue udah gak mau lagi ditulis di buku loe,” kata Radith.
“Tapi Dith, kalo gue kasih lima puruh ribu mau?” tanya gue.
“Mau,! Mau!” kata Radith.

Diedit menjadi lebih visual dan tidak membosankan menjadi:

“Dith, di buku Idunk Dan Kawan-Kawan gue masukin cerita tentang loe lagi ya!” seru gue.
“Cukup, Yo!” Radith menggelengkan kepalanya. “Gue udah gak mau lagi ditulis di buku loe!”
Gue mengeluarkan dompet, “Tapi, Dith… Kalo gue kasih lima puluh ribu mau?”
“MAU ! MAU!” Radith langsung nyamperin gue.

4. Janganlah menulis sambil mengedit
Tuangkan seluruh isi pikiran terlebih dahulu.Barulah pada tahap kedua,tulisan-tulisan tersebut di edit kembali.Jangan dilakukan bersamaan.

5. Check kembali tulisan sobat sebelum di posting
Check kembali tulisan sobat.. apa ada kesalahan pengejaan atau ada huruf-huruf yang kurang.

Ada yang bisa menambahkan nya lagi..? Bagi-bagi donk ilmunya (dengan nada memelas).

See u .. ^^

3 Melawan komentar SPAM di blog ini

Baru aja pulang dari tempat nongkrong,gw langsung buka blog ini. Gx ada niat posting sih pertamanya,cuma mw ngecek peringkat alexa gw aja pertamanya.Lho memangnya ada apa dengan Alexa? baca aja nih post gw sebelumnya disini. Ada kemajuan sedikit dari ranking alexa gw, sekarang udah masuk ke #908.641…

Tapi ada kejadian yg bener” mengganggu banget. Ada seorang blogger yg entah berasal dari planet mana yg memberikan komentar yg sama pada hampir seluruh artikel blog ini.Komentarnya pun gx ada hubungannya sama sekali dengan isi artikel.Berikut isi tulisan gx jelas tersebut :

guoweigang More often than not, even pandora bracelets sale the kind of material used for the jewelry is also diverse. Most necklaces are normally made from silver or gold, but there are others that use leather or even bones and shells.Other necklaces contain precious stones, most commonly diamond, similar to discount pandora bracelets what rap stars usually wear. Among these so called "bling" the most common design is usually the cross.Aside from the obvious fashion purposes, these cross pandora jewerly necklaces can mean so much more depending on the personal faith of the wearer.Pretty much, cross necklaces can either be worn to symbolize faith pandora 2010 or plainly as a fashion statement. They can showcase the personal faith of the wearer. There are plenty of sites online as well as stores offline that can help you find the right men's cross necklaces to wear for yourself or to give away to male friend or lover.

Total post di blog ini sudah sekitar 150an… coba bayangin deh,seberapa besar niat si makhluk tersebut sampai dia rajin comment disetiap postingan gw. maksudnya apa coba?hmm… ngeliat kolom recent comment (Bagian kiri bawah post ini) aja gw jadi males gara” dia.Ini udah termasuk kategori SPAM muktahir nih…

Alhasil gw pun mencari cara agar kejadian ini gx terulang lg… karna selain mengganggu sistem kinerja otak gw,hal ini jg bisa menimbulkan katarak pada mata para pengunjung. Setelah cari info sana-sini,kyknya gx ada pilihan yg lebih enak lg selain mengaktifkan moderasi komentar dan membatasi pengunjung yg bisa comment pada blog ini.Mulai hari ini,profile ANONYMOUS udah gx bisa comment lg… dan semua comment terpaksa harus gw filter dulu deh. (Repot sedikit gpp lah hmm…)

Sedikit info buat sobat”, klo comment di sebuah blog, lebih baik menggunakan OpenID, URL blog atau minimal email sobat.Ada keuntungannya lho…

1. Memudahkan pengunjung yg lain yg ingin melihat profile atau blog sobat.
2. Apabila sobat comment di blog yg DO FOLLOW seperti blog ini,akan langsung dapet link back. Apalagi kalo blog yg sobat comment tersebut udah punya PR (PageRank Google) tinggi. Wuihhh..! kan lumayan tuh link back nya.. ^^
3. Selanjutnya apa lg yach? duh,otak gw nge-blank nih… ada yg bisa nambahin sob..?

Gx lupa gw ucapin thanx buat sobat” yg udah rajin comment dan ngasih saran untuk blog ini… termasuk yg udah pakai template dari InfoGaul. Keep share with me oce..? gw mw hapus”in comment makhluk planet itu dulu sekarang… Nanti kita lanjut lg… See u…

2 Misi Mengejar Dan Menaikkan Traffic Alexa Rank

Selamet pagi..! eh,salah.. maksud gw selamet ulang tahun..! jiah salah lagi..Udah akh,cape ngomong selamet melulu.Ntar yang namanya slamet kupingnya pada gatel semua  lg karna diomongin ama gw hehe.. daripada lu ntar ketuleran gila,mending kita langsung ke topik aja deh.

Topik kita kali ini adalah “Slamet”… tahukah anda berapa banyak orang bernama slamet di indonesia? (Kebangetan,klo ampe lu bener” mw cari tau mah he”).Oce,forget about Slamet.. barusan cuma becanda koq,biar bisa ketawa ketiwi dikit lah hari ini. ^^

2 hari lalu,gw tiba” teringat kenangan pertama kalinya aktif nge-blog. Saat itu ada sebuah blog yg paling sering gw tongkrongin.. dan gw yakin banget klo kebanyakan blogger newbie seperti gw pasti pada tau blog yg satu ini. Nama blognya adalah Kolom-Tutorial punyanya Kang Rohman. Sependapat dengan gw?Klo yg blm sependapat,berarti belum mampir tuh ke blog nya Kang Rohman tersebut.. ^^

Perjalanan nge-blog gw pun gw mulai dgn menjadi tamu tak diundang di blog tersebut ( Bisa 24jam OL disana ckckck! ). Gw mulai belajar menyusun content-content blog sesuai artikel-artikel dari blog keren tersebut.. dari yg awalnya hanya bisa edit nama profile doank,akhirnya bisa membuat template sendiri jg sekarang.. ( walaupun template bikinan gw masih kucel dan jorok.. hmm.. Terlalu…! )

Nongkrong 24jam disono gx bosen” lho.. selain bisa baca banyak tutorial blog,gw juga bisa sambil chat dengan pengunjung lain (Dulu setiap jam 10malem minimal ada 80 user online.. tapi klo sekarang” ini  gw kurang tau  yah hehe..) .Nah,kemarin gw akhirnya baru sempet balik ke bekas markas gw tersebut.. dan gx gw sangka”, gw masih ngeliat beberapa blogger lama yg masih aktif di blog Kang Rohman ( Salut..!!,gx kyk gw.. yg angin”an dalam nge-blog..hmm.. ).Dan mereka masih ngenalin gw.. Horray! :P

Beberapa percakapan terjadi antara gw dan mereka.. hingga tiba” gw di tanya: “Sob,koq  alexa rank nya anjlok banget? padahal traffic blog lu lumayan tinggi lho..”.Mendapati pertanyaan begitu,gw jadi inget buat coba ngecek rank alexa gw lg setelah sekian lamanya.. dan ternyata bener! rank alexa gw cuma #1.100.000 hikz..hikz.. Memalukan! :P

Ternyata selama 1/2 thn lebih gw vakum,rank alexa gw turun drastis.  
Seinget  gw terakhir masih #360.000an deh hmm.. Akhirnya gw pun memutuskan untuk mengejar miyabi.. Ups! maksudnya mengejar rank alexa kembali..^^ salah satunya adalah dengan memasang kembali Alexa Toolbar yg sempet ilang entah kemana dari CPU gw.Dan keliatannya sudah berjalan semakin baik hari ini. Alexa rank gw sudah manjat dikit doank ke #967.483 Asyik!! libur telah tiba!! ( Gx nyambung lu! ).

Pengennya sih masuk ke #500.000 an di akhir bulan ini..,tapi apa mungkin bisa?,membaca pun aku sulit.. Oia,gw ngucapin terima kasih buat sobat yg udah bersedia paca post ini sampai habis ya.. jarang” lho ada yg siap mental ngebaca posting gx beres seperti ini.. hehe..

Finally,gw cuma bisa ngasih saran sedikit buat sobat” yg lain.. jgn lupa pasang Alexa Toolbar yah biar blog sobat bisa langsung terintegrasi dengan situs alexa. Kalo alexa rank nya bagus,kemungkinan untuk mendatangkan profit dari blog semakin besar juga lho.. Coba liat aja beberapa situs PPC (Pay Per Click) tersohor.. Semakin tinggi ranking kita,komisi nya makin gede. Kan lumayan buat iseng” berhadiah kan? hehe..

Ada yg punya pengalaman lain mengenai Ranking Alexa? help me..!

See u.. ^^

0 Mempercantik Blog Dengan Code HTML CSS 3

Hi all.. ketemu lg sama gw yg bersosok tak jelas ini.Post kali ini kita akan membahas tentang CSS 3.Gx mw berbelat-belit lg..,mari kita ke KTP,eh TKP maksudnya.

Hari ini gw baru aja ngetes skill terbatas yg gw miliki seputar Code HTML CSS 3.Ternyata setelah kemarin gw pelajari,penggunaan code CSS 3 gx jauh beda dengan versi sebelumnya lho.. Hanya ditambahkan beberapa fitur code HTML baru yg bisa membuat versi” tampilan lain dari sebuah website/situs atau blog.

Sebuah contoh yg langsung gw coba praktekkan adalah membuat navbar menu horizontal seperti navbar menu blog ini.Setelah mengheningkan cipta,akhirnya gw pun memulai proses pengkodean HTML CSS 3 untuk membuatnya.

Ada sebuah code baru di CSS 3 yg bisa membuat efek Gradient pada background warna.. juga ada code untuk efek bayangan text.Nah untuk permulaan,yuk kita coba bikin sebuah navbar menu simple tapi keren dengan hanya proses pengkodean HTML aja (Tanpa image/gambar). Kenapa gw ingin membuatnya tanpa image?

1. Gw gx harus cape” bikin gambarnya dulu.
2. Gw gx perlu cape” upload gambar nya dulu ke hosting.
3. Halaman blog jadi tetep “ringan” alias gx berat loading pagenya.

Berikut perbandingan antara Navbar yg gw buat dengan CODE HTML CSS 2 dan CODE HMTL CSS 3…

CSS 2 (Gbr.1)

CSS 3 (Gbr.2)
NB: untuk melihat preview menu navbar di atas, cukup klik saja pada gambarnya.

Udah bisa ngeliat sendiri kan perbedaan nya?,dua”nya tetep di bikin hanya dengan CODE HTML tanpa ada pemakaian gambar/image luar.Nah,hebatnya CSS 3 ini yaitu bisa membuat efek yg bagus dan menyerupai gradient asli dari suatu warna.

Coba liat Gbr.1 , itu dibikin dengan code CSS 2.. Warna nya tidak terlihat 3D.Sedangkan Gbr.2 terlihat nyata karna telah diselipkan code” HTML CSS 3.

Apa saja sih code” yg diselipkan di Gbr.2 ..?

-moz-linear-gradient ( Membuat efek gradiasi pada warna )
-moz-box-shadow ( Memberi efek bayangan pada box atau kolom )
text-shadow ( Memberi efek bayangan pada text / tulisan )

Sebenernya masih banyak code” CSS 3 yg muanteepppp efeknya. Ada efek polaroid buat foto,efek 3D kotak,ada efek gambar bergerak (Seperti Flash) dsb.. cuma harap maklum ya..,gw jg baru kemarin pelajarin-nya hehe.. nanti sedikit” gw akan coba bikin tutorialnya deh satu per satu.

Untuk mengetahui bagaimana caranya membuat Navbar Menu CSS 3 seperti gambar di atas,baca post selanjutnya aja yah.. soalnya post yg ini gw rasa udah kepanjangan hehe..

2 Modifikasi & Ganti Tampilan Template Blog

Akhirnya blog ini selesai juga nih di renovasi.Gx banyak sih yg gw rubah.. content nya pun tetep gw jaga biar gx penuh sesak dimana” en masih enak di di liat mata.Coba liat aja tampilan halaman post ini dengan halaman depan blog ini.. lebar dan content yg tampil berbeda kan?.Semoga bisa menambah kepuasan temen” dalem ngebaca posting” di blog ini. ^^

Halaman depan:

 

 

 

 

 

Keterangan halaman depan :
Header blog – gambar utama blog ini , di sebelahnya ada statistik jumlah pengunjung yg online,Google PageRank en Ranking blog ini dari seluruh blog di Blog Indonesia.

Artikel/post - hanya terlihat judul,label dan jumlah comment nya aja.Lebar kolom artikel pun tidak sampai 1/2 lebar keseluruhan blog ini.So,kalo mw ngebaca,yah tinggal di klik aja judul artikelnya. (gampang kan? maksa nih.. hehe..)

Behind this blog – sebuah kolom berisi gambar dari sesosok makhluk antah berantah. Konon menurut penelitian para ahli,makhluk aneh ini dapat menimbulkan gangguan saraf kiri otak dari radius 10m. So,mendingan jaga jarak aja dari makhluk tak berwujud ini ya!! –> dah kyk truk contener aja (Jaga Jarak) :P

Recent viewer & Site traffic – Berisi siapa saja makhluk  tak beruntung yg dah mampir ke blog ini.Mw beli buku secara online?gampang,klik aja gambar kado di bawah kolom ini.

Shoutbox – ini di sediakan khusus buat para pengunjung yg ingin bertanya,ngobrol,ninggalin pesan,titip salam buat keluarga di rumah & nanya no rek gw (Klo ada yg mw ngasih gw duit tambahan hehe..)

Reader community – Berisi foto” orang ganteng en cantik yg udah jadi komunitas blog ini.

Pembaca setia – jumlah pengunjung yg berlangganan artikel blog ini lewat email.Klo mw gabung,itu ada kolom buat daftar koq.. tinggal masukin email,terus klik tombol daftar deh. (Gratis…tis..tissssss.. )

Lanjut ke halaman Single post:

  

 

 

Keterangan single post :
Header Blog – masih sama dgn halaman depan,cuma bedanya yg di sebelah kanan aja.Statistik nya berganti menjadi tampilan feeds artikel terbaru blog.

Artikel/post – Lebar nya bertambah (untuk menambah kenyamanan membaca).jadi gx sempit”an deh hehe..

Behind this blog – di hilangkan karena banyak ahli yg mengatakan bahwa bila melihat foto gw saat sdg membaca artikel bisa membuat sistem pencernaan terganggu dan muntah. (Alah,lg ngebaca atau gx pun,ttp aja byk yg muntah ngeliat nya) hmm..

Recent viewer & Site traffic – di hilangkan.
Shoutbox – di hilangkan.
Reader community – sama dengan halaman depan.
Pembaca Setia – sama dengan halaman depan.

Bagian bawah pun akhirnya di tambah dengan beberapa content informasi mengenai blog ini, seperti Komentar Terakhir,Artikel terbaru dan Site Info.

Sebenernya gw masih penasaran sih dengan CSS 3.. coz’ lama gx nge-blog en tiba” pas mulai aktif lg,dah ada kabar aja klo pengkodean HTML CSS 3 dah di launching.Niatnya sih gw pengen bikin sebuah template dengan pengkodean HTML CSS 3,tapi masih blum sempet gw otak-atik nih.

Hari ini gw mw coba pelajarin dulu ttg CSS  3.. nanti klo udah jadi,template nya pasti gw tampilin koq di blog ini.Seperti template” bikinan gw yg udah gw bagiin di posting” sebelumnya.

Colourfull Rounded
Black Rounded
Green Rounded 
3 kolom - Colourfull

So,doain gw ya all.. hehe.. Oia,klo ada kritik en saran,tulis aja di comment ya.. barangkali masih ada yg kurang dari blog ini.. Caooooo!! :D

20 Download Windows Live Writer 2009 Portable

Beberapa dari sobat tentunya sudah tahu apa itu Windows Live Writer,namun tak jarang juga pengunjung di blog ini yang belum tahu apa itu Windows Live Writer. Karena itu,w akan memberikan sedikit uraian mengenai software yang satu ini..

Bagi sobat-sobat blogger yang koneksi internetnya lemot dan terputus-putus seperti saya,tentunya agak mengalami kesulitan dalam membuat posting untuk blognya.Untungnya,sekarang sudah ada Windows Live Writer.. Dimana dengan menggunakan software ini,kita bisa membuat posting dalam keadaan offline.

Fitur-fitur yang di berikan oleh software ini pun lengkap sekali.Posting yang kita buat dengan software ini dapat kita lihat preview nya 100% sama persis dengan tampilan asli template blog kita.Jadi kita hanya perlu online 1-2 menit saat menerbitkan post saja.Tentunya dengan begitu,biaya internet pun lebih murah bukan??

Tak hanya itu,ada beberapa plug-in lainnya yang dapat kita tambahkan ke software ini.. dan salah satu plug-in yang paling w suka adalah,kita dapat memasukkan emoticons dengan mudah ke posting kita.Gak repot,tinggal klik aja emoticon yang mana,terus dah tampil deh di post kita ^^

Untuk memasukkan gambar hasil dari capture,kita tinggal copy & paste.Mudah bukan?.Nah,Bagi sobat-sobat yang mau mencoba memakai Windows Live Writer untuk menulis posting blog sobat.. sobat bisa mendownload installernya di link http://windowslivewriter.spaces.live.com/

Setelah itu,jalankan installer Windows Live Writernya.. akan ada beberapa pilihan disana.Sobat tinggal mencentang program apa yang sobat inginkan,lalu klik install untuk ke tahap selanjutnya.Nb:Pastikan koneksi internet anda terhubung saat menginstallnya.

 
Untuk hanya mendownload Writer saja,maka cukup berikan centang pada writer saja.Tunggu sampai proses instalasinya selesai.. dan Windows Live Writer (WLW) sudah siap menjadi partner ngeblog sobat.^^

Beberapa waktu lalu,komputer w sempet kena virus parah yang mengharuskan w untuk mengformat ulang windows.Tentunya,sebelum w format ulang,w bak-up deh seluruh program2 dan file-file penting di hard disk w.. termasuk juga Windows Live Writer.

Permasalahannya,saat w mau menjalankan program WLW yang sudah w backup tersebut,ternyata sudah ga bisa lagi.Mau ga mau deh harus install ulang juga.Repot lagi deh jadinya.. Harus download lagi hikz.. padahal jatah internet w perbulan hanya sedikit.

W teringat Yahoo Messenger 9 yang dulu w install.Proses instalasi sama juga dengan WLW.. alias downloadnya pake koneksi internet. Kalau koneksi terputus,harus mulai lagi dari awal.. ribet kan.?hmm..Tapi untung aja,setelah browsing kesana kemari,w nemuin installer YM 9 stand alone..  sehingga ga perlu terhubung dengan internet saat menginstalasi YM tersebut.Kan lebih irit waktu.. dan download installernya cukup sekali saja ^^

Mulai terpikir oleh w untuk mencari cara agar WLW ini bisa menjadi versi stand alone juga.(Red. installer yang berdiri sendiri seperti pada umumnya).Sehingga cukup di download sekali saja,kemudian bisa di back-up di usb.Jadi kalaupun w harus format ulang windows lagi,w ga perlu melewati proses instalasi yang merepotkan sekali lagi.**Kalau ada yang lebih murah kenapa ngga..??**

Setelah menganalisa dan mengobrak-abrik segala situs di google,akhirnya ketemu juga caranya.. Ga susah koq untuk membuat WLW versi portabel ini.

1. Anda harus sudah mendownload WLW 2009.

2. Kemudian download file dasar portable nya.Berikut adalah link downloadnya..

http://www.ziddu.com/download/4218262/WindowsLiveWriterPortable.zip.html

Extract file zip tersebut dan tempatkan di USB atau Portable device sobat.

3. Copy semua file dari dari C:\Program Files\Windows Live\Writer ke struktur yang baru pada USB drive sobat seperti grafik di bawah ini \WindowsLiveWriterPortable\App\WindowsLiveWriter

 
4. Selesai deh.. untuk menjalankan Windows Live Writer dari USB,sobat tinggal mengklik 2x file WindowsLiveWriterPortable.exe di USB sobat.

Jika sobat pernah menjalankan Windows Live Writer lewat CPU sobat,maka pada saat sobat menjalankan nya dari USB,Seluruh setingan dan file yang pernah di jalankan sebelumnya akan otomatis di copy ke USB anda.. jadi ga repot kan?? ^^

Nah,sekarang sobat sudah memiliki WLW 2009 yang bersifat portable.. bisa di bawa kemana-mana dalam USB.Tinggal colokin USB sobat ke komputer teman,saudara atau tetangga langsung bisa nulis posting deh.. sip kan..?

See u at the next post ^^

16 Tips - Trik Blogging

"Mas,Kira-kira bagaimana sih cara menaikkan trafik pengunjung di blog kita?",Si A bertanya kepada si B yang memang sudah lama berkecimpung di dunia blogging.. lalu dengan entengnya,si B menjawab,"Mendatangkan pengunjung itu mudah,anda tinggal mengirim artikel ke media-media seperti Infogue atau lintasberita..,Lalu anda tinggal menunggu mereka berdatangan deh..",Setujukah anda dengan jawaban/saran "enteng" dari si B tersebut..?Kalau saya sih,ngga' setuju!!.Masalahnya adalah,Apakah pengunjung akan datang kalau artikel yang kita kirimkan itu kurang ber-kelas?tentunya tidak..

Oke,anggap saja artikel itu ber-kelas,dan para pengunjung sampai mengantri untuk masuk ke blog kita (kayak BCA aja hehe),Pertanyaannya adalah seberapa besar kemungkinan besok-besok para pengunjung tersebut akan datang lagi,walaupun anda tidak mengirim artikel terbaru?Dalam artikel ini,saya ingin berbagi sedikit tips ala InFoGauL untuk membuat pengunjung betah dan rutin berkunjung kembali.

Kita sudah rutin mengirimkan artikel terbaru dan itu "menurut" kita akan menggemparkan,lalu kenapa pengunjung tidak juga datang yah?atau pengunjung hari ini banyak yang datang,tapi besok sepi lagi?hmmm... Mungkin akan lebih cocok bila kita menggunakan metode "Peng-koreksian" dalam tips kali ini.. mengapa?karna mungkin saja ada beberapa "pantangan" yang tanpa sengaja telah dilakukan oleh kita,sehingga membuat pengunjung menjadi "il-fil" alias hilang feeling terhadap blog kita.Lho koq bisa?menurut pengalaman saya,ada beberapa hal yang bisa menyebabkan hal seperti itu.

Artikel anda adalah hasil copy&paste dari tempat lain - Sebenarnya tidak salah juga koq melakukan hal yang seperti ini,selagi anda menyantumkan alamat dari sumber artikel tersebut,berarti anda mempunyai etika blogger yang baik.. ^^.Namun akan lebih baik bila kita mengawali postingan tersebut dengan mencantumkan alamat sumber artikel terlebih dahulu.mengapa?

Coba anda bayangkan apabila anda yang menjadi pengunjung,lagi asik-asik baca sambil mengagumi sang pemilik blog ( yang dikira sang penulisnya juga..^^ ),tiba-tiba di akhirnya postingan,terulis kalimat ( sumber: http://andahampirtertipu.com ). Apa pikiran yang terlintas dalam otak anda saat itu? "Oh,ternyata ini artikel orang toh!!".. setuju?^^

Lalu bagaimana contoh kalimat yang kira-kira bisa dipakai di awal posting tersebut?,sedikit contoh dari saya,anda bisa mengawalinya dengan

"Hari ini saya mampir ke beberapa situs dan blog.. ukh,melelahkan juga yah.. namun,kabar baiknya,saya menemukan satu artikel keren yang saya yakin anda pun menyukainya.Artikel ini saya temui di ( http://andatidakterasatertipu.com ).nih artikelnya,silahkan dibaca bro.."

Bagaimana menurut teman-teman dengan cara "meng-akalin" di atas?bisa diterima?^^

Cara lain yang bisa kita lakukan adalah,membuat pembaca penasaran dan menunggu-nunggu postingan selanjutnya.Jadi saya sarankan agar anda sudah membuat jadwal postingan terlebih dahulu.. Cukup tambahkan kalimat "Di postingan selanjutnya,kita akan membahas yang lebih banyak lagi mengenai kejadian-kejadian aneh lainnya di bumi ini",jika postingan anda tersebut termasuk dalam kategori "Kejadian Aneh",atau tambahkan kalimat "Postingan selanjutnya,kita akan membahas mengenai google adsense",jika postingan anda saat itu sedang mengulas bisnis-bisnis PPC.. Lumayan bisa diterima kan..?? ;)

Ada kemungkinan bahwa tampilan blog kita kurang sedap dipandang - Eitz,jangan salah marah dulu bro.. ini pengalaman saya pribadi.Kejadiannya sekitar 2 minggu yang lalu,sebelum saya mengganti tampilan blog saya menjadi seperti ini.. Ada pengunjung tanpa nama yang bilang kalau blog saya terlihat rumit.Dikiri-kanan,atas-bawah ada aja widget memenuhi tempat tersebut.Dan karena letak kolom posting saya adanya ditengah-tengah blog,maka saat dia membaca post tersebut,matanya kayak mau jereng alias juling..

(coz' sebelah kiri dan kana dari post tersebut,sudah saya jejali widget2 iklan teks hehe.. ya terang aja pusing!bingung bedain yang mana artikel post dengan teks iklan ^^ )

Lalu,ada juga yang bilang kalau judul postingan saya tidak terlihat!,padahal jelas-jelas kebaca koq. (Nb: Background judul post saya adalah gambar 3D berformat JPEG yang berwarna biru tua sedangkan teks judulnya berwarna putih).Seharusnya kelihatan donk??tapi dia koq ngga' keliatan yach?hmm.. Setelah ngobrol panjang lebar,baru deh ketahuan.. ternyata dia buka internet tanpa menggunakan gambar! Yah,terang aja ga kelihatan,waktu itu background dasar blog saya kan warna putih.. kalau ketemu dengan teks putih juga,jadi ngga' keliatan deh..

Nah,hal ini kadang tak terpikirkan oleh kita.. sebenarnya,banyak lho pengunjung-pengunjung yang browsing pake hp,dan pengaturan tampilan gambarnya di non-aktifkan.Jadi sedikit saran dari saya,jangan menggunakan warna putih untuk teks.. Nanti yang terlihat hanya sebuah posting kosong.. ^^ (Memang keren sih,kalau background kita berbentuk gambar JPEG yang berwarna gelap dan teks nya putih.. Namun,kalau ada yang membaca nya lewat handphone gmana donk..?Hilang satu pengunjung deh hehe.. )

Berikan jarak sela yang cukup antara postingan dengan widget sidebar anda - Karena ruang kosong atau polos pada blog kita bisa menjadi tempat untuk menyegarkan kembali mata pengunjung kita yang sudah selesai membaca artikel.Jadi bisa dibilang,pengaturan penempatan widget di bagian bawah blog sedikit banyak akan bisa membantu.Sebagai referensi,Anda bisa melihat situs ziddu. Bagaimana tampilannya menurut anda?simpel dan tidak menyengat mata kan?^^ oia,penggunaan warna yang tidak terlalu banyak juga mempengaruhi kenyamanan pengunjung lho..

Ada rekan-rekan blogger yang bisa menambahkan tips-tips menarik lainnya ?
Mohon kesediaannya untuk bisa berbagi bersama kita disini..^

See u..

38 Blog Ini Sekarang Do-Follow Lho..

Blog ini kini menganut paham Do-Follow (*aneh banget tata bahasa nya!! hehe ) - Sejak malang-melintang di dunia blogger,banyak sekali saya temukan pembahasan mengenai no-follow dan do-follow.Karena saya sendiripun baru aktif nge-blog kurang lebih 1bulan,saya pun belum begitu memahami makna dari no-follow dan do-follow tersebut.Butuh waktu juga bagi saya untuk menyelidiki apa itu keuntungan dan kerugiannya.. dan kesimpulannya pun baru nge-jreng pada detik ini.. (Kayak hemaviton aja ^^).



Wajar donk bagi kita yang blogger pemula untuk menyelidiki terlebih dahulu? Mungkin saja anda yang sedang membaca artikel ini juga sedang menjadi "detektif" dan menyelidiki lebih lanjut dari no-follow dan do-follow ini.Memang sih,anda dapat menemui banyak artikel mengenai hal ini,namun mumpung anda ada di blog saya,saya rasa tidak ada salahnya mendengar sedikit pengenalan mengenainya.. ^^

Apa sih no-follow dan do-follow itu?inilah sekeping uraian dari saya pribadi mengenai kedua kata tersebut.

No-Follow bisa diartikan bahwa blog/situs kita tidak memberikan "Hadiah" link back pada komentator-komentator Sepakbola artikel kita..

Berbeda dengan No-Follow,Do-Follow ini menandakan bahwa kita ini blogger yang baik hati.. mengapa saya bilang seperti itu? Karena,dengan mengubah blog kita menjadi Do-Follow,setiap komentator dalam postingan artikel kita,akan mendapat link back disetiap komentar nya.Tentunya dengan begitu,rakyat-rakyat blog kita pun akan senang memberikan komentar pada artikel kita.. Siapa sih yang ga senang ketika artikel nya mendapat respons dari pembacanya?,kayaknya ga ada dech..

So,jika anda ingin mendapatkan cap blogger baik.. anda juga bisa mengubah blog anda menjadi Do-Follow saat ini juga koq.. Anda tinggal ikuti step-step ini aja..^^

--> Masuk dulu ke dashboard blog anda,masuk ke TATA LETAK kemudian EDIT HTML.

--> Jangan lupa untuk menyimpan template dulu yach..

--> Beri tanda centang pada "Expand Widgets Template"

--> cari kode seperti ini pada kode HTML blog anda :
'data:comment.authorUrl' rel='nofollow'

5. Hapus kode rel=’nofollow’

6. Kemudian simpan template

7. Selesai lah semua..

8. Pasanglah banner Do-Follow,agar pembaca dapat mengetahui-nya.. Anda bisa menggunakan banner blog ini (Banner animasi Do-Follow seperti di gambar postingan ini dan di sidebar) dengan cuma-cuma.. Klik Disini untuk mendapatkannya dan bergabunglah dengan blog ini menjadi "Penganut" Do-Follow..^

Blog saya sudah diubah menjadi Do-Follow saat ini,sebuah langkah yang kecil namun membawa efek yang besar di kalangan para blogger pemula... Win-WinSolution bukan?Anda mendapat link back dan blog ini dapat respons yang baik dari pembacanya.. jadi,semakin anda sering berkomentar di blog ini,semakin banyak juga "Hadiah" link menuju blog anda..^^

Lalu,bagaimana menurut teman-teman mengenai No-Follow dan Do-Follow ini?Tentunya ingin berpartisipasi kan..?
Mari kita berbagi pengalaman..

See u.. :)

6 Menambah Elemen Horizontal Baru Di Atas Sidebar

Saat pertama gue belajar nge-blog,gue bener-bener ga tau sama sekali mengenai cara mempercantik tampilan blog.. Bukannya ga mau,cuma gue ga bisa aja.. hehehe.. akhirnya,gue putuskan untuk bikin satu blog lagi khusus untuk gue belajar ngobrak-ngabrik kode HTML di markasujicoba.blogspot.com.Yah,diblog itulah semua pembelajaran gue di coba.. ^^ Setiap gue ngeliat ada posisi elemen dari suatu template blog yang unik,gue pasti ngarahin fokus gue ke blog yang itu dan mulai mencari caranya secara otodidak.Kali ini gue ingin berbagi sedikit Tips dan Trick untuk menambah sebuah elemen horizontal baru di atas kolom sidebar.(untuk template 3 kolom) Check this out!!



1. pertama-tama loginlah ke account blogger anda,masuk ke TATA LETAK --> EDIT HTML.

2. Carilah kode #sidebar dan masukkan kode dibawah ini di atas kode tersebut.

#sidebaratas-wrapper {
border: 1px solid #FFFFFF;
background:#FFFFFF;
width:320px;
float:right;
padding:5px;
margin-top:10px;
}
NB: rubahlah kode tersebut sesuai dengan lebar total kedua sidebar sobat.caranya jumlahkan saja width sidebar1 dengan sidebar2.cth,sidebar1 widthnya 160px dan sidebar2 widthnya 180px..,maka anda tinggal ganti width diatas menjadi 340px.

3.Langkah selanjutnya,anda cari kode

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

4.lalu taruhlah kode dibawah ini tepat dibawah kode tersebut.

<div id='sidebaratas-wrapper'>
<b:section class='sidebaratas' id='sidebaratas' showaddelement='yes'>
</b:section>
</div>

5.Simpan perubahan anda tersebut.. Setelah itu,masuk ke tab ELEMEN HALAMAN dan lihat hasil pekerjaan anda tadi..

6.Tambahkan elemen di lokasi baru yang muncul tersebut sesuai dengan sobat inginkan.contohnya,google adsense,daftar isi blog sobat,foto dll.tergantung kreasi dari sobat.^^

Akhir kata,klo ada sobat yang mempunyai tips-tips lainnya,minta sarannya ya.. thank's.

See u..