Membuat recent post terlihat menarik

Recent post yang saya masuk disini adalah recent post global yang berada seperti di blog, recent post sendiri fungsinya adalah menunjukkan postingan terakhir dari artikel kita. Biasanya , pada awal/default recent post blog sendiri hanyalah berisi tulisan-tulisan atau link saja yang tidak disertai dengan gambar
, sehingga kurang menarik bagi para pembaca. Untuk itu saya disini akan memberikan sedikit tips yang mudah untuk membuat recent post kita terlihat menarik dengan di sertai gambar. Ternyata untuk membuat recent post seperti di bawah ini




Hanya membutuhkan tambahan script HTML,
seperti biasanya ,
1. Login dulu ke akun blog anda
2. masuk ke dalam dasbor
3. masuk ke rancangan
4. tata letak
5. tambah widget HTML

setelah itu massukan script di bawah ini :


<b></b>
<div class="container">
<div class="line number1 index0 alt2">
<code class="plain plain"><right><style>
</code></div>
<div class="line number2 index1 alt1">

<code class="plain plain">img.recent_thumb

{padding-right:5px;padding-left:padding-bottom:0px;0px;width:55px;height:55px;border:0;float:left;margin:0
 0 5px 0px;}</code></div>
<div class="line number3 index2 alt2">

<code class="plain plain">.recent_posts_with_thumbs
 {float: left;width: 100%;min-height: 50px;margin: 0px 0px 5px
0px;padding: 0;font-size:13px;font-color:black;}</code></div>
<div class="line number4 index3 alt1">

<code class="plain plain">ul.recent_posts_with_thumbs
 li
{padding-bottom:5px;padding-top:5px;padding-left:0px;padding-right:20px;min-height:50px;list-style:normal;}</code></div>
<div class="line number5 index4 alt2">

<code class="plain plain">.recent_posts_with_thumbs a {text-decoration:none;}</code></div>
<div class="line number6 index5 alt1">

<code class="plain plain">.recent_posts_with_thumbs normal {font-size:13px;}</code></div>
<div class="line number7 index6 alt2">

<code class="plain plain">
</style></right></code></div>
<div class="line number8 index7 alt1">
<code class="plain plain"><script bloggerplugins.org="" http:="" recentpostswiththumbs.js"="" scripts="" src="%3Ca%20href=">
http://bloggerplugins.org/scripts/recentpostswiththumbs.js</a>">
</script></code></div>
<div class="line number9 index8 alt2">
<code class="plain plain"><script>
</code></div>
<div class="line number10 index9 alt1">


<code class="plain plain">var numposts = 7;</code></div>
<div class="line number11 index10 alt2">


<code class="plain plain">var showpostthumbnails = true;</code></div>
<div class="line number12 index11 alt1">


<code class="plain plain">var displaymore = false;</code></div>
<div class="line number13 index12 alt2">


<code class="plain plain">var displayseparator = false;</code></div>
<div class="line number14 index13 alt1">


<code class="plain plain">var showcommentnum = false;</code></div>
<div class="line number15 index14 alt2">


<code class="plain plain">var showpostdate = false;</code></div>
<div class="line number16 index15 alt1">


<code class="plain plain">var showpostsummary = false;</code></div>
<div class="line number17 index16 alt2">


<code class="plain plain">var numchars = 75;</code></div>
<div class="line number18 index17 alt1">


<code class="plain plain">
</script></code></div>
<div class="line number19 index18 alt2">
<code class="plain plain"><script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostswiththumbs">
</script></code></div>
</div>

<right><style>
img.recent_thumb {padding-right:5px;padding-left:padding-bottom:0px;0px;width:55px;height:55px;border:0;float:left;margin:0 0 5px 0px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 50px;margin: 0px 0px 5px 0px;padding: 0;font-size:13px;font-color:black;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;padding-left:0px;padding-right:20px;min-height:50px;list-style:normal;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs normal {font-size:13px;}
</style> <script src="http://bloggerplugins.org/scripts/recentpostswiththumbs.js">
</script> <script>
var numposts = 7;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 75
</script> <script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostswiththumbs">
</script></right>



semoga berhasil dan bermanfaat :)

0 komentar:

Posting Komentar

Di harapkan meninggalkan komentar setelah membaca artikel-artikel di blog ini. Gunakan bahasa yang baik dan tidak mengandung unsur Provokasi/SARA.

Care To Share

Perhatian

jika anda menyukai isi dari kontent kami, dan anda ingin menyalin isi dari kontent kami hendaknya di cantumkan link kami.
mari berbagi...

n-z-l.blogspot.com

sponsorship

 

Copyright © Care To Share Design by Naufal Ziyad | Blogger Theme by Blogger Template de luxo | Powered by Republik TKJ2