SEARCH MENU
Home / BLOGGING

2 Cara Membuat Featured Post di Homepage Blog Dengan Mudah


Cara Membuat Featured Post di Homepage Blog - Featured post adalah artikel atau postingan blog yang sengaja ditonjolkan dan ditempatkan pada tempat yang strategis di laman web. Anda  bisa memilih featured post berdasarkan katagori maupun postingan terbaru yang menurut anda itu hal yang penting atau sedang dipromosikan untuk mendapatkan lebih banyak pengunjung.

Disamping itu, membuat featured post keren di blog akan menambah kesan elegan ataumempercantik tampilan blog anda dan kesannya akan kelihatan lebih rapi pada homepage.
2 Cara Membuat Featured Post di Homepage Blog Dengan Mudah
2 Cara Membuat Featured Post di Homepage Blog Dengan Mudah





Dengan adanya Featured Post bisa menarik perhatian pembaca saat membuka halaman homepage. karena umumnya Featured Post memiliki tampilan dan keunikan sehingga menarik perhatian pengunjung.

Sebenarnyaada banyak cara yang bisa dilakukan untuk membuat featured post keren, jadi disini akan disesuaikan sesuai dengan kebutuhan masing - masing.

Nah berikut ini saya akan membagikan tutorial simpel mengenai cara membuat featured post responsive di blog kesayangan anda.

Cara Membuat Featured Post Melalui Tata Letak (Tambah Gadget)  

Cara membuat featured post pertama yang akan saya bagikan disini adalah cara yang paling mudah anda lakukan, yaitu hanya melalui menu tata letak dnegan menambahkan gadget. Cara ini sangat cocok digunakan bagi anda yang masih pemula, karena dilakukan dengan cara yang simpel.

1. Silahkan anda Log In di akun blogger

2. Selanjutnya masuk ke menu Tata Letak

3. Lalu klik tambah Widget/ Gadget

4. Selanjutnya pilih  HTML/Javascript

5. Silahkan anda kasi judul featured post

6. Pada kolom silahkan anda isi dengan script dibawah ini

<style>

#featuredpost {margin:15px auto;}

#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}

#slides ul{height:320px}

#slides li{width:50%;height:100% ;position:absolute;display:none}

#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}

#slides li:nth-child(1){left:0;top:0}

#slides li:nth-child(2){left:50%;width:25%;height:50%}

#slides li:nth-child(3){left:75%;width:25%;height:50%}

#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}

#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}

#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;

padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);

height:90px;font-family:&#39;Oswald&#39;;text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}

#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;

padding:0;font-family:&#39;Oswald&#39;;box-shadow:5px 3px 0 rgba(0,0,0,0.2);}

#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;

background:#ff6553;margin:0;}

#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;

padding:5px 21px;text-transform:uppercase;margin:0;}

#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}

#slides a{display:block;width:100%;height:100%;overflow:hidden}

#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}

#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}

#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}

#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:&#39;Oswald&#39;;

left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;

background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}

#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;

position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:&#39;Oswald&#39;;

text-transform:uppercase;}

#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}

#slides .overlayx,#slides li{transition:all .4s ease-in-out}

#slides li:nth-child(1) .overlayx{display:none;}

#slides li:hover .overlayx{opacity:0.1}

@media only screen and (max-width:800px){

#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}

@media only screen and (max-width:600px){

#slides ul{height:600px}

#slides li:nth-child(1){width:100%;height:50%}

#slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}

#slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}

#slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}

#slides li:nth-child(5){display:none;}}

@media only screen and (max-width:480px){

#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}

</style>

<script type="text/javascript" src="https://cdn.rawgit.com/Brando07/share/newbe/seocips-rec-post-slider.js"></script>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function () {

FeaturedPost({

blogURL:"https://www.kubis.online",

MaxPost:5,

idcontaint:"#featuredpost",

ImageSize:500,

interval:10000,

autoplay:false,

tagName:false

});

});

//]]>

</script>

<div id="featuredpost"></div>

Silahkan anda ganti yang saya warnai merah dengan alamat website anda.

7. Terakhir klik Simpan

Nah sekarang silahkan lihat blog anda, seharusnya sudah muncul featured post pada hompage anda.
Perlu anda ketahui untuk hasilnya nanti featured post yang muncul adalah featured post berdasarkan postingan terbaru dengan tampilan metro.

BACA JUGA:

Cara Membuat Featured Post Melalui Edit HTML

Cara kedua ini tergolong lebih rumit dari cara yang pertama, namun demikian disini anda bisa menggunakan feature post berdasarkan entri atau label yang diunggulkan. Adapun caranya adalah:

1. Log In di akun blogger anda

2. Klik menu Tema lalu Edit HTML

3. Kemudian letakkan kode dibawah ini sebelum </head>

<b:if cond='data:view.isHomepage'>

<style type='text/css'>

/* Featured Post by kubis.online */

*, *:after {

-webkit-box-sizing:border-box;

-moz-box-sizing:border-box;

box-sizing:border-box

}

.featured_namiwrap {

display:inline-block;

width:100%;

max-width:1020px;

margin:0 auto 5px auto;

overflow:hidden;

max-height:390px

}

.featured_namina {

display:block;

position:relative;

float:left;

overflow:hidden;

height:390px

}

.featured_namina.first {

width:69%;

margin-right:5px

}

.featured_namina.third,.featured_namina.fourth {

width:30%;

height:190px;

float:right

}

.featured_namina.third {

margin-bottom:10px

}

.featured_namina a {

display:block;

color:rgb(255,255,255);

position:relative;

vertical-align:bottom;

z-index:1;height:100%

}

.featured_namina a:before {

width:100%;

height:100%;

position:absolute;

content:&#39;&#39;;

background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.8) 100%);

opacity:.7;z-index:2;

transition:all .6s

}

.featured_namina:hover a:before{opacity:1}.featured_namina a .blog_contents {

display:block;

position:absolute;

z-index:5;

bottom:15px;

left:15px;

right:15px;

letter-spacing:-1px;

text-transform:uppercase;

line-height:120%;

transition:all 0.2s

}

.featured_namiwrap span {

color:#fff;

padding:3px 6px;

letter-spacing:0;

font-size:12px;

line-height:1;

border-radius:3px;

text-transform:capitalize;

box-shadow:0 2px 5px rgba(0,0,0,0.2)

}

.featured_namina.first span{

background:#679e37

}

.featured_namina.second span{

background:#f8a724

}

.featured_namina.third span{

background:#029ae4

}

.featured_namina.fourth span{

background:#e53935

}

.featured_namina a .blog_contents h3{

color:#fff;

margin-top:15px;

font-size:18px;

line-height:normal;

font-weight:600;

letter-spacing:-0.4px;

text-transform:none;

text-shadow:none

}

.featured_namina a .blog_contents .featured_namina.first a .blog_contents h3{

font-size:22px

}

.featured_namina .feat-img{

width:100%;

height:100%;

background-size:cover;

background-position:50%;-webkit-backface-visibility:hidden;

transition:all .3s

}

.featured_namina:hover .feat-img{transform:rotate(-3deg) scale(1.2);-webkit-filter:blur(2px);filter:blur(2px)

}

@media only screen and (max-width:768px){

.featured_namiwrap{max-height:initial}.featured_namina.first,.featured_namina.third,.featured_namina.fourth{width:100%;margin:0;margin-bottom:10px}.featured_namina a .blog_contents{left:15px;right:15px;bottom:10px}.featured_namina.first a .blog_contents h3,.featured_namina a .blog_contents h3{font-size:20px}}

</style>

<script type='text/javascript'>

//<![CDATA[

// Featured post by kubis.online

function recentposts1(e){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array,numposts1<=e.feed.entry.length?maxpost=numposts1:maxpost=e.feed.entry.length,document.write('<div class="featured_namiwrap">');for(var t=0;t<maxpost;t++){var i,n=e.feed.entry[t],r=n.title.$t,l=n.category[0].term;newsize;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++)if("alternate"==n.link[o].rel){i=n.link[o].href;break}for(o=0;o<n.link.length;o++)if("replies"==n.link[o].rel&&"text/html"==n.link[o].type){n.link[o].title.split(" ")[0];break}if("content"in n)var g=n.content.$t;else if("summary"in n)g=n.summary.$t;else g="";postdate=n.published.$t,j>imgr.length-1&&(j=0),img[t]=imgr[j],s=g,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),-1!=a&&-1!=b&&-1!=c&&""!=d&&(img[t]=d);for(var m=[1,2,3,4,5,6,7,8,9,10,11,12],f=["Oca","Şub","Mar","Nis","May","Haz","Tem","Ağu","Eyl","Eki","Kas","Ara"],p=(postdate.split("-")[2].substring(0,2),postdate.split("-")[1]),u=(postdate.split("-")[0],0);u<m.length;u++)if(parseInt(p)==m[u]){p=f[u];break}if(0==t){var v='<div class="featured_namina first"><a href="'+i+'"><div class="blog_contents"><span>'+l+"</span><h3>"+r+'</h3></div><div class="feat-img" style="background-image:url('+img[t]+');"></div></a></div>';document.write(v)}if(1==t){v='<div class="featured_namina second"><a href="'+i+'"><div class="blog_contents"><span>'+l+"</span><h3>"+r+'</h3></div><div class="feat-img" style="background-image:url('+img[t]+');"></div></a></div>';document.write(v)}if(2==t){v='<div class="featured_namina third"><a href="'+i+'"><div class="blog_contents"><span>'+l+"</span><h3>"+r+'</h3></div><div class="feat-img" style="background-image:url('+img[t]+');"></div></a></div>';document.write(v)}if(3==t){v='<div class="featured_namina fourth"><a href="'+i+'"><div class="blog_contents"><span>'+l+"</span><h3>"+r+'</h3></div><div class="feat-img" style="background-image:url('+img[t]+');"></div></a></div>';document.write(v)}j++}document.write("</div>")}imgr=new Array,imgr[0]="data:image/gif;base64,R0lGODlhAQABAIAAAPHx8AAAACH5BAEAAAAALAAAAAABAAEAQAICRAEAOw==",showRandomImg=!0,aBold=!0,numposts1=4,numposts11=1,newsize=400;

//]]>

</script>

</b:if>


Silahkan anda ganti url dengan url blog anda.

4. Selanjutnya cari kode <div id='wrapper'> atau <div id='post-container>  dan tambahkan kode di bawah ini sebeleum kode tersebut.

<b:if cond='data:view.isHomepage'>
<div class='featured_naminaz' id='featured_namiwrap'>
<div class='ct-wrapper'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=recentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</b:if>

5.Klik Simpan
Baca juga: Cara Memasang Anti Copas di Blog 100% Berhasil Dengan Mudah
Featured post ini nantinya akan menampilkan postingan terbaru, jika ingin mengganti dengan dengan postingan tertentu anda cukup mengganti /feeds/posts/default? dengan /feeds/posts/default/-/NAMA-LABEL?

Ganti NAMA-LABEL dengan nama label yang ingin anda tampilkan. seteleh semua anda sesuaikan klik tombol Simpan Tema dan selesai

Penutup: Demikian 2 Cara Membuat Featured Post di Homepage Blog Dengan Mudah yang bisa digunakan menampilan featured post slider blogger, semoga bermanfaat.
🌐 Baca Juga
⚠ Ikuti Kami di Blogger dan Google News Dan Dapatkan 1 Buah Smartphone dari Sponsor jika Beruntung‼
bm
Mr.Surya

TEACHER | BLOGGER | CONTEN WRITER

Post a Comment

Silahkan berkomentar yang sopan, sesuai topik, No Spam, Centang kotak pada Notify me !