jjjjjj Skip to main content

Cara Membuat Feature Post Keren 3 Kolom di blog

Jalak Ikal
28 September 0 komentar
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.
ads6
ads7
ads5
ads1
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar