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

CARA MENAMBAHKAN WIDGET RELATED POS DENGAN LINK WITHIN

Oleh pada tanggal
Cara Menambahkan Widget Related Pos Dengan Link Within . Apa kah itu related pos atau Artikel terkait adalah sebuah widget yang menyajikan pos sejenis menggunakan artikel yang sedang di lihat oleh pengunjung atau pembaca blog atau website kita
Ada pun Fungsi dari Related Post ini merupakan galat satu teknik untuk menambah pageview page, sesuai menggunakan posting artikel yg terkait dengan label secara otomatis.
Kali ini kita nir membahas tentang atau ]]b/skin> atau
Langkah selanjut nya perhatikan gambar pada bawah ini... Lihat petunjuk yg saya buat pada gambar
Langkah selanjut nya... Tabah ya sob... Sdikit lelet ni upload poto kmputer nya.... Tapi heran nya kalo buat upload poto aq sendiri cepat beliau.... Ini beliau lankah ke tiga...
Langkah terakhir masih lihat lihat gambar pula... Perhatikan gambar ini dia dan informasi pada pada gambaryang telah saya sediakan.... Ini dia... 

Satu langkah lagi sob... Ini langkah yg terberat nya.... "seringkali tak jarang mampir kesini ya sob" izin pun relatif berat...buat sobat... Akan tetapi saya akan menunggu kehadiran sobat pulang ke blog saya yang tidak seberapa ini... Sekian dan terima kasih atas kunjungan nya selamat mencoba dan semoga berman faat..

BACA JUGA:




Read more
Post a Comment
Subscribe to: Posts (Atom)