Cara Membuat Widget Postingan Terbaru - , Pada kesempatan kali ini fahrinheit akan membuatkan tips blogging semoga tampilan blogmu terlihat menarik. Artikel kali ini merujuk salah satu blog personal terbesar di Indonesia ialah blog mastimon. Menurut saya pribadi, mastimon merupakan salah satu blog terbaik yang dikelola sendiri di Indonesia dan menjadi salah satu alasan fahrinheit ngeblog hingga sekarang. Dengan tampilan yang sederhana namun tetap menarik dan menghadirkan artikel-artikel yang berkualitas mengakibatkan blog ini sering muncul di halaman page one google dan banyak dikunjungi.
Nah ada salah satu tampilan menarik pada blog mastimon, ialah widget postingan terbaru yang terlihat menarik dan menyesuaikan tema yang sanggup anda lihat pada blog fahrinheit ini sendiri. Tampilan tersebut sangat berbeda dari fitur-fitur yang biasanya disediakan oleh blogger sendiri sehingga eksklusif fahrinheit terapkan juga di blog ini. Seperti yang sanggup anda lihat pada gambar di atas, widget tersebut menyesuaikan dengan tema yang diterapkan pada blog sehingga tidak merusak tampilan blog anda justru malah menciptakan menarik tampilan blog anda.
Baca Juga : Cara Membuat Hasil Pencarian Blog Dialihkan Ke Pencarian Google ala Kompi Ajaib
Seperti yang kita ketahui, fitur blogger sendiri memang menyediakan featured post yang menciptakan kita sanggup menampilkan post sesuai label ataupun post terbaru yang dipublikasikan. Namun untuk tampilannya sendiri kurang menarik dan kita tidak sanggup mengatur berapa jumlah artikel yang ditampilkan. Sedangkan pada widget postingan terbaru (recent post) ala mastimon ini sendiri kita sanggup mengatur berapa jumlah artikel yang ingin ditampilkan dan untuk penerapannya pun sangat sederhana alasannya hanya memakai widget blogger sehingga anda tidak perlu repot-repot mengeditnya melalui HTML template. Nah ingin tau bagaimana cara mengaplikasikannya pada blog anda? Langsung saja ikuti langkah-langkah berikut ini:
1. Masuk ke akun blogger anda.
2. Setelah masuk ke akun blogger selanjutnya pilih hidangan tata letak / layout
3. Masuk ke tata letak sidebar selanjutnya klik tambahkan gadget / widget
4. Pilih gadget HTML / Javascript
5. Masukkan instruksi script di bawah ini :
Note : Untuk mengedit instruksi script silahkan ubah goresan pena yang berwarna merah di atas,
1. var numfeed, untuk mengatur berapa jumlah postingan terbaru yang akan ditampilkan di sidebar
2. var startfeed, untuk mengatur artikel yang dimunculkan dari postingan artikel keberapa
3. var urlblog, masukkan link blog anda
4. var charac, untuk mengatur jumlah abjad isi abjad yang akan ditampilkan, kalau anda ingin hanya judul yang ditampilkan maka pilih 0
Nah itulah tadi cara menciptakan widget postingan terbaru di sidebar ala mastimon. Sangat gampang sekali bukan? Anda tidak perlu repot-repot mengaturnya melalui HTML template alasannya hanya dengan memakai widget. Selain itu tampilan dari widget tersebut juga menyesuaikan dengan template anda sehingga akan terlihat menarik. Demikian artikel kali ini, nantikan terus tips blogging lainnya dari fahrinheit. Semoga bermanfaat.
Baca Juga : Cara Membuat Hasil Pencarian Blog Dialihkan Ke Pencarian Google ala Kompi Ajaib
Seperti yang kita ketahui, fitur blogger sendiri memang menyediakan featured post yang menciptakan kita sanggup menampilkan post sesuai label ataupun post terbaru yang dipublikasikan. Namun untuk tampilannya sendiri kurang menarik dan kita tidak sanggup mengatur berapa jumlah artikel yang ditampilkan. Sedangkan pada widget postingan terbaru (recent post) ala mastimon ini sendiri kita sanggup mengatur berapa jumlah artikel yang ingin ditampilkan dan untuk penerapannya pun sangat sederhana alasannya hanya memakai widget blogger sehingga anda tidak perlu repot-repot mengeditnya melalui HTML template. Nah ingin tau bagaimana cara mengaplikasikannya pada blog anda? Langsung saja ikuti langkah-langkah berikut ini:
1. Masuk ke akun blogger anda.
2. Setelah masuk ke akun blogger selanjutnya pilih hidangan tata letak / layout
3. Masuk ke tata letak sidebar selanjutnya klik tambahkan gadget / widget
4. Pilih gadget HTML / Javascript
5. Masukkan instruksi script di bawah ini :
<style scoped='' type='text/css'>
/* Recent Post Navigasi */
#recentpostnav{border:1px solid #585858;width:100%;margin:0 auto}
#recentpostsae{margin:0}
.recentpostel{background:#fff;display:block;border:1px solid #ddd;margin:5px 0;padding:10px;height:79px}
.recentpostel img{background:#fff;padding:4px;float:left;height:70px;margin-right:8px;width:70px;border:1px solid #ddd}
.recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:13px!important;font-weight:700!important;margin:0;color:#111}
.recentpostel:hover{background-color:#fefefe}
.recentpostel p{font-size:12px;text-align:left;color:#555;line-height:normal;margin:5px 0}
#recentpostload{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCVNkmf-9NApfy_Gfw-R49Zr7RS9Crmt-VW2wTOuCt79FDIfmdRr2eyLRrLwCJOZzfE0I568hUB-oAj-EKxsJWm-TBiJnaNjy2mnlakt0mQ4d7_4rJRH5DWhf8MvsfCSCkqntLfLAyOYv7/s1600/loader.gif) 50% 50% no-repeat #fff;height:470px;border:1px solid #ddd}
#recentpostnavfeed{border:1px solid #ddd;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0}
#recentpostnavfeed:hover{background-color:#fefefe}
#recentpostnavfeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#recentpostnavfeed span{padding:5px 10px}
#recentpostnavfeed .next{float:right}
#recentpostnavfeed .previous{float:left}
#recentpostnavfeed .home{text-align:center}
#recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:transparant!important}
</style>
<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "https://armanbloggernews.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/AVvXsEgndlyXWSGqxW3KazuBr50GljRqCppuL5xEB0p2os-xuf2ZUW0x7PTZ84XqzPCMJMBUOJMbnNxRo6T4RJOgBGbzpINMJtolnW-bdEh23s4sy_zi6FY4KsexomlnZoY4aa5VX8l7mXHTK_th/s1600/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"' target='_blank'><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'>Previous</a>":"<span class='noactived previous'>Previous</span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'>Next</a>":"<span class='noactived next'>Next</span>",s+="<a href='javascript:navigasifeed(0);' class='home'>Home</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"+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>
<div id="recentpostsae"></div>
<div id="recentpostnavfeed"></div>
/* Recent Post Navigasi */
#recentpostnav{border:1px solid #585858;width:100%;margin:0 auto}
#recentpostsae{margin:0}
.recentpostel{background:#fff;display:block;border:1px solid #ddd;margin:5px 0;padding:10px;height:79px}
.recentpostel img{background:#fff;padding:4px;float:left;height:70px;margin-right:8px;width:70px;border:1px solid #ddd}
.recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:13px!important;font-weight:700!important;margin:0;color:#111}
.recentpostel:hover{background-color:#fefefe}
.recentpostel p{font-size:12px;text-align:left;color:#555;line-height:normal;margin:5px 0}
#recentpostload{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCVNkmf-9NApfy_Gfw-R49Zr7RS9Crmt-VW2wTOuCt79FDIfmdRr2eyLRrLwCJOZzfE0I568hUB-oAj-EKxsJWm-TBiJnaNjy2mnlakt0mQ4d7_4rJRH5DWhf8MvsfCSCkqntLfLAyOYv7/s1600/loader.gif) 50% 50% no-repeat #fff;height:470px;border:1px solid #ddd}
#recentpostnavfeed{border:1px solid #ddd;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0}
#recentpostnavfeed:hover{background-color:#fefefe}
#recentpostnavfeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#recentpostnavfeed span{padding:5px 10px}
#recentpostnavfeed .next{float:right}
#recentpostnavfeed .previous{float:left}
#recentpostnavfeed .home{text-align:center}
#recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:transparant!important}
</style>
<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "https://armanbloggernews.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/AVvXsEgndlyXWSGqxW3KazuBr50GljRqCppuL5xEB0p2os-xuf2ZUW0x7PTZ84XqzPCMJMBUOJMbnNxRo6T4RJOgBGbzpINMJtolnW-bdEh23s4sy_zi6FY4KsexomlnZoY4aa5VX8l7mXHTK_th/s1600/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"' target='_blank'><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'>Previous</a>":"<span class='noactived previous'>Previous</span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'>Next</a>":"<span class='noactived next'>Next</span>",s+="<a href='javascript:navigasifeed(0);' class='home'>Home</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"+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>
<div id="recentpostsae"></div>
<div id="recentpostnavfeed"></div>
Note : Untuk mengedit instruksi script silahkan ubah goresan pena yang berwarna merah di atas,
1. var numfeed, untuk mengatur berapa jumlah postingan terbaru yang akan ditampilkan di sidebar
2. var startfeed, untuk mengatur artikel yang dimunculkan dari postingan artikel keberapa
3. var urlblog, masukkan link blog anda
4. var charac, untuk mengatur jumlah abjad isi abjad yang akan ditampilkan, kalau anda ingin hanya judul yang ditampilkan maka pilih 0
Nah itulah tadi cara menciptakan widget postingan terbaru di sidebar ala mastimon. Sangat gampang sekali bukan? Anda tidak perlu repot-repot mengaturnya melalui HTML template alasannya hanya dengan memakai widget. Selain itu tampilan dari widget tersebut juga menyesuaikan dengan template anda sehingga akan terlihat menarik. Demikian artikel kali ini, nantikan terus tips blogging lainnya dari fahrinheit. Semoga bermanfaat.
Cara Menciptakan Widget Postingan Terbaru (Recent Post) Menarik Di Sidebar Ala Mastimon
4/
5
Oleh
Arman Blogger News
