Beranda  ›  Blogger  ›  Tutorial

    Cara Memasang Featured Post Keren di Blog Template Viomagz

    Nyampling << N >> Cara Memasang Featured Post Keren di Blog . Bagi kalian blogger tentu sangat ingin membuat blog kalian unik dan informatif. Hal ini agar dapat mendatangkan banyak visitor. Selain informatif selayaknya blog juga dapat menarik perhatian visitor supaya dapat memberikan ciri khas tertentu sebuah blog. Salah satunya dengan membuat tata letak widget yang seunk mungkin.

    Cara Memasang Featured Post Keren di Blog

    Hal ini dilakukan agar dapat membuat blog kita mudah diingat dan juga dapat memberikan kesan unik tapi tetap dalam koridor SEO ya. Bagi anda yang ingin membuat blog kalian beda dari yang lain, kali ini nyampling.com akan memberikan tutorial Cara Memasang Featured Post Keren di Blog. Sebelum ke step berikutnya anda harus tauh dulu apa itu Featured Post.

    Widget Featured Post adalah sebuah widget yang berisi tentang artikel yang telah anda publish. Artikel ini bisa anda tentukan sendiri, baik itu artikel yang baru dipublish, ataupun artikel pilihan sesuai dengan selera anda. Artikel penting yang lagi booming atau banyak dicari sehingga dapat meningkatkan pageview ataupun menambah jumlah trafik blog anda.

    Cara Memasang Featured Post Keren di Blog


    Ada beberapa cara yang akan admin bagikan disini, anda tinggal memilih mana yang paling bagus dan mudah menurut anda serta tidak memberatkan page speed blog anda.

    1. Memasang Featured Post Berbentuk Grid Style 1


    Cara Memasang Featured Post Keren di Blog

    Langkah 1. Login ke Blogger > Klik menu Tema dan Edit HTML > Kemudian tambahkan kode di bawah ini tepat sebelum kode <head>

    <b:if cond='data:view.isHomepage'>
<style type='text/css'>
/* Featured Post by naminakiky.com */
*,*:before, *:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.featured_namiwrap{display:inline-block;width:100%;max-width:1070px;margin:0 auto 20px auto;overflow:hidden;max-height:410px}.featured_namina{display:block;position:relative;float:left;overflow:hidden;height:410px}.featured_namina.first{width:44.7%;margin-right:1px}.featured_namina.second{width:25%;margin-right:1px}.featured_namina.third,.featured_namina.fourth{width:30%;height:205px}.featured_namina.third{margin-bottom:1px}.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:16px;line-height:normal;font-weight:normal;letter-spacing:-0.4px;text-transform:none;text-shadow:none}.featured_namina a .blog_contents h3:hover{text-decoration:underline}.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.second,.featured_namina.first,.featured_namina.third,.featured_namina.fourth{width:100%;height:300px;margin:0;margin-bottom:1px}.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 naminakiky.com
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>
    Perhatikan kode yang ditandai, sesuaikan max-width:1070px dengan lebar template Anda dan pastikan di dalam template sudah terdapat jQuery Library.
    Langkah 2. Selanjutnya tambahkan markup dari widget Featured Post ini bebas dimanapun Anda ingin menempatkannya, selama masih di dalam body diantara <body> dan </body>

    <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>
</div>
</div>
</b:if>

    Contohnya Anda bisa menempatkannya di dalam markup wrapper seperti contoh ini

    <div id='wrapper'>
.....
.....
<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>
</div>
</div>
</b:if>
.....
.....
</div>

    Widget Featured Post di atas akan menampilkan update dari postingan terbaru di blog, jika ingin menggantinya dengan update postingan terbaru dari label tertentu cukup ganti format feed yang ada dalam script trigger ini

    /feeds/posts/default?

    Menjadi seperti ini

    /feeds/posts/default/-/NAMA-LABEL?
    Ganti NAMA-LABEL dengan nama label yang ingin Anda tampilkan.
    Langkah 3. Setelah semua Anda sesuaikan, klik tombol Simpan tema dan lihat hasilnya.
    Script By Namina

    2. Memasang Featured Post Berbentuk Grid di Viomagz

     
    Cara Memasang Featured Post Keren di Blog

    Langkah 1.Login Blogger >> Tata Letak
    Langkah 2. Klik Add Widget Pada "Widget Diatas Post (Hanya Home Page)", pilih HTML/Javascript

    Cara Memasang Featured Post Keren di Blog

    Langkah 3. Tempelkan kode berikut.

    Baca Juga:


    <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:#000000;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:rgb(8, 189, 159);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:rgb(9, 2, 87);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:rgb(8, 189, 159);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.nyampling.com",
MaxPost:5,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:false,
tagName:false
});
});
//]]>
</script>
<div id="featuredpost"></div>

    Ganti url blog dengan blog kalian.
    Langkah 4.  Klik simpan dan lihat hasilnya.

     3. Memasang Widget Featured Post Big Size Seukuran Banner di Viomagz


    Langkah 1. Silahkan login ke Blogger >> Tema >> Edit Html
    Langkah 2. Cari dan hapus kode berikut  

    /* Featured Post */
.FeaturedPost .post-summary {
background: #f7f7f7;
position: relative;
padding: 0;
min-height: 190px;
max-height: 450px;
overflow: hidden;
}
.FeaturedPost .post-summary h3 {
font: $(post.title.font);
position: absolute;
bottom: 58px;
z-index: 1;
font-size: 28px;
margin: 0 15px;
}
.FeaturedPost .post-summary h3::after {
content:"";
position:absolute;
top:-0.25em;
right:100%;
bottom:-0.25em;
width:0.25em;
}
.FeaturedPost .post-summary h3 a {
color: $(jwfp.color);
background: $(jwfp.background.color);
padding: 3px 8px;
-webkit-box-decoration-break: clone;
-o-box-decoration-break: clone;
box-decoration-break: clone;
}
.FeaturedPost .post-summary h3 a:hover {
color: $(post.title.hover.color);
}
.FeaturedPost .post-summary p {
position: absolute;
background: $(jwfp.background.color);
color: $(jwfp.color);
padding: 3px 8px;
bottom: 15px;
margin: 0 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 90%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.FeaturedPost .image {
display: block;
}

    Langkah 3. Ganti dengan kode berikut 

    /* Featured Post */
.FeaturedPost .post-summary {
position: relative;
padding: 0;
min-height: auto;
max-height: 400px;
overflow: hidden;
}
.FeaturedPost .post-summary:before {
bottom: 0;
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
-webkit-transition: background-color .3s ease;
-moz-transition: background-color .3s ease;
-o-transition: background-color .3s ease;
transition: background-color .3s ease;
}
.FeaturedPost .post-summary h3 {
font: 500 Roboto, Arial, sans-serif;
position: absolute;
bottom:0;
padding:20px;
z-index: 99;
font-size: 31px;
margin: 0;
}
.FeaturedPost .post-summary:after {
bottom: 0;
content: "";
display: block;
height: 70%;
width: 100%;
position: absolute;
z-index: 1;
background: -moz-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.7) 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(40%,rgba(0,0,0,0)),color-stop(100%,rgba(0,0,0,0.7)));
background: -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.7) 100%);
background: -o-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.7) 100%);
background: -ms-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.7) 100%);
background: linear-gradient(to bottom,rgba(0,0,0,0) 40%,rgba(0,0,0,0.7) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#b3000000',GradientType=0);
}
.FeaturedPost .post-summary h3 a {
color: #fff;
text-shadow:1px 1px 3px rgba(0,0,0,.2);
padding:0;
-webkit-box-decoration-break: clone;
-o-box-decoration-break: clone;
box-decoration-break: clone;
}
.FeaturedPost .post-summary h3 a:hover {
color: #fff;
text-decoration: none;
}
.FeaturedPost .post-summary p {
position: absolute;
background: #ffffff;
color: #5a5a5a;
padding: 3px 8px;
bottom: 15px;
margin: 0 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.FeaturedPost .image {
display: block;
background: #e5e5e5;
}
    Langkah 4. Simpan dan lihat hasilnya
    Demikianlah tutorial Cara Memasang Featured Post Keren di Blog, semoga dapat membantu dalam membangun blog anda ya.

    Artikel Terkait

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel