CARA MEMBUAT POPULAR POST BLOG SEDERHANA TAPI KEREN

Oleh Anonymous pada tanggal
Cara Membuat Popular Post Blog Sederhana Tapi Keren - Widget popular post bawaan standar blogger dari sebagian orang tampil kurang menarik, nah dalam kesempatan kali ini saya akan share mengenai bagaimana menciptakan widget popular post menjadi sederhana tetapi tampil menarik, berikut merupakan tuorial cara membuat widget popular post blog secara sederhana tetapi keren:

1. Log in ke akun blogger sobat
2. Klik tata letak/ masukkan widget popular post
3. Pada pengaturan popular post hilangkan image pada thumbnail dan snippet.
4. Simpan kemudian lanjutkan  ke tamplate dan edit HTML
5. Cari kode berikut ]]> lalu tambahkan kode berikut ini tepat diatas kode yang aku sebutkan diatas.
/*--- Genera Popular Posts --- */
    .popular-posts ulpadding-left:0px;
    .popular-posts ul li
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJaJIDvvWExzVZH9VJBx3yZRfFBh8qt1ilpLMyPWU3RcBnKF-TBdzzazNfDPsZpg7KIkekOA6ZhSe0LcHNqf6Bbbm1qavWYzOoXoP-I9TzQmzKousCP30z4f5OtEM82CTPxjTu-YxQQT4u/s400/33.gif") no-repeat scroll 5px 8px rgb(255, 255, 255);
    list-style-type: none;
    margin: 0px 0px 5px;
    padding: 5px 5px 5px 20px !Important;
    border: 1px solid #dddddd;
    border-radius: 10px 10px 10px 10px;
   
    .popular-posts ul li:hover
    border:1px solid #666666;
   
    .popular-posts ul li a:hover
    text-decoration:none;
   

6. Klik pratinjau apabila tidak terjadi eror klik simpan.
Baca juga cara menciptakan bermacam-macam populer post lainnya.

Baca Juga

Read more
Post a Comment

CARA TERBAIK MEMBUAT AUTO READ MORE PADA HALAMAN DEPAN BLOG

Oleh pada tanggal
JIKA anda menggunakan template blog bawaan bloger, maka tampilan depan blog anda harus di ringkas secara manual supaya yg tampil dalam bagian page depan blog anda hanya judul, gambar serta alinea pertama dalam post anda dengan demikaian maka anda dapat menampilkan beberapa postingan anda tanpa wajib terlalu memanjang kebawah. Lihat contoh tampilan dalam gambar disamping ini. Menampilkan thumbnail gambar. Judul blog serta sedikit paragraf alinea pertama yg terdapat pada postingan saya
agar auto read more tampil otomatis maka maka saya share 3 pilihan sekaligus, agar anda bebas berkreasai... Tiga cara berikut adalah menjadi mana pada share sang admin Helploger , simak secara perlahan
Cara terbaik menciptakan auto red more atau tampilan depan blog berupa judul posting, gambar thumbnail, dan kompendium ( alinea pertama)
Pertama tama
  1.  masuk ke dasbor blog anda
  2. klik template dan Edit HTML
  3. cari kode  
untuk memudah kan anda menemukan kode tadi klick mouse pada area code HTML kemudian tekan ctrl+f buat menampilkan tools [ seacrh box] copy code pada atas dan pastekan dalam seacrh box kemudian tekan enter.
  • Ganti kode kode .... Dengan kode di bawah ini.

[Untitled]

No content.
,



Kemudian simpan template lihat dan bedakan tampilan blog anda sesudah melalukan pengeditan dengan cara ini ...
jika anda belum puas maka langkah selanjut nya merupakan menambahkan code css berikut ini terdapat 3 pilihan gaya code css yg mampu pada terapkan.
GAYA YANG PERTAMA ADALAH THUMBNAILS LINGKARAN GAMBAR DI KIRI JUDUL POS DI KANAN DAN ALINEA PERTAMA POSTINGAN ANDA
contoh gambar

UNTUK TAMPILAN SEPERTI GAMBAR DI ATAS CODE CSS NYA ADALAH
.blogger-post padding: 5px 0px 0px; background: #F6F6F6; border-right: 1px dashed #E3E3E3;height:150px; margin:0 0 20px; overflow:hidden; *zoom:1; .blogger-post:after content:" "; display:block;clear:both; .blogger-post-title font:normal bold 20px/1.2 Arial,Sans-Serif; margin:0 0 10px;padding:0; .blogger-post-title acolor: #888; .blogger-post-thumbnail-area border-radius: 330px;-webkit-border-radius: 330px; -moz-border-radius: 330px; border: 10px solid #E5E5E5;margin-left: 20px;width:120px;height:120px; background-color:#2D3957;float:left;overflow:hidden;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIbDer6_LgypSqDmXS2mhepBHML8vAHoAh2afUaX3lmSn1ImeGzGo2_qwf-XLcFPsNQ4eOqMqnQnG8RTdxh40Tm-sHbtJpQCtSDUT07FGRfMCaRJAIVFSRb9pziVDpO6GKkiXHS2tRzxGC/s1600/no-image-available.png'); background-repeat: no-repeat; background-size: 100%; .blogger-post-body-area:before border-bottom:40px solid transparent;border-right:40px solid #E4E4E4;border-top:40px solid transparent; width:0;height:0; content:"";margin: 10px 0px 20px -60px;display:inline-block;float: left; .blogger-post-thumbnail display:block;width:100%;height:100%;max-width:none;max-height:none;min-width:0;min-height:0;margin:0;padding:0;border:none;outline:none;position:static; .blogger-post-body-area padding:20px;margin-left:200px;font-size:12px;border-left: 1px solid #E3E3E3; .blogger-post-footer margin:10px 0 0;padding:10px 0 0;border-top:1px dotted #ddd;font:normal bold 8px/1.lima Verdana,Tahoma,Arial,Sans-Serif;text-transform:uppercase;color:#999; .blogger-post-footer a color: #888; .blogger-post-item, .blogger-post-static_page height:auto .blogger-post-item .blogger-post-body-area, .blogger-post-static_page .blogger-post-body-area margin:0;padding:20px;font-size:13px; .blogger-post-item .blogger-post-title, .blogger-post-static_page .blogger-post-title font-size:30px .icon-action width: 10px;height:10px;

GAYA KE DUA ADALAH SEPERTI TAMPILAN GAMBAR DI BAWAH INI

KODE CSS NYA ADALAH
.blogger-post background: #F6F6F6;border-right: 1px dashed #E3E3E3;height:200px; margin:0 0 20px; overflow:hidden; *zoom:1; .blogger-post:after content:" "; display:block; clear:both; .blogger-post-title font:normal bold 20px/1.dua Arial,Sans-Serif;margin:0 0 10px; padding:0; .blogger-post-title acolor: #888; .blogger-post-thumbnail-area width:200px; height:200px;background-color:#2D3957;float:left;overflow:hidden;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIbDer6_LgypSqDmXS2mhepBHML8vAHoAh2afUaX3lmSn1ImeGzGo2_qwf-XLcFPsNQ4eOqMqnQnG8RTdxh40Tm-sHbtJpQCtSDUT07FGRfMCaRJAIVFSRb9pziVDpO6GKkiXHS2tRzxGC/s1600/no-image-available.png');background-repeat: no-repeat;background-size: 100%; .blogger-post-thumbnail display:block;width:100%;height:100%;max-width:none;max-height:none;min-width:0;min-height:0;margin:0;padding:0;border:none;outline:none;position:static; .blogger-post-body-area padding:20px;margin-left:200px;font-size:12px; .blogger-post-footer margin:10px 0 0;padding:10px 0 0; border-top:1px dotted #ddd;font:normal bold 8px/1.lima Verdana,Tahoma,Arial,Sans-Serif; text-transform:uppercase; color:#999; .blogger-post-footer a color: #888; .blogger-post-item, .blogger-post-static_page height:auto .blogger-post-item .blogger-post-body-area, .blogger-post-static_page .blogger-post-body-area margin:0; padding:20px; font-size:13px; .blogger-post-item .blogger-post-title, .blogger-post-static_page .blogger-post-title font-size:30px .icon-action width: 10px;height:10px;

GAYA KE TIGA ADALAH SEPERTI TAMPILAN GAMBAR DI BAWAH INI

UNTUK TAMPILAN SEPERTI GAMBAR DI ATAS CODE CSS NYA ADALAH
#blog-pager clear: both; .blogger-post background: #F6F6F6; border-right: 1px dashed #E3E3E3; border-left: 1px dashed #E3E3E3; height: 405px; width:200px; margin:0 20px 20px 0; padding: 10px 10px 0px; overflow:hidden; float: left; display:inline-block; *zoom:1; .blogger-post:after content:" "; display:block; clear:both; .blogger-post-title font:normal bold 16px/1.2 Arial,Sans-Serif; margin:0 0 10px; padding:0; .blogger-post-title acolor: #777; .blogger-post-thumbnail-area a img width:200px; height:200px; background-color:#fff;overflow:hidden;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIbDer6_LgypSqDmXS2mhepBHML8vAHoAh2afUaX3lmSn1ImeGzGo2_qwf-XLcFPsNQ4eOqMqnQnG8RTdxh40Tm-sHbtJpQCtSDUT07FGRfMCaRJAIVFSRb9pziVDpO6GKkiXHS2tRzxGC/s1600/no-image-available.png');background-repeat: no-repeat;background-size: 100%; .blogger-post-thumbnail display:block; width:100%; height:100%; max-width:none;max-height:none;min-width:0; min-height:0; margin:0; padding:0; border:none; outline:none;position:static; .blogger-post-body-area padding:10px 20px 20px; margin:10px 0 0; font-size:11px; .blogger-post-footer background: #E9E9E9; margin:10px -20px 0; padding:20px; border-top:1px dotted #ddd; font:normal bold 8px/1.lima Verdana,Tahoma,Arial,Sans-Serif; text-transform:uppercase; color:#555; .blogger-post-footer acolor: #888; .blogger-post-item, .blogger-post-static_page width:auto; .blogger-post-item .blogger-post-body-area, .blogger-post-static_page .blogger-post-body-area margin:0; padding:20px; font-size:13px; .blogger-post-item .blogger-post-title, .blogger-post-static_page .blogger-post-title font-size:30px; .icon-action width: 10px;height:10px;

BAIK LAH GAN SEKIAN DULU DAH PEGAL NI BADAN PINGIN  REBAHAN SELAMAT MENCOBA YA GAN...

source://baticblog.blogspot.com/2015/12/4-cara-menciptakan-auto-readmore-laman.html
Read more
Post a Comment
Subscribe to: Posts (Atom)