Home Trik Blogger Related posts blogger simple float

Di penghujung january 2014 sedikit saya berbagi tentang tutorial dan trik blogger buat
Sobat yang berrminat memasang Related posts blogger dengan tampilan simple float
Alias tampilan yang sederhana namun tidak mengurangi kesan yang menarik dan bisa
Menambah perklik untuk menavigasi dari posts ke posts yang jelas lebih mudah dalam
Penerapanya kode javascript juga css nya sobat yang berminat monggo silahkan simak
Jangan lupa siapkan secangkir kopi dan kuenya jangan lupa buat Akang+Mas rokoknya

Related posts blogger simple float ini saya hadirkan di postingan saya kali ini sengaja didesain
Yang sesederhana mungkin namun tidak mengaruhi error pada html 5 dan css 3 karena sudah
Saya cek keberadaanya agar lebih seramah mungkin buat tampil di blog ringan dan nyaman
Dalam berbagai browser destop juga mobile namun jika anda yang suka desain ini hanyalah
Desain realeted posts yang sangat sederhana dan seadanya cocok untuk blog yang dynamis

Cara memasangnya :

Jika anda berminat silahkan ikuti petunjuk pemasangan Related posts blogger simple float ini
Seperti biasa masuk blog anda sign in, buka dasboard pilih template dan pilih edite template
Cari kode b:skin atau kode style tekan Ctrl + F untuk memudahkan pencarianya
Jika ketemu kodenya copy kode dibawah ini dan pastekan tepat diatas kode b:skin
Atau di atas kode style jka di template blog anda ada terdapat di antara kode tersebut

#related-posts { float : left; width :100%;font : 11px Verdana;margin:17px 3px 12px -10px;box-shadow:1px 1px 2px 2px #333;padding:10px} #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKVX9idL4DCczE4GiBmfhSFwTTcjkRk5PSYDKMTSfRXPKE9vct_1wMssIR30zMDgpTsUT58aEsa6Vmstx6G2QJz8zKFAoAU7cevhW7exwI98N_fFM9pZK51WxO0JJhozaJDfyz3qz_JcU/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #333; }
#pesan-formulir{background:#ccc;border:1px solid #aaa;border-radius:3px;margin:0 10px 10px 0;padding:10px;position:relative;text-align:justify;width:96%}
#pesan-formulir:after{top:100%;border:solid transparent;content:" ";height:0;width:0;position:absolute}
#pesan-formulir:after{border-top-color:#ccc;border-width:15px;left:10%;margin-left:-30px}

Masih di edite html cari kode data:post.body kalau sudah ketemu kodenya silahkan simpan
Kode javascript di bawah ini tepat di bawah kode data:post.body urutan yang paling terakhir
Karena pada template berbeda-beda bisa 3 atau 4 kode tersebut simpan saja diurutan terakhir
Download kode javascript nya silahkan buka spoiler di bawah ini :

Keterangan :

Silahkan jika anda berminat merubah tampilan form releted posts ini silahkan berekpresi untuk
Mengedit kode css diatas untuk menyesuaikan warna juga panjang dan juga lebarnya barangkali
Desainya kurang disenangi atau juga diselaraskan dengan warna template blog anda dan setelah
Semuanya tertata atau terpasang sesuai prosedur yang terakhir silahkan klik save - simpan dan
Silahkan cek salah satu artikel posts blog anda jika belum nampak silahkan simak lagi lebih rinci

Kesimpulan :

Demikian yang saya hadirkan semoga bisa menambah koleksi Accessories Blog anda dan bisa
Menambah desain blog lebih lengkap jika ada yang mau di bahas silahkan diskusi di bawah ini
Dalam komentar jika anda tidak keberatan klik 1+ pada Google plus saya untuk saling membantu
Semoga bermanfaat ...

Berlangganan lewat email pada post baru Blog : Karrysta.

Related posts blogger simple float

Unknown Trik Blogger Sabtu, Januari 25, 2014 52 comments