Halo teman blogger sesuai dengan tema kami kaliitu perihal tutor membikin featured post blog keren juga pastinya sangat responsive dilengkapi dengan content slider ataupun slide show otomatis. Featured post sendiri sanggup dipasang melalui blogger juga tutornya sangat gampang sekali tetapi sebagai memodifikasi juga mengedit nya sangat membutuhkan ketelitian nan sangat tinggi. cenderung kami membikin sebuah featured post bawaan blogger nan ditampilkan belomterlalu yummy dipandang, karna itulah kami coba sebagai memodifikasi tampilan featured post jadinya slide show otomatis.Featured post sendiri sanggup dipasang disidebar halaman depan maupun ditempat kawasan lain nan kalian inginkan
Apa itu featured post, featured post merupakan sebuah widget nan menampilkan content dari postingan kalian pastinya saja content pilihan nan sengaja dipilih sebagai kemudian ditampilkan ke widget featured post beginilah penampakan featured post bawaan blogger
tutor pemasangannya sebagai featured post bawaan blogger begini tutornya :
Login kehalaman dashboard blogger kalian kemudian klik sajian Layout ataupun
Tata letak >> Tambahkan gadget >>Featured post Anda sanggup mengisinya dengan settingan nan kalian inginkaan kemudian save pengaturannya.
baiklah hingga sini kalian rampung sanggup memasang widget featured post bawaan blogger tetapi tampilannya kurang begitu menarik naahh tema kami nan utama pastinya saja memodifikasi featured post itu supaya terlihat menarik.
Cara membikin featured post keren slideshow postingan Beginilah penampakan widget featured post nan berada di halaman depan blog dibagian sebelah kanan
baiklah sebagai membikinnya silahkan ikuti juga simak dengan seksama tutor juga langkahnya berikutitu :
1. Masuk ke sajian
Tema=>EditHTML 2. kemudian copy seluruh
CSS kode berikutitu
3. Letakan diatas instruksi
]]></b:skin>
<b:if cond='data:blog.url == data:blog.homepageUrl'> <style> .slide-wrapper {padding:0 auto;margin:0 auto;width:100%;float: left;word-wrap: break-word; overflow: hidden;} .slide {color: #666666;line-height: 1.3em;} .slide ul {list-style:none;margin:0 0 0;padding:0 0 0;} .slide li {margin:0;padding-top:0; padding-right:0;padding-bottom:.25em; padding-left:0px;text-indent:0px;line-height:1.3em;} .slide .widget {margin:0px 0px 6px 0px;} #featuredContent{float:left;width:100%;margin:0 auto;display:inline;margin-bottom:0px;margin-top:0;} #featured-slider{position:relative;overflow:hidden;width:100%;height:300px} #featured-slider .sliderPostInfo{position:absolute;bottom:2px;width:100%;min-height:30px;height:auto!important;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgugMclru3swQ8eVMH-x3cFUA1dzhvhaV4TXH1w_LWrWewC52G5-RGMeaicn-dHYN2_7whLm79GGi8cNyPsFNxaLeJOQw-n4t1ORPmILpISE-nM0dDeNHK25yMtPe1m8W2V_5iIVLv6bnfi/s1600/transparant.png)} #featured-slider .sliderPostInfo p{color:#fff;font-size:1.1em;padding:0 8px;width:100%} #featured-slider .sliderPostInfo h2 {font:bold 17px Verdana;text-transform:none;padding:5px 8px 0 8px;width:100%} #featured-slider .sliderPostInfo a,#featured-slider .sliderPostInfo h2 a:link,#featured-slider .sliderPostInfo h2 a:visited {color:#FF6} #featured-slider .contentdiv{visibility:hidden;position:absolute;left:0;top:0;z-index:1} #paginate-featured-slider {display:block;background-color:#f0f0f0;margin-bottom:0;padding:0 0 5px} #paginate-featured-slider ul {width:100%;padding-bottom:0;list-style:none} #paginate-featured-slider ul li {display:inline;width:85px;height:70px;float:left;margin-left:0;margin-right:11px;margin-bottom:8px} #paginate-featured-slider ul li:last-child {margin-right:0;} #paginate-featured-slider img {padding-top:5px;background:#f0f0f0;width:100%;height:100%} #paginate-featured-slider a img{border-top:4px solid #f0f0f0;width:100%;height:100%} #paginate-featured-slider a:hover img,#paginate-featured-slider a.selected img{border-top:4px solid #357798} @media screen and (max-width:500px){ #paginate-featured-slider {display:none} } </style> </b:if>
Oke sesudah itu kalian cari instruksi berikutitu
<b:section class='main'>ataupun<div id='main'> ataupun <div class='main'> copy instruksi dibawahitu sempurna diatasnya
<b:if cond='data:blog.url == data:blog.homepageUrl'> <div id='slide-wrapper'> <b:section class='slide' id='slide' preferred='yes'> <b:widget id='HTML4' locked='false' title='' type='HTML' version='1'> <b:widget-settings> <b:widget-setting name='content'> <div id='featuredContent'> <div class='sliderwrapper' id='featured-slider'> <script> document.write("<script src="/feeds/posts/default/-/Featured?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts3"></script>"); </script> </div> <div id='paginate-featured-slider'> <ul> <script> document.write("<script src="/feeds/posts/default/-/Featured?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts4"></script>"); </script> </ul> <div class='clear'></div> </div> <script type='text/javascript'> featuredcontentslider.init({ id: "featured-slider", //id of main slider DIV contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"] toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc] nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide. revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover" enablefade: [true, 0.4], //[true/false, fadedegree] autorotate: [true, 5000], //[true/false, pausetime] onChange: function(previndex, curindex){ //event handler fired whenever script changes slide //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc) //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc) } }) </script> </div></b:widget-setting> </b:widget-settings> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'> <data:title/> </h2> </b:if> <div class='widget-content'> <data:content/> </div> </b:includable> </b:widget> </b:section> </div> </b:if> <div class='clear'/>
Oke tahap terakhir kami mau memperlihatkan tidak banyak sentuhan
JAVASCRIPT copy instruksi dibawahitu kemudian pastekan sempurna diatas instruksi
</head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js' type='text/javascript'/> <b:if cond='data:blog.url == data:blog.homepageUrl'> <script type='text/javascript'> //<![CDATA[ var featuredcontentslider={ //3 variables below you can customize if desired: ajaxloadingmsg: '<div style="margin: 20px 0 0 20px"><img src="loading.gif" /> Fetching slider Contents. Please wait...</div>', bustajaxcache: true, //bust caching of external ajax page after 1st request? enablepersist: true, //persist to last content viewed when returning to page? settingcaches: {}, //object to cache "setting" object of each script instance jumpTo:function(fcsid, pagenumber){ //public function to go to a slide manually. this.turnpage(this.settingcaches[fcsid], pagenumber) }, ajaxconnect:function(setting){ var page_request = false if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken) try { page_request = new ActiveXObject("Msxml2.XMLHTTP") } catch (e){ try{ page_request = new ActiveXObject("Microsoft.XMLHTTP") } catch (e){} } } else if (window.XMLHttpRequest) // if Mozilla, Safari etc page_request = new XMLHttpRequest() else return false var pageurl=setting.contentsource[1] page_request.onreadystatechange=function(){ featuredcontentslider.ajaxpopulate(page_request, setting) } document.getElementById(setting.id).innerHTML=this.ajaxloadingmsg var bustcache=(!this.bustajaxcache)? "" : (pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime() page_request.open('GET', pageurl+bustcache, true) page_request.send(null) }, ajaxpopulate:function(page_request, setting){ if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){ document.getElementById(setting.id).innerHTML=page_request.responseText this.buildpaginate(setting) } }, buildcontentdivs:function(setting){ var alldivs=document.getElementById(setting.id).getElementsByTagName("div") for (var i=0; i<alldivs.length; i++){ if (this.css(alldivs[i], "contentdiv", "check")){ //check for DIVs with class "contentdiv" setting.contentdivs.push(alldivs[i]) alldivs[i].style.display="none" //collapse all content DIVs to begin with } } }, buildpaginate:function(setting){ this.buildcontentdivs(setting) var sliderdiv=document.getElementById(setting.id) var pdiv=document.getElementById("paginate-"+setting.id) var phtml="" var toc=setting.toc var nextprev=setting.nextprev if (typeof toc=="string" && toc!="markup" || typeof toc=="object"){ for (var i=1; i<=setting.contentdivs.length; i++){ phtml+='<a href="#'+i+'" class="toc">'+(typeof toc=="string"? toc.replace(/#increment/, i) : toc[i-1])+'</a> ' } phtml=(nextprev[0]!=''? '<a href="#prev" class="prev">'+nextprev[0]+'</a> ' : '') + phtml + (nextprev[1]!=''? '<a href="#next" class="next">'+nextprev[1]+'</a>' : '') pdiv.innerHTML=phtml } var pdivlinks=pdiv.getElementsByTagName("a") var toclinkscount=0 //var to keep track of actual # of toc links for (var i=0; i<pdivlinks.length; i++){ if (this.css(pdivlinks[i], "toc", "check")){ if (toclinkscount>setting.contentdivs.length-1){ //if this toc link is out of range (user defined more toc links then there are contents) pdivlinks[i].style.display="none" //hide this toc link continue } pdivlinks[i].setAttribute("rel", ++toclinkscount) //store page number inside toc link pdivlinks[i][setting.revealtype]=function(){ featuredcontentslider.turnpage(setting, this.getAttribute("rel")) return false } setting.toclinks.push(pdivlinks[i]) } else if (this.css(pdivlinks[i], "prev", "check") || this.css(pdivlinks[i], "next", "check")){ //check for links with class "prev" or "next" pdivlinks[i].onclick=function(){ featuredcontentslider.turnpage(setting, this.className) return false } } } this.turnpage(setting, setting.currentpage, true) if (setting.autorotate[0]){ //if auto rotate enabled pdiv[setting.revealtype]=function(){ featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id]) } sliderdiv["onclick"]=function(){ //stop content slider when slides themselves are clicked on featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id]) } setting.autorotate[1]=setting.autorotate[1]+(1/setting.enablefade[1]*50) //add time to run fade animation (roughly) to delay between rotation this.autorotate(setting) } }, urlparamselect:function(fcsid){ var result=window.location.search.match(new RegExp(fcsid+"=(\d+)", "i")) //check for "?featuredcontentsliderid=2" in URL return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index }, turnpage:function(setting, thepage, autocall){ var currentpage=setting.currentpage //current page # before change var totalpages=setting.contentdivs.length var turntopage=(/prev/i.test(thepage))? currentpage-1 : (/next/i.test(thepage))? currentpage+1 : parseInt(thepage) turntopage=(turntopage<1)? totalpages : (turntopage>totalpages)? 1 : turntopage //test for out of bound and adjust if (turntopage==setting.currentpage && typeof autocall=="undefined") //if a pagination link is clicked on repeatedly return setting.currentpage=turntopage setting.contentdivs[turntopage-1].style.zIndex=++setting.topzindex this.cleartimer(setting, window["fcsfade"+setting.id]) setting.cacheprevpage=setting.prevpage if (setting.enablefade[0]==true){ setting.curopacity=0 this.fadeup(setting) } if (setting.enablefade[0]==false){ //if fade is disabled, fire onChange event immediately (verus after fade is complete) setting.contentdivs[setting.prevpage-1].style.display="none" //collapse last content div shown (it was set to "block") setting.onChange(setting.prevpage, setting.currentpage) } setting.contentdivs[turntopage-1].style.visibility="visible" setting.contentdivs[turntopage-1].style.display="block" if (setting.prevpage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted) this.css(setting.toclinks[setting.prevpage-1], "selected", "remove") if (turntopage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted) this.css(setting.toclinks[turntopage-1], "selected", "add") setting.prevpage=turntopage if (this.enablepersist) this.setCookie("fcspersist"+setting.id, turntopage) }, setopacity:function(setting, value){ //Sets the opacity of targetobject based on the passed in value setting (0 to 1 and in between) var targetobject=setting.contentdivs[setting.currentpage-1] if (targetobject.filters && targetobject.filters[0]){ //IE syntax if (typeof targetobject.filters[0].opacity=="number") //IE6 targetobject.filters[0].opacity=value*100 else //IE 5.5 targetobject.style.filter="alpha(opacity="+value*100+")" } else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax targetobject.style.MozOpacity=value else if (typeof targetobject.style.opacity!="undefined") //Standard opacity syntax targetobject.style.opacity=value setting.curopacity=value }, fadeup:function(setting){ if (setting.curopacity<1){ this.setopacity(setting, setting.curopacity+setting.enablefade[1]) window["fcsfade"+setting.id]=setTimeout(function(){featuredcontentslider.fadeup(setting)}, 50) } else{ //when fade is complete if (setting.cacheprevpage!=setting.currentpage) //if previous content isn't the same as the current shown div (happens the first time the page loads/ script is run) setting.contentdivs[setting.cacheprevpage-1].style.display="none" //collapse last content div shown (it was set to "block") setting.onChange(setting.cacheprevpage, setting.currentpage) } }, cleartimer:function(setting, timervar){ if (typeof timervar!="undefined"){ clearTimeout(timervar) clearInterval(timervar) if (setting.cacheprevpage!=setting.currentpage){ //if previous content isn't the same as the current shown div setting.contentdivs[setting.cacheprevpage-1].style.display="none" } } }, css:function(el, targetclass, action){ var needle=new RegExp("(^|\s+)"+targetclass+"($|\s+)", "ig") if (action=="check") return needle.test(el.className) else if (action=="remove") el.className=el.className.replace(needle, "") else if (action=="add") el.className+=" "+targetclass }, autorotate:function(setting){ window["fcsautorun"+setting.id]=setInterval(function(){featuredcontentslider.turnpage(setting, "next")}, setting.autorotate[1]) }, getCookie:function(Name){ var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for sasaran name/value pair if (document.cookie.match(re)) //if cookie found return document.cookie.match(re)[0].split("=")[1] //return its value return null }, setCookie:function(name, value){ document.cookie = name+"="+value }, init:function(setting){ var persistedpage=this.getCookie("fcspersist"+setting.id) || 1 var urlselectedpage=this.urlparamselect(setting.id) //returns null or index from: mypage.htm?featuredcontentsliderid=index this.settingcaches[setting.id]=setting //cache "setting" object setting.contentdivs=[] setting.toclinks=[] setting.topzindex=0 setting.currentpage=urlselectedpage || ((this.enablepersist)? persistedpage : 1) setting.prevpage=setting.currentpage setting.revealtype="on"+(setting.revealtype || "click") setting.curopacity=0 setting.onChange=setting.onChange || function(){} if (setting.contentsource[0]=="inline") this.buildpaginate(setting) if (setting.contentsource[0]=="ajax") this.ajaxconnect(setting) } } //]]> </script> <script type='text/javascript'> //<![CDATA[ imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO7r0JIj2Rbi8Hyyo2MbiAOJmLYHZFZDLw1cbSDC6L8hyphenhyphenbrLDpzzB2OBPwUr2jvc3cWIEqaO5FA_tjdI-N0JZ_XotOWvqub8YzTTi-nsqW5qsNSdK6jwwD5DxBB8t13Xpz7lqKVgk9niU/s1600/no+image.jpg";showRandomImg=true;aBold=true;summaryPost=100;summaryTitle=25;numposts3=6;function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}function showrecentposts3(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts3;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src="",a);c=s.indexOf(""",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<div class="contentdiv"><a href="'+posturl+'"><img width="575" height="300" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"><h2 class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';document.write(trtd);j++}}function showrecentposts4(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts3;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src="",a);c=s.indexOf(""",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<li><a class="toc" href="'+posturl+'"><img width="85" height="70" class="alignnone" src="'+img[i]+'"/></a></li>';document.write(trtd);j++}} //]]> </script> </b:if>
baiklah teman kini
SAVE TEMPLATE kemudian lihat kesudahannya mantaaap
demikianlah artikel admin mengenai tutor membikin featured post semoga meringankan :D
