Cara Modifikasi/Mempercantik Blockquote Dengan Kode CSS

Kita langsung aja ke inti Karena saya lagi males Basa basi

Berikut Cara mempercantik Blockquote :

1. Login Ke Blog
2. Lalu Ke Template >Edit HTML>Lanjutkan ,Centang Expand Template Widget
3. Lalu Sobat Cari Kode Dibawah (Gunakan CTRL + F)

.post blockquote
.........  dst 
}
.post blockquote:hover
.........  dst 
}
.post blockquote p
.........  dst 
}

Atau

.post blockquote.........  dst 

} 

 Dan

blockquote
.........  dst 
}

 Tergantung Template yang kamu gunakan
Lalu jika ketemu salah satunya hapus dan ganti dengan kode dibawah ini

.post blockquote {
background:#f5f8fa url(http://lh6.ggpht.com/_wC8_9aR_6uE/S-7eHs71vkI/AAAAAAAAC4M/SPzkp3SsYg4/bintang%20kelip.gif) no-repeat scroll 0 0;
border-color: #D7E8F0;
border-style: solid;
border-width: 1px 1px 1px 20px;
color: #004276;
font-family: Consolas, "Courier New", Courier, mono, serif;
font-size: 13px;
line-height: 16px;
margin:10px 0 10px 10px;
overflow: visible;
padding: 28px 10px 10px;
width:80%; }
.post blockquote:hover {
background:#FFFFFF url(http://lh6.ggpht.com/_wC8_9aR_6uE/S-7eHs71vkI/AAAAAAAAC4M/SPzkp3SsYg4/bintang%20kelip.gif) no-repeat scroll 0 0
}
.post blockquote p {
margin:.75em 5;
background:url(http://lh5.ggpht.com/_wC8_9aR_6uE/S_OXycnYicI/AAAAAAAAC60/lAY-RahuhKw/exit.jpeg) no-repeat;
padding:20px;
background-position:bottom right;
}

Selesai ,Cukup Mudah kan ?

Selamat Mencoba dan Happy Blogging

 

Cara Modifikasi/Mempercantik Blockquote Dengan Kode CSS

Cara agar Komentar Sang admin berbeda Dengan Pengunjung

Cara Membuat Komentar Admin Berbeda dengan Komentar Pengunjung- versi saya
soalnya disini saya beri sedikit efek" Seperti Vikrimadz (blog sebelah)
ok check Lets this out
Cara Membuat Komentar Admin Berbeda dengan Komentar Pengunjung
1. Login ke blogger >> Rancangan >> Edit HTML
2. Jangan lupa centang kotak "expand widget template"
3. Letakkan kode dibawah ini tepat diatasnya kode ]]></b:skin>

.comment-body-author {

background: #ffffff;border:2px Dashed #0080FF;margin:0;padding:0 0 0 30px;-moz-border-radius-topleft:30px; -moz-border-radius-bottomright:30px;font-size: 14px;font-family: kristen ITC;}

4. lalu cari kode <dd class='comment-body'>
5. lalu agar jadi seperti ini 

<data:commentPostedByMsg/>
<br/>
</dt>

<b:if cond='data:comment.author == data:post.author'>

<dd class='comment-body-author'>

<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>
<br/>
<span class='commentdate' style=''>
<b:if cond='data:post.commentPagingRequired'>
<a expr:href='data:comment.url' title='comment permalink'> <data.comment.timestamp/> </a>
<b:else/>
<a expr:href='data:blog.url + &quot;#&quot; + data:comment.anchorName' title='comment permalink'> <data:comment.timestamp/> </a>
</b:if>
<b:include data='comment' name='commentDeleteIcon'/> </span>
</b:if>
</dd></b:if>
<dd class='comment-footer'>


</dd>

NB :

kode yang berwarna merah adalah kode yang harus di tambahkan.

6. Simpan dan lihat hasilnya.... 




Ok selamat mencoba dan happy BloggingCara agar Komentar Sang admin berbeda Dengan Pengunjung

Cara Mudah Hanya Judul Postingan yang tampil Pada HOMEPAGE

Siang Sobat CO pada Siang ini yang cerah saya ingin postingan artikel yang mungkin lagi dicari oleh sobat" yaitu Bagaiman Cara Menampilkan hanya judul postingan nya saja pada home page Mungkin artikel ini penting juga untuk menampilkan lebih banyak artikel yang ditampilkan lalu bagaimana caranya?

Caranya sebagai berikut :

1. Login terlebih dahulu
2. Masuk ke Template >Edit HTML >Lanjutkan ,Centang Expand Template Widget
3. Lalu Cari kode CSS   <b:include data='post' name='post'/> Jika ada 2 pilih yang bawah
4. Ganti kode tersebut dengan

<b:if cond='data:blog.homepageUrl == data:blog.url'> 
<b:if cond='data:blog.pageType != &quot;item&quot;'> 
<a expr:href='data:post.url'> 

<div style='padding:6px 0 6px 5px;border-right:2px dotted #ccc;border-bottom:2px dotted #ccc;margin-bottom:2px;background:#EAE9E9;color:#ff0000;'>

<data:post.title/>
</div>
</a> 
<b:else/> 
<b:include data='post' name='post'/> 
</b:if> 
<b:else/> 
<b:include data='post' name='post'/> 
</b:if>

Kode berwarna merah bisa anda utak atik Sendiri

Simpan dan selesai

Selamat mencoba dan Happy Blogging


Cara Mudah Hanya Judul Postingan yang tampil Pada HOMEPAGE

Cara Membuat Older dan Newers Dengan gambar Float (Melayang)

Bagi Sobat -sobat yang ingin mengengganti penampilan Posting lama dan posting baru saya punya cara untuk bisa melakukan itu dengan menggantinya menjadi gambar melayang

Berikut carannya:

1. Loginterlebih dahulu ke blog anda
2. Klik Template > Edit HTML > Lanjutkan ,Centang Expand Template Widget
3. Lalu Cari Kode ]]></b:skin>
4. Lalu Simpan Kode dibawah Tepat diatas Kode ]]></b:skin>

#blog-pager a{-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;height:80px;opacity:0.4;overflow:hidden;position:fixed;text-indent:-9999px;top:40%;width:80px;z-index:9;margin:0 0 0 5px}.blog-pager-older-link{background:url(http://4.bp.blogspot.com/-18bHuKvg5ao/TnGg6N1EtWI/AAAAAAAAA6A/ZhKPackZ4WQ/s400/Next.png) no-repeat scroll 0 0 transparent;right:5px;-moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in;-webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in;}.blog-pager-newer-link{background:url(http://4.bp.blogspot.com/-QbeWH7P8OSE/TnGg_zIB6nI/AAAAAAAAA6I/TmNTauVcj3U/s400/Prev.png) no-repeat scroll 0 0 transparent;left:0;-moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in;-webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in;}#blog-pager a:hover{opacity:1}

Kode yang berwarna Merah dapat Diganti dengan url gambar Sobat tapi jika ingin menggunakan gambar ini monggoo....

Simpan/Save Selesai

Selamat mencoba and Happy Blogging



Cara Membuat Older dan Newers Dengan gambar Float (Melayang)