Kali ini teman husen akan membahas wacana widget blogspot yaitu menciptakan sajian kategori memakai recent post by label dengan derma halaman statis. Untuk Membuat recent post by label di halaman statis ini awalnya aku pertama melihat menciptakan widget ini di blog arlinadzgn, kemudian aku terapkan pada blog saya. Untuk sampel sanggup dilihat di sajian kategori teman husen ini.
Manfaat memasang recent post menurut label di halaman statis ini akan tampil di pencarian google alasannya yaitu kita memasangkan halaman statis pada sajian blog sehingga akan terindex oleh google kemudian pencarian google akan muncul nama link kategori blog kalian, jadi alangkah baiknya memasang widget recent post by label untuk mengganti halaman kategori di menu. baca juga Cara menciptakan widget random post bergerak pada blog
Untuk pemasangan widget itu sendiri tidak terlalu rumit cukup sederhana dan pemasangan widget ini tidak akan memberatkan loading blog anda, bahkan dengan memasang widget ini akan lebih nyaman untuk di lihat oleh pengunjung setia anda.
Manfaat memasang recent post menurut label di halaman statis ini akan tampil di pencarian google alasannya yaitu kita memasangkan halaman statis pada sajian blog sehingga akan terindex oleh google kemudian pencarian google akan muncul nama link kategori blog kalian, jadi alangkah baiknya memasang widget recent post by label untuk mengganti halaman kategori di menu. baca juga Cara menciptakan widget random post bergerak pada blog
Untuk pemasangan widget itu sendiri tidak terlalu rumit cukup sederhana dan pemasangan widget ini tidak akan memberatkan loading blog anda, bahkan dengan memasang widget ini akan lebih nyaman untuk di lihat oleh pengunjung setia anda.
CARA MEMASANG RECENT POST BERDASARKAN LABEL UNTUK MENU BLOG
# Langkah 1: Masuk ke halaman dashboard blogger.com
Seperti biasa sebelum kita mengelola blog kita harus login terlebih dahulu dengan memasukan email dan password yang telah didaftarkan. Kemudian pilih sajian Dashboard > Tema > Edit HTML.
# Langkah 2: Masukan script Fontawesome pada editor template
Masukan script HTML Fontawesome pada halaman editor blog, simpan script ini sebelum </head>
<script type='text/javascript'> //<![CDATA[ function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) } loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); //]]> </script>Setelah copy & paste HTML diatas dan dimasukan di editor template anda kemudian tekan tombol simpan.
# Langkah 3: Membuat halaman statis dengan recent post by label
Pada langkah ini bertujuan untuk menciptakan halaman statis yang berisi postingan sebelumnya yang diurutkan kemudian disortir menurut label atau kategori yang akan dipilih oleh anda. Caranya pilih sajian Dashboard > Halaman > Entri baru. masukan script ini dibawah ini.
<div id="recentpostsae"> </div> <div id="recentpostnavfeed"> </div> <style scoped="" type="text/css"> *{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-box-sizing:border-box} a,a:link,a:visited{text-decoration:none;transition:all .3s} button,input[type="button"],input[type="reset"],input[type="submit"],.button{border:0;color:#fff;cursor:pointer;font-size:14px;font-weight:400;padding:12px 16px;white-space:normal;width:auto;border-radius:3px;outline:0}button:focus,button:hover,input[type="button"]:focus,input[type="button"]:hover,input[type="reset"]:focus,input[type="reset"]:hover,input[type="submit"]:focus,input[type="submit"]:hover,.button:focus,.button:hover{color:#fff} #recentpostnav{border:1px solid #585858;width:100%;margin:0 auto} #recentpostsae{margin:0} #recentpostsae .recentpostel{width:48.9%;background:#fff;display:inline-block;margin:0 20px 10px 0;padding:15px;overflow:hidden;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)} #recentpostsae .recentpostel:nth-child(even){margin:0 0 10px 0} #recentpostsae .recentpostel img{background:#ecf0f1;padding:0;float:left;margin:0;margin-right:13px;width:72px} #recentpostsae .recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:14px;font-weight:400;margin:0;color:#000} #recentpostsae .recentpostel:hover{background-color:#fefefe} #recentpostsae .recentpostel p{font-size:12px;text-align:left;color:#555;line-height:normal;margin:5px 0} #recentpostload{letter-spacing:-10px;text-align:center;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAgQ8PlRlZbfbs5W6cFw_pSOEllUo68vIHjej0NJ72GwEGPTx4SywJKmXtXXzpu3cSvzHDr5ngfkA4p6s2vNhOVDkGu2olOypqvTWv8lwll33-nzXBsoVM8z4n01bOODLMrrX4LCRmKDmZ/s1600/ellipsis-preloader.gif) no-repeat 50% 50%;height:470px} #recentpostnavfeed{display:table;padding:5px 10px 5px 0;text-align:left;margin:15px auto} #recentpostnavfeed a{color:#141414;font-size:12px;font-weight:400;display:block;padding:5px 10px} #recentpostnavfeed span{padding:0;cursor:pointer;transi<div id="recentpostsae"> </div> <div id="recentpostnavfeed"> </div> <style scoped="" type="text/css"> *{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-box-sizing:border-box} a,a:link,a:visited{text-decoration:none;transition:all .3s} button,input[type="button"],input[type="reset"],input[type="submit"],.button{border:0;color:#fff;cursor:pointer;font-size:14px;font-weight:400;padding:12px 16px;white-space:normal;width:auto;border-radius:3px;outline:0}button:focus,button:hover,input[type="button"]:focus,input[type="button"]:hover,input[type="reset"]:focus,input[type="reset"]:hover,input[type="submit"]:focus,input[type="submit"]:hover,.button:focus,.button:hover{color:#fff} #recentpostnav{border:1px solid #585858;width:100%;margin:0 auto} #recentpostsae{margin:0} #recentpostsae .recentpostel{width:48.9%;background:#fff;display:inline-block;margin:0 20px 10px 0;padding:15px;overflow:hidden;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)} #recentpostsae .recentpostel:nth-child(even){margin:0 0 10px 0} #recentpostsae .recentpostel img{background:#ecf0f1;padding:0;float:left;margin:0;margin-right:13px;width:72px} #recentpostsae .recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:14px;font-weight:400;margin:0;color:#000} #recentpostsae .recentpostel:hover{background-color:#fefefe} #recentpostsae .recentpostel p{font-size:12px;text-align:left;color:#555;line-height:normal;margin:5px 0} #recentpostload{letter-spacing:-10px;text-align:center;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAgQ8PlRlZbfbs5W6cFw_pSOEllUo68vIHjej0NJ72GwEGPTx4SywJKmXtXXzpu3cSvzHDr5ngfkA4p6s2vNhOVDkGu2olOypqvTWv8lwll33-nzXBsoVM8z4n01bOODLMrrX4LCRmKDmZ/s1600/ellipsis-preloader.gif) no-repeat 50% 50%;height:470px} #recentpostnavfeed{display:table;padding:5px 10px 5px 0;text-align:left;margin:15px auto} #recentpostnavfeed a{color:#141414;font-size:12px;font-weight:400;display:block;padding:5px 10px} #recentpostnavfeed span{padding:0;cursor:pointer;transition:all .3s} #recentpostnavfeed .next,#recentpostnavfeed .previous{position:relative;overflow:hidden;display:inline-block;background:#fff;color:#222;padding:10px 16px;font-size:1rem;border-radius:99em;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)} #recentpostnavfeed .next{float:right;margin:0 0 0 10px} #recentpostnavfeed .previous{float:left;margin:0 10px 0 0} #recentpostnavfeed .home{text-align:center;display:table;background:#fff;color:#222;font-size:1rem;float:none;padding:10px 16px;border-radius:99em;margin:auto;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)} #recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:#ccc} #recentpostnavfeed i{font-family:fontawesome;font-style:normal} #recentpostnavfeed .next:hover,#recentpostnavfeed .previous:hover,#recentpostnavfeed .home:hover{background:#fff;color:#222;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)} @media screen and (max-width:993px){#recentpostsae .recentpostel{width:100%;margin:0 0 10px 0}} </style> <script type='text/javascript'> //<![CDATA[ var numfeed = 14; var startfeed = 0; var urlblog = "https://caratepatq.blogspot.com"; var charac = 0; var urlprevious, urlnext; function arlinafeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function showrecentpostsae(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSACW9xFLPnEIshz9CWhQKfO99BxKXanMQavRb80gkqjAx6PDfyIX_x409V6YFTjQ51Xc39XAfUqoGxwjEXe5dyVN-MyxGC9FVN-XFVQrXPbzQKa4cM027ZYXaBWI_nsmQiwVugxAEWqDQ/s1600/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+arlinafeed(i,charac)+"</p>",s+="</div>"}document.getElementById("recentpostsae").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous'><i class='fas fa-arrow-left'></i></a>":"<span class='noactived previous'><i class='fas fa-arrow-left'></i></span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'><i class='fas fa-arrow-right'></i></a>":"<span class='noactived next'><i class='fas fa-arrow-right'></i></span>",s+="<a href='javascript:navigasifeed(0);' class='home'><i class='fas fa-home'></i></a>",document.getElementById("recentpostnavfeed").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script",n+="&callback=showrecentpostsae",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentpostsae").innerHTML="<div id='recentpostload'></div>",document.getElementById("recentpostnavfeed").innerHTML="";var t=urlblog+"/feeds/posts/default/-/Photoshop"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","arlinalabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("arlinalabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)}; //]]> </script>Copy & Pastekan script diatas pada mode HMTL sebelum menyimpan, edit terlebih dahulu isyarat yang aku tandai blok warna biru pada script tersebut.
Catatan :
var numfeed = 14;
14 diatas yaitu jumlah postingan setiap halaman akan ditampilkan 14 recent post atau 14 postingan sebelumnya.
Catatan :
var urlblog = "https://caratepatq.blogspot.com";
Ganti url tersebut dengan url alamat blog anda
Catatan :Terakhir beri judul pada halaman tersebut kemudian Publikasikan.
/feeds/posts/default/-/Photoshop
Ganti label yang ditandai diatas dengan label yang akan nanti ditampilkan.
# Langkah 4: Memasang Halaman Statis Ke Menu Blog
Terakhir pasang halaman statis ke sajian blog dengan cara masuk ke Dashboard > Tema > Edit HTML. Kemudian cari sajian dengan menekan tombol CTRL+F salin link halaman statis yang tadi dibentuk kemudian pastekan di sajian blog terakhir Simpan.
Anda sanggup menciptakan beberapa sajian kategori lainnya menurut label dengan cara yang sama ibarat diatas.
Sekian cara menciptakan recent post menurut label untuk sajian kategori blog, biar bermanfaat dan membantu kalian yang mencari artikel yang dibahas ini. bila masih kesulitan dalam pembuatan sanggup berkomentar di kolom yang telah disediakan. begitulah Memasang Recent Post Berdasarkan Label Untuk Menu Blog biar membantu dan bermanfaat.
Sumber https://www.sobathusen.com/