Cara Membuat Recent Post Berdasarkan Label

Berikut adalah seputar cara membuat recent post berdasarkan label untuk template blogger dengan mudah dan membuat blog keren. yuk ketahui cara nya.


cara membuat recent post blogger material design


Mungkin sudah banyak yang membuat recent post untuk blog, namun kali ini recent post nya berbeda, karena recent post yang di buat bertampilan grid. Selain itu dalam recent post kali ini kalian bisa memilih label, jadi sangat cocok untuk kalian yang ingin menampilkan recent post terkini namun hanya berdasarkan label tertentu saja.



cara membuat recent post berdasarkan label



Widget recent post ini sangat cocok sekali dengan template blogger yang memiliki Wrapper 1100px.

Berarti jika wrapper nya berbeda akan susah? Tidak, tenang, kalian bisa mengubahnya pada bagian cssnya dan menyesuaikannya dengan lebar wrapper template blog kalian. Cukup atur ukuran 


width pada css li.recent-post.


Apa saja langkah-langkah nya ?

1. Langkah pertama adalah mencari kode "</b:skin>" atau "</style>" dan kemudian pasangkan CSS berikut di atas kode tersebut.


/* Recent Post Material */
li.recent-posts:hover{box-shadow:0 2px 2px 0 rgba(0,0,0,0.14), 0 5px 10px 0 rgba(0,0,0,0.12), 0 5px 10px -5px rgba(0,0,0,0.2)}
.recenthd,li.recent-posts{box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 2px 2px 0 rgba(0,0,0,.24);background:#fff;border-radius:3px;overflow:hidden}
a.gorecent{float:right;font-size:11px;padding:5px 10px;margin:-4px}
.recenthd h2{display:inline-block;text-transform:uppercase;font-size:15px;margin:0}
.recenthd svg{float:left;margin-right:10px}
.recenthd{padding:15px;text-align:left;margin-bottom:10px}ul#recent-posts{margin:0;padding:0}
li.recent-posts:nth-child(12),li.recent-posts:nth-child(4),li.recent-posts:nth-child(8){margin-right:0}
li.recent-posts{transition:all .3s ease-in-out;list-style:none;padding:0;margin-bottom:20px;text-align:center;width:218px;max-width:100%;float:left;height:260px;margin-right:20px}
.title_post a{color:#515151}li.recent-posts a:hover{color:#111}
.title_post{height:30px;overflow:hidden;padding:10px;line-height:1.4;font-size:13.4px}
.recent-posts img{height:190px;width:100%}
a.gorecent{text-transform:uppercase;line-height:1.5;font-size:11px;font-weight:700;color:#fff;border:none;padding:7px 15px 7px;border-radius:5px;background:#1976d2;cursor:pointer;outline:0;box-shadow:0 2px 2px 0 rgba(154,154,154,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.12);margin-right:7px}
@media screen and (max-width:1024px){.howtouse{width:50%}#safe-wrapper{width:auto;padding:18px;margin:-100px 0 0}li.recent-posts{width:47.6%}}
@media screen and (max-width:768px){.howtouse{width:39%}#safe-wrapper{width:auto;padding:18px;margin:-100px 0 0}li.recent-posts{width:45.6%}}
@media screen and (max-width:480px){li.recent-posts{width:100%}}

2. Selanjutnya Copy kode Javascript berikut sebelum kode "</body>"

<script type='text/javascript'>
//<![CDATA[
// Recent Post Settings
var recentpost_url = "https://id.caralogis.com";
var numPosts = 8;
var recentpost_label = "Artikel";
// Recent Post
function recentPosts(e){if(document.getElementById("recent-posts")){for(var t,s,r=e.feed.entry,n="",a=document.getElementById("recent-posts"),l=0;l<numPosts;l++){for(var c=0;c<numPosts;c++)if("alternate"==r[l].link[c].rel){s=r[l].link[c].href;break}"media$thumbnail"in r[l]?u=r[l].media$thumbnail.url.replace(/.*?:\/\//g,"//").replace(/\/s[0-9]+\-c/g,"/s300"):u="https://1.bp.blogspot.com/-jHWwEwTEwQ4/WJJ4k71QSYI/AAAAAAAApVc/XO_OitR_VGQS_Wquq1pv1h1D-dgiejSuQCLcB/s90/nothumb_large.png";var t=r[l].title.$t;n+='<li class="recent-posts"><a href="'+s+'" title="'+t+'" target="_blank"><img src="'+u+'" alt="'+t+'"></a><div class="title_post"><a href="'+s+'" title="'+t+'" target="_blank">'+t+"</a></div></li>"}a.innerHTML=n}}var rcp=document.createElement("script");rcp.src=recentpost_url+"/feeds/posts/default/-/"+recentpost_label+"?orderby=published&alt=json-in-script&max-results="+numPosts+"&callback=recentPosts",document.getElementsByTagName("head")[0].appendChild(rcp);
// Recent Post Title
var titlerecentpost = document.getElementById("xtitlex");
titlerecentpost.innerHTML='<div class="recenthd"><svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 9H9V9h10v2zm-4 4H9v-2h6v2zm4-8H9V5h10v2z"/></svg><h2>'+recentpost_label+'</h2><a class="gorecent" href="'+recentpost_url+'/search/label/'+recentpost_label+'" title="Recent Post" target="_blank">View More</a></div>';
//]]>
</script>


Catatan :

  • Ganti recentpost_url dengan URL blog kalian
  • Ganti recentpost_label dengan label yang kalian ingin tampilkan
  • 8 adalah batas minimal penampilan recent post nya
  • Agar berjalan pastikan penulisan pada recentposts_url benar, Jika http maka tulis http, namun jika https, maka tulis https.

3. Setelah itu klik button save template. 

4. Dan kemudian pilih menu tata letak

5. Pada tampilan tata letak silahkan pilih di mana akan memasang recent post tersebut, bisa di bawah menu, atau di tengah tengah template.

6. Cara nya adalah klik pada section "tambahkan widget" kemudian pilih "HTML/JavaScript" dan kemudian masukkan kode berikut :

<div id='xtitlex'></div>
<ul id='recent-posts'></ul>

7. Kemudian save.


Itulah cara membuat recent post material untuk mempercantik tampilan blog. Semoga bermanfaat.

Artikel Lain

0 Comments

Posting Komentar

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.