Modifikasi Tampilan Komentar Blogspot

Bosan dengan tampilan komentar pada blogspot??
Mau tau cara Modifikasi Tampilan Komentar Blogspot??
Ini contoh hasil modifikasinya:

Modifikasi Tampilan Komentar Blogspot

1. Masuk ke Blogger >> Template >> Edit HTML

2. Letakan script berikut diatas kode ]]></b:skin>

Script:

#comments { padding:10px; } #comments h4 { display:block; padding:5px; line-height:30px; } #comments h4, .comments .comment-header, .comments .comment-thread.inline-thread .comment { position:relative; } #comments h4 { background:#AD3000; text-align:center; } #comments h4 { font-weight:bold; color:#fff; } #comments h4:after { content:""; position:absolute; bottom:-10px; left:20px; width:0; height:0; border-style:solid; border-width:10px 7.5px 0 7.5px; border-color:#AD3000 transparent transparent transparent; line-height:0; } h4#comment-post-message { display:none; } #comments-block { margin:1em 0 1.5em; line-height:1.6em; } #comments-block .comment-author { margin:.5em 0; } #comments-block .comment-body { margin:.25em 0 0; } #comments-block .comment-footer { margin:-.25em 0 2em; line-height:1.4em; text-transform:uppercase; letter-spacing:.1em; } #comments-block .comment-body p { margin:0 0 .75em; } .comment .avatar-image-container { border:1px solid #B6B6B6; max-height:60px; margin-top:-10px; width:60px; position:relative; z-index:70; border:4px double #AD3000; box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3); -moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3); -webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3); box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3); } .comments .comments-content { padding:5px; font-size:11px; } .comment .comment-block { margin-left:75px !important; min-height:84px; text-align:left; } .comment .comment-header { background:none repeat scroll 0 0 #5D974C; color:#333; font-size:12px; font-weight:normal; margin-left:60px; } .comment .comment-header a { color:#fff !important; text-decoration:none; } .comment .comment-content { background:none repeat scroll 0 0 #FEFFF9; border-bottom:2px solid #DDD; font-size:12px; margin:0 0 30px; padding:5px 5px 10px 10px; text-align:left; } .comment .comment-actions a { color:#333; display:inline-block; line-height:1; margin:0 3px; padding:3px 6px !important; text-decoration:none; } .comment-header cite { background:none repeat scroll 0 0 #FD7000; border:1px solid #fff; color:#fff; padding:2px 5px; position:relative; z-index:99; margin-left:-20px; } cite.blog-author { background:none repeat scroll 0 0 #490077 !important; } .icon.blog-author { display:none !important; background:url("") no-repeat scroll 0 0; margin-left:90px; width:60px !important; height:60px !important; position:absolute; right:5px; bottom:5px; top:10px; } .comment .comment-header { color:#333; font-size:12px; font-weight:bold; } .comment .avatar-image-container img { border:medium none !important; height:60px !important; width:60px !important; max-height:60px !important; max-width:60px !important; } .comment .comment-actions a { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; background:none repeat scroll 0 0 #B4B4B4 !important; color:#FFF !important; display:inline-block !important; line-height:1 !important; margin-top:-10px !important; margin-right:2px !important; padding:3px 6px !important; text-decoration:none !important; font-size:14px; } .comment .comment-actions a:hover { background:#860000 !important; text-decoration:none !important; } .comments { font-size:1em; color:#000; } .comments .continue a { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; background:none repeat scroll 0 0 #575757 !important; color:#FFF !important; display:inline !important; line-height:1 !important; margin-top:10px !important; margin-right:2px !important; padding:3px 6px !important; font-size:13px; } .comments .continue a:hover { background:#860000 !important; color:#FFF; text-decoration:none; } .item-control { display:inline-block; } .comments .continue { border-top:2px solid transparent !important; } #comment-editor { width:103% !important; } .comment-form { width:100%; max-width:100%; } .comments .thread-toggle { margin-bottom:10px; } .comments .comment-thread.inline-thread .comment { margin:0 0 5px 15%; }

3. Simpan template dan lihat hasilnya.

Sangat mudah bukan??
Sebagai catatan, apabila sebelumnya anda sudah pernah melakukan modifikasi terhadap tampilan komentar, harap anda hapus terlebih dahulu script yang sebelumnya agar tidak terjadi error pada script ini.

Semoga bermanfaat . . .
Happy Blogging ^_^

Cara Membuat Menu Stripe-Ad

Beberapa waktu yang lalu ada kawan saya yang bertanya bagaimana Cara Membuat Menu Stripe-Ad,
untuk itu sekarang akan saya tunjukan Cara Membuat Menu Stripe-Ad yang sangat mudah diterapkan pada blog sobat semua.

Ini adalah contohnya,

 

Cara Membuat Menu Stripe-Ad

1. Masuk ke Blogger lalu klik Tata Letak, kemudian klik Edit HTML.
2. Cari kode ]]></b:skin> lalu letakan kode dibawah ini tepat dibawah ]]></b:skin>.
/* mta bar */ #mta_bar{background:#444 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1CE9x_6V5eF87aoIZcjPDlDDeRmYm63fybbuPJmvW6xfrYIXyN_2X-rSgJRv876_o54bRtMbXIXAkVncuKG5iFlKUSTh9FKldLIA6u7dmAf2drM48fTY7vybd5F85nHNePZmaJBRDzQg/s1600/wow.png') repeat-x; border-bottom:1px solid #111; z-index:100; top:0; left:0; width:100%; overflow:auto; position:fixed; margin-left:0; margin-right:0; margin-top:0; margin-bottom:4px; padding-left:0; padding-right:0; padding-top:7px; padding-bottom:4px; z-index:10000;opacity: 0.9;filter: alpha(opacity: 90);} * html #mta_bar{position:absolute; /*IE6 hack*/width:expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px":body.clientWidth+"px")} #mta_bar .center{float:left; text-align:center; font-family:Verdana,Arial; font-size:13px; font-weight:bold; font-style:normal; color:#FFFFFF; width:65%} #mta_bar .left{float:left; text-align:left; font-family:Arial; font-size:13px; font-weight:normal; font-style:normal; color:#FFFFFF; width:20%} #mta_bar .right{font-family:verdana,Arial,Helvetica,sans-serif; float:right; text-align:center; font-weight:normal; font-size:10px; letter-spacing:0; width:30px; white-space:nowrap} #mta_bar .right a{font-size:10px; color:#FFFFFF; text-decoration:underline} #mta_bar .right a:hover{font-size:10px; color:#FF0080; text-decoration:none} #left_bar a{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6yIYNFLQNcEtXFHYiY1vq8_yC85aMTG78qjY7Yfq7Dz52NN_vBXBElktEIj0ccgTxSWsryBnJSSVAItkFGSEi6H6ObH6Q5xtHLy3kZ86Xdsz4qrs6yWiebjbj_0aENNZvOuWzF4Hnr3zb/s200/feed-c.png') no-repeat; font-weight:bold;text-decoration:none; color:#fff; padding-left:23px; padding-right:0; padding-top:0; padding-bottom:10px} #left_bar a:hover{text-decoration:underline; color:#fff} #left_bar2 a{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSWxI_Nv8sahTH-dJs9Gq0Jvtk4Yb96InJkPHfD-i_QW7AUkmw9gRdEAMABF0IEpVNvxHV-oS5oZGJWa0TLS4L2C_wb2tjy_rztZTu3i2bWmc4dQCYhE0d3cdtuU3F1EtS_w3KzR2RlKCM/s200/check-c.png) no-repeat 2px; text-decoration:none; font-weight:bold; color:#fff; padding-left:21px; padding-right:0; padding-top:0; padding-bottom:0px} #left_bar2 a:hover{text-decoration:underline; color:#fff} #left_bar3 a{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeP3eSXd6NXeHhbd2Wloz-HqSSENrBchGlbFPSZ6Q02Db1mACXryIUnBEdCb6pVjlAGVDWF0TQ-60WNJphd_vHHz1dMWp8dF4OEGZwxuwNtPmXJcdbW3Enw2-O_M49oukdf2-UJ2l2JuCe/s200/facebook-c.png) no-repeat 2px; text-decoration:none; color:#fff; padding-left:21px; padding-right:0; padding-top:0; padding-bottom:0} #to_top{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1f5KsZthxgM97yfCbozvke9d6YzTnHYAeX1gikSbYUucpkenL8cFNQEwTtdx6mokqPup6qXpUBRe5whruT9304mJvfcxJvnOyaw6wpgNIwBUdQdow82JLwg4borDDbqjbWVnW1j1GMNC-/) no-repeat scroll 0%; position:absolute; /*this replaces float - fixes thanks to Larry ofhttp://blog.lroot.com*/height:18px; width:19px; margin:0 0 0 900px; /*this was updated*/padding:9px 5px} #to_top a{padding:8px}
3. Cari kode </head> dan letakan kode ini tepat diatasnya,
<script src='http://sites.google.com/site/asrizalofficialweb/javascript/Stript-ad.js' type='text/javascript'/> 
4.  Kemudian letakan kode dibawah ini dan letakan tepat dibawah <body>,
<div id="mta_bar"><div id="left_bar2"><span class="left"><a href='http://www.facebook.com/dhetughi' rel='nofollow' target='_blank' title='Add me as friend on Facebook'>Facebook</a><a href='http://twitter.com/dhemrsimple' rel='nofollow' target='_blank' title='Follow me on Twitter'>Twitter</a><a href='http://www.facebook.com/groups/und3rgr0und' rel='nofollow' target='_blank' title='My Group'>Join Here !</a></span></div><div id='left_bar'><span class='center'><a href='http://feedburner.google.com/fb/a/mailverify?uri=TrikDanInformasi&loc=en_US' rel='nofollow' target='_blank'>Gratis Berlangganan artikel via email, join sekarang! </a></span></div><span onmouseout="self.status=''" onmouseover="self.status='asrizalwahdanwilsa';return true;" class="right"> <img onclick="closeTopAds();return false;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1f5KsZthxgM97yfCbozvke9d6YzTnHYAeX1gikSbYUucpkenL8cFNQEwTtdx6mokqPup6qXpUBRe5whruT9304mJvfcxJvnOyaw6wpgNIwBUdQdow82JLwg4borDDbqjbWVnW1j1GMNC-/" style="cursor:hand;cursor:pointer;" align="absmiddle" border="0" /></span></div>

5. Simpan template dan lihatlah hasilnya.

• Ubah "dhetughi" dengan ID Facebook anda.
• Ubah "dhemrsimple" dengan ID Twitter anda.
• Selebihnya silakan anda edit sendiri.

Bagaimana??
Sangat mudah bukan?!

Saran dari saya sebelum melakukan Edit HTML biasakan untuk melakukan Backup Template terlebih dahulu, agar apabila terjadi error anda bisa melakukan Restore dengan mudah.
 
Sekian Cara Membuat Menu Stripe-Ad, semoga bermanfaat...

Download Template Blog (Part 3)

Update lagi nih kawan, beberapa koleksi template blogspot yang saya punya.
Semoga bermanfaat ^_^

DOWNLOAD

Download Template Blog (Part 2)

Ini adalah seri lanjutan dari artikel saya yang sebelumnya,
dan seperti biasa, kamu boleh medistribusikan template ini dengan syarat mencatumkan link sumber blog ini.

Silakan didownload



Semoga bermanfaat . .

Download Template Blog (Part 1)

Anda suka ngeblog??
Bosen dengan template blogger yang itu-itu aja??
Kalau begitu ini adalah hari keberuntungan anda...hehe

Saya akan bagikan beberapa koleksi template yang saya miliki kepada anda,
Anda bebas Download Template Blog (Part 1) dan menshare ulang, dengan syarat mencantumkan link blog ini (sebagai tanda anda menghargai karya saya)

Silahkan didownload,

Password : trikdaninformasi.blogspot.com

Like this ^_^

Cara Modifikasi Kotak Komentar Blogspot

Beberapa waktu yang lalu ada seorang teman yang bertanya kepada saya bagaimana Cara Modifikasi Kotak Komentar Blogspot seperti pada blog ini.
Memang kotak komentar dafault dari blogspot tampilannya sangat sederhana dan tampak statis, yang menurut itu sangat membosankan.
Untuk itulah saya tulis sedikit tutor untuk Cara Modifikasi Kotak Komentar Blogspot .

Sebenarnya Cara Modifikasi Kotak Komentar Blogspot sangat mudah sekali, silahkan disimak.

1. Masuk ke situs berikut ini, lalu daftarkan blog sobat
2. Login menggunakan akun yang baru dibuat
3. Ikuti petunjuk yang disediakan

Jika berhasil, maka tampilan komentar pada blog sobat akan tampak seperti pada blog ini.
Sekian tutor yang sangat sederhana ini, terimakasih dan semoga bermanfaat.

Cara Mendaftarkan Sitemap ke Google

Sitemap atau peta situs yang dimaksud disini bukanlah seperti daftar isi blog, melainkan sebuah peta situs yang akan memandu Search Engine untuk menelusuri blog anda.

Tanpa sebuah peta, perjalanan Search Engine tentu saja akan terhambat karena Search Engine tidak mengetahui struktur blog yang anda miliki.

Disitulah fungsi dari Sitemap.
Sitemap akan membuat sebuah peta yang akan memudahkan Search Engine menjelajahi blog anda dan akan membuat blog anda lebih cepat terindex Search Engine.

Lalu bagaimana caranya Search Engine mengetahui sitemap anda??

 

Tentu saja caranya dengan memperkenalkan Sitemap anda ke Search Engine seperti Google.

Bagi yang belum mengetahui caranya, silahkan disimak,

1. Di dashboard web pada webmaster tools, lihat kolom bagian kiri pada bagian Sitemap, lalu Klik. Atau akses melalui panel navigasi di sebelah kiri, Optimization > Sitemap.

2. Setelah masuk di halaman daftar sitemap, klik tombol merah di kanan atas bertuliskan "Add/Test Sitemap".

3. Lalu isikan bagian akhir url halaman: sitemap.xml

4. Klik "Submit Sitemap".

Selesai.
Anda tinggal menunggu Google untuk mengindex blog anda.