Makhluk - Makhluk Tuhan Paling Besar
Written by RA_Syihan on Sunday, November 07, 2010 | Category: Berita, Entertainment, Informasi, Kocak
Membuat Tampilan Komentar dan Jawaban Beda dengan CSS3
Untuk Template Lama (Template Tata Letak/Layout Templates) dan New Blogger Template).
Salah satu cara memberikan "servis terbaik" kepada pembaca atau pengunjung blog adalah dengan memberikan ciri khusus pada jawaban komentar yang dibuat autor. Dengan cara ini maka komentar pengunjung dan jawaban yang berupa komentar dari author akan terlihat dengan sangat jelas. Beberapa cara bisa dilakukan misalnya dengan membuat bentuk teks berbeda atau dengan cara memberi background pada box yang berisikan komentar pengunjung atau sebaliknya pada komentar autor (jawaban komentar). Untuk membuat bentuk kolom komentar yang sangat menarik ini, tidak boleh tidak kita harus membongkar template guna menyimpan kode CSS dan xHTML pada bagian header dan body. Untuk penyimpanan xHTML dengan amat terpaksa juga harus kita lakukan melalui Expand Widget Template, karena tanpa melalui proses ini tidak mungkin apa yang kita rencanakan bisa terwujud. Heh ... heh ..., tapi jangan kuatir! Kita akan berikan panduan sedetail mungkin hingga semua sobat blogger, terutama yang masih dalam tahap belajar memahami isi dalamnya template juga bisa belajar dan menyelesaikan desain baru ini dengan tanpa kesulitan. Iya, toh! Lhoh ..., buat apa buat tutorial klo nggak bisa dicerna dengan baik. Heh ...heh ... berkali-kali sudah banyak yang mengalami. Akibat terlalu banyak makan (tutorial atau makanan?) yang susah atau sulit dicerna di perut akhirnya masuk rumah sakit. Heh ... heh ... Usus buntunya kena! Ho ... ho... apa nggak repot jadinya?
Bentuk baru kolom komentar ini pastinya tidak hanya menguntungkan buat pengunjung, tetapi akan banyak manfaatnya juga buat tampilan blog. Yah..., jika mau sampeyan bisa utak-atik sendiri nantinya. Baik ganti bentuk dan warna teksnya atau mungkin cari-cari atau buat background lain yang "pas" dengan background blog sampeyan. Hoo... Asyik, toh! Heh ... heh ..., banyak ngomong, jadinya repot juga. Yok, kita mulai saja!
KODE CSS
.comment-body { margin:0 0 10px; padding:0 0 0 10px; } .comment-body p { margin:0 0 .5em; } .blog-author-comment { margin: 5px 0 10px; padding: 5px; } .blog-author-comment p { margin: 0 0 8px; padding: 10px; color: #c6e1fb; /* http://gubhugreyot.blogspot.com */ background: #777 url(http://i55.tinypic.com/2drrhur/bgsGR/images/bggaristransp.jpg); text-shadow: 1px 1px 1px #000; border: 1px solid #666; border-radius: 4px 12px 4px 12px; -moz-border-radius: 4px 12px 4px 12px; -webkit-border-radius: 4px 12px 4px 12px; -o-transition:all 1.2s ease-out; -moz-transition:all 1.2s ease-out; -webkit-transition:all 1.2s ease-out; } .blog-author-comment p:hover { -o-transform:scale(1.2) translate(0, 10px); -moz-transform:scale(1.2) translate(0, 10px); -webkit-transform:scale(1.2) translate(0, 10px); }
- Login : Login kee Blogger.
- Tuliskan "User Name (Nama Pengguna)" atau bisa juga gunakan "Email Address".
- Tuliskan "Password (Sandi)".
- KLIK "Login".
- Sesaat setelah login maka akan terlihat halaman "Dashboard (Dasbor)".
- KLIK link "Design (Rancangan)".. Bagian Design (Rancangan) yang akan terlihat setelah anda klik tadi adalah "Page Elements (Element Laman)", yang ditandai debngan terlihatnya beberapa box dengan beberapa diantaranya bergaris putus-putus yang merupakan pola dasar bentuk halaman blog sampeyan. Lewati saja halamman ini dengan klik link Edit HTML.
- Edit HTML-1 : Lakukan back-up Template terlebih dahulu.
- KLIK Download Template Lengkap (download Full Templates).
- Simpan file template di "Folder PC". Berikan nama untuk memudahkan pencarian saat dibutuhkan kembali nantinya. File template ini berekstensi .xml.
- Kembali ke "Edit HTML".
- Edit HTML-2 : KLIK Expand Widget Templates.
- Cari kode ]]></b:skin>, kemudian copy dan pastekan "kode CSS" di atas ]]></b:skin>.
- Cari kode seperti yang terlihat di bawh ini: <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
- Kode seperti di atas hanya ada 1 (satu) sehingga mencarinya tak akan sulit. Di bawah kode ini akan terdapat sederet kode seperti yang terlihat di bawah.
<dl expr:class='data:post.avatarIndentClass' id='comments-block'> <b:loop values='data:post.comments' var='comment'> <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'> <b:if cond='data:comment.favicon'> <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/> </b:if> <a expr:name='data:comment.anchorName'/> <b:if cond='data:blog.enabledCommentProfileImages'> <data:comment.authorAvatarImage/> </b:if> <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' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'> <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> </div> <b:if cond='data:post.commentPagingRequired'> <span class='paging-control-container'> <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'> <data:post.oldestLinkText/> </a> <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'> <data:post.olderLinkText/> </a> <data:post.commentRangeText/> <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'> <data:post.newerLinkText/> </a> <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'> <data:post.newestLinkText/> </a> </span> </b:if> <p class='comment-footer'>
- Ganti kode di atas dengan kode berikut:
<dl expr:class='data:post.avatarIndentClass' id='comments-block'> <b:loop values='data:post.comments' var='comment'> <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'> <b:if cond='data:comment.favicon'> <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/> </b:if> <a expr:name='data:comment.anchorName'/> <b:if cond='data:blog.enabledCommentProfileImages'> <data:comment.authorAvatarImage/> </b:if> <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> <!-- ======================S T A R T========================= Author Comment ========--> <b:if cond='data:comment.author == data:post.author'> <dd class='blog-author-comment'> <p><data:comment.body/></p> </dd> <b:else/> <!-- ==========START==gubhugreyot.blogspot.com== Author Comment ============ --> <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <p> <data:comment.body/> </p> </b:if> </dd> <!-- ===================== E N D ====================== Author Comment =========--> </b:if> <!-- ===================== E N D ====================== Author Comment ============= --> <dd class='comment-footer'>
- KLIK SAVE Templates/Simpan Template.
- Buka blog yang berisi komentar untuk melihat hasilnya.
Catatan:
- Kode yang berwarna biru adalah kode baru yang harus ditambahkan di template.
- Kode yang berwarna kuning merupakan tanda/kode batas dimana kode berwarna kuning harus di tempatkan.
- Jika menginginkan background box komentar author yang berbeda, silahkan ganti background yang terdapat di kode CSS.
- Gunakan Ctrl+F saat mencari kode html.
- Bila masih ada yang merasa bingung untuk melakukan pengamanan/back-up templates berikut cara mencari kode di template, silahkan buka Special Tutorial di sebelah kiri atas (menu). Disana tersedia beberapa tutorial penting termasuk cara cepat mencari kode HTML, CSS dan javascript.
Inilah Video Heboh Youtube Yang Disaksikan 129 Juta Penonton ( Hebat )
Klip sepanjang 55 detik menjadi video yang paling banyak ditonton di YouTube. Klip anak berusia dua dan setengah tahun itu, dapat 129 juta view sejak diluncurkan.
Charlie Bit My Finger – Again! merayap melewati video paling popular lainnya pada akhir pekan lalu dan menduduki posisi puncak.
Klip no 1 itu menampilkan kakak beradik Inggris Harry dan Charlie Davies-Carr yang berusia lima setengah dan dua tahun. Video itu dibuat pada Mei 2007 oleh ayah mereka, Howard.
Video itu menunjukkan Charlie menggigit jari kakaknya. Video itu menarik karena protes serta ekspresi wajah Harry.
Charlie Bit My Finger – Again! menggulingkan Evolution of Dance, klip yang diunggah oleh pembicara motivasi AS Judson Laipply pada April 2006.
Pagi ini (29/10), video itu telah dilihat 129.561.222 kali dibandingkan dengan Evolution 129.130.801 kali.
“Anak-anakku sekarang hampir menjadi legenda. Orang-orang ingin tanda tangan mereka, ini gila,” kata Davies-Carr, seorang konsultan IT dalam wawancara tahun 2008.
Selain sebagai video paling banyak dilihat di YouTube, klip itu juga paling favorit serta menempati posisi kedua yang paling sering didiskusikan.
Evolution telah dua kali terlempar dari posisi paling banyak dilihat di YouTube. Pertama kali di bulan Maret 2008, ketika sebuah klip berjudul Music Is My Hot Hot Sex oleh band elektro Brasil Cansei De Ser Sexy mengambil posisi teratas.
Namun segera terungkap, seseorang telah merekayasa agar mendapat posisi tinggi. Pembuat klip itu- seorang Italia bernama Clarus Bartel menghapus video itu dan Evolution kembali sebagai no 1.
Video aneh itu kehilangan peringkat atas lagi, pada bulan Agustus 2008 ketika penyanyi video musik Avril Lavigne, Girlfriend melompat ke posisi terdepan. Namun ternyata juga hasil manipulasi dan dirancang oleh user di situs penggemar Avril Lavigne.
Evolusi kemudian kembali mendapatkan peringkat teratas hingga terakhir Sabtu kemarin. YouTube yang baru-baru ini menandai ulang tahun ketiga pengambilalihan oleh Google, mengatakan telah melayani lebih dari 1 miliar video setiap harinya.