Feature Slider Random Post Keren untuk blog

adscblog

Slider Random Post adalah suatu  Feature yang dimana menampilkan suatu artikel tertentu baik itu menurut label ataupun menurut artike yang baru saja anda Publish,namun disini saya akan memberikan pengalaman saya seputar membuat Slider Random Post,dan tentu nya slider ini menampilkan postingan-postingan anda sesuai dengan label tertentu

Feature ini merupakan salah satu Feature Slider yang sangat diminati oleh Par pengguna Template blog,selain tampilan nya yang menarik Slider Random Post ini juga bisa menampilkan Artikel yang ada di blog anda sesuai dengan Label blog

Dan Kabar kembira nya dari Slider Post Random ini sudah di setting menjadi Responsive dan lebih keren tentu nya agar dapat di lihat melalui Ponsel,dan itu merupakan saran dari Google agar tampilan blog kita menjadi Responsive

Cara Pemasangan Feature Random Post di blog

Cara Pemasangan Feature Random Post ini juga tidak terlalu Rumit anda hanya cukup mengikuti langkah-langkah yang saya tulis di bawah ini,dan untuk penerapan Feature Random Post ini adalah sebagai berikut

• Silahkan sobat masuk ke blogger anda sesuai dengan email ataupun Pasword nya
• Setelah itu silahkan anda klik Template yang berada di bagian kiri kemudian klik "Edit Html"
• Setelah berada di pengeditan Template Kemudian silahkan anda cari kode </head> dan untuk mempermudah pencarian nya silahkan anda gunakan atau tekan secara besamaan Ctrl+F,dan letakan kode berikut tepat di atas </head>

<!-- Featured Random Posts Slider Start -->

<style type='text/css'>

#slides{overflow:hidden}

#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}

#slides ul{height:250px}

#slides li{display:none;background-color:white;padding:4px;margin-top:0;position:absolute}

#slides li:nth-child(1),#slides li:nth-child(2),#slides li:nth-child(3),#slides li:nth-child(4){display:block}

#slides li:nth-child(1){width:49.5%;height:100%}

#slides li:nth-child(2){left:50.3%;width:24.5%;height:49.5%}

#slides li:nth-child(3){left:75.5%;width:24.5%;height:49.5%}

#slides li:nth-child(4){left:50.3%;top:51%;height:49%;width:49.7%}

#slides img{width:100%;height:100%}

#slides h4{position:absolute;bottom:20px;width:96%;padding:0 10px;margin:0 -5px;font-size:16px;z-index:3;color:white;text-shadow:0 1px 2px #918F8F}

#slides li:nth-child(3) h4,#slides li:nth-child(2) h4{font-size:14px}

#slides .label_text{display:none;position:absolute;z-index:3;bottom:10px;width:100%;padding:0 10px;margin:0 -5px;font-size:9px;color:white}

.randomnya .overlayx{position:absolute;top:0;left:0;border:4px solid white;width:97%;height:97%;z-index:2;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI92B3Ai88CQ6Uy4oXLXToMT0gu5GyhEtEIzwDZbuC8BRTCEySMicuvzkxW0CHWxrkPZAGPHon5F3g_5GWApgcCiXpGka2V00OwCIOKR-VuCBA8pXzGTTX3zDXkbBNO1_LFjRf5BMaRg4/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}

#slides li:nth-child(1) .overlayx{background-position:0 0}

#slides .label_text span{margin-right:2px}

#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}

#slides .cmnum{position:absolute;background-color:#7C7C7C;padding:2px 3px;display:block;top:-5px;right:10px}

#slides .cmnum::after{content:&quot;&quot;;width:0;height:0;border-width:1px 4px;border-style:solid;border-color:#7C7C7C #7C7C7C transparent transparent;position:absolute;top:100%;right:0}

ul.randomnya li:hover .overlayx{-ms-filter:&quot;progid:DXImageTransform.Microsoft. Alpha(Opacity=10)&quot;;filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}

#slides li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}

#slides {font-family:Arial,sans-serif}

#top-main{position:relative}

#top-main .widget{border:none;padding:1px}

#top-main h2{position:absolute;left:-9999px}

#buttons{position:absolute;bottom:0;right:0;display:none}

#buttons a{display:inline-block;text-indent:-9999px;background-color:white;width:25px;height:17px;margin:0 0 0 7px;border:1px solid #CECECE;position:relative}

#prev::before,#next::before{content:&quot;&quot;;width:0;height:0;border-width:5px 9px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-5px;margin-left:-15px;left:50%}

#next::before{border-color:transparent transparent transparent #535353;margin-right:-15px;right:50%;margin-left:auto;left:auto}
@media only screen and (min-width:768px) and (max-width:999px){

  #slides ul{height:200px}

  #slides h4{font-size:15px}

  #slides li:nth-child(3) h4,#slides li:nth-child(2) h4{font-size:11px}

  }

@media only screen and (max-width:767px){

  #slides ul{height:200px}

  #slides h4{font-size:15px}

  #slides li:nth-child(3) h4,#slides li:nth-child(2) h4{font-size:11px}

}

@media only screen and (max-width:479px){

  #slides ul{height:450px}

  #slides li:nth-child(1){width:100%;height:49.5%}

  #slides li:nth-child(2){left:0;top:50%;width:49.5%;height:24.5%}

  #slides li:nth-child(3){left:50.5%;top:50%;width:49.5%;height:24.5%}

  #slides li:nth-child(4){left:0;top:75%;height:24.5%;width:100%}

}

</style>

<script type='text/javascript'>

//<![CDATA[

function RandomPost(a){(function(e){var i={blogURL:"",MaxPost:4,RandompostActive:true,idcontaint:"#randompost",ImageSize:100,loadingClass:"loadingxx",pBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};i=e.extend({},i,a);var h=e(i.idcontaint);var b=i.blogURL;var d=i.MaxPost*600;if(i.blogURL===""){b=window.location.protocol+"//"+window.location.host}h.html('<div id="buttons"><a href="#" id="prev">prev</a><a href="#" id="next">next</a></div><div id="slides"><ul class="randomnya"></ul></div>').addClass(i.loadingClass);var g=function(z){var t,k,r,o,x,A,s,w,y,u,n="",v=z.feed.entry;for(var q=0;q<v.length;q++){for(var p=0;p<v[q].link.length;p++){if(v[q].link[p].rel=="alternate"){t=v[q].link[p].href;break}}for(var m=0;m<v[q].link.length;m++){if(v[q].link[m].rel=="replies"&&v[q].link[m].type=="text/html"){r=v[q].link[m].title.split(" ")[0];break}}if("media$thumbnail"in v[q]){x=v[q].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+i.ImageSize+"-c")}else{x=i.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+i.ImageSize+"$1")}k=v[q].title.$t;u=v[q].published.$t.substring(0,10);o=v[q].author[0].name.$t;A=u.substring(0,4);s=u.substring(5,7);w=u.substring(8,10);y=i.MonthNames[parseInt(s,10)-1];n+='<li><a target="_blank" href="'+t+'"><div class="overlayx"></div><img class="random" src="'+x+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+w+'</span><span class="dm">'+y+'</span><span class="dy">'+A+'</span></span><span class="autname">'+o+'</span><span class="cmnum">'+r+"</span></div></li>"}e("ul",h).append(n)};var c=function(o){Total_Posts_Number=o.feed.openSearch$totalResults.$t;if(Total_Posts_Number<=i.MaxPost){i.MaxPost=Total_Posts_Number}var j=[];while(j.length<i.MaxPost){var q=Math.ceil(Math.random()*Total_Posts_Number);var p=false;for(var n=0;n<j.length;n++){if(j[n]==q){p=true;break}}if(!p){j[j.length]=q}}var m="/-/"+i.tagName;if(i.tagName===false){m=""}if(i.RandompostActive===true){for(var l=0;l<i.MaxPost;l++){e.ajax({url:b+"/feeds/posts/default"+m+"?start-index="+j[l]+"&max-results=1&orderby=published&alt=json-in-script",success:g,dataType:"jsonp",cache:true})}}else{e.ajax({url:b+"/feeds/posts/default"+m+"?max-results="+i.MaxPost+"&orderby=published&alt=json-in-script",success:g,dataType:"jsonp",cache:true})}};var f=function(){if(i.tagName===false){e.ajax({url:b+"/feeds/posts/default?max-results=0&alt=json-in-script",success:c,dataType:"jsonp",cache:true})}else{e.ajax({url:b+"/feeds/posts/default/-/"+i.tagName+"?max-results=0&alt=json-in-script",success:c,dataType:"jsonp",cache:true})}e(window).bind("load",function(){setTimeout(function(){var k=5000;var l=setInterval("rotate()",k);e("#slides li:first").before(e("#slides li:last"));e("#prev").click(function(){e("#slides li:first").before(e("#slides li:last"));return false});e("#next").click(function(){e("#slides li:last").after(e("#slides li:first"));return false});e("#slides").hover(function(){clearInterval(l)},function(){l=setInterval("rotate()",k)});function j(){e("#next").click()}h.removeClass(i.loadingClass)},d)})};e(document).ready(f)})(jQuery)};

//]]>

</script>

<!-- Featured Random Posts Slider End -->

• Setelah itu langkah selanjut nya silahkan anda cari lagi kode <div id='main-wrapper'> dan letakan kode berikut tepat di bawah kode tersebut

 <!-- Featured Random Post Slider Start -->
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div id='top-main'>
     <b:section class='main' id='top-main1' preferred='yes'/>
    </div>
    </b:if></b:if>
    <!-- Featured Random Post Slider End -->

• kemudian silahkan anda Save Template

Setelah penerapan di atas sudah anda lakukan sesuai dengan langkah-langkah di atas,silahkan anda masuk ke bagian tataletak kemudian klik Add a Gadget dan pilih Html/Javascript dan letakan kode berikut di kolom yang sudah tersedia

<div id="randompostxx"></div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
RandomPost({
MaxPost:4,
RandompostActive:false,
idcontaint:"#randompostxx",
ImageSize:200,
tagName:"Blog"
});
});
//]]>
</script>

Kemudian save dan lihat hasil nya
- Untuk yang berwarna Merah silahkan anda ganti dengan nama Label yang ingin anda tampilkan di Slider tersebut

Apabila tampilan nya belum ada,maka letakan jQuery berikut tepat di atas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>

Nah iulah cara pembuatan Slider Random Post di Blog semoga artikel ini bisa membantu sobat blogger semua,dan selamat mencoba

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 25 Mei and have 0 komentar