Cara Mudah Membuat Feature Post dengan 3 Kolom di Blog - Feature Post merupakan salah satu Feature tambahan dari blogger yang dimana Feature Post tersebut menampilkan Postingan Postingan Terbaru dari Blog Tersebut
Dengan Adanya Feature Post yang terpasang di halaman depan blog selain untuk mempercantik tampilan blog juga dapat memberitahu kepada pengujung blog secara lebih jelas lagi,karena dengan adanya Feature Post tersebut maka Otomatis Para Pengujung blog yang datang pandangan pertama nya pasti ke Feature Post Tersebut
Maka kemungkinan besar dengan ada nya Feature Post tersebut para pengujung bisa semakin betah berada di blog kita,karena dengan ada nya Feature Post tersebut Blog kita kelihatan semakin Professional di mata Para Pengujung Blog tersebut
Maka dari Itu tidak heran kebanyakan Blogger yang banyak menggunakan Feature Post Tersebut untuk menggaet para Pengujung agar lebih betah berada di blog tersebut,dengan Tampilan Yang Professional tersebut Feature Post ini tidak memberatkan Loading Blog Loh sob
Maka kemungkinan besar dengan ada nya Feature Post tersebut para pengujung bisa semakin betah berada di blog kita,karena dengan ada nya Feature Post tersebut Blog kita kelihatan semakin Professional di mata Para Pengujung Blog tersebut
Maka dari Itu tidak heran kebanyakan Blogger yang banyak menggunakan Feature Post Tersebut untuk menggaet para Pengujung agar lebih betah berada di blog tersebut,dengan Tampilan Yang Professional tersebut Feature Post ini tidak memberatkan Loading Blog Loh sob
Cara Memasang Feature Post Keren di Blog
Nah Untuk Mencoba nya sobat pasang di Blog sobat,sobat blogger bisa mengikuti langkah langkah penerapan Feature Post tersebut di bawah ini- Silahkan masuk ke Akun Blogger SObat
- Setelah itu klik Tema lalu kemudian klik edit html
- Setelah berada di Bagian Edit HTML silahkansobat letakan CSS di bawah ini
/* Feature Post Mantap sidobey.com */
#feature-posts-section{background:#333366;max-height:370px;overflow:hidden;padding:20px;margin:0 auto;}
.featured-posts a{color:#fff;}
.featured-posts a:hover{color:#fff;text-decoration:underline;}
.main-post.featured-posts a{margin:0;font-size:18px}
.featured-posts .col-post{float:left;position:relative;overflow:hidden;}
.featured-posts .secondary-post{width:34.4%;margin:0;}
.featured-posts .secondary-post:nth-child(odd){margin:3px 0 0 0}
.featured-posts .main-post{width:65.2%;padding:0;margin:0 3px 0 0}
.featured-posts span{padding:8px;color:#fff;font-size:12px;font-style:bold;top:0;left:0;z-index:2;position:absolute}
.featured-posts span.lebb{background:#e74c3c;visibility:hidden;opacity:0;top:-20px;transition:all .3s}
.featured-posts .main-post:hover span.lebb,.featured-posts .secondary-post:hover span.lebb{visibility:visible;opacity:1;top:0;}
.featured-posts img{height:100%;transition:transform 0.35s ease 0s;-moz-transition:transform 0.35s ease 0s;-o-transition:transform 0.35s ease 0s}
.featured-posts .main-post img{height:350px;width:100%;object-fit:cover}
.featured-posts .secondary-post img{height:172px;object-fit:cover;width:100%}
.featured-posts .main-post:hover img,.featured-posts .secondary-post:hover img{transform:scale(1.1)}
.featured-posts header{position:absolute;bottom:0;left:0;padding:20px;width:100%;z-index:2}
.featured-posts h4{margin:3px;font-size:15px;line-height:1.3;}
.featured-posts header h3,.featured-posts header h4{font-weight:400}
.featured-posts span.vignette{background-color:transparent;position:absolute;overflow:hidden;margin:0;padding:0;height:100%;top:0;left:0;right:0;bottom:0;transition:background 0.3s linear,opacity 0.3s linear}
@media screen and (max-width:768px) {
h1.post-title.entry-title a, h2.post-title.entry-title a {margin:15px 0;}
#feature-posts-section{display:none}}
.featured-posts .main-post:before,.featured-posts .secondary-post:before{bottom:0;content:"";display:block;height:50%;width:100%;position:absolute;z-index:1;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,#000 100%)}
.featured-posts span{background:#f1f;display:inline-block;color:#fff;font-style:normal;position:absolute;transition:all .4s;font-size:11px;line-height:1.4;padding:3px 6px;top:10px;left:10px;z-index:2}
- Langkah selanjut nya silahkan sobat cari kode </head> Lalu letakan Kode Javascript ini sebelum kode </head> Tersebut
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
snippet_count = 80;
//<![CDATA[
function removeHtmlTag(n,e){if(-1!=n.indexOf("<")){for(var t=n.split("<"),i=0;i<t.length;i++)-1!=t[i].indexOf(">")&&(t[i]=t[i].substring(t[i].indexOf(">")+1,t[i].length));n=t.join("")}for(e=e<n.length-1?e:n.length-2;" "!=n.charAt(e-1)&&-1!=n.indexOf(" ",e);)e++;return n=n.substring(0,e-1),n+"....."}function createSnippet(n){var e=document.getElementById(n),t=snippet_count,i='<div class="snippets">'+removeHtmlTag(e.innerHTML,t)+"....."+"</div>";e.innerHTML=i}
//]]>
</script>
<script src='https://raw.githack.com/rawmaster/feature/master/featurepost.js' type='text/javascript'/>
</b:if>- Setelah Itu Silahkan anda Letakan Kode HTML di bawah ini sesuai dengan ke inginan anda
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='ct-wrapper' id='feature-posts-section'>
<div class='featured-posts padding clearfix'>
<script type='text/javaScript'>
document.write("<script src=\"/feeds/posts/default/?max-results="+featured_numposts+"&orderby=published&alt=json-in-script&callback=sliderposts\"><\/script>");
</script>
</div>
</div>
</b:if>- Kemudian Save Template dan silahkan SObat lihat hasil nya
Nah itulah Cara Membuat Feature Post di Blog dengan tampilan yang sangat keren,semoga artikel ini bisa membantu sobat blogger semua.
Previous
Posting Lebih BaruNext
Posting Lama
Posted by , Published at September 27, 2019 and have
0
komentar
