Cara Membuat Recent Post Dengan Thumbnail di Blogger

Cara Membuat Recent Post di Blogger / Blogspot

Isi Postingan :

1. Cara Membuat Recent Post dengan Thumbnail / Gambar
2. Cara Membuat Recent Post Berdasarkan Label Blog
3. Menentukan Jumlah Postingan Artikel Recent Post 
4. Mengubah Lebar dan Tinggi Gambar Thumbnail Recent Post

buayaberdiri.blogspot.com - Recent Post adalah sebuah tampilan di website atau blog yang sering digunakan di sebelah kanan pada sidebar ataupun disebelah kiri sidebar / widget dan juga terkadang digunakan dibagian atas ataupun bagian bawah halaman utama dan halaman postingan disebuah blog.

Recent Post sangat berguna buat para pengunjung yang mengunjungi blog kita,karena mereka dapat melihat postingan yang baru saja di upload ataupun di update pada blog tersebut.Jika si pengunjung blog berada di halaman postingan blog,maka dia dapat melihat postingan artikel terbaru tanpa harus mengunjungi halaman utama / Home pada blog.

Membuat recent post di blog sangat mudah,hari ini saya akan membagikan sebuah script atau kode yang bisa digunakan untuk membuat recent post pada blog kamu,sehingga dengan adanya recent post akan membuat blog kamu terlihat menarik dan bagus.

Ditambah lagi jika recent post tersebut memiliki thumbnail atau gambar dari setiap postingan artikel,dengan adanya gambar thumbnail pada recent post akan membuat kamu bisa membayangkan seperti apa nanti isi artikel tersebut ataupun bisa membuat lebih menarik lagi.

Seperti contoh recent post pada blog ini,kamu bisa membuat recent post pada blog ini.Pada blog ini kamu bisa mengatur jumlah halaman postingan pada recent post ataupun kamu bisa membuat recent post berdasarkan label yang bisa kamu pilih sesuai dengan kebutuhan kamu.

Cara membuat recent post dengan thumbnail 

1.Buka halaman dasboard utama blog kamu

2.Kemudian pilih Layout / Tata Letak pada blog

3.Lalu pilih dimana slot yang memungkinakan kamu bisa membuat recent post,pada contoh ini saya akan membuat disebelah kanan sidebar / widget (Sidebar Right)

4.Kemudian tekan Add a Gadget

5.Kemudian pilih HTML / Javascript

6.Lalu tambahkan kode script seperti ini :

<script type="text/javascript">

function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2WanZP7km1pawaHl_vm9h-xPrO7XaU81ovEi5LURrD2xHkIjzjakZWUsHbJuilfEb1KQgbrOk-HpSium0HUNaZdy90kb7lXJTyvr3mPW9I5rDOdO86qzBwtmXt5JV330X9l7nOAPqr1Jv/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}

</script>

<script type="text/javascript">

var posts_no = 15;

var showpoststhumbs = true;

var readmorelink = true;

var showcommentslink = true;

var posts_date = true;

var post_summary = true;

var summary_chars = 40;</script>

<script src="https://buayaberdiri.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>

<noscript>Your browser does not support JavaScript!</noscript>

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

<style type="text/css">

img.recent-post-thumb{padding:2px;width:65px;height:65px;float:left;margin:0px 10px 10px;border: 1px solid #69B7E2;}

.recent-posts-container {font-family:'Oswald', sans-serif;font-size:12px;}

ul.recent-posts-container li{list-style-type: none; margin-bottom: 10px;font-size:12px;float:left;width:100%}

ul.recent-posts-container {counter-reset: countposts;list-style-type:none;padding:0;}ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 1;position:absolute; left: 0px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;line-height:25px;height:25px;width:25px;text-align:center;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}

.recent-posts-container a{text-decoration:none;}

.recent-post-title {margin-bottom:5px;}

.recent-post-title a {font-size:12px; text-transform: uppercase; color: #2aace3;}

.recent-posts-details {margin: 5px 0px 0px 92px;font-size:11px;}

.recent-posts-details a{color: #777;}

</style>

7.Kemudian kamu bisa mengganti URL Blog : https://buayaberdiri.blogspot.com/

Dengan URL blog yang kamu miliki

8.Kemudian kamu bisa menekan tombol Save untuk menyimpan kode javascript dan css recent post.


Pada tahap ini kamu bisa melihat recent post artikel,kode diatas akan bekerja setelah kamu mengupdate artikel atau memposting artikel terbaru pada halaman blog kamu,recent post tersebut aka n bertambah seiring kamu terus mengupdate artikel di blog kamu.

Sangat mudah bukan ?

Cara Membuat Recent Post Berdasarkan Label di Blog

Jika kamu membutuhkan recent post berdasarkan label yang ingin kamu pilih,maka kamu bisa mengikuti langkah-langkah pada artikel ini.


1.Perhatikan Kode Script pada dibawah ini yang sudah saya bagikan

<script type="text/javascript">

function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2WanZP7km1pawaHl_vm9h-xPrO7XaU81ovEi5LURrD2xHkIjzjakZWUsHbJuilfEb1KQgbrOk-HpSium0HUNaZdy90kb7lXJTyvr3mPW9I5rDOdO86qzBwtmXt5JV330X9l7nOAPqr1Jv/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}

</script>

<script type="text/javascript">

var posts_no = 15;

var showpoststhumbs = true;

var readmorelink = true;

var showcommentslink = true;

var posts_date = true;

var post_summary = true;

var summary_chars = 40;</script>

<script src="https://buayaberdiri.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>

<noscript>Your browser does not support JavaScript!</noscript>

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

<style type="text/css">

img.recent-post-thumb{padding:2px;width:65px;height:65px;float:left;margin:0px 10px 10px;border: 1px solid #69B7E2;}

.recent-posts-container {font-family:'Oswald', sans-serif;font-size:12px;}

ul.recent-posts-container li{list-style-type: none; margin-bottom: 10px;font-size:12px;float:left;width:100%}

ul.recent-posts-container {counter-reset: countposts;list-style-type:none;padding:0;}ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 1;position:absolute; left: 0px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;line-height:25px;height:25px;width:25px;text-align:center;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}

.recent-posts-container a{text-decoration:none;}

.recent-post-title {margin-bottom:5px;}

.recent-post-title a {font-size:12px; text-transform: uppercase; color: #2aace3;}

.recent-posts-details {margin: 5px 0px 0px 92px;font-size:11px;}

.recent-posts-details a{color: #777;}

</style>

Pada kode diatas kamu akan menemukan sintaks seperti ini :

<script src="https://buayaberdiri.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>

<noscript>Your browser does not support JavaScript!</noscript>

Kamu bisa mengubah sintaks diatas berdasarkan URL Label pada blog kamu,sebagai contoh saya mempunyai label Covid-19 dengan URL seperti dibawah ini :

https://buayaberdiri.blogspot.com/search/label/COVID-19?&max-results=6

Maka pada sintaks diatas pada akhiran post/default/? bisa kamu tambahkan menjadi seperti ini :

https://buayaberdiri.blogspot.com/feeds/posts/default/-/NAMALABEL?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs

Kamu bisa menggubah NAMALABEL dengan label yang kamu pakai dan sesuai dengan URL Label pada blog kamu.

Maka URL berdasarkan label akan seperti ini :

https://buayaberdiri.blogspot.com/feeds/posts/default/-/COVID-19?

Maka sintaksnya akan berubah menjadi seperti dibawah ini :

<script src="https://buayaberdiri.blogspot.com/feeds/posts/default/-/COVID-19??orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>

<noscript>Your browser does not support JavaScript!</noscript>

Sepertinya mudah bukan ?


Lalu bagaimana jika label tersebut memilih 3 kalimat ? ,semisal nama label yang saya miliki adalah tutorial komputer umum , maka url label saya akan seperti ini :

https://buayaberdiri.blogspot.com/search/label/tutorial%20komputer%20umum?&max-results=6

Pada url diatas memiliki tanda simbol persen (%) ,maka URL yang ingin kamu ubah pada sintaksnya menjadi seperti ini :

https://buayaberdiri.blogspot.com/feeds/posts/default/-/tutorial%20komputer%20umum?

Dan sintaksnya akan seperti ini :

<script src="https://buayaberdiri.blogspot.com/feeds/posts/default/-/tutorial%20komputer%20umum??orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>

<noscript>Your browser does not support JavaScript!</noscript>

Nah sepertinya mudah bukan jika nama label memiliki 3 kalimat dan memiliki simbol persen.Semoga cara diatas dapat membantu.

Cara Menentukan Jumlah Postingan Artikel Recent Post 

Pada tutorial ini kamu bisa menentukan jumlah postingan yang tampil pada recent post yang kamu miliki,kamu bisa menentukan semisal ada 3 artikel recent post ataupun 5 postingan dan hingga lebih dari 10 postingan rencet post.

Berikut ini adalah cara menambah jumlah postingan recent post di blog :

1.Lihat sintaks dibawah ini :

<script type="text/javascript">

function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2WanZP7km1pawaHl_vm9h-xPrO7XaU81ovEi5LURrD2xHkIjzjakZWUsHbJuilfEb1KQgbrOk-HpSium0HUNaZdy90kb7lXJTyvr3mPW9I5rDOdO86qzBwtmXt5JV330X9l7nOAPqr1Jv/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}

</script>

<script type="text/javascript">

var posts_no = 15;

var showpoststhumbs = true;

var readmorelink = true;

var showcommentslink = true;

var posts_date = true;

var post_summary = true;

var summary_chars = 40;</script>

<script src="https://buayaberdiri.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>

<noscript>Your browser does not support JavaScript!</noscript>

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

<style type="text/css">

img.recent-post-thumb{padding:2px;width:65px;height:65px;float:left;margin:0px 10px 10px;border: 1px solid #69B7E2;}

.recent-posts-container {font-family:'Oswald', sans-serif;font-size:12px;}

ul.recent-posts-container li{list-style-type: none; margin-bottom: 10px;font-size:12px;float:left;width:100%}

ul.recent-posts-container {counter-reset: countposts;list-style-type:none;padding:0;}ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 1;position:absolute; left: 0px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;line-height:25px;height:25px;width:25px;text-align:center;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}

.recent-posts-container a{text-decoration:none;}

.recent-post-title {margin-bottom:5px;}

.recent-post-title a {font-size:12px; text-transform: uppercase; color: #2aace3;}

.recent-posts-details {margin: 5px 0px 0px 92px;font-size:11px;}

.recent-posts-details a{color: #777;}

</style>

Maka kamu akan menemukan sintaks js seperti ini :

<script type="text/javascript">

var posts_no = 15;

var showpoststhumbs = true;

var readmorelink = true;

var showcommentslink = true;

var posts_date = true;

var post_summary = true;

var summary_chars = 40;</script>

Untuk mengubah / menambah / mengurangi jumlah postingan recent post kamu bisa mengubah nilai angka pada sintaks ini :

var posts_no = 15;

Pada sintaks diatas terdapat angka 15 , itu artinya recent post yang akan tampil pada halaman sidebar atau widget di blog kamu berjumlah 15 postingan artikel yang terupdate.

Kamu bisa menambah /atau mengurangi jumlah postingan tersebut dengan cara mengubah nilai angka tersebut.

Jika kamu menginginkan / membutuhkan 10 recent post di widget blog,maka kamu bisa mengubah nilai angkanya menjadi 10,maka sintaksnya akan menjadi seperti ini :

var posts_no = 10;

Cara Mengubah Tinggi dan Lebar Gambar Thumbnail Recent Post 

Selain kamu bisa membuat menampilkan recent post berdasarkan label sesuai pilihan,maka kamu juga bisa mengubah Tinggi dan Lebar gambar thumbnail,jika kamu merasa kurang cocok dengan tinggi dan lebar gambar,maka kamu bisa mengubahnya.

Kamu bisa memperbesar tampilan gambar thumbnail ataupun mengecilkan tampilan gambar thumbnail sesuai dengan kebutuhan atau sesuai dengan lebar sidebar atau widget yang kamu miliki.

Berikut ini adalah langkah-langkah mengubah lebar dan tinggi gambar thumbail recent post :


1.Perhatikan sintak dibawah ini :

<script type="text/javascript">

function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2WanZP7km1pawaHl_vm9h-xPrO7XaU81ovEi5LURrD2xHkIjzjakZWUsHbJuilfEb1KQgbrOk-HpSium0HUNaZdy90kb7lXJTyvr3mPW9I5rDOdO86qzBwtmXt5JV330X9l7nOAPqr1Jv/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}

</script>

<script type="text/javascript">

var posts_no = 15;

var showpoststhumbs = true;

var readmorelink = true;

var showcommentslink = true;

var posts_date = true;

var post_summary = true;

var summary_chars = 40;</script>

<script src="https://buayaberdiri.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>

<noscript>Your browser does not support JavaScript!</noscript>

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

<style type="text/css">

img.recent-post-thumb{padding:2px;width:65px;height:65px;float:left;margin:0px 10px 10px;border: 1px solid #69B7E2;}

.recent-posts-container {font-family:'Oswald', sans-serif;font-size:12px;}

ul.recent-posts-container li{list-style-type: none; margin-bottom: 10px;font-size:12px;float:left;width:100%}

ul.recent-posts-container {counter-reset: countposts;list-style-type:none;padding:0;}ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 1;position:absolute; left: 0px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;line-height:25px;height:25px;width:25px;text-align:center;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}

.recent-posts-container a{text-decoration:none;}

.recent-post-title {margin-bottom:5px;}

.recent-post-title a {font-size:12px; text-transform: uppercase; color: #2aace3;}

.recent-posts-details {margin: 5px 0px 0px 92px;font-size:11px;}

.recent-posts-details a{color: #777;}

</style>

Maka kamu akan menemukan sintaks CSS seperti ini :

<style type="text/css">

img.recent-post-thumb{padding:2px;width:65px;height:65px;float:left;margin:0px 10px 10px;border: 1px solid #69B7E2;}

.recent-posts-container {font-family:'Oswald', sans-serif;font-size:12px;}

ul.recent-posts-container li{list-style-type: none; margin-bottom: 10px;font-size:12px;float:left;width:100%}

ul.recent-posts-container {counter-reset: countposts;list-style-type:none;padding:0;}ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 1;position:absolute; left: 0px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;line-height:25px;height:25px;width:25px;text-align:center;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}

.recent-posts-container a{text-decoration:none;}

.recent-post-title {margin-bottom:5px;}

.recent-post-title a {font-size:12px; text-transform: uppercase; color: #2aace3;}

.recent-posts-details {margin: 5px 0px 0px 92px;font-size:11px;}

.recent-posts-details a{color: #777;}

</style>

Untuk mengubah lebar dan tinggi gambar thumbnail maka kamu perlu memperhatikan sintaks css dibawah ini :

img.recent-post-thumb{padding:2px;width:65px;height:65px;float:left;margin:0px 10px 10px;border: 1px solid #69B7E2;}

.recent-posts-container {font-family:'Oswald', sans-serif;font-size:12px;}

Maka kamu bisa melihat sintaks seperti ini :

img.recent-post-thumb{padding:2px;width:65px;height:65px;

1. width adalah sintaks css yang berfungsi untuk mengatur lebar element gambar
2. height adalah sintaks css yang berfungsi untuk mengatur tinggi element gambar

Kamu bisa mengubah angka nilai pada width dan height,sebegai contoh jika kamu ingin menambah lebar dan tinggi element gamba untuk lebar lagi,sebagai contoh saya ingin menambah menjadi 100,maka sintaksnya akan seperti ini

img.recent-post-thumb{padding:2px;width:100px;height:100px;

Maka hasilnya akan seperti ini :

img.recent-post-thumb{padding:2px;width:100px;height:100px;float:left;margin:0px 10px 10px;border: 1px solid #69B7E2;}

.recent-posts-container {font-family:'Oswald', sans-serif;font-size:12px;}

Demikian informasi tentang Cara Membuat Recent Post Thumbnail di Blogger sampai disini,semoga informasi ini bisa membantu kamu,Gbu :)

Baca juga artikel tentang : Template Toko Online Premium Untuk Blogspot [Desain Sederhana]

Baca juga artikel tentang : Template Blogger Toko Online Sederhana Responsif,SEO,Fast Loading

Baca juga artikel tentang : Cara memasang widget covid-19 di blogger / blogspot / wordpress

Baca juga artikel tentang : Cara mendapatkan domain eu.org secara gratis (Free Domain EU.ORG)

List of Article Posts https://buayaberdiri.blogspot.com