Hello sobat" blogger. Berjumpa lagi dengan aku nih sob. Dan kali ini aku mau share kepada kalian semua Yaitu Cara Pasang Featured Post Yang Keren Di Blog Kalian. Sebenar nya mungkin sudah banyak yang share tutorial ibarat ini blog" yang lain nya. Tapi tidak ada salah nya jikalau aku juga ingin coba share di blog aku sendiri. Cara nya gampang koq sob kalo kalian simak cara nya dengan baik" di tutorial aku hari ini.
Untuk demo kalian dapat liat eksklusif penampakan nya di bawah ini. Atau pada gambar di atas.
Cara Memasang Featured Post Yang Keren Di Blog
1. Pertama silakan kalian copy code di bawah ini kemudian paste di atas code </head> . <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=" Dan kali ini aku mau share kepada kalian semua Yaitu Cara memasang Featured Post Yang Keren Di Blog"></img></a><header><h3 class="entry-title"><a href="'+i+'" title="Cara memasang Featured Post Yang Keren Di Blog">'+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> 2. Lalu copy code CSS di bawah ini di atas code </style> Atau di ]]></b:skin>. Silakan kalian cocokan dimana sekiranya yang work di template kalian masing", alasannya ialah setiap template berbeda-beda sob.
/* Arlina Featured Post */ #featured-posts-section{max-height:350px;overflow:hidden;margin:0 auto 20px} .featured-post a{font-size:1.2em;color:#fff;} .featured-post a:hover{color:#fff;text-decoration:underline;} .main-post.featured-post a{margin:0;font-size:17px} .featured-post .col-post{float:left;position:relative;overflow:hidden;margin:0 20px 0 0} .featured-post .secondary-post{background:#dadada;width:32%;margin:0 0 20px 0;transition:all .4s} .featured-post .main-post{background:#dadada;width:65.9%;padding:0;transition:all .4s} .featured-post .main-post:before,.featured-post .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%,rgba(0,0,0,0.4) 100%)} .featured-post .main-post:after,.featured-post .secondary-post:after{content:'';background-color:rgba(0,0,0,0.2);position:absolute;text-align:center;top:0;left:0;right:0;bottom:0;z-index:1;opacity:0;visibility:hidden;transform:scale(0.8);transition:all 0.20s linear} .featured-post .main-post:hover:after,.featured-post .secondary-post:hover:after{opacity:1;visibility:visible;transform:scale(1.0)} .featured-post 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} .featured-post .main-post:hover span,.featured-post .secondary-post:hover span{background:#e74c3c;} .featured-post img{height:100%;transition:all .5s} .featured-post .main-post img{height:350px;width:100%;object-fit:cover;} .featured-post .secondary-post img{height:165px;object-fit:cover;width:100%;} .featured-post .main-post:hover img,.featured-post .secondary-post:hover img{backface-visibility:hidden;transform-style:preserve-3d;} .featured-post header{position:absolute;bottom:0;left:0;right:0;padding:20px;z-index:2;} .featured-post .secondary-post header{padding:10px} .featured-post header h3{font-size:20px;} .featured-post h4{font-size:13px;} span.label-info a.label-block:nth-child(n+2),.showpageOf {display:none;} @media screen and (max-width:768px) { #featured-posts-section{display:none}} 3. Setelah itu cari code ibarat di bawah ini di template kalian. Atau code homogen nya yang hampir sama.
<div id='wrapper'>
<div id='content-wrapper' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>
Lalu copy code pemanggilnya di bawah ini sempurna di bawah code yang di atas tadi.
<b:if cond='data:blog.url == data:blog.homepageUrl'> <div class='ct-wrapper' id='featured-posts-section'> <div class='featured-post 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. Selesai dan silakan simpan template kalian dan coba liat hasil nya dalam mode dekstop di browser kalian.
Bagaimana sob?? Praktis bukan... mungkin itu saja yang dapat aku share perihal Cara memasang Featured Post Yang Keren Di Blog. Bila ada pertanyaan silakan tinggalkan komen di bawah, insya allah aku akan jawab.
Sekian tutorial dari aku perihal Cara Memasang Featured Post Yang Keren Di Blog. Semoga artikel ini dapat bermanfaat buat kalian semua. Selamat mencoba dan salam blogger.
Jangan lupa share bagikan yaa sob jikalau berdasarkan kalian artikel ini bermanfaat.
