Random Post Responsive Grid Slider + Effect FadeIn FadeOut

Untuk kali ini saya akan berbagi random post kloningan dengan style slider box yang amat sangat responsive. Hasil dari random post milik Myblogtricks.com dan Animated Responsive Image dari tympanus.com.

Random post ini selain responsivenya yang bisa di sesuaikan dengan jumlah grid secara horizontal maupun jumlah grid secara vertical di versi desktop dan versi mobile, juga memiliki effect seperti slider, fadein fadeout, rotasi dan bisa disesuaikan/disetting sendiri yang kita mau. Karena sudah ada sekitar 15 effect di jquerynya.

Makanya random post ini sangat cocok digunakan disemua template apapun temanya blognya. Karena sangat super hyper keren. Bisa dipasang disemua posisi yang sobat inginkan seperti dibawah header, diatas/dibawah postingan, sidebar maupun footer. dan mengatur jumlah grid dan effectnya yang sobat kehendaki.

demo

Namun sebelum memasang pada template sebaiknya sobat meggunakan template yang belum banyak dirobah/diedit karena responsive grid nya sangat sensitif dengan template yang apabila sudah banyak di edit hasilnya akan berantakan.

Untuk itu saya sarankan agar sobat mencobanya pada template yang belum banyak diedit/dirubah. Sobat bisa buat blog baru yang khusus untuk mengedit atau khusus untuk mengetes/mencoba random post ini atau pun kebutuhan lainya yang belum banyak diedit. Silahkan caranya sangat mudah dan hanya beberapa langkah saja.

1. Langkah pertama Memasang Library Jquery dan Javascript

Pertama masuk dasbord blogger lalu tema > edit html kemudian Sobat copy kode berikut dan paste dibawah kode <head>

2. Langkah Kedua Memasang Kode CSS

sobat cari kode ini ]]></b:skin>
dan sobat copy kode berikut dan paste diatasnya

.grider{

margin: 0px auto 30px 0;

position: relative;

height:70%; auto;

border:;red 1px solid;

}

.grider ul {

list-style: none;

display: block;

width: 100%;

height:70%!important;

border:;red 1px solid;

margin:0px;

padding: 0;

list-type:none;

}

.grider ul:before,

.grider ul:after{

content: '';

display: table;

}

.grider ul:after {

clear: both;

}

.grider ul {

zoom: 1; /* For IE 6/7 (trigger hasLayout) */

}

.grider ul li {

-webkit-perspective: 400px;

-moz-perspective: 400px;

-o-perspective: 400px;

-ms-perspective: 400px;

perspective: 400px;

margin: 0;

padding: 0;

float: left;

position: relative;

display: block;

overflow: hidden;

background: #000;

}

.grider ul li a {

display: block;

outline: none;

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

-webkit-backface-visibility: hidden;

-moz-backface-visibility: hidden;

-o-backface-visibility: hidden;

-ms-backface-visibility: hidden;

backface-visibility: hidden;

-webkit-transform-style: preserve-3d;

-moz-transform-style: preserve-3d;

-o-transform-style: preserve-3d;

-ms-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-background-size: 100% 100%;

-moz-background-size: 100% 100%;

background-size: 100% 100%;

background-position: center center;

background-repeat: no-repeat;

background-color: #333;

-webkit-box-sizing: content-box;

-moz-box-sizing: content-box;

box-sizing: content-box;

list-style-type:none;

display:flex;

}

span.judul {

color:white;

margin-top:0px;

padding:60px 15px 60px 15px;;

list-style-type:none;

text-align:center;

text-shadow:

2px -2px 3px rgba(0,0,0,0.73),

-2px -2px 3px rgba(0,0,0,0.73),

2px 2px 3px rgba(0,0,0,0.73),

-2px 2px 3px rgba(0,0,0,0.73);

opacity:0;

border:;1px solid red;

}

.grider ul li a:hover,

span.judul:hover{

opacity:1;

-webkit-transition: opacity 0.55s,

-webkit-transform 0.55s;

transition: opacity 0.35s, transform 0.55s;

}

@media (max-width:600px ){

span.judul{

display:none;

}

/* Grid wrapper sizes */

.grider-size{

width: 100%;

margin-top: 0px;

}

.grider-loading:after,.grider-loading:before{

display: none;

}

.grider-loading-image{

display: none;

}

.grider-loading .grider-loading-image{

position: relative;

width: 30px;

height: 30px;

left: 50%;

margin: 100px 0 0 -15px;

display: block;

}

3. Langkah Ketiga Pasang Kode Jquery

Kode Jquery ini untuk mengatur resposive dan effect .
Cari kode </body> lalu copy dan paste kode berikut diatasnya

<script src='https://cdn.jsdelivr.net/gh/roddians/Animated-Responsive-Image-Grid@main/jquery.gridrotator.js'/>

<script type="text/javascript">
$(function() {

$('#grider').gridrotator( {

animSpeed : 3000,

animType : 'slideLeft',

maxStep: 2,
Interval : 5000,
w1024 : {
rows : 3,
columns : 6
},
w768 : {
rows : 3,
columns : 7
},
w480 : {
rows : 3,
columns : 4
},
w320 : {
rows : 3,
columns : 4
},
w240 : {
rows : 3,
columns : 4
}
} );

});
</script>

4. Dan Langkah ke Empat Penempatan Posisi Random Post

Bila sobat ingin memasangnya sebagai feature post cari kode <div class='centered-bottom'> Atau bisa di layout/tata letak yang sudah disediakan lalu pasang kode berikut di bawah <div class='centered-bottom'> atau didalam layout tata letak.

<b:if cond='data:view.isHomepage'>
<script type='text/javaScript'>
//<![CDATA[
var ListBlogLink = "https://ex-musikhade.blogspot.com";
var ListCount = 32;
var ChrCount = 65;
var TitleCount = 45;
var ImageSize = 180;
var showcomments = "off";
var showdate = "off";
var showauthor = "off";
var showthumbnail = "on";
var showlabel = "on";
var showcontent = "off";
var RandomArray = [];
var TotalPosts = 0;
var RandomArray = new Array(ListCount);
function TotalCount(json) {
TotalPosts = json.feed.openSearch$totalResults.$t
}
document.write('<script type=\"text/javascript\" src=\"https://ex-musikhade.blogspot.com/feeds/posts/default?alt=json-in-script&callback=TotalCount\"><\/script>');
function GenerateNum() {
for (var i = 0; i < ListCount ; i++) {
for (var j = 0; j < RandomArray.length; j++){
var RandomNum = Math.floor(Math.random() * (TotalPosts ) + 1);
RandomArray[i] = RandomNum; }
}
}
//]]>
</script>

<script type='text/javaScript'>
//<![CDATA[

document.write('<div id="grider" class="grider grider-size"><img class="grider-loading-image" src="https://blogger.googleusercontent.com/img/a/AVvXsEijSpPjJD8aKekAXTxFMx7HwA5mBOygMspcazhIaNEgDm6bQFwnRSGTAZ0AOFhoml1rvSs0RjG1SByAm683Lep9sReljdUBiNlUBDiiradhU0IDqn99UC-go-M9-XUfQWRT7-ZrRIkl6wjB7OOekxpNAg7QJzF3940d2rDtHPVmbErNQTbY79XhbdFPaA"/><ul>');

//################ Function Start

function mbtrandom(json) {

for (var i = 0; i < ListCount; i++)

{

//################### Variables Declared

var listing= ListImage = ListUrl = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListDate = ListUpdate = ListComments = thumbUrl = TotalPosts = sk = AuthorPic= ListMonth = Y = D = M = m = YY = DD = MM = mm = TT = "";

//################### URL

for (var j = 0; j < json.feed.entry[i].link.length; j++) {

if (json.feed.entry[i].link[j].rel == 'alternate') {

break;

}

ListUrl= "'" + json.feed.entry[i].link[j].href + "'";

//################### Info

TotalPosts = json.feed.openSearch$totalResults.$t;

if (json.feed.entry[i].title!= null)

{

ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount);

}

if (json.feed.entry[i].thr$total)

{

ListComments= "<a href='"+json.feed.entry[i].link[j].href+"#comment-form'>"+json.feed.entry[i].thr$total.$t+"</a>";

}

ListAuthor= json.feed.entry[i].author[0].name.$t.split(" ");

ListAuthor=ListAuthor.slice(0, 1).join(" ");

AuthorPic = json.feed.entry[i].author[0].gd$image.src;

//################### Content Check

ListConten = json.feed.entry[i].content.$t;

ListContent= ListConten.replace(/(<([^>]+)>)/ig,"").substring(0, ChrCount);

//################### Date Format

ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

ListDate= json.feed.entry[i].published.$t.substring(0,10);

Y = ListDate.substring(0, 4);

m = ListDate.substring(5, 7);

D = ListDate.substring(8, 10);

M = ListMonth[parseInt(m - 1)];

ListUpdate= json.feed.entry[i].updated.$t.substring(0, 16);

YY = ListUpdate.substring(0, 4);

mm = ListUpdate.substring(5, 7);

DD = ListUpdate.substring(8, 10);

TT = ListUpdate.substring(11, 16);

MM = ListMonth[parseInt(mm - 1)];

//################### Thumbnail Check

// YouTube scan

if (json.feed.entry[i].media$thumbnail)

{

thumbUrl = json.feed.entry[i].media$thumbnail.url;

sk= thumbUrl.replace("/s72-c/","/s"+ImageSize+"/");

ListImage= "'" + sk.replace("?imgmax=0","") + "'";

}

else if (json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/) != null)

{

// Support For 3rd Party Images

ListImage = json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];

}

else

{

ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_lbe2YIYebGxRcwYR3mAk3MIAPynuksGyQtJQp8q0q4-DDqpz0o1eFr_14-ECK5glx2wcvf4O9COCCPTgQBSaBGDsnLhkD5vGj43eIbv5MRO7cN8KGp_coBA6mhyz5uv8Zppz-evHz4E/s200/Icon.png'";

}

//################### Printing List

document.write( "<li>");

if (showthumbnail == 'on'){

document.write("<a href="

+ ListUrl +

"><img src="

+ ListImage +

+ ListUrl+

"><span class='judul'>"

+ ListTitle+

"</span></a>");

}

if (showlabel == 'on'){

document.write("<span class='itag'>"

+ListTag +

"</span>");

}

document.write("</li>");

}

document.write("<div class='itotal'><span> <a href='"+ListBlogLink+"'>View all <font>"+TotalPosts+"</font> posts in - "+ListLabel+" </a></span></div>");

}

for (var i = 0; i < ListCount ; i++) {

GenerateNum();

document.write('<script type=\"text/javascript\" src=\"https://ex-musikhade.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=' + RandomArray[i] + '&max-results=1&callback=mbtrandom\"><\/script>')

};

document.write('</ul></div>');

//]]>
</script>
</b:if>

Atau sobat bisa pasang pada dasboard layout yang tentunya pasti sobat sudah paham dengan cara ini. lalu save dan lihat hasilnya.

Untuk pengaturan silahkan ikuti

0. Ganti alamat blog yang ada pada step 4 menjadi alamat blog sobat.

Disana terdapat 3 alamat blog yang harus diganti dengan alamat blog Sobat. Ganti semuanya. Skali lagi ada 3 alamat yang harus digantikan dengan alamat blog Sobat.

1. jumlah postingan yang akan ditampilkan

var ListCount = 32 ; [langkah 4]

atur/sesuaikan angkanya. harus lebih dari rows x colums = ??? kalau kurang, grid akan berantakan dan effect tidak bekerja. Jadi Sobat harus mengisi jumlah listcount lebih besar , dari hasil rows dikali columns.

2. jumlah grid vertical/horizontal [langkah 3]

rows: 4, [jumlah grid vertical]

columns: 8, [jumlah grid horizontal]

atur/sesuaikan angkanya.

3. Effect

'fadeInOut',
'slideLeft',
'slideRight',
'slideTop',
'slideBottom',
'rotateLeft',
'rotateRight',
'rotateTop',
'rotateBottom',
'scale',
'rotate3d',
'rotateLeftScale',
'rotateRightScale',
'rotateTopScale',
'rotateBottomScale'

Cara pemasangannya:

animType : 'rotateBottomScale',

pasang dibawah rows: dan columns: [langkah 3]
atau bisa di kosongkan dan otomatis effect digunkan semua secara acak.

4. MaxStep, Interval dan Speed

AnimSpeed : kecepatan effect

Step : Pergerakan/pergantian

maxStep: (maksimal pergantian effect)
Interval : (durasi/jarak waktu pergantian effect)

5. Lebar Menurut Perangkat

w1024 : full
w768 : dibawah/diatas postingan
w480 : full mobile version

w320: sidebar

w240 : perangkat lebih kecil

Oke sekian saya harap sobat paham
Wassalam...

Memo Endonist

Cari Blog Ini