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)

Download gratis template blogjuragan

Screenshot Template Blogjuragan
Bila anda sedang mencari template anda dan anda kebingungan untuk memilih salah satu dari sekian banyak template ,saya punbya saran untuk mengunakan template ini .Template ini juga saya gunakan karena template ini Termasuk template SEO Friendly.Bila ada ingin mendownloadnya pasti anda bertanya apa saja Fitur template ini ?

 fitur-fitur dari template Blogjuragan ini :
  • Template SEO Friendly
  • Yang pasti Visitor Friendly
  • Sudah Dilengkapi dengan Dinamic heading (h1 pada header di index, dan h1 di judul post pada halaman posting)
  • Sudah Dilengkapi dengan dinamic metatag deskripsi dan keyword otomatis
  • Quicklink ke kotak komentar
  • Sudah Autoreadmore
  • Dilengkapi dengan tambahan beberapa Meta tag untuk mempermudah robot menjelajah blog sobat.
  • Loading yang cepat
  • Konsep minimalis dan simple

Untuk Demo nya kamu bisa klik link ---->   Demo
Bila sudah puas dan yakin untuk mendownload template ya bisa klik link ----> DownloadDownload gratis template blogjuragan

Download Gratis Template O-om


Bisa di bilang template ini namanya sangat unik yang identik dengan warna putih yaitu Pocong Oom. Kono katanya template ini mendatangkan vistor dari berbagai mesin pencari.
Yaa! walaaupun template ini sedikit mirip dengan o-om.com (style new) tapi kalau masalah kecepatan saya rasa lebih cepat template Pocong Oom ini, dan bukan itu saja selain berkecepatan tinggi template Pocong Oom ini juga mengunakan fitur Komentar Threaded yang lagi tren sekarang.


Fitur Template Pocong Oom :

Ads Google Adsense Siap
Mesin Pencari CSE
Komentra Threaded
Emotion Onion
Laman Blank
Tombol Share
Auto Post Ringan
Kotak Berlangganan
Jika kamu ingin memilikinya Bisa Klik link Dibawah :

                                     Demo                         DownloadDownload Gratis Template O-om
 

Followers

Subscribe via email

Enter your email address:

Delivered by FeedBurner

Labels

Flash Labels by Way2Blogging