Cara Membuat Postingan Slide Blog Responsive Ala Johnywuss

Postingan Slide Blog Responsive 

carablog4 update kembali nih dengan materi baru tentunya yang pasti lebih oke dan lebih keren. Kali ini materinya adalah cara membuat postingan slide responsive, pasti pengen dong punya template dengan tampilan yang keren, bersyukurlah sudah datang ke blog ini.

Apa itu postingan slide blog? slide artinya cuplikan yang berfungsi untuk menampilkan potingan dengan efek yang tidak biasa yaitu efect slide ketika di klik. Ilmu membuat postingan slide di blog ini di dapat dari postingan contohblog.com dan tampilan ini dipakai oleh johnywuss yang masih satu grup dengan contohblog.com dan di praktekkan oleh carablog4 dan berhasil.

Postingan slide ini sangat rapi dan responsive sekali, buktinya bisa dilihat di halaman home carablog, selain itu tampilannya membuat blog kami menjadi lebih elegan dan lebih keren juga. Kegunaan daripada positngan slide ini sama saja dengan populer post dan artikel terkait serta semacamnya untuk menampilkan postingan terbaru, populer maupun secara acak berdasarkan label.

Untuk mengetahui cara membuat positngan slide di blog, bisa di baca di bawah ini dengan seksama dan pelan-pelan agar tidak terjadi kesalahan saat membuatnya di blog teman-teman semua. Dan ini lah tampilan dari posingan slide di carablog4 yang akan di buat saat ini.

Tampilan Postingan Slide Blog

Cara Membuat Slide di Blog Responsive

1. Masuk ke blogger dan langusng ke menu Template >> Edit HTML
2. Sebelum membuatnya pastikan ada kode ini. Biar cepat mencarinya bisa gunakan CTRL+F pada keyboard, bila belum punya silahkan copy paste kode ini tepat di atas </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
3. Masukkan juga kode di bawah ini tepat di atas kode </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){left:0%;  width:49.5%;height:100%}
#slides li:nth-child(2){left:49.3%;width:23%;height:49.5%}
#slides li:nth-child(3){left:74.5%;width:21%;height:49.5%}
#slides li:nth-child(4){left:49.3%;top:51%;height:49%;width:46.5%}
#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:100%;height:100%;z-index:2;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWKhmMhihF9XXwM-QrqzgytlPBmnbztSAZ3_XKogkqMntEDvViosf8C15oqBut-GsFz36b9r-G8abEXR4mjbUGdpziHPTQIJS99dshhsq6y55uCau1_YfvUK50qd6W2suHHHMw-_Hl7_8/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:5px}
#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 -->
4. Cari lagi kode ini  <div class='main-wrapper'> atau <div id='main-wrapper' itemprop='mainContentOfPage'>
5. Tiap template beda-beda ya, seperti carablog4 kode yang kedua yang ada yaitu <div id='main-wrapper' itemprop='mainContentOfPage'> 
6. Yang jelasnya untuk mempermudah teman-teman bisa mencari dengan kode main-wrapper.
7. Bila sudah selesai mencarinya copy kode di bawah ini tepat di bawah kode pada poin 4
<!-- 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'>
   <b:widget id='HTML2' locked='false' title='' type='HTML' visible='true'>
     <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
   </b:widget>
 </b:section>
</div>
</b:if></b:if>
<!-- Featured Random Post Slider End -->
8. Bila telah selesai maka simpan template nya dan menuju ke tata letak untuk langkah selanjutnya.

Cara Menggunakan Postingan Slide di Blog

1. Masuk ke Tata letak dan Tambahkan gadget di tulisan Main-top1
2. lalu masukkan kode ini.
<div id="randompostxx"></div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
RandomPost({
MaxPost:4,
RandompostActive:false,
idcontaint:"#randompostxx",
ImageSize:200,
tagName:false
});
});
//]]>
</script>
3. Setelah selesai lalu save dan lihat hasilnya.

Cara membuat posingan slide blog responsive telah selesai semoga artikel ini menambah pengetahuan dan membuat tampilan template teman-teman menjadi lebih keren dan beda dari yang lainnya. Untuk mendapatkan update artikel dari carablog4 silahkan teman-teman subscribe saja blog ini dengan cara follow atau bookmark di browser teman-teman.

artikel sebelumnya : cara membuat readmore pada blog agar terlihat rapi