Cara Menciptakan Meterial Design Recent Post By Label Di Blogger

Hi. Semua, Hari ini aku akan kongsikan Cara menciptakan meterial design recent post by Label blogger Grid, Cara ini sesuai untuk blogger bloger yang berkongsikan gambar gambar ataupun video.

Cara ini cukup gampang kerana semua code tlah disediakan, anda hanya perlu memasangnya ke template anda.

Caranya :
Login ke blogger anda dan edit html template anda.

Masukan code css berikut ke dalam css style anda:

/* 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:260px;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: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%}}

Setelah final memasang kod di atas, Masukan code berikut sebelum code </body>

<script type='text/javascript'> //<![CDATA[ // Recent Post Settings var recentpost_url = "https://www.onet4u.com"; // link blog anda var numPosts = 8; //jumlah post var recentpost_label = "Game"; // label yang anda ingin tampilkan // 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="Cara menciptakan meterial design recent post by Label di blogger" target="_blank"><img src="'+u+'" alt="Cara menciptakan meterial design recent post by Label blogger Grid Cara menciptakan meterial design recent post by Label di blogger"></a><div class="title_post"><a href="'+s+'" title="Cara menciptakan meterial design recent post by Label di blogger" 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="Cara menciptakan meterial design recent post by Label di blogger" target="_blank">View More</a></div>'; //]]> </script>

Selanjutnya masukan code berikut ke dalam widget anda ataupun ke dalam template anda , dimana anda ingin menampilkan recent post grid.

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

Setelah final mamasang code code di atas , anda tlah berhasil memasang recent post gride dengan jayanya.

Baiklah, hingga disini sahajala posting aku tentang Cara menciptakan meterial design recent post by Label di blogger, Kita bertemu lagi dalam posting posting seterusnya. Wasalam dari saya

Thanks,
O4U Team.
Sumber https://www.onet4u.com/

Bagikan Artikel ini