Menghilangkan Judul Blog dan Deskripsi Blog

Judul blog sangat penting karena berperan sebagai keyword di mesin pencari. Tetatpi kadang judul blog terlihat kurang menarik. Kita tidak bisa menghapusnya, yang kita lakukan adalah menyembunyikannya. Begitu juga untuk deskripsi blog.

Nah, bagi yang ingin menghilangkannya caranya adalah sebagai berikut:

Menghilangkan Blog Title / judul blog
1. Login ke blogger
2. Tata Letak - EDIT HTML
3. Cari kode berikut #header h1 { atau kalau tidak ada kodenya .header h1 {
4. Nah sebelum penutup } tambahkan kode berwarna biru berikut:

display:none;

5. Lalu Simpan Template

Menghilangkan Deskripsi
1. Login ke blogger
2. Tata Letak - EDIT HTML
3. Cari kode berikut #header .description { atau kalau tidak ada kodenya .header .description {
4. Caranya sama tambahkan script berwarna hijau berikut sebelum penutup }

display:none;

5. Lalu Simpan Template

Semoga berhasil.....

Sumber: http://forantum.blogspot.c...-dan.html

Cara Menambah 2 dua Kolom di Bawah Posting

Bagaimana Cara Menambah 2 (dua) Kolom di Bawah Posting. sebelumnya saya mendapatkan tutorial blog ini di http://www.serba-tersedia.co.cc/2010/06/cara-menambah-2-dua-kolom-di-bawah.html, di blog tersebut terdapat dua kolom di bawah posting, yaitu kolom yang satu kolom Feed RSS dan satu lagi kolom Related Post (Artikel Terkait).

Adapun Cara Membuat atau Menambah 2 (dua) Kolom di Bawah Posting atau Artikel adalah sebagai berikut:

1. 
   
   Login ke Blogger/Blogspot => Rancangan/Layout => Edit HTML, Download Template Lengkap dan beri tanda centang Expand Template Widget;
   
2. 
   
   Cari kode ]]></b:skin> ;
   
3. 
   
   Di atas kode ]]></b:skin> letakkan kode di bawah ini:
   #related{background:#eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU-GsbS9dcuo3IsvAmqMepIbxftVFxYMrmi9P1C6RFIYN3QxFHUrGk2mZQJcv6Z_x12c15v9Ua4hmlHU8gpiY2Y3lg0XrE18zBMdzj4-Cwy5INvEEi6qxpk_n8gZnA08CiQoTAtz7XH_g/) 45% 0 repeat-y;border:1px solid #ddd;color:#000;margin:0 0 10px;padding:15px}
   #related .related-posts{font-weight:400;width:53%;float:right}
   #related .related-posts p{margin:0}
   #related .related-posts h3,#related .related-posts h2,#related .related-posts h1{font-size:12pt;letter-spacing:0;margin:0}
   #related .related-posts ol{font-weight:400;margin:2px 0 0}
   #related .subscribe{width:43%;float:left;color:#000}
   #related .subscribe p.intro{font-weight:400}
   #related .subscribe p.feed{margin-bottom:10px;font-weight:700;padding-left:21px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEickbUhRjBJ5UT4WNxv1HHGS9f2GxLymG187neo9bDbh-nJ28Q8cxvBkVBrZ1EtT9g9eqmXFHkpasTRyykr-KOVGk46V8MGCYMS9rhIyx4WKa-r5xi0EJFROGxGj5opzo9x8s-j08xleSM/) 0 50% no-repeat;vertical-align:middle}
   #related .subscribe form{margin:0;padding:0}
   .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
   .clearfix{display:inline-block}
   
4. 
   
   Cari kode di bawah ini:
   <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/> </b:if>
   
5. 
   
   Letakkan kode di bawah ini diantara kode: <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/> dan kode: </b:if> :
   <div class='clearfix' id='related'>
   <div class='subscribe'>
   <p class='feed'>
   <a href='http://disini letakkan Link Feed anda/feeds/posts/default'>Berlangganan via RSS Feed</a></p><p class='intro'>disini letakkan kode Form Berlangganan Anda</p></div>
   <div class='related-posts'>disini letakan kode Related Post Anda</div></div>
   
6. 
   
   Ganti teks warna biru dengan Link Feed dan kode Form Berlangganan serta Kode Related Post yang Anda punya. Untuk lebih jelas perhatikan contoh di bawah ini:
   
   

   <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
   
   <div class='clearfix' id='related'>
   <div class='subscribe'>
   <p class='feed'>
   <a href='http://serba-tersedia.blogspot.com/feeds/posts/default'>Berlangganan via RSS Feed</a></p>
   <p class='intro'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=SerbaTersedia&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=200,height=170&apos;);return true' style='border: 1px solid rgb(204, 204, 204); padding: 3px; text-align: center;' target='popupwindow'><p>Jika Anda Menyukai Artikel Blog ini, Masukan Alamat Email Anda Pada Kolom di Bawah, Maka Anda Akan Mendapatkan Kiriman Email Setiap Kali Ada Posting Baru. Terima Kasih Atas Partisifasinya</p><p><input name='email' style='width: 140px;' type='text'/></p><input name='uri' type='hidden' value='SerbaTersedia'/><input name='loc' type='hidden' value='en_US'/><input type='submit' value='Subscribe'/><p>Delivered by <a href='http://feedburner.google.com/' target='_blank'>FeedBurner</a></p><p><a href='http://feeds.feedburner.com/SerbaTersedia'><img alt='Feed Reader' height='26' src='http://feeds.feedburner.com/~fc/SerbaTersedia?bg=99CCFF&amp;fg=444444&amp;anim=0' style='border:0' width='88'/></a></p></form> </p></div>
   
   <div class='related-posts'><b:if cond='data:blog.pageType == &quot;item&quot;'><div class='rbbox'><div style='margin:0; padding-left:10px;'><div id='albri'/><script type='text/javascript'>var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;var maxNumberOfPostsPerLabel = 2;var maxNumberOfLabels = 8;maxNumberOfPostsPerLabel = 12;maxNumberOfLabels = 3;function listEntries10(json) {var ul = document.createElement(&#39;ul&#39;);var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?json.feed.entry.length : maxNumberOfPostsPerLabel;for (var i = 0; i &lt; maxPosts; i++) {var entry = json.feed.entry[i];var alturl;for (var k = 0; k &lt; entry.link.length; k++) {if (entry.link[k].rel == &#39;alternate&#39;) {alturl = entry.link[k].href;break;}}var li = document.createElement(&#39;li&#39;);var a = document.createElement(&#39;a&#39;);a.href = alturl;if(a.href!=location.href) {var txt = document.createTextNode(entry.title.$t);a.appendChild(txt);li.appendChild(a);ul.appendChild(li);}}for (var l = 0; l &lt; json.feed.link.length; l++) {if (json.feed.link[l].rel == &#39;alternate&#39;) {var raw = json.feed.link[l].href;var label = raw.substr(homeUrl3.length+13);var k;for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);var txt = document.createTextNode(label);var h = document.createElement(&#39;b&#39;);h.appendChild(txt);var div1 = document.createElement(&#39;div&#39;);div1.appendChild(h);div1.appendChild(ul);document.getElementById(&#39;albri&#39;).appendChild(div1);}}}function search10(query, label) {var script = document.createElement(&#39;script&#39;);script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;+ label +&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);document.documentElement.firstChild.appendChild(script);}var labelArray = new Array();var numLabel = 0;<b:loop values='data:posts' var='post'><b:loop values='data:post.labels' var='label'>textLabel = &quot;<data:label.name/>&quot;;var test = 0;for (var i = 0; i &lt; labelArray.length; i++)if (labelArray[i] == textLabel) test = 1;if (test == 0) {labelArray.push(textLabel);var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?labelArray.length : maxNumberOfLabels;if (numLabel &lt; maxLabels) {search10(homeUrl3, textLabel);numLabel++;}}</b:loop></b:loop></script></div><script type='text/javascript'>RelPost();</script></div></b:if> </div>
   </div>
   
   </b:if>
7. 
   
   Simpan Template, selesai!!!

Demikianlah tutorial cara membuat atau menambah dua kolom di bawah posting ini, 

semoga bermanfaat.

Sumber:http://www.serba-tersedia.co.cc/2010/06/cara-menambah-2-dua-kolom-di-bawah.html

Cara Membagi Postingan Menjadi 2 (dua) Kolom

Berbagai cara digunakan untuk menarik pengunjung agar datang dan kembali mengujungi website/blog yang kita buat, misalnya dengan membuat postingan yang unik dan berkualitas juga dengan mempercantik tampilan website/blog. Tips yang ingin Saya share kepada Anda kali ini adalah cara membuat postingan yang unik dan yang dimaksud unik disini bukan terkait isi dari postingan, melainkan berkenaan dengan penampilan dari postingan tersebut.

Yang menurut Saya unik tadi adalah menampilkan postingan menjadi 2 (dua) kolom seperti contoh di bawah ini:

Berbagai cara digunakan untuk menarik pengunjung agar datang dan kembali mengujungi website/blog yang kita buat, misalnya dengan membuat postingan yang unik dan berkualitas juga dengan mempercantik tampilan website/blog.

Tips yang ingin Saya share kepada Anda kali ini adalah cara membuat postingan yang unik dan yang dimaksud unik disini bukan terkait isi dari postingan, melainkan berkenaan dengan penampilan dari postingan tersebut.

Apakah Anda tertarik? Jika iya, berikut ini Cara Membagi Postingan Menjadi 2 (dua) Kolom, maka pada saat membuat posting Anda harus menulis lewat Edit HTML bukan dari Compose/Tulis dan dalam postingan tersebut masukan kode di bawah ini:

<table cellpadding="10" cellspacing="10"><tbody>
<tr> <td align="justify" valign="top" width="250"> artikel di bagian kiri</td><td align="justify" valign="top" width="250"> artikel di bagian kanan</td> </tr>
</tbody></table>

Baiklah supaya lebih jelas, berikut ini contohnya :

<table cellpadding="10" cellspacing="10"><tbody>
<tr> <td align="justify" valign="top" width="300">Berbagai cara digunakan untuk menarik pengunjung agar datang dan kembali mengujungi website/blog yang kita buat, misalnya dengan membuat postingan yang unik dan berkualitas juga dengan mempercantik tampilan website/blog. </td><td align="justify" valign="top" width="300"> Tips yang ingin Saya share kepada Anda kali ini adalah cara membuat postingan yang unik dan yang dimaksud unik disini bukan terkait isi dari postingan, melainkan berkenaan dengan penampilan dari postingan tersebut.</td> </tr>
</tbody></table>

Keterangan :
Cellpadding adalah jarak antara tepi kolom dengan tulisan;
Cellspacing adalah jarak antara dua kolom;
Width adalah lebar masing-masing kolom;
Align adalah perataan teks (justify untuk rata kanan kiri, left untuk rata kiri, right untuk rata kanan dan center untuk rata tengah);
Valign adalah perataan verikal (top untuk rata atas, bottom untuk rata bawah dan middle untuk rata tengah);
Anda bisa merubah dan mengaturnya sesuai selera Anda.
sumber:Cara Membagi Postingan Menjadi 2 (dua) Kolom

Membuat Kotak Komentar di blog

Kalaupun kotak komentar kita tidak muncul pada bawah postingan, dan turorial berikut adalah cara menampilkan kotak komentar pada blog, jika kotak komentar tidak muncul pada blog kita bisa menggunakan fasilitas yang sudah ada pada blogger tersebut.
Begini caranya :

1. Silahkan Login ke http://draft.blogger.com dengan ID blogger anda.
2. Kemudian pilih blog yang ingin anda edit, masuk Settings >> Commnets. Pada opsi Comment Form Placement pilih Embedded below post sepeti gambar dibawah

3. Kemudian klik Save Settings

Kemudian coba lihat apakah kotak komentar Anda sudah muncul dibawah posting. jika sudah berarti selesai, bila belum muncul maka ikuti cara-cara berikut ini :

1. Pada posisi di dashboard blogger, klik link Layout kemudian masuk ke Edit HTML
2. Jangan lupa centang/tandai/aktifkan Expand Widget Templates untuk bisa mengedit template secara keseluruhan.
3. Kemudian cari kode-kode di bawah ini :

<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a>
</p>
</b:if>

4. Kemudian hapus kode-kode di atas dan ganti dengan kode-kode dibawah ini :

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/> <b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a>
</b:if> </b:if> </p> </b:if>

5. Klik Save dan lihat hasilnya. Nah, selamat mencoba
sumber:http://shindublog.blogspot.com/....kotak-komentar.html

Membuat footer 3 kolom dengan background

Setelah mencari-cari tutorial membuat footer 3 kolom dengan background di google akhirnya saya menemukannya. ternyata sekarang cukup sulit untuk menemukan tutorial yang tepat di google, selain dikarenakan maraknya blog auto content juga di karenakan banyak blogger yang menembak keyword demi kepentingan pribadi. Saya menemukan beberapa tutorial membuat footer tiga kolom di google tapi hanya beberapa yang dapat di praktekkan dan yang lainnya bermasalah. Beberapa masalah itu adalah sebagai berikut:

• 1. Bukannya tiga kolom, tetapi footer 3 baris. Haha, buatnya 3 kolom, kok jadinya 3 baris. Saya sampe bingung, apalagi saya belum ahli dengan kode CSS template blogger.
• 2. Warna atau tampilan background tidak dapat diganti. Inilah yang mendorong saya untuk mencari tutorial membuat footer 3 kolom dengan background di google, karena tutorial saya tentang menambah footer 3 kolom yang dahulu backgroundnya tidak dapat diganti.
• 3. Template tidak dapat disimpan karena Error. Tapi akhirnya bisa, fyuh....

Setelah belajar CSS blogger template , akhirnya saya sedikit mengerti cara membuat footer 3 kolom dengan background di blogspot dan jadi juga footer 3 kolom blog forantum ini. Walaupun saya belum mengerti benar, berikut ini cara Membuat Footer 3 Kolom dengan Background di blogspot:

• 1. Login ke blogger dan masuk ke Dasbor.
• 2. Klik Rancangan, lalu pilih menu Edit HTML (Jangan Centang "Expand Template Widget")
• 3. Cari kode ]]></b:skin>
• 4. Letakkan kode CSS berikut ini diatas ]]></b:skin>

#footer-column-container {
clear:both;
}
.footer-column {
background:#444 url(http://img169.imageshack.us/img169/937/footerbawah.jpg) no-repeat; width:900px; position:relative; clear:both; margin:0 auto; float:left; padding:5px 0 10px 0; color:#fff
}

• 5. Cari kode <b:section class='footer' id='footer'>  dan ganti dengan kode pengganti di bawah ini:

<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
</div>

• 6. Apabila tidak ada kode yang saya maksud, letakkan kode pangganti diatas kode <!-- end content-wrapper -->
• 7. Apabila masih belum ketemu, letakkan kode yang pengganti tadi dibawah kode CSS bagian footer atau bottom.
• 8. Lalu simpan....

Maaf ya tutorial ini agak membingungkan, karena saya sendiri bingung, hehehe. Yang penting sobat belajar saja mempelajari kode-kodenya, semoga berhasil aja ya....
sumber:http://forantum.blogspot.com/2010/07/membuat-footer-3-kolom-dengan.html

Membuat Tepi Gambar Bershadow Dengan CSS 3

CSS 3 adalah generasi CSS (Cascading Style Sheet) yang ke 3, banyak keunggulan CSS 3 dibandingkan generasi yang sebelumnya, dan sudah mulai digunakan browser-browser, yaitu diantaranya adalah Mozilla Firefox v 3.6 dan Safari V 3, semoga saja browser-browser lainya menyusul untuk mendukung CSS 3.

Membuat image post blogger berbayang/shadow dengan menggunakan CSS 3, terlihat seperti gambar di samping kiri. Nah bagaimana caranya? silahkan ikuti langkah-langkah dibawah ini dan buktikan kecanggihan CSS 3.

Setelah Log In ke blogger pada dashboard masuk pada bagian "Design" lalu ke "Edit HTML"

lalu cari code CSS dibawah ini

.post img {
- - -
- - -
}

Note :

1. Perhatikan saja code yang berwarna merah diatas, karena garis ( - - - ) yang berwarna hijau adalah definisi CSS yang berbeda-beda setiap template
2. Dan kadang code yang berwarna merah ada tambahanya sehingga seperti ini : .post img, table.tr-caption-container {

Nah kalau sudah ganti code CSS tadi dengan definisi seperti dibawah ini

.post img {
background:#FFFFFF;
border:1px solid $bordercolor;
padding: 7px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}

Nah yang diganti adalah code CSS yang berwarna hijau saja.

kalau sudah lalu SAVE deh, dan lihat hasilnya di browser Mozilla v 3.6, Safari V 3 dan Google Chrome.

Sekian semoga bermanfaat.

Membuat text berjalan pada blogspot

Bagaimana membuat text bisa bergerak dan berjalan dari kiri ke kanan atau dari kanan kekiri. yang biasanya sering kita sebut dengan Membuat  efek Marquee pada blog....
trik code ini bisa ditaruh pada widget / sidebar blog maupun posting - an blog / entri..
berikut tutorial nya...

1. Kode untuk text bergerak (dari kiri ke kanan adalah)

<marquee>Contoh scrolling text</marquee>

hasil untuk kode ini seperti berikut:
Contoh scrolling text

2. untuk mengubah gerakan,
tambahkan code berikutl.

direction="left"
direction="right"
direction="up"
direction="down"
Berikut contoh kode penambahan untuk pegerakan dari kanan ke kiri

<marquee direction="right" >Contoh scrolling text</marquee>

hasil untuk kode ini adalah
Contoh scrolling text

3.Ubah warna background
Untuk ubah background, bisa diletakkan kode berikut
bgcolor="#kod warna"

Contoh kode yang diberi background,

<marquee direction="right" bgcolor="#99CCFF">Contoh scrolling text</marquee>

Hasil untuk kode ini adalah
Contoh scrolling text

4. Yang ini ber gerak kanan-kiri.
tambahkan kode berikut
behavior="alternate"

contoh kode yang diletakkan pada trick ini.

<marquee behavior="alternate" bgcolor="#99CCFF">Contoh scrolling text</marquee>

Output untuk kod ini
Contoh scrolling text

5.Ubah kecepatan bergerak pada text yang bergerak.
kecepata text juga dapat diubah dengan menambah kode berikut pada code paling atas sendiri.
scrollamount="2"

Contoh kode pada trick blog .

<marquee behavior="alternate" direction="left" bgcolor="#99CCFF" scrollamount="2">Contoh scrolling text</marquee>

Output:
Scrollamount :2
Contoh scrolling text

Scrollamount :4
Contoh scrolling text

6. Pause / berhenti apabila cursor diarahkan pada text.
Perkataan yang bergerak juga dapat dihentikan apabila cursor diarahkan pada text. agar pengunjung mudah untuk membaca isi dari text yang dimasukkan.
Penambahan kode yang perlu dilakukan adalah
onmouseover="this.stop()" onmouseout="this.start()"

Contoh kode pada blog seperti ini trick ini.

<marquee behavior="alternate" direction="left" bgcolor="#99CCFF" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" >Contoh scrolling text</marquee>

output untuk trick ini.
Contoh scrolling text

Selamat mencoba...

Cara merubah dan memodifikasi bentuk Blockquote

Pada tips dan trik blog kali ini kita akan merubah dan memodifikasi blockquote pada blog kita .Ada yang belum tau apa itu blockquote?
Blockquote adalah tanda yang digunakan untuk menandai suatu tulisan yang penting juga memberikan kesan posting artikel semakin berwarna dan kelihatan lebih cantik, sehingga tampak berbeda dari tulisan yang lainnya.
Cara menggunakan blockquote adalah dengan memblok tulisan yang diinginkan, kemudian anda klik tanda kutip pada kolom CMS,


lihat gambar di bawah ini :





Nah sudah tau kan? Jika anda kurang suka dengan bentuk blockquote anda,anda bisa memodifikasi bentuk nya sesuai dengan selera anda.Mau tau caranya?gampang kok :

1. Masuk ke TATA LETAK --> EDIT HTML
2. Anda cari kode di bawah ini :

.post blockquote atau ada template yang kode nya hanya blockquote saja

3. Masukkan kode html di bawah ini :

.post blockquote {
margin:1em 20px;
border: 3px dotted #ff0000;
padding: 10px;
}

Bentuknya akan seperti ini :











4. Save,dan lihat hasilnya...
Penting :
1. warna kuning adalah bentuk border yang bisa anda rubah sesuai dengan keinginan anda
2. warna hijau adalah warna border,rubah sesuai dengan keinginan anda
3. Untuk bentuk-bentuk border,anda bisa lihat tutorial nya disini : http://www.tizag.com/cssT/border.php

Contoh beberapa gambar jenis-jenis border:


















Lalu bagaimana jika ingin memasukkan gambar pada modifikasi blockquote anda?
Lihat kode di bawah ini :

.post blockquote { background:url(http://masukkan alamat gambar anda yang sudah diupoad di situs photosharing disini) no-repeat top left; padding:10px 20px 10px 45px;}

warna biru adalah ukuran letak gambar yang bisa anda sesuaikan dengan template anda.

Selamat mencoba...
sumber:http://www.trikblog.co.cc/2008/12/cara-merubah-dan-memodifikasi-bentuk.html 
 

Membedakan Tampilan Komentar Admin Dan Pengunjung pada blog

Membedakan tampilan komentar antara admin dan pengunjung atau yang biasa disebut dengan Author Comment Highlight tentu akan mempermudah pengunjung untuk mengetahui bahwa Anda sebagai pemilik blog telah memberikan tanggapan atas komentar-komentar yang telah ditinggalkan oleh pengunjung lain atau mungkin pengunjung itu sendiri.

Untuk membuatnya tidak terlalu sulit. Anda tinggal menambahkan beberapa potong kode CSS dan HTML
pada template blog.

Langkah 1: Download Template Lengkap
Dari menu Dashboard masuk ke menu Tata Letak | Edit HTML | Download Template Lengkap
sebagai file XML kemudian simpan ke harddisck Anda.
Langkah 2: Tambahkan Kode CSS
Masih pada menu Edit HTML, beri tanda centang pada Expand Template Widget, kemudian tambahkan beberapa baris kode CSS di bawah kode berikut:

#comments-block .comment-body {
margin: ... ;
padding-left: ... ;
font-size: ... ;
text-align: ... ;
}

Kode CSS:

/* Author Comment Highlight
____________________________*/

.author-body {
background: #E0EAE2;
margin: 0px;
border: 1px solid $bordercolor;
padding: 5px 5px 5px 20px;
}

.author-body p {
font-size: 100%;
margin: 0 0 .2em 0;
color: #000000;
}

Sehingga susunannya menjadi seperti di bawah ini:

#comments-block .comment-body {
margin: ... ;
padding-left: ... ;
font-size: ... ;
text-align: ... ;
}

/* Author Comment Highlight
____________________________*/

.author-body {
background: #E0EAE2;
margin: 0px;
border: 1px solid $bordercolor;
padding: 5px 5px 5px 20px;
}

.author-body p {
font-size: 100%;
margin: 0 0 .2em 0;
color: #000000;
}

Anda bisa menyesuaikan warnanya sesuai dengan keinginan Anda.

Langkah 3: Memodifikasi Kode Template
Gulir ke bawah, temukan kode di bawah ini:

<dd class='comment-body'>

Kemudian tambahkan kode berikut di atasnya:

<b:if cond='data:comment.author == data:post.author'>
<!-- hacks edited by http://new-page-tutorial.blogspot.com -->
<dd class='author-body'>
<p>
<data:comment.body/>
</p>
</dd>
<b:else/>

Tambahkan kode </b:if>, sehingga susunan lengkapnya seperti berikut:

<b:if cond='data:comment.author == data:post.author'>
<!-- hacks edited by http://new-page-tutorial.blogspot.com -->
<dd class='author-body'>
<p>
<data:comment.body/>
</p>
</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>

</b:if>

Langkah 4: Simpan Template
Simpan template Anda dan lihat hasilnya.

Semoga bermanfaat.
sumber:http://new-page-tutorial.blogspot.com/2010/04/membedakan-tampilan-komentar-admin-dan.html
 

Menyembunyikan judul blog pada header blog

Tutorial blog sederhana ini untuk menghilangkan judul blog di header namun tidak hilang judul blog kita sebenarnya hanya saja tidak tampak pada header.
Masuk menu Layout kemudian masuk Edit HTML kemudian cari Code di blog Anda yang mirip seperti dibawah:

#header h1 {
margin:50;
padding:5px 0 0 10px;
font-size: 100%;
font-weight:bold;
line-height: 1.2em;
letter-spacing:.0em;
font-style:italic;
color:#FFFFFF;
}

Nahh seperti halnya menghilangkan tanggal posting kita tambahkan Code Css visibility:hidden; Kedalam Css Diatas Sehingga kurang lebih menjadi seperti dibawah:

#header h1 {
margin:50;
padding:5px 0 0 10px;
font-size: 100%;
font-weight:bold;
line-height: 1.2em;
letter-spacing:.0em;
font-style:italic;
color:#FFFFFF;
visibility:hidden;
}

Simpan pengaturanya....

Membuat Efek Hover Pada semua Gambar di blogspot

Bagaimana membuat Efek Hover Pada Semua Gambar di blog. dengan menggunakan cara berikut kita langsung akan secara otomatis memberikan efek buram pada semua gambar yang berada pada blog buka dengan cara manual menambahkan code pada blog.




1. login ke blogger
2. Masuk ke Tata Letak
3. Pilih menu Edit HTML
4. Centang Expand Template Widget
5. Cari kode ]]></b:skin>
6. letakan kode di bawah ini, di atas ]]></b:skin>

.post img{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}

.post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}

7. Simpan Template, dan lihatlah hasilnya.

Menambahkan background gambar di blog archive pada blogspot

Untuk tutorial blog Membuat background gambar pada archive di blog ikuti langkah sebagai berikut. 
Ini akan membuat tampilan semakin menarik, silahkan ikuti langkah-langkah berikut untuk Menampilkan background gambar pada archive Blog di blogspot...



Login >> dasbor >> rancangan >> edit Html >> centang
Expand Template Widget

Cari code ini <div id='ArchiveList'> untuk mempercapat pencarian tekan Ctrl+f

Tambahkan dan Pasang code
<div style='overflow:auto; height:400px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE0bBucCjXV8NX0AdzrwOkdm2kwZi_6zYEPJdUqQzenBa-MIGlNAz1j_S-vKboOsNpuRbMO8V27RBCa4VekTPYDarJ-tmq87sOh3SVAN9260jMgs2PzvHLyTSDB4eVJ57NeloFl6gJ00w/s320/sip2.jpg); background-repeat:no-repeat;'>  

Sebelum code <div id='ArchiveList'>  Dan tambahkan juga akhiran </div> seperti terlihat pada gambar


Ubah Code warna Biru Dengan URL gambar BLOG yang akan digunakan sebagai background Archive, Ukuran lebar gambar harus sesuai dengan sidebar...
height = 400 ukuran panjang kebawah sesuaikan dengan selera anda. 

Untuk membuat agar tidak ada sroll hilangkan code overflow:auto; height:400px;

Pratinjau lihat...halaman blog anda jika berhasil.

Simpan template 

Selamat mencoba ...

membuat tab menu dengan CSS Tab designer (tombol home)

CSS Tab designer adalah software yang sangat mudah digunakan untuk membuat sendiri tab menu yang berbentuk vertical atau horizontal. kunjungi situs http://www.highdots.com/css-tab-designer/  dan download software nya, install dikomputer anda....?

Untuk cara pemasangan pada blog klik link di bawah ini  Semoga berhasil dan bermanfaat
cara membuat tab menu diblog dengan css designer
---------------------

10 tempat belajar membuat sendiri Template Blog

Men-Design sebuah template Blog memang tidak mudah, dan tidak juga terlalu susah. Jika bosan dengan template-template yang tersedia, solusi yang terbaik adalah membuat sendiri design templatenya. Untuk membuat template kita harus memahami struktur sebuah template tersebut. Misalnya anda menggunakan blogspot, anda cukup mempelajari bahasa html dan css. Tetapi jika anda menggunakan wordpress, kita harus memahami html, php dan css.

Untuk mempermudah kita tanpa harus mempelajari semua bahasa pemrograman web diatas, kita bisa membuat template blog dengan menggunakan Template Generator. Dibawah ini saya akan sharing beberapa situs penyedia template generator yang dapat dicoba.

1. CSSEZ

CSSEZ ini adalah generator template online untuk blog Wordpress, movable type, Live Door Blog, dan Amoeba Blog. Jika anda ingin menggunakan layanan ini, anda perlu registrasi gratis disini. Beberapa fiturnya yang bagus adalah memilih antara satu sampai empat kolom template, mengatur lebar kolom, padding, margin, border, font dan style link. Anda juga dapat mengupload gambar atau membuat sendiri dengan image maker.

2. Drupal Theme Generator

Generator ini adalah generator theme berbasis MS Excel untuk situs atau blog drupal yang menggunakan template PHP dan Xtemplate. Layanan ini gratis dan memiliki fitur yang kaya seperti generator theme random color, preview theme langsung, html color assistant, dan integrasi CSS, javascript, PHP dan kode html pada theme dari file eksternal dan lain sebagainya. Selain itu ada 9 theme yang bisa anda dapatkan ketika mendownload generator ini.

3. Firdamatic

Generator template online untuk blogger dan movable type ini memiliki pilihan dua dan tiga kolom, anda bisa memasukkan sendiri informasi pada boks relevan pada form online yang tersedian dan klik generate template, selain itu anda juga bisa menambahkan judul situs, url gambar dan memilih huruf dan warnanya.

4. PsycHo

Generator online template open source ini dapat diaplikasikan pada platform blogger, persian blog, dan blogFa. Anda bisa mengatur sendiri judul halaman, warna background body template, judul background, deskripsi, teks, spacing dan memilih hingga 4 pilihan kolom. Anda juga bisa preview template anda dan menyimpan kodenya. Layanan ini mudah digunakan tanpa pengetahuan html yang terlalu banyak.

5. Templatr

Templatr ini menyediakan lebih dari 20 layout dan pilihan formatting untuk berbagai elemen halaman termasuk halaman utama, header, footer, titles, margin, padding, border dan banyak lagi untuk keperluan wordpress blog. Selain itu, layanan ini juga menyediakan upload dimana anda bisa mengupload grafis/gambar . Setelah itu anda bisa mendownload template jika anda telah selesai dan mengaplikasikannya pada blog anda.

6. Weebly

Generator template yang rapi ini memiliki 15 desain pre-built yang bisa dikustomisasi dengan menambahkan elemen seperti iklan, feed icon, map, contact form, teks dan layout gambar, kolom google dan youtube video dan lain sebagainya. Jika anda sudah selesai anda bisa mempublikasikan situs/blog tersebut pada platform anda.

7. WordPress Theme Generator

Layanan generator online dapat membantu anda untuk membuat sendiri theme wordpress anda dengan mudah tanpa pengetahuan html dan css language. Layanan ini menyediakan pilihan untuk memilih sendiri nama blog, ukuran body, lokasi sidebar dan ukurannya, menambahkan kolom ketiga, layout menu, warna dan skema teks, anda juga bisa menambahkan tag cloud, arsip dan kotak pencarian. Selain itu anda bisa mengupload logo situs anda online dan membuat link-nya dari template. Jika anda telah selesai anda bisa melihat hasil kreasi anda dan mendownloadnya dalam file zip.

8. iStylr

Bagi yang senang edit css dan yang lainnya bisa mampir disini.

9. PixoPoint

Pixo point adalah template generator yang didesain bagi anda yang ingin membuat desain untuk website anda tanpa harus menyentuh sedikit pun kode-kode HTML. Tidak seperti Generator lainnya, semua kreasi template yang ada disini hanya bisa digunakan untuk WordPress. Begitu banyak pilihan modifikasi yang tertera di control panel, anda jadi lebih memudah merubah disain anda kapanpun juga.

10. DoTemplate

doTemplate menawarkan berbagai jenis catalog web template gratis. Semua template yang di hadirkan di sini sangat mengundang selera dan cukup bisa memikat anda. Cukup memilih warna, huruf dan beberapa efek-efek grafik untuk membuat kreasi template anda yang baru.

sumber: http://bagisahabat.com
sumber:http://koegie.staff.fe.uns.ac.id/2009/07/06/10-tempat-belajar-membuat-sendiri-template-blog/