Hallo sobat blogger Kali ini sidobey akan berbagi trik bagaimana cara membuat ataupun memasang Feature Post yang keren di blog,Feature Post Merupakan salah satu Feature Yang menampilkan Suatu Postingan Post yang baru atau Postingan Andalan yang berada di bagian Sidebar atau Widget
Dan kali ini Pun saya akan berbagi trik cara membuat atu memasang Feature Post yang di sertai dengan deretan Gambar yang mearik di bagian blog khusus di sidebar atu Widget Blog,
Feature post ini sering kita temui di situs2 besar yang menampilkan Berita atau Headline yang di recomendasikan oleh pemilik situs tersebut
Cara Memasang Feature Post Keren di Blog
Untuk anda yang tertarik dengan Feature Post Tersebut,dapat anda Coba untuk memasang Feature post tersebut di blog sobat dengan mengikuti langkah-langkah di bawah ini- Silahkan Masuk ke akun blogger SObat
- Setelah itu pilih Blog sobat
- Kemudian Masuk Thema lalu Edit Html
- Setelah berada di bagian Edit Html kemudian silahkan anda letakan kode di bawah tepat sebelum kode <head>
<b:if cond="data:view.isHomepage">
<style type="text/css">
/* Featured Post by sidobey.com */
*,*:before, *:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.featured_namiwrap{display:inline-block;width:100%;<span style="color: rgb(243, 243, 243);"><span style="background-color: rgb(255, 0, 0);">max-width:1070px</span></span>;margin:0 auto 20px auto;overflow:hidden;max-height:410px}.featured_sidobey{display:block;position:relative;float:left;overflow:hidden;height:410px}.featured_sidobey.first{width:44.7%;margin-right:1px}.featured_sidobey.second{width:25%;margin-right:1px}.featured_sidobey.third,.featured_sidobey.fourth{width:30%;height:205px}.featured_sidobey.third{margin-bottom:1px}.featured_sidobey a{display:block;color:rgb(255,255,255);position:relative;vertical-align:bottom;z-index:1;height:100%}.featured_sidobey a:before{width:100%;height:100%;position:absolute;content:'';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_sidobey:hover a:before{opacity:1}.featured_sidobey 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_sidobey.first span{background:#679e37}.featured_sidobey.second span{background:#f8a724}.featured_sidobey.third span{background:#029ae4}.featured_sidobey.fourth span{background:#e53935}.featured_sidobey 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_sidobey a .blog_contents h3:hover{text-decoration:underline}.featured_sidobey.first a .blog_contents h3{font-size:22px}.featured_sidobey .feat-img{width:100%;height:100%;background-size:cover;background-position:50%;-webkit-backface-visibility:hidden;transition:all .3s}.featured_sidobey: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_sidobey.second,.featured_sidobey.first,.featured_sidobey.third,.featured_sidobey.fourth{width:100%;height:300px;margin:0;margin-bottom:1px}.featured_sidobey a .blog_contents{left:15px;right:15px;bottom:10px}.featured_sidobey.first a .blog_contents h3,.featured_sidobey a .blog_contents h3{font-size:20px}}
</style>
<script type="text/javascript">
//<![CDATA[
// Featured post by sidobey.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_sidobey 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_sidobey 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_sidobey 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_sidobey 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>- Kemudian Silahkan Save Template
Silahkan anda perhatikan kode yang sudah di tandai warna merah mx-widt:1070px sesuaikan dengan Lebar template anda,dan pastikan di template anda sudah terpasang jQuery Library
- Selanjut nya tambahkan MarkUp dari widget Feature Post ini tempatkan sesuai dengan keinginan anda selama masih di dalam bodi antara dan </body>
<b:if cond="data:view.isHomepage">
<div class="featured_sidobeyz" id="featured_namiwrap">
<div class="ct-wrapper">
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=recentposts1\"><\/script>");
</script></div>
</div>
</b:if>- Dan Save template lihat hasil nya
ads1
Previous
Posting Lebih BaruNext
Posting Lama
Posted by , Published at 04 Mei and have
0
komentar
* Silahkan Berkomentar Tetapi Sopan
* Jangan Meninggalkan Spam atau terkait lain nya
* Jangan Promosi