Cara Membuat Featured Post Di Homepage Blog

Zona Internetku 6 Comments September 21, 2018

Tampilan Widget Featured Post Di Homepage Blog

Cara Mudah Untuk Membuat Widget Featured Post Di Homepage Blog. Widget Featured Post atau artikel rekomendasi merupakan suatu artikel yang yang dibuat oleh pemilik blog untuk menampilkan postingan utama atau postingan rekomendasi untuk para pengunjung blog mereka.
Featured Post juga memiliki peranan yang penting dalam sebuah blog, selain mdapat menarik perhatian pengunjung blog, widget ini juga bagus untuk seo, karena dengan menggunakan widget ini blog kita secara otomatis saling terhubung satu sama lain dan akhirnya terciptalah sebuah backlink dalam blog kita yang dapat meningkatkan kualitas Page Rank dalam blog kita.

Cara Memasang Widget Featured Post Yang Keren Dan Responsive Di Homepage Blog

1. Masuklah ke dalam blog kalian terlebih dahulu
2. Selanjutnya kalian klik menu "Tema" dan pilih "Edit HTML"
3. Lalu kalian cari kode html yang menggunakan atribut Id atau Class yang bernama main-wrapper atau article-wrapper
Setelah itu kalian letakkan kode berikut ini di atas kode tadi

<b:if cond='data:blog.pageType != &quot;item&quot; and data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;archive&quot;'>
<div id='featured-wrapper' class='featured-wrapper'>
  <b:section id='featured_post' class='featured'/>
</div>
<div class='clear'/>
</b:if>

Intinya adalah kalian hanya perlu meletakkan kode tersebut di atas wrapper widget postingan (main blog)

4. Kemudian kalian letakkan kode css berikut ini di atas kode </b:template-skin> jika tidak ada kode tersebut letakkan di atas kode </b:skin>

/* Featured Post Buatan Zona Iternetku */
 body#layout #featured-wrapper{display:block;width:auto;width:100%;max-width:100%;margin:0;padding:0}
body#layout #featured-wrapper #featured_post{display:block;margin:0;padding:10px 7px 5px}

5. Selanjutnya kalian klik "Simpan Tema" dan masuk ke dalam menu tampilan "Tata Letak"
Dan di situ akan muncul sebuah layout baru yang bernama "Featured Post" dan klik "Tambahkan Gadget" dan pilih "HTML/JavaScript"

<style>
.RPZI,.RPZI2{float:left;position:relative}.RPZI,.RPZI2,.rpostzi{position:relative}
.RPZI .info-dnc span,.RPZI2 .info-dnc span{font-weight:400;background:#3498db;color:#fff}
.rpostzi{width:100%;max-width:1024px;display:block;overflow:hidden;margin:0 auto;padding:0}.RPZI{width:50%;height:400px}.RPZI2{width:25%;height:200px}
.RPZI .info-rp,.RPZI2 .info-rp{position:absolute;bottom:0;left:0;right:0;width:100%;margin:0 auto;display:block;z-index:5}
.RPZI .info-dnc,.RPZI2 .info-dnc{font-size:13px;padding:4px;margin-top:5px;display:flex}
.RPZI .info-dnc span{margin:12px 4px 0;font-size:15px;padding:4px}
.RPZI .info-dnc span.rpdate:before{content:"\f017";font-family:FontAwesome;font-size:15px}
.RPZI .info-dnc span.rpcomments:before{content:"\f086";font-family:FontAwesome;font-size:15px}
.RPZI2 .info-dnc span{margin:5px 4px 0;font-size:13px;padding:4px}
.RPZI2 .info-dnc span.rpdate:before{content:"\f017";font-family:FontAwesome;font-size:13px}
.RPZI2 .info-dnc span.rpcomments:before{content:"\f086";font-family:FontAwesome;font-size:13px}
.RPZI .info-rp .rptitle a,.RPZI2 .info-rp .rptitle a{color:#fff;text-decoration:none;font-family:'Roboto Condensed',sans-serif;border:1px solid #3498db;display:block;font-weight:550;text-align:center;background:rgba(51,44,43,.41)}
.RPZI .info-rp .rptitle,.RPZI2 .info-rp .rptitle{width:90%;margin:5px auto}
.RPZI .info-rp .rptitle a{font-size:18px;padding:12px 8px;line-height:18px}
.RPZI2 .info-rp .rptitle a{font-size:12px;padding:7px 8px;line-height:14px}
.RPZI .rpimage,.RPZI2 .rpimage{width:100%;height:100%;object-fit:cover}
.RPZI .info-rp .rptitle a:hover,.RPZI2 .info-rp .rptitle a:hover{background:rgba(255,255,255,.77);color:#3498db}
@media screen and (max-width :768px){.RPZI{width:100%;height:270px}
.RPZI2{width:50%;height:150px}}
@media screen and (max-width :480px){.rpostzi{display:none}}
</style>

<script type="text/javascript">
//<![CDATA[
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('1G 1H(C){N(e i=0;i<L;i++){e g=C.Q.g[i];e I=g.E.$t;m(i==C.Q.g.R)G;N(e j=0;j<g.l.R;j++){m(g.l[j].F==\'1b\'&&g.l[j].19==\'1d/1e\')e S=g.l[j].E;m(g.l[j].F==\'1c\'){G}}e A=g.l[j].w;e q=g.1a.$t;e M=q.y(0,4);e T=q.y(5,7);e U=q.y(8,10);e f=1h 1g();f[1]="1f";f[2]="1i";f[3]="17";f[4]="X";f[5]="W";f[6]="18";f[7]="13";f[8]="16";f[9]="15";f[10]="14";f[11]="Y";f[12]="1y";e n;1x{n=g.1w$1A.1j;e v=n.z("u-c","s"+B+"-c")}1z(1B){s=g.1u.$t;a=s.x("<O");b=s.x("P=\\"",a);c=s.x("\\"",b+5);d=s.1n(b+5,c-b-5);m((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){n=d}1v n=H;e 1m=H.z("u-c","s"+B+"-c");e v=n.z("u-c","s"+B+"-c")}r.p(\'<h k="1I"><h k="J-1l"> <h k="1k"><a w="\'+A+\'">\'+I+\'</a></h><h k="J-1o">\');{m(1F==K)r.p(\'<o k="1p">\'+\' \'+U+\' \'+f[V(T,10)]+\' \'+M+\'</o>\')}{m(1E==K)r.p(\'<o k="1t">\'+\' \'+S+\'</o>\')}r.p(\'</h></h><a w="\'+A+\'"><O k="1s" P="\'+v+\'" 1r="\'+B+\'" 1q="\'+B+\'"/></a></h>\')}e Z=(V(L)+(1C));N(e i=L;i<Z;i++){e g=C.Q.g[i];e I=g.E.$t;m(i==C.Q.g.R)G;N(e j=L;j<g.l.R;j++){m(g.l[j].F==\'1b\'&&g.l[j].19==\'1d/1e\')e S=g.l[j].E;m(g.l[j].F==\'1c\'){G}}e A=g.l[j].w;e q=g.1a.$t;e M=q.y(0,4);e T=q.y(5,7);e U=q.y(8,10);e f=1h 1g();f[1]="1f";f[2]="1i";f[3]="17";f[4]="X";f[5]="W";f[6]="18";f[7]="13";f[8]="16";f[9]="15";f[10]="14";f[11]="Y";f[12]="1y";e n;1x{n=g.1w$1A.1j;e v=n.z("u-c","s"+D+"-c")}1z(1B){s=g.1u.$t;a=s.x("<O");b=s.x("P=\\"",a);c=s.x("\\"",b+5);d=s.1n(b+5,c-b-5);m((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){n=d}1v n=H;e 1m=H.z("u-c","s"+D+"-c");e v=n.z("u-c","s"+D+"-c")}r.p(\'<h k="1J"><h k="J-1l"> <h k="1k"><a w="\'+A+\'">\'+I+\'</a></h><h k="J-1o">\');{m(1K==K)r.p(\'<o k="1p">\'+\' \'+U+\' \'+f[V(T,10)]+\' \'+M+\'</o>\')}{m(1D==K)r.p(\'<o k="1t">\'+\' \'+S+\'</o>\')}r.p(\'</h></h><a w="\'+A+\'"><O k="1s" P="\'+v+\'" 1r="\'+D+\'" 1q="\'+D+\'"/></a></h>\')}}',62,109,'||||||||||||||var|monthnames|entry|div|||class|link|if|thumb|span|write|timePost|document|||s72|thumbpost|href|indexOf|substring|replace|entryUrl|thumbResolution1|json|thumbResolution2|title|rel|break|rpNothumbs|entryPost|info|true|MaxPost|cdyear|for|img|src|feed|length|commentPost|cdmonth|cdday|parseInt|May|Apr|Nov|maxPost2t||||Jul|Oct|Sep|Aug|Mar|Jun|type|published|replies|alternate|text|html|Jan|Array|new|Feb|url|rptitle|rp|no_thumb|substr|dnc|rpdate|width|height|rpimage|rpcomments|content|else|media|try|Dec|catch|thumbnail|error|MaxPost2|CommentsPost2|CommentsPost|DatePost|function|recentPostzi|RPZI|RPZI2|DatePost2'.split('|'),0,{}))
//Script By Zona Internetku
//]]>
</script>

<script>
var DatePost=true;
var DatePost2=true;
var CommentsPost=true;
var CommentsPost2=true;
var MaxPost=1;
var MaxPost2=4;
var thumbResolution1=400;
var thumbResolution2=200;
var rpNothumbs="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo2PuCRo1O7M4V_yAZeD5ntaxGYKRH30DU26pHmnZZsR-BacAMOXhoqZMKIhr3slz2qSqQyqAjduqwRvyOv2kQdAqKQaL1eFXd773cCzGTS0rv8TR-fO7ThvVydwbGetxfzJVRKAIq0IU/s1600/noimg-zonainternetku.png";
</script>

Jangan lupa untuk mengatur opsi widget featured post seperti berikut ini
MaxPost : Mengatur jumlah postingan widget Latest Post

• showThumbPost : True untuk menampilkan thumbnail, dan False untuk menyembunyikan thumbnail
• DatePost : True untuk menampilkan tanggal postingan artikel, dan False untuk menyembunyikan tanggal postingan artikel
• CommentsPost : True untuk menampilkan jumlah komentar postingan, dan False untuk menyembunyikan jumlah komentar postingan
• thumbnailResolution : Mengatur kualitas resolusi gambar thumbnail postingan

Selanjutnya jika kalian sudah mengatur opsi seperti yang sudah di jelaskan di atas, maka kalian harus menambahkan salah satu kode pemanggil javascript tersebut seperti ini, di sini ada dua pilihan kode javascript yang bisa kalian gunakan jadi Pilih salah satu kode saja

1. Opsi Pertama : Menampilkan Isi Featurd Post Berdasarkan Postingan Terbaru (Latest Post)

<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=recentPostzi"></script>

Baca juga : Cara Menambahkan Widget Latest Post Di Blog

2. Opsi Kedua : Menampilkan Isi Featurd Post Berdasarkan Label

<script type="text/javascript" src="/feeds/posts/default/-/Label Blog?published&alt=json-in-script&callback=recentPostzi"></script>

Baca juga : Tutorial Menambahkan Widget Blog Recent Post By Label

Ganti tulisan Label Blog menjadi nama label blog yang ingin kalian tampilkan pada widget featured post

6. Ok, jika semua sudah clear dan tidak ada masalah, silahkan kalian simpan widget tersebut, jika sudah selesai silahkan kalian hasilnya.

Bagi kalian yang ingin melihat hasil Widget Featured Post tersebut silahkan klik tombol demo berikut ini

Demo

Baca juga :
Cara Membuat Widget Author Box Keren Di Blog
3 Cara Memasang Widget Tombol Media Sosial Pada Blog
6 Cara Memasang Social Media Share Button Pada Blog

Demikian tadi adalah panduan singkat mengenai Cara Memasang Widget Featured Post Yang Keren Dan Responsive Di Homepage Blog yang dapat saya posting untuk kalian semua, semoga bermanfaat dan sampai jumpa lagi

Promo Menarik

Diskon Barang Elektronik Di Lazada Hingga 80%

Cek disini

Promo Cuci Gudang, Diskon Sampai 50%

Cek disini

Murah Pol - Barang Murah Berkualitas Mewah

Cek disini

Tampil Cantik Gak Perlu Mahal - Diskon 50%

Cek disini

Kumpulan Barang Untuk Kesehatan - Diskon 50%

Cek disini

SHARE