Friday, 9 August 2019

Cara Memasang Random Post Keren Responsive

Cara Memasang Random Post Keren Responsive

Tags
BAGIKAN ARTIKEL »

Random Post Responsive

Memasang Random Post Keren Responsive. Belajar ngeblog emang asyik apalagi kalo pas ngedit tampilan blog agar tampak lebih keren dan nyaman dilihat sampe lupa makan aja tetep dijabanin.

Beberapa widget blogger emang bagus untuk membuat tampilan blog menjadi lebih menarik dan tentu saja agar para pengunjung jadi betah untuk menjelajah konten yang kita sajikan. Contoh beberapa widget keren seperti first image, headline news, random post dll.

Dengan memasang widget random post artikel yang sudah lama dan kurang maksimal dibaca oleh pengunjung berkesempatan muncul lagi dan dibaca kembali karena fungsi dari random post ini memunculkan artikel secara acak.

Nah kali ini saya ingin berbagi tutorial blog cara memasang random post untuk memaksimalkan pageviews halaman blog sobat. Menurut mastah blogger, random post menjadi salah satu instrumen penting dan peranannya sangat dibutuhkan untuk meningkatkan pageviews sebuah blog. Maka dari itu widget random post ini sangat perlu sekali dipasang dalam blog. Namun ada juga blogger yang enggan memasang widget random post ini karena menurut mereka widget ini bisa memperlambat loading blog. Karena widget yang membebani kecepatan loading sebuah blog memang berdampak buruk kepada kualitas seo blog itu sendiri.

Namun untuk random post kali ini mempunyai tampilan keren dan responsive tapi tetap tidak mengurangi kecepatan loading blog anda.

Memasang Random Post Keren Responsive


Untuk memasang random post responsive dan keren serta cepat dan ringan cara pemasangannya cukup mudah sobat bisa mengikuti langkah-langkahnya seperti berikut:


1. Masuk akun blogger > Klik Tata Letak > Klik Tambahkan WidgetHTML/JavaScript > masukkan kode dibawah ini kedalam kolom yang tersedia.

Ini kodenya :

<script>
document.write("<script src=\"/feeds/posts/default?orderby=updated&alt=json-in-script&callback=labelthumbs\"><\/script>");
document.write('<div class="recent-post-title"><h5><a href="/" title="Klik disini Untuk Melihat lebih Banyak Yang Baru ">Lihat Semua</a></h5></div>');
</script>

2. SIMPAN.

3. Klik TEMA > Edit HTML cari kode ]]></b:skin>
tekan Ctrl+F untuk memudahkan pencarian kode tersebut. Kalo sudah ketemu taruh kode dibawah ini persis diatas kode ]]></b:skin>

Ini kodenya :


.clear { clear:both; } .recent-post-title { background:#fff; margin:0 0 5px; padding:0; position:relative; } .recent-post-title h2 { font:normal bold 11px Arial,sans-serif; height:26px; line-height:26px; margin:0 0; padding:0 10px; background:#0b944b; color:#ffffff; display:inline-block; } .recent-post-title h6 { float:right; font:normal bold 10px Arial,sans-serif; height:26px; line-height:26px; margin:0 0; padding:0 10px; color:#ffffff; display:inline-block; border-bottom:5px solid #906090; } .recent-post-title h2 a { color:#ffffff; } .recent-post-title h2 a:after { content:"\f18e"; font-family:FontAwesome; font-style:normal; font-weight:normal; text-decoration:inherit; padding-left:6px; } .recent-post-one-thumb { float:left; width:70%; margin:0 0; } .recent-post-one-thumb .widget { padding:0 10px 10px 0; } .recent-post-one-thumb .widget-content { background:#ffffff; border:1px solid #e5e5e5; padding:5px; } .recent-post-one-thumb ul { list-style-type:none; margin:0 0 0 0; padding:0 0 0 0; } ul.rp_thumbs { margin:0 0 0 0; } ul.rp_thumbs li { font-size:12px; min-height:68px; margin:0 0 8px; padding:0 0 8px; border-bottom:1px dotted #e5e5e5; } ul.rp_thumbs .rp_thumb { position:relative; background:#fbfbfb; margin:3px 0 10px 0; width:100%; height:0; padding-bottom:46%; overflow:hidden; } ul.rp_thumbs .rp_thumb img { height:auto; width:100%; } ul.rp_thumbs2 { font-size:13px; } ul.rp_thumbs2 li { padding:0 0; min-height:66px; font-size:11px; margin:0 0 8px; padding:0 0 8px; border-bottom:1px dotted #e5e5e5; } ul.rp_thumbs2 .rp_thumb2 { background:#fbfbfb; float:left; margin:3px 8px 0 0; height:60px; width:60px; } ul.rp_thumbs2 .rp_thumb2 img { height:60px; width:60px; } span.rp_title { font:normal normal 16px Fjalla One,Helvetica,Arial,sans-serif; display:block; margin:0 0 5px; line-height:1.4em; } span.rp_title2 { font-size:14px; } span.rp_summary { display:block; margin:6px 0 0; color:#666666; } span.rp_meta { background:transparent; display:block; font-size:11px; color:#666666; } span.rp_meta a { color:#666666 !important; display:inline-block; } span.rp_meta_date,span.rp_meta_comment,span.rp_meta_more { display:inline-block; margin-right:8px; } span.rp_meta_date:before { content:"\f073"; font-family:FontAwesome; font-style:normal; font-weight:normal; text-decoration:inherit; padding-right:4px; } span.rp_meta_comment:before { content:"\f086"; font-family:FontAwesome; font-style:normal; font-weight:normal; text-decoration:inherit; padding-right:4px; } span.rp_meta_more:before { content:"\f0a9"; font-family:FontAwesome; font-style:normal; font-weight:normal; text-decoration:inherit; padding-right:4px; } ul.rp_thumbs2 li a:hover,ul.rp_thumbs li a:hover { color:#0072C6; }

Oke Sobat itu dulu tips blog cara memasang random post responsive, untuk tutorial lain 'Cara membuat blog SEO Friendly' bisa langsung klik linknya ya sob.

Rekomendasi Untuk Anda × +
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Mohon komentar yang relevan dengan tema artikel, komentar SPAM, Live link tidak akan muncul..!!