Cara Menciptakan Recent Post By Lebel Di Halaman Blog Keren
Cara Membuat Recent Post By Label di Halaman Blog Keren - Recent Post By Label yakni sajian artikel terbaru yang diurutkan sesuai dengan label blog yang kita miliki. Biasanya sajian ini terletak pada halaman utama blog dalam bentuk widget atau dalam sajian sidebar. Namun untuk kesempatan kali ini postingan terbaru terbaru dari label tersebut kita akan menempatkannya di dalam header sajian blog.
Header sajian yakni salah satu elemen penting yang ada dalam blog atau website yang berfungsi sajian untuk melihat kategori yang terdapat di dalam blog, sehingga para pembaca sanggup dengan gampang menemukan artikel atau halaman apa saja yang ingin dicari.
Pada umumnya header sajian yang ada di dalam blog biasanya diisi dengan label kategori, namun dengan penempatan itu berdasarkan saya terlihat biasa saja dan terlihat membosankan. Oleh lantaran itu Menu di dalam blog sanggup kita ubah menjadi recent post by lebel yang terlihat lebih keren dan unik.
Selain itu widget yang akan ditampilkan sanggup di bilang responsive, tidak membutuhkan waktu usang untuk memuatnya. Bahkan ini sangan cocok untuk semua jenis template pada blog lantaran ukurannya sanggup diubahsuaikan secara otomatis, jadi kita tidak perlu takut untuk memasangnya. Oleh alasannya yakni itu mari kita simak baik-baik tutorial dibawah ini.
Jika Sudah menerapkan arahan di atas, lanjut ke langkah berikut
1. Buka blog anda > Pilih Halaman > buat Halaman Baru
2. Ubah mode Compose ke sajian HTML > lalu letakkan arahan ini di dalamnya
3. Jangan lupa ganti goresan pena bercetak tebal merah dengan nama blog dan label anda, lalu pilih publikasikan
Keterangan:
Header sajian yakni salah satu elemen penting yang ada dalam blog atau website yang berfungsi sajian untuk melihat kategori yang terdapat di dalam blog, sehingga para pembaca sanggup dengan gampang menemukan artikel atau halaman apa saja yang ingin dicari.
Pada umumnya header sajian yang ada di dalam blog biasanya diisi dengan label kategori, namun dengan penempatan itu berdasarkan saya terlihat biasa saja dan terlihat membosankan. Oleh lantaran itu Menu di dalam blog sanggup kita ubah menjadi recent post by lebel yang terlihat lebih keren dan unik.
Selain itu widget yang akan ditampilkan sanggup di bilang responsive, tidak membutuhkan waktu usang untuk memuatnya. Bahkan ini sangan cocok untuk semua jenis template pada blog lantaran ukurannya sanggup diubahsuaikan secara otomatis, jadi kita tidak perlu takut untuk memasangnya. Oleh alasannya yakni itu mari kita simak baik-baik tutorial dibawah ini.
Tutorial Cara Membuat Recent Post By Label di Halaman Blog
Sebelum Kita ingin memasang postingan terbaru berdasarkan label, terlebih dahulu kita harus menambahkan arahan font awesome di dalam template kita. Tetapi biasanya template jaman kini sudah menerakan arahan tersebut di dalamnya, untuk itu cek lah terlebih dahulu di HTML anda. Jika belum letakkan arahan ini sempurna berada di atas arahan </head> atau </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>Jika Sudah menerapkan arahan di atas, lanjut ke langkah berikut
1. Buka blog anda > Pilih Halaman > buat Halaman Baru
2. Ubah mode Compose ke sajian HTML > lalu letakkan arahan ini di dalamnya
<div id="analisku"> </div> <div id="analisyuki"> </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;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} #analisku{margin:0} #analisku .analisyukichan{width:48.9%;background:#fff;display:inline-block;margin:0 20px 15px 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)} #analisku .analisyukichan:nth-child(even){margin:0 0 15px 0} #analisku .analisyukichan img{background:#ecf0f1;padding:0;float:left;margin:0;margin-right:13px;width:72px} #analisku .analisyukichan h6,.analisyukichan h6 a{text-decoration:none;font-size:14px;font-weight:400;margin:0;color:#000} #analisku .analisyukichan:hover{background-color:#fefefe} #analisku .analisyukichan 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/AVvXsEjZxPWnggasfBsCAoNcE9x62FO2t0q8EvtQqfDxLl9a8lHBv9nYo97aYvKiF5zs8rvY_vlls_PSopnjQk6qEWucAKwHk4vlgQrnpnPhwCa3zZZqRSq-XPJchgju3V2Iv42WTENqxauvekU/s1600/loadingAnalisyuki.gif) no-repeat 50% 50%;height:470px} #analisyuki{display:table;padding:5px 10px 5px 0;text-align:left;margin:15px auto} #analisyuki a{color:#141414;font-size:12px;font-weight:400;display:block;padding:5px 10px} #analisyuki span{padding:0;cursor:pointer;transition:all .3s} #analisyuki .next,#analisyuki .previous{position:relative;overflow:hidden;display:inline-block;background:#fff;color:#222;padding:10px 16px;font-size:1rem;border-radius:100em;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)} #analisyuki .next{float:right;margin:0 0 0 10px} #analisyuki .previous{float:left;margin:0 10px 0 0} #analisyuki .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)} #analisyuki a:hover,#analisyuki span.noactived{color:#ccc} #analisyuki i{font-family:fontawesome;font-style:normal} #analisyuki .next:hover,#analisyuki .previous:hover,#analisyuki .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){#analisku .analisyukichan{width:100%;margin:0 0 10px 0}} </style> <script type='text/javascript'> //<![CDATA[ var jumlahpost = 8; var ambilpost = 0; var alamatsitus = "https://turuninsay.blogspot.com"; var snippet = 0; var tombolkiri, tombolkanan; function analiskufeed(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 showanalisku(e){var t,n,r,a,i,s="";tombolkiri="",tombolkanan="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(tombolkiri=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(tombolkanan=e.feed.link[l].href);for(var d=0;d<jumlahpost&&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/AVvXsEhcChmPCfZHzEAhRLagFprKOQFJ30kwPLGWir2lS4u6fO2CQU6ruUbjAnHN146MTuOto75TRRquZfAHsFNFOKNlWe3WlYE-VT4JfE0S-MmC3c8xlcBiqGor08hPGXF0yF-y4szA43cP5Dwm/s1600/no-image.png",s+="<div class='analisyukichan'>",s+="<a href='"+r+"'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+analiskufeed(i,snippet)+"</p>",s+="</div>"}document.getElementById("analisku").innerHTML=s,s="",s+=tombolkiri?"<a href='javascript:navigasifeed(-1);' class='previous'><i class='fa fa-arrow-left'></i></a>":"<span class='noactived previous'><i class='fa fa-arrow-left'></i></span>",s+=tombolkanan?"<a href='javascript:navigasifeed(1);' class='next'><i class='fa fa-arrow-right'></i></a>":"<span class='noactived next'><i class='fa fa-arrow-right'></i></span>",s+="<a href='javascript:navigasifeed(0);' class='home'><i class='fa fa-snowflake-o'></i></a>",document.getElementById("analisyuki").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=tombolkiri.indexOf("?"),n=tombolkiri.substring(t)):1==e?(t=tombolkanan.indexOf("?"),n=tombolkanan.substring(t)):n="?start-index=1&max-results="+jumlahpost+"&orderby=published&alt=json-in-script",n+="&callback=showanalisku",incluirscript(n)}function incluirscript(e){1==ambilpost&&removerscript(),document.getElementById("analisku").innerHTML="<div id='recentpostload'></div>",document.getElementById("analisyuki").innerHTML="";var t=alamatsitus+"/feeds/posts/default/-/Widget"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","analiskulabel"),document.getElementsByTagName("head")[0].appendChild(n),ambilpost=1}function removerscript(){var e=document.getElementById("analiskulabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)}; //]]> </script>3. Jangan lupa ganti goresan pena bercetak tebal merah dengan nama blog dan label anda, lalu pilih publikasikan
Keterangan:
| Kode | Keterangan |
|---|---|
| var jumlahpost | Jumlah tampilan postingan di halaman |
| var ambilpost | Ingin ambil dari postingan ke berapa (saran saya biarkan 0) |
| var alamatsitus | Alamat blog anda |
| var snippet | Jumlah snippen (Biarkan 0) |
| https://turuninsay.blogspot.com | Ubah dengan nama blog anda |
| /feeds/posts/default/-/Widget | Ganti Widget dengan label blog anda |
Catatan : Sebelum di publikasi, harap cek terlebih dahulu nama blog serta label anda, lantaran bila sudah di publikasi terus di edit kembali biasanya recent post by label tidak akan muncul, atau anda sanggup pratinjau terlebih dahulu.Sekian saja dari saya Tutorial Cara Membuat Recent Post By Label di Halaman Blog Keren, bila ada sesuatu yang belum dipahami silahkan bertanya di komentar, Terimakasih. Sumber https://www.analisyuki.com/