2 Cara Membuat Featured Post di Homepage Blog Dengan Mudah
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 |
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:'Oswald';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:'Oswald';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:'Oswald';
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:'Oswald';
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 Menambahkan Icon Di Menu Blog 100% Work
- Cara Membuat Tombol Whatsapp Keren Di Blog
- Cara Membuat Website Menjadi Aplikasi Android Tanpa Koding
- 7 Cara Mudah Agar Artikel Muncul Di Halaman Pertama Google
- 3 Cara Memasang Tamplate Blog Sesuai Keinginan
- Cara Membuat Sitemap Blogger Dengan Mudah 100% Work
- Cara Membuat Tombol Download Keren Di Postingan Blog
- Cara Membuat Daftar Isi Di Postingan Blogger
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:'';
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("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=recentposts1\"><\/script>");
</script>
</b:if>
<div class='featured_naminaz' id='featured_namiwrap'>
<div class='ct-wrapper'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=recentposts1\"><\/script>");
</script>
</b:if>
5.Klik Simpan
Baca juga: Cara Memasang Anti Copas di Blog 100% Berhasil Dengan MudahFeatured 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.
seconds.
Post a Comment
Silahkan berkomentar yang sopan, sesuai topik, No Spam, Centang kotak pada Notify me !