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

Comments

Post a Comment

Subscribe to: Post Comments (Atom)