Untuk itu, pada postingan ini saya akan berikan cara membuat featured post yang sederhana dan tidak memberatkan loading blog anda. Caranya sangat mudah untuk diterapkan di blog anda. Silahkan Anda ikuti langkah-langkah berikut ini:
Cara Membuat Featured Post di Blog
1. Masuk ke dashboard blog anda dan klik pada menu "Theme" --> "Edit HTML", lalu tambahkan kode dibawah ini sebelum kode ]]></b:skin> atau </style>
#feature-posts-section{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:normal;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:175px;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{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:rgba(0,0,0,0.3);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}
2. Tambahkan javascript berikut ini di atas kode </head>
<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 type='text/javascript'>
//<![CDATA[
function removeHtmlTag(e,t){for(var s=e.split("<"),r=0;r<s.length;r++)-1!=s[r].indexOf(">")&&(s[r]=s[r].substring(s[r].indexOf(">")+1,s[r].length));return s=s.join(""),s=s.substring(0,t-1)}function sliderposts(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;for(var t=0;t<maxpost;t++){var r,i,n=e.feed.entry[t],l=n.category[0].term,o=n.title.$t;if(t==e.feed.entry.length)break;for(var m=0;m<n.link.length;m++)if("alternate"==n.link[m].rel){i=n.link[m].href;break}for(var m=0;m<n.link.length;m++)if("replies"==n.link[m].rel&&"text/html"==n.link[m].type){r=n.link[m].title.split(" ")[0];break}if("content"in n)var g=n.content.$t;else if("summary"in n)var g=n.summary.$t;else var 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 h=[1,2,3,4,5,6,7,8,9,10,11,12],p=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],f=(postdate.split("-")[2].substring(0,2),postdate.split("-")[1]),u=(postdate.split("-")[0],0);u<h.length;u++)if(parseInt(f)==h[u]){f=p[u];break}if(0==t){var v='<div class="main-post col-post"><a href="'+i+'"><span class="blue">'+l+'</span><img src="'+img[t]+'" height="350" width="640" alt=""></img></a><header><h3 class="entry-title"><a href="'+i+'" title="">'+o+"</a></h3></header></div>";document.write(v)}else{var v='<div class="secondary-post col-post" style="margin-right:0"><span class="blue">'+l+'</span><a class="hover_play_small" href="'+i+'"><img src="'+img[t]+'" height="200" width="320"></img></a><header><h4><a href="'+i+'">'+o+"</a></h4></header></div>";document.write(v)}j++}}imgr=new Array,imgr[0]="http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif",showRandomImg=!0,aBold=!0,summaryPost=150,summaryTitle=50,numposts1=10,featured_numposts="3";
//Label Badge
function label_pick(e){labelnes=new Array,labelnes[1]="<div class='badge featured'><div class='badge-img'><i class='fa fa-bolt'></i></div></div>",labelnes[2]="<div class='badge badge1 trendy'><div class='badge-img'><i class='fa fa-bolt'></i></div></div>","Hot"==e&&document.write(labelnes[1]),"Hiburan"==e&&document.write(labelnes[2])}
//]]>
</script>
</b:if>
3. lalu tambahkan lagi kode dibawah ini,dibawah content-wrapper atau header-wrapper
<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>
4. Save Theme! dan lihat hasilnya.
Nah, sangat mudah bukan. Anda bisa cek blog anda setelah melakukan langkah-langkah di atas. Kira-kira hasilnya akan seperti gambar berikut ini:
Cara Lainnya
1. Masuk ke dashboard blog anda dan klik pada menu "Theme" --> "Edit HTML"
2. Temukan kode (CTRL+F) <b:section class='main' id='main' showaddelement='no'>
3. Ganti dengan <b:section class='main' id='main' showaddelement='yes'> (hanya mengubah ini saja: showaddelement='no' jadi showaddelement='yes'
4. Jika Anda ingin mengatur Featured Post hanya dimunculkan di halaman depan, maka Anda tinggal tambahkan kode <b:if cond='data:blog.url == data:blog.homepageUrl'> tepat di atas kode <!-- only display title if it's non-empty --> dan tambahkan juga kode penutup ini </b:if> tepat di bawah kode <b:include name='quickedit'/>. (Selengkapnya bisa anda baca DI SINI).
5. Save Theme!
Langkag 1 s.d. 5 diatas hanya untuk memunculkan kolom Gadget baru di atas Blog post. Sekarang kita lanjutkan:
6. Di dashboard blog anda klik "Layout". Nanti akan ada kolom "Add a Gadget" baru di atas kolom "Blog Posts"
7. Klik pada "Add a Gadget"--> Lalu pilih "HTML/Javascript"
8. Masukkan "Kode HTML/Javascript" untuk membuat featured post.
Contoh:
→ Jika anda ingin membuat Featured Image (hanya berupa gambar), maka anda tinggal masukkan kode <img src="LINK GAMBAR/FOTO">
*Silahkan anda ganti tulisan "LINK GAMBAR/FOTO" dengan URL Link gambar/foto yang ingin anda jadikan featured image.
→ Jika anda ingin membuat Featured Content Slider Post, Anda bisa ambil kodenya DI SINI. 17 lebih pilihan featured post telah disediakan di sana.
Demikianlah Cara Membuat Featured Post Sederhana. Semoga bermanfaat untuk anda semuanya. Jika masih ada yang belum jelas, silahkan anda bisa tanyakan dan kita diskusikan di kolom komentar dibawah in. Terimakasih! Good Luck!
0 comments
Post a Comment