Cara Membuat Feature Post dengan 3 Kolom Thumbnail di Blog

adscblog

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

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 != &quot;static_page&quot;'>
<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(&quot;&lt;script src=\&quot;/feeds/posts/default/?max-results=&quot;+featured_numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=sliderposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>                                                                                                                                
</div>
</div>
</b:if>

• Kemudian Save Template dan silahkan SObat lihat hasil nya

Untuk Contoh silahkan Kunjungi DEMO Nah itulah Cara Membuat Feature Post di Blog dengan tampilan yang sangat keren,semoga artikel ini bisa membantu sobat blogger semua.

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 04 Mei and have 0 komentar