Taqobalallahu Minna Wa Minkum

Download Minima Cigazine Template

Makacih atas kunjugan dan supportnya selama ini

MyQeys4blog : Menambah Smileys Emoticon Komentar

Dapat Award dan PR :

1. Subagya
2. Yog@
3. Ardy Pratama
4. Istifajar
5. Harry
6. Faank Fachrezi
7. Benny

otre mudah2an kalau inga.. saya akan publis setelah idul-fitri saja

Dulu saya pernah menulis tentang cara menambahkan smiley emoticon untuk komentar di blogspot. Namun sayang –nya .. untuk menyisipkan smiley emoticon-nya itu kita harus menulis atau mengetik secara manual ke dalam kolom komentar.

Nah sekarang anda bisa mencoba emoticon komentar yang di buat oleh siswa yang masih culun ini ( Ngakunya sih masih SMP.. heueu).

Kelebihan emoticon dari ujan ini ( Fauzan ), kita ngga perlu cape nulis manual. Cukup anda pilih emoticon-nya kemudian Ctrl + V  ke dalam Form komentar. bluuzz langsung masuk pada  komentarnya keren kan !!.

Dan satu lagi, smyley emoticonya sendiri asli merupakan hasil karya-nya, yang dia beri nama “ myQsmileys “, karya dia yang telah meraih penghargaan sebagai :

“ Pemenang Indonesia ICT Awards (INAICTA) 2008, untuk sub-kategori Student Project SMP, Agutus 2008 “

Yup jika anda ingin menambahkan smileys emoticon ke dalam komentar, saran saya coba rasakan karya dari Dik Fauzan atau Ujan ini. mantep tenan mas !

* untuk mengetahui cara install-nya silahkan langsung meluncur saja.

View Tutorial :  Ujan-Ujanan Blogspot

Note Update:

Menurut Fauzan proyeknya sendiri merupakan open source, bahkan untuk penggembangan selanjutnya dia dengan senang hati menerima saran dan bantuan untuk melanjutkan proyek scriptnya ini. 

Update Dari Fauzan

update donk kang :
*saya sekarang kelas 10 (SMA N 39 JKT).. cuman waktu bikinnya pas masih SMP..
*smileynya mah bukan buatan saya.. saya ambil dari forum myQuran, makanya namanya myQsmileys.. tapi konsep bahwa saya harus bikin ini itu dengan teknologi (klik-paste)™ dan coding untuk halamannya.. memang buatan saya..

Download Minima Cigazine Template

Makacih atas kunjugan dan supportnya selama ini

Jurus Menaikan Jumlah Pelanggan (Feed) ala Tante Amanda

Saya tidak akan membahas seberapa pentingkah  mangfaat –nya jumlah pelanggan atau yang meng-subcriber artikel blog kita via email ? 

Namun satu hal , jika anda ingin bergerak dalam  bisnis online atau juga untuk memberi kepercayaan kepada visitor betapa pentingnya isi  blog anda ,  maka  jumlah pelanggan artikel menjadi sebuah keniscayaan.

So sekarang bagaimana trik untuk menambah jumlah pelangan  ( feed ) via email ?..

Pertamaxxx : cara haram
Dengan cara haram saya pernah lihat sebuah trik tutorial videonya ,  hanya dengan satu hari kita dapat menaikan jumlah pelanggan  tergantung dari keinginan kita. 2000 rb, 5000 rb dll. – ( namun karena sekarang sistem dari feedburner-nya sudah di perbaiki trik ini sudah basi ,…  maka beruntunglah para blogger  yang mendapatkan trik ini sebelum sistem feed dari feedburner di revisi ).

Keduaxxxxxxx: Cara halal
Sedangkan untuk cara halal, saya terkesan sekali dengan jurus Amanda untuk menaikan jumlah pelangan blog-nya. yakni menawarkan sebuah Free Ebook  yang hanya dapat di akses atau di dapatkan jika kita berlanggan tulisan-nya via email atau feed.

Dapat PR Lagi

Gile kecriptaan lagi PR:
1. Subagya
2. Yog@
3. ardypratama

yup nanti PR na akan saya laksanakan !!

Domain Gratis

Mau coba punya domain gratis dari Co.cc.  
Daftar Via Referral

Bayangin saja dulu sekitar 2 bulan yang lalu, saya lihat feed amanda  hanya sekitar 1500 ribuan saja ,  dan bandingkan dengan yang sekarang ini mencapai 3094. naik hampir 100%.

ini gambar pesan atau iklan  yang saya ambil dari blog tante amanda.

Jadi bagi saudara-saudari yang kepingin menaikan jumlah feed-nya coba saja trik dari Amanda ini. caranya.

1. Buatlah Free Ebook  yang sering di cari orang. gunakan google untuk melihat keyword apa yang paling banyak di akses. ( contohnya buat ebook kumpulan template , adsense dst ) 

2. Agar free ebook itu hanya dapat di akses atau di donlot untuk orang-orang yang berlanggan artikel via email  saja .. caranya masukan  kode ini pada css halaman template kita.

.updateinfo { display:none; }

Setelah itu setiap kita menulis artikel masukan tag html ini. ( biasanya saya simpan di akhir tulisan ).

<div class="updateinfo">
  <p> Ini tulisan hanya dapat terlihat jika berlangganan feed </p>
    </div>
 

contoh jika anda berlanggan artkel blog ini, di akhir tulisan anda akan menemukan tulisan dan pesan di bawah .

Ayo jangan segan-segan untuk berlanggan artikel blog ini **** halah promosixxxx ***

Sumber : Beatifulbeta

Download Minima Cigazine Template

Makacih atas kunjugan dan supportnya selama ini

Intermezo sejenak – berbagi award dan tag

Terupdate

Kemarin malem sempat  saya melacak via google tentang arti di balik berbagi award ini. tapi mungkin karena salah memasuka keyword atau apalah, dari beberapa halaman yang saya klik tak satu pun menemukan makna atau kandungan arti filosofi di balik berbagi award tersebut. Namun  saya sedikit terobati ketika mencari arti  “ tag “, setidaknya saya memahami berbagi award itu adalah sebuah tag. Dan tag sendiri menurut saya di ambil dari kalimat akhir dari istilah Meta-Tag . ( tolong koreksi bila salah.. red )

Artinya berbagi award atau tag merupakan kegiatan yang ujung-ujung untuk menaikan blog kita di mata mesin mencari. Apalagi award atau tag ini langsung di tautkan pada badan postingan blog. Jika pemberi award dan tag mempunyai pagerank cukup tinggi maka setidaknya yang ditautkannya akan kecipratan popularitasnnya.

Namun  bagi saya sendiri yang cupu, oot dan tidak terlalu serius terhadapa SEO, berbagi award dan tag  pengertiannya lebih dari sekedar itu, karena di dalamnya terkandung  makna dan filosofi tentang persahabatan, silaturrahmi, saling memberi semangat dan saling mendukung menaikan peringkat dalam search engine dll.

- dalam kamus blog yang saya baca  pada sobat  kapanpun.com , mungkin kegiataan seperti ini di istilahkan dengan Reciprocal Links atau disebut juga link love, tanda cinta, saling memberikan link berharap dapat menaikkan peringkat search engine .

Baiklah seperti yang kemarin saya posting , ternyata yang memberi award ini ada lima sahabat plus satu tag (  tagnya ngasih lima pertanyaan untuk saya jawab )

Pemberi Award :

1. jovie blog -  Kang Jaloe, Jovie suka ama artikel2nya....kuereeeennnn.....

2. Wahyu – Catalog-Tutorial,  blog dengan tutorial photosop yang ajieeebbbb

3. Harry – Kang jaloee, artikel dan ilmunya yang bisa membangkitkan semangat aku.

4. Revarius – Kang Jaloee, Saya Suka banget ma templatenya keren...

red : jangan di baca dengan kaca mata lain, itu hanya sebentuk rasa persahabatan dan saling memberi semangad.

Dan ini merupakan tag dari pyuriko yang  akan saya jawab pertanyaanya.

1. Empat kerjaan

a. Ngeblog
b. Tidur
c. Jaga Warung
d. Ngeblog lagi

2. Empat Tempat Tinggal

a. Cuman atu di rumah ortu

3. Empat film yang udah 100x ditonton?

a. belum ada kayaknya.

4. Empat tv show favorit?

a. Kick Andy, MetroTV

b. Sugeng Saryadi, STV
c. Persib Aing, MQTV
d. Tukul Arwana, SCTV

5.Empat makanan favorit?

a. Gule Kambing ( nyem..nyem )
b. Pete ( bau )
c. Sambel ( huh )
d. Acar ( hmm..laperrr )

4. Empat situs favorit?

a. Blog yang ini dong
b. Google dan Systemnya
c. Yahoo
d. Psdtut

Sedang award dan tagnya akan saya berikan kepada cowok semua..  inilah orang-orangnya

1. Semarang Review   - Sang pembaharu dalam memaknai arti sebuah ngeblog.

2. Copy Paste – Sangat luar biasa dalam menkoleksi lagu-lagu Doel Sumbang.

3. Oesoes – Bayi ajaib yang membawa virus do follow.

4. Kapanpun – Sang tutor photoshop dengan gaya tulisan yang enak di cerna.

5. BloggerAddicter - Mantep tulisannya, kedalaman tulisan-nya mirip  kang Firdaus.

6. Paang Fachrezy - Tulisan-nya sangat Informatif, namun terkadang suka kocak.

7. Subagya - Jago Html , Teman untuk saling bertukar rumus css.

8.  Robby - Tulisannya harus di baca dengan bahasa iman.

9. Enhal - calon kyai yang selalu menyapa ramah, dan tulisan-nya berat bro.

10. ardypratama - salah satu blog yang inspiratif untuk berbisnis di internet.

Hmmm sebenarnya masih banyak yang ingin saya beri awardnya namun untuk sementara segitu saja dulu. mudah-mudahan kalau saya dapat award lagi pasti akan saya bagikan kepada yang belum menerima. 

Update

Sorixxx kemarin karena keburu2 di kejar sahur, saya lupa menuliskan peraturan

1. Terserah gambar award mana yang saudara mau ambil.

2. Menambahkah sebuah link yang memberi  award atau tag na.

Untuk Award

2. Jika mengambil award maka saudara harus memilih tujuh orang selanjutnya.

4. Buat sebaris catatan alasan kita memilih memberikan award-nya

Untuk Tags

5. Jika anda memilih tag maka saudara hanya memilih empat orang selanjutnya.

6 Dan menjawab  enam pertayaan seperti di atas.

Note.

Aniway kemarin saya memilih secara random. thanks atas kerja samanya.

 

 

Download Minima Cigazine Template

Makacih atas kunjugan dan supportnya selama ini

Intermezo sejenak - yang keduaxxxx

“ … agak tersipu dan sukar. Saya kira saya sedang menghadapi Penyakit Nihil ..”

Demikian pengakuan Emha A.N ketika dia dimintai oleh penerbit mizan, semacam kata pendahulan untuk bukunya yang terkenal itu “ Dari Pojok Sejarah “.

heheheh.. ternyata orang  sekaliber Emha dalam menulis pun  ada saat-saat  di mana dia mentok dan miskin ide. apalagi saya yach yang bukan seorang penulis,  bahkan sering salah mengeja dan terkadang sembrono mengartikan istilah. he1000x…

ya wish.. karena keinginan yang mengebu-gebu untuk update, namun sukar untuk mentransformasikan ide itu ke dalam tulisan, akhirnya saya nulis intermezo lagi. namun intermezo kali ini bukan untuk mengkadali vistor dari si amung ( red lihat sini) . tapi intermezo ini bercerita yang ringan-ringan saja.

Domain Gratis

Konon untuk satu email kita punya 3 (tiga) domain Co.cc.
Lumayan selain daftar gratis, kita pun bisa install dan belajar  wordpress, Joom la, Drupal dll.

Daftar Via Referral

Mencoba Belajar Wordpress Kembali.

Baru dua hari kemarin saya sedang rajin-rajinya mencoba  mengulang dari awal belajar wordpress  lagi. Karena kebetulan saat kemarin saya coba iseng  daftar free domain dari co.cc , kemudian karena tanggung saya lanjutkan daftar juga ke 000webhosting  untuk  memakai jasa hostingan-nya ( red keren bo ! ) . untuk blognya saya pilih  wordpress sebagai blog berjenis kelamin content manajemen sistem ( cms ).

Alasannya kenapa saya pilih wordpress , selain karena ingin mengenal lebih paham blog tersebut , juga saya pikir-pikir sangat di sayangkan   jika mempunyai domain semisal com, net, co.nr, co.cc. di gunakan hanya untuk blogspot. 

- apalagi di lihat dari sudut manapun blogspot jelas kalah kelas jika di bandingkan dengan wordpress. kecuali kalau hanya sekedar ingin mempelajari bagaimana caranya mengatur blogspot dengan custom domain co.cc itu lain soal. ( red.. sstttt…. ini menurut pendapat ku lho ).

Tentang wordpress ini pastinya saya akan dongengkan pada blog kembaran saya , jaloee blog. - dari mulai menghubungkan dns server antara hosting dan domainnya, mengalami trial dan error, menginstall wordpress pada ooowebhosting dll.

Sedangkan  theme wordpress  yang saya gunakan otomatis saya pilih layout magazine. kalau anda mau,  saya pun mengajak dan  mengundang anda untuk mengelola dan menulis pada blog wordpress saya tersebut..  hayoo mari kita kalahkan detik.com .. wekekekeke.. mimpi kaleeee..

Hatrick Mendapatkan Award.

Jika bulan puasa di sebutkan merupakan bulan kemulian dan berkah bagi kaum muslimin, maka ini benar-benar terjadi dan saya alami. bayangin saja ! baru  puasanya menginjak hari yang ke enam belas, saya sudah mendapatkan penganugrahan 3 award berturut- turut alias hatrik  – dari jovieblog, wahyu dan harry  , plus di tambah satu tag dari pyuriko.

Namun  untuk sementara award dan tag-nya saya simpan dulu dalam lemari, karena baru ada satu pelamar yang masuk dan mau saya berikan  awardnya itu - yakni  sobat rida – copy paste. hayooo siapa lagi yang mau awardnya ngacung !!!  

Cigazine Template Minima Multi kolom

Kemarin masih saja ada yang belum paham untuk mendapatkan free template Cigazine minima multi kolom ( lihat di sini ). template itu hanya saya distribusikan untuk kawan-kawan yang sudah rela memberikan space emailnya untuk artikel di blog ini. jadi kalau saudara-saudari mau silahkan saja berlanggan via emal. **halah promosi.. ( red.. oh iya saya pun mempunyai template rouder-courner empat kolom. yang dulu tuh merupakan pesanan dari seorang kawan .. nantinya akan saya share juga template itu…. hmmmmmm berbau promosixxxx jugaxx.)

Akhirnya…

Puiihhh cape dech..akhirnya terupdate juga.. heuehueue.

 

Download Minima Cigazine Template

Makacih atas kunjugan dan supportnya selama ini

Share Cigazine Template – Minima Multi Kolom

Tanggal 9 sep – 2008  kemarin saya dapat award dari jovieblog. dan makacih atas award-nya cuman saya masih binggung  apakah  award-nya saya berikan lagi pada orang lain atau saya jual buat THR lebaran nanti. heuehue

Kemudian setelah itu pada tanggal 11 sep- 2008 , saya dapat tag juga dari pyriko. dan saya pun binggung mau diberikan kepada siapa tag ini ? .. kalau kang firdaus masih rajin ngeblog mungkin tag-nya akan saya berikan pada dia. Atau di antara akang abang mba teteh  ada yang belum kebagian award dan tag .. silahkan ngacung saja kalau mau.. :)

Yup dan ini sekedar bentuk kaul ( janji ), ketika  saya membuat layout blog untuk saudara kembaran saya jaloee blog . Baik  itu jika hasil desain-nya jelek atau menjijikan, norak atau menyebalkan. saya akan tetap -

share atau bagikan koding template-nya  bagi siapa saja yang mau.tujuannya untuk membuang  jauh-jauh keinginan saya  yang  selalu tergoda untuk mengonta-ganti template pada blog tersebut. – ya mudah-mudah saja begitu …heuehuehu

Layout-nya saya buat dari template minima dan hasilnya pun sebenarnya minima pula  tidak ada yang lebih. kecuali  saya  menambahkan beberapa kolom, atau  menjadi minima yang multi kolom - baik itu untuk bagian header, sidebarnya, main-footernya, dan juga bagian footernya .

Juga pada bagian atas dan bagian bawahnya saya pasang pula Navbar dari tante Amanda Fazani. Sedangan untuk kolom komentar saya mengunakan seperti kolom komentar pada blog ini.  yakni di belah menjadi dua kolom.

Jika dilihat pada dapur halaman blog-nya terlihat seperti gambar berikut.

* ini merupakan hasil pemaksaan agar layout na terkesan sebuah layout ala magazine, namun karena untuk blogspot belum tersebar luas cara menghack templatenya menjadi sebuah magazine. maka saya sebut saja cigazine Template.

* Sebenarnya cucok bagi saudara yang rakus ingin memasang banyak widget, apalagi widget seperti blog list dan widget Follovers yang masih beta. atau jika ingin sedikit variatif anda bisa mengunakan feed dari Google Api – lihat di sini . maka akan keliatan menyerupai sebuah blog ala cigazine. – menurut saya seh.

* Dan juga karena saya menyediakan  cukup lebar lahan untuk postingannya, saudara bisa mengunakan penulisan gaya koran atau majalah- di sini.

View : Demo Satu

Installing.

1. cara instal template tersebut  sama seperti cara kita mengistall atau menganti layout lainnya. ( kalau belum tahu cara menganti template bisa di lihat di sini. )

2. Kemudian setelah itu buka tab pengaturan – format dan ganti format tanggalnya menjadi seperti berikut ini.

 

Donlot

Tapi template ini saya distribusikan secara terbatas, di peruntukan bagi anda yang telah berlangganan artikel blog ini melalui email. – ini sebenarnya sebagai bentuk penghargaan saya kepada saudara-saudara yang telah rela membagi lahan atau inbox e-mail nya untuk di jejali dengan artikel sampah  catalog- blog ini.

* Untuk  anda yang telah berlanggan artikel via email, pada bagian  bawah artikel, anda akan mendapatkan sebuah link untuk mendonlot template miima cigazine ini.

 

Download Minima Cigazine Template

Makacih atas kunjugan dan supportnya selama ini

Blog-list widget dan Penampakanya

Yup mugkin kita sudah sama-sama mafhum tentang gadget Daftar Blog atau lebi pamiliar dengan sebutan Blog-list . yakni sebuah gadget link list yang bisa menampilkan url, sebuah feed atau inport  feed dari google reader. 

konon menurut primbon dengan memasang gadget ini, selain kita dapat menikmati update berlangganan artikel dari url yang kita masukan,  bloglist ini dapat di baca atau di crawl oleh seacrh engine.

Namun menururt saya, ada sebuah kelemahan pada html atau penampakan-nya  blog list ini, terutama bagi yang tidak menyertakan  atau yang tidak ingin menampilkan sebuah ikon pada link list-nya. maka yang terjadi akan terlihat sebuah space , jarak atau ruang kosong yang bagi saya pribadi sangat tidak suka karena tidak  sedap di pandang .

Spetakuler Event

Trick cara membelah kolom komentar se perti membelah buah durian ??
Read more

Blogwalking

Trilogi menampilkan kode html/javascript pada postinga dari mochal
Subagya-Blog

Test adu cepat Inter net Explorer 8, Fire Fox 3 dan Google Cro me
paank fachrezi

Seperti ilustrasi gambar di atas nampak keliatan list-nya menjorok ke kanan, dan terlihat sebuah ruang kosong.

Solusinya sebenarnya sangat sederhana sekali. kita cuman perlu taambahkan pada bagian kode Css-nya seperti ini.

 

#BlogList1 ul li, #BlogList2 ul li {
background:none;
}

.blog-icon {
display:none;
}

Sedangkan jika kita ingin mempercantik area blog list, contohnya menambah sebuah border pemengalan antar list.  kita bisa menambahkan kode tambahan lagi seperti ini.

 

#BlogList1 ul li, #BlogList2 ul li {
background:none;
}

.blog-icon {
display:none;
}

.blog-content {
border-bottom:1px dotted #ccc;
padding-bottom:10px;
}

Jika kita ingin menambah jarak antara judul blog dan tulisan-nya kita tambahkan kode  css seperti ini.

 

#BlogList1 ul li, #BlogList2 ul li {
background:none;
}

.blog-icon {
display:none;
}
.blog-content {
border-bottom:1px dotted #ccc;
padding-bottom:10px;
}

.blog-title{
padding-bottom:10px;
}

 

Dan Itu sebenarnya hanya merupakan salah satu cara saja untuk mengcustomise perwajahan blog list tersebut.

Intermezo sejenak

Jika kita online sama ortu, paman, kaka, adek, apalagi kalau sama yang satu ini - ehm pacar. saya sendiri rasanya minder kalau menjelaskan tentang yang satu ini.

Ya. kalau blog kita blog seleb, yang banyak visitornya seh. pasti donk kita dengan bangga akan menjelaskan kegunaan si Amung ini.- bukan pa Amung jubir president lho. Namun bagi blog saya dan anda yang cupu-cupu gini, hihihi rada segan juga untuk pasang widget ini dan takut menerangkannya.. maklum jaim gitu lho.

Tapi ini intermezo… saya pernah coba pakai trik biar angka si Amung ini ngga lemot di angka satu. Caranya, pasang dulu widget tersebut..misalkan kode yang kita dapat seperti ini.

<a href="http://whos.amung.us/show/w77vhv4i"><img src="http://whos.amung.us/widget/w77vhv4i.png" alt="tracker" width="81" height="29" border="0" /></a>

kemudian cari blog seleb yang kebetulan pake widget amung ini. pastinya angkanya gedekan.. kemudian intip kode amungnya. misalkan seperti ini.

<a href="http://whos.amung.us/show/ppnvhv4i"><img src="http://whos.amung.us/widget/ppnvhv41.png" alt="tracker" width="81" height="29" border="0" /></a>

dan kita hanya merubah sedikit saja atau menkombinasikan kode amung milik kita dengan kode yang di punyai si seleb. kombinasinya seperti di bawah yang saya beri tanda merah.

<a href="http://whos.amung.us/show/w77vhv4i"><img src="http://whos.amung.us/swidget/ppnvhv41.png" alt="tracker" width="81" height="29" border="0" /></a>

bagaimana dengan yang ini ????

hihihih….password di bank saja bisa di bobol apalagi cuman nambahin angka yang gituan . betul ngga…kekekekek…

Menambah Numbering-Comments dan Photo-Author pada layout komentar 2 kolom

Artikel ini telah di update untuk mengetahui lebih lanjut silahkan baca pada tulisan ini “ Upgrade desain halaman komentar 2 kolom “

Sebelumnya saya ucapkan terimaksih yang sebesar-besarnya kepada kawan-kawan atas support dan saranya pada tulisan  " mendaur ulang perwajahan atau desain layout komentar ". 

Juga perlu di tegaskan di sini , inti sebenarnya tulisan tersebut bukan pada perwajahannya, tapi lebih kepada trik membagi kolom komentar menjadi dua kolom. Sedangkan untuk redesain selanjutnya, terserah anda karena saya pikir ini sangat fleksibel dan mudah sekali untuk di modif.

Selanjutnya pada sesi tulisan ini, saya hanya ingin melanjutkan bagaimana caranya meng-integrasikan atau menambah nummber-comment dan photo-comment ke dalam halaman komentar dua kolom ini.

 

 

Yuu mari kita lanjut , jika ingin mengetahui caranya :

Pertamaxxxx :

Backup dulu template kita. setelah itu buka tab Tata Letak- Edit Html.

Kemudian centang/tandai kotak kecil di samping tulisan Expand Template Widget

 

Keduaaxxxxxxx :

masukan Syntax Css ini.

* {
margin: 0px;
padding: 0px;
}

 

di atas Css body ini.

body { 
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;

  }

 

Artikel Lain : 
membuat alert message
Bingkai untuk karya puisi 
menambah sosial bookmarking
mempercantik bagian komentar

*Note : salah satu kegunaan syntax css di atas, untuk memulai valuenya secara default adalah nol untuk margin dan padding. baik di hitung dalam browser firefox maupun Ie.

 

Ketigaxxxxxxxx :

Cari syntax Css Comments template anda .  biasanya di bawah tulisan keterangan seperti ini.

/* Comment  */ 

Atau seperti ini ....

 

/* Comment
-------------------------------------------------- */

* jika masih belum tahu letak kode css tersebut .. tanya pada tetangga blog sampen yg sudah ahli.

 

Setelah ketemu ganti semuanya dengan Syntax Css ini.

 

/* Comments
----------------------------------------------- */

#comments { background:#fff; border: solid #cccccc 1px;/* border atau bingkai */ margin-bottom:10px; }

#comments h4 {margin:1em 10px;  padding:10px;  font-weight: normal;
  line-height: 1.4em;  text-transform:lowercase;  letter-spacing:.2em;
  color: #ccc;
  }

#comments-block {margin:.5em 0 1em;  line-height:1.6em;
  padding:10px;
  }
#comments-block .comment-author {display:block; width:90px;
  height:110px;border:1px dotted #ccc;
  margin:0;  text-align:center;  padding:5px 0 0;  line-height:1.4em;
  font-size:12px; text-transform:capitalize;
  }

#comments-block .mount-author {
  display:block;  overflow:hidden;  max-height: 16px; 
text-align:center; 
  }

#comments-block .comment-body {
  background:#fff ;  border-top:3px double #ccc;  margin:0;
  border-right:1px dotted #ccc;border-left:1px dotted #ccc;
  padding:10px 5px 0 10px;
  }
#comments-block .comment-footer {
  background:#fff ;  border-right:1px dotted #ccc; 
  border-left:1px dotted #ccc;border-bottom:3px double #ccc;
  margin-bottom:5px; padding:70px 5px 5px 10px;  line-height: 1.4em;
  text-transform:normal;  font-size:10px;   letter-spacing:.1em;
  }

#comments-block .comment-body-author p {
  background:#EFEBE0 ;  border-top:3px double #ccc;
  margin:0; padding:10px 5px 0 10px;
  }
#comments-block .comment-footer-author {
  background:#EFEBE0 ;border-bottom:1px solid #ccc;
  margin-bottom:5px;padding:70px 5px 5px 10px;
  line-height: 1.4em;  text-transform:normal;
  font-size:10px; letter-spacing:.1em;
  }
#comments-block .comment-body p {
  margin:0;
  }
.comment-form { background:#EFEFEF; border:5px solid #cccccc;
margin:0 10px 20px 10px; padding:10px 0 0 15px; }

.deleted-comment {
  font-style:italic;  color:gray;
  }

.numberingcomments{
margin-top:5px;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 20px; font-weight: normal;
}

 

Keempaxxxxxx :

cari kode html di bawah ini.

<b:loop values='data:post.comments' var='comment'>

 

dan keseluruhan kodenya jadi atau mirip  seperti di bawah ini.

 

<dl id='comments-block'>
        <b:loop values='data:post.comments' var='comment'>
          <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
            <a expr:name='data:comment.anchorName'/>
            <b:if cond='data:comment.authorUrl'>
              <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
            <b:else/>
              <data:comment.author/>
            </b:if>
            <data:commentPostedByMsg/>
          </dt>
          <dd class='comment-body'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></p>
            </b:if>
          </dd>
          <dd class='comment-footer'>
            <span class='comment-timestamp'>
              <a expr:href='data:comment.url' title='comment permalink'>
                <data:comment.timestamp/>
              </a>
              <b:include data='comment' name='commentDeleteIcon'/>
            </span>
          </dd>
        </b:loop>
      </dl>

 

Kemudian ganti seluruh kode Html di atas dengan kode ini.

<dl id='comments-block'>
       <script type='text/javascript'>var CommentsCounter=0;</script>
      <b:loop values='data:post.comments' var='comment'> <div style='width: 10%; float: left;'><div class='' expr:id='data:comment.id'>
        <dt class='comment-author' expr:id='&quot;comment-&quot; + data:comment.id'>        
         <div class='mount-author'> <a expr:name='&quot;comment-&quot; + data:comment.id'/>
          <b:if cond='data:comment.authorUrl'>
            <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
          <b:else/>
            <data:comment.author/>
          </b:if></div>
         <div class='commentphoto' style='margin-top:.5em;'/><span class='numberingcomments'>
<a expr:href='&quot;#comment-&quot; + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

        </dt></div></div>
        <div style='width: 80%; float: right;'>
        <b:if cond='data:comment.author == data:post.author'>
          <dd class='comment-body-author'>
            <p><data:comment.body/></p>
          </dd>
          <dd class='comment-footer-author'>      

          <span class='comment-timestamp'>
            <a expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'>
              <data:comment.timestamp/>
            </a>
            <b:include data='comment' name='commentDeleteIcon'/>
          </span>
        </dd>
        <b:else/>

          <dd class='comment-body'>
           <b:if cond='data:comment.isDeleted'>
            <span class='deleted-comment'><data:comment.body/></span>
           <b:else/>
            <p><data:comment.body/></p>
           </b:if>
          </dd>

        <dd class='comment-footer'>      

          <span class='comment-timestamp'>
            <a expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'>
              <data:comment.timestamp/>
            </a>
            <b:include data='comment' name='commentDeleteIcon'/>
          </span>
        </dd></b:if></div>

<div style='clear: both;'/> 
      </b:loop>
    </dl>

 

Kelimaxxxxxxx :

Masukan javascript untuk photo-author .

<script src='http://yggomelprup.googlepages.com/blogger_comment_photos.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
BloggerProfiles.noimage = 'http://lh3.ggpht.com/jaloee/SJr2PbdrTsI/AAAAAAAACYI/EnzbBOOGxBg/nopic_48.gif';
BloggerProfiles.imageWidth = 50;
BloggerProfiles.imageHeight = 60;
addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author', 1);});
//]]>
</script>

 

di atas tag Html ini.

</head>

 

Setelah itu Simpan Template.

 

Special Thanks..

Ramani : author comment highlighting

Purplemoggy : comment author photos

blog.randomnessf : translation numbering comments

My Hack- Experiment : Mendaur Ulang Perwajahan dan Desain Layout Comments

Artikel ini telah di update untuk mengetahui lebih lanjut silahkan baca pada tulisan ini “ Upgrade desain halaman komentar 2 kolom “

Apapun Yang Dapat Anda Lakukan, Atau Ingin Anda Lakukan Mulailah Keberanian Memiliki Kecerdasan, Kekuatan Dan Keajaiban Di Dalam-nya . - gothe

Berawal dari sebuah pertanyaan :

Bisakah halaman komentar di bagi menjadi dua kolom ?

Mungkin bagi anda yang suka menutak-atik blog-nya, sering juga mengalami pertayaan-pertanyaan yang aneh seperti itu.

Maka saya buka kembali dan perbegang pada postingan sebelumnya “ Tulisan Ala Majalah atau koran “ juga tulisan berikut ini  “ Mempercantik Area Komentar bag 2 “ , kemudian setelah menjalani trial and error – mencoba dan  salah.  akhirnya  saya menemukan sebuah jawaban dan kesimpulan. ternyata halaman komentar bisa di belah atau di bagi menjadi dua kolom.

Selanjutnya, setelah pertanyaan di atas terjawab. timbul juga gagasan berkutnya
“ bagaimana agar dua kolom komentar ini di perhalus desainn-nya ?”

Dengan bantuan tulisan ramani tentang author comment highlighting, kemudian saya daur ulang hacknya untuk di sesuaikan dengan perwajahan atau desain halaman komen ini. hasilnya cukup mengirangkan, walaupun hack-experimen  ini perlu di kembangkan dan di uji-test apakah layak untuk di pakai atau tidak.

Inilah ilustrasi gambar experiment tersebut.

kolom pertama untuk area comment author dan kolom kedua untuk comment body dan comment-footer. Desain perwajahan-nya sendiri tidak baku, artinya bisa di redesain ulang.

Sekarang bagaimana untuk memasang-nya ke dalam template blog. – jika suka mari kita lanjut membacanya.

Pertamaxxxx :

Buka tab Tata Letak – Edit Html.

 

 

Kemudian tandai kotak kecil di samping tulisan Expand Template Widget

 

Keduaxxxxxx :

Kemudia cari Syntax Css untuk Comment yang anda miliki.

* jika template yang baik bisa-nya mengikut sertakan sebuah komentar yang menjelaskan maksud dari script, seperti kode komentar  ini.

/* Comment  */  

/* Comment
-------------------------------------------------- */

 

Nah ganti Syntax Css comment tersebut semuanya dengan yang ini.

/* Comments
----------------------------------------------- */

#comments { background:#F1F5F6; border: solid #cccccc 1px; margin-bottom:10px; }

#comments h4 {  margin:1em 0;  padding:10px;  font-weight: bold;
  line-height: 1.4em;  text-transform:uppercase;  letter-spacing:.2em;
  color: #999999;
  }

#comments-block {margin:.5em 0 1em;  line-height:1.6em;
  padding:10px;
  }
#comments-block .comment-author { display:block; width:100px;
  height:75px;
  background:transparent  url(http://lh3.ggpht.com/jaloee/SL0_1DTNaNI/AAAAAAAACms/sAMO0QXSswM/balon.gif) no-repeat top;  margin:0;  text-align:center;
  padding:15px 0 0;  line-height:1.4em;
  text-transform:capitalize;  font-size:12px;
  }
#comments-block .comment-body {
  background:#fff ;
  border-top:3px double #ccc;  margin:0;
  padding:10px 5px 0 10px;
  }
#comments-block .comment-footer {
  background:#fff ;  border-bottom:3px double #ccc;
  margin:0; padding:50px 5px 5px 10px;  line-height: 1.4em;
  text-transform:normal;  font-size:10px;   letter-spacing:.1em;
  }

#comments-block .comment-body-author p {
  background:#DFD6C3 ;  border-top:3px double #ccc;
  margin:0; padding:10px 5px 0 10px;
  }
#comments-block .comment-footer-author {
  background:#DFD6C3 ; border-bottom:1px solid #ccc;
  margin:0;   padding:50px 5px 5px 10px;
  line-height: 1.4em;  text-transform:normal;
  font-size:10px; letter-spacing:.1em;
  }
#comments-block .comment-body p {
  margin:0;
  }
.comment-form { background:#EFEFEF; border:5px solid #cccccc;
margin:0 10px 20px 10px; padding:10px 0 0 15px; }

.deleted-comment {
  font-style:italic;
  color:gray;
  }

 

Ketigaxxxxx :

Kemudian cari kode Html ini.

 

<dl id='comments-block'>
        <b:loop values='data:post.comments' var='comment'>
          <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
            <a expr:name='data:comment.anchorName'/>
            <b:if cond='data:comment.authorUrl'>
              <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
            <b:else/>
              <data:comment.author/>
            </b:if>
            <data:commentPostedByMsg/>
          </dt>
          <dd class='comment-body'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></p>
            </b:if>
          </dd>
          <dd class='comment-footer'>
            <span class='comment-timestamp'>
              <a expr:href='data:comment.url' title='comment permalink'>
                <data:comment.timestamp/>
              </a>
              <b:include data='comment' name='commentDeleteIcon'/>
            </span>
          </dd>
        </b:loop>
      </dl>

 

 

* Biasanya para pengrajin blog, ada yang menganti kode html-nya seperti tulisan yg diberi tanda merah di atas dengan html- lainnya.. jadi agar pastinya carilah kode pada baris kedua. yang saya pertebal. – saran -  dan lihatlah pada persamaan kode-nya.

 

Kemudian html di atas ganti dengan kode ini.

 

<dl id='comments-block'>
      <b:loop values='data:post.comments' var='comment'> <div style='width: 12%; float: left;'>
        <dt class='comment-author' expr:id='&quot;comment-&quot; + data:comment.id'>        
          <a expr:name='&quot;comment-&quot; + data:comment.id'/>
          <b:if cond='data:comment.authorUrl'>
            <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
          <b:else/>
            <data:comment.author/>
          </b:if>
         <br/>said..
        </dt></div>
        <div style='width: 78%; float: right;'>
        <b:if cond='data:comment.author == data:post.author'>
          <dd class='comment-body-author'>
            <p><data:comment.body/></p>
          </dd>
          <dd class='comment-footer-author'>      

          <span class='comment-timestamp'>
            <a expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'>
              <data:comment.timestamp/>
            </a>
            <b:include data='comment' name='commentDeleteIcon'/>
          </span>
        </dd>
        <b:else/>

          <dd class='comment-body'>
           <b:if cond='data:comment.isDeleted'>
            <span class='deleted-comment'><data:comment.body/></span>
           <b:else/>
            <p><data:comment.body/></p>
           </b:if>
          </dd>

        <dd class='comment-footer'>      

          <span class='comment-timestamp'>
            <a expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'>
              <data:comment.timestamp/>
            </a>
            <b:include data='comment' name='commentDeleteIcon'/>
          </span>
        </dd></b:if></div>

<div style='clear: both;'/> 
      </b:loop><div style='text-align:right;padding:10px;'><small>Powered By:<a href='http://www.catalog-tutorial.blogspot.com/'> Catalog-Tutorial</a></small></div>
    </dl>

 

Setelah itu Simpan Perubahan.

 

Trouble-shooting :

Bug pertamaxx :

Seperti judulnya, dalam beberapa template yang saya uji coba ada sedikit masalahnya contonya seperti pada gambar ini. lihat tanda panah berwarna merah.

 

Untuk memperbaikinya masukan saja kode Css ini.

* {
margin: 0px;
padding: 0px;
}

di atas kode ini.

body {
  properti:value 
  }

Bug Keduaxxxxx :

Seperti gambar di bawah, background gambarnya pada kolom untuk comment-authornya terlalu besar atau menjorok kesamping kanan.

 

Untuk memperbaikinya ganti saja kode ini.

#comments-block .comment-author { display:block; width:100px;
  height:75px;  background:transparent  url(http://lh3.ggpht.com/jaloee/SL0_1DTNaNI/AAAAAAAACms/.gif) no-repeat top;  margin:0;  text-align:center;
  padding:15px 0 0;  line-height:1.4em;  text-transform:capitalize;  font-size:12px;
  }

Dengan kode ini.

#comments-block .comment-author { display:block;  background:#fff; margin:0;  text-align:center;  padding:15px 0 0;  line-height:1.4em;
  text-transform:capitalize;  font-size:12px;
  }

 

Pertanyaan Berikutnya !!

Bisakah kolom keduanya untuk tempat Gadget atau Widget ?

Oh yach…Seperti saya jelaskan di atas, ini merupakan hack experimen. perlu di uji dan test, sampai sejauh mana fleksibelitas-nya trick ini. Untuk itu sudilah kiranya saudara memberi masukan dan pendapat-nya. apalagi saya sangat bergembira sekali jika anda mengembangkan-nya lebih lanjut.