Pada postingan X ini Aurealisa akan memberikan tutorial mengenai Cara Membuat Postingan Acak di Blog ketika di klik adalah trik yang bagus untuk membantu pengguna mengakses lebih banyak artikel tanpa mengubah halaman berkali-kali, dan data juga diunduh setelah pengguna mengeklik, sehingga tidak mempengaruhi kecepatan sama sekali memuat halaman.
Tertarik untuk membuatnya? silahkan simak tutorial dibawah ini untuk membuat dan melihat demo ada dibawah.
Cara Membuat Postingan Acak di Blog
1. Silahkan copy dan pastekan css dibawah ini di template blogger anda..randomEnsikology {
outline: 0;
background: #fff;
border: 1px solid #eee;
padding: 6px 12px 7px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
cursor: pointer;
-webkit-transition: background 0.3s;
-o-transition: background 0.3s;
-moz-transition: background 0.3s;
transition: background 0.3s;
}
.randomEnsikology:hover {
background: #f8f8f8;
}
.ensikologyRandom {
margin: 20px 0 0;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.ensikologyRandom .item {
width: 32%;
margin-right: 2%;
margin-bottom: 20px;
}
.ensikologyRandom .item:nth-of-type(3n) {
margin-right: 0;
}
.ensikologyRandom .item .thumb {
overflow: hidden;
height: 160px;
}
.ensikologyRandom .item .thumb img {
-o-object-fit: cover;
object-fit: cover;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 100%;
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #f6f6f6;
}
.ensikologyRandom .item .thumb img:hover {
-webkit-transition: -webkit-transform 0.3s ease;
transition: -webkit-transform 0.3s ease;
-o-transition: transform 0.3s ease;
-o-transition: -o-transform 0.3s ease;
-moz-transition: transform 0.3s ease, -moz-transform 0.3s ease;
transition: transform 0.3s ease;
transition: transform 0.3s ease, -webkit-transform 0.3s ease, -moz-transform 0.3s ease, -o-transform 0.3s ease;
transition: transform 0.3s ease, -webkit-transform 0.3s ease;
-webkit-transform: scale(1.1) rotate(-1.3deg);
-ms-transform: scale(1.1) rotate(-1.3deg);
-moz-transform: scale(1.1) rotate(-1.3deg);
-o-transform: scale(1.1) rotate(-1.3deg);
transform: scale(1.1) rotate(-1.3deg);
}
.ensikologyRandom .item .content {
margin-top: 10px;
}
.ensikologyRandom .item .content a {
color: #333;
font-weight: 600;
font-size: 16px;
}
.ensikologyRandom .item .content a:hover {
text-decoration: underline;
}2. Kemudian ini tambahkan kode markupnya.
Dengan memposisikan tombol dan div untuk menampilkan postingan, karena ini adalah data feed sehingga anda dapat meletakkannya di halaman mana saja termasuk halaman 404. Di sini saya gunakan untuk halaman artikel.
<b:if cond='data:view.isPost'>
<center><button class='randomEnsikology' type='button'>Lihat Postingan Lainya</button></center>
<div class='ensikologyRandom'/>
</b:if>Perhatikan bahwa jika kalian menggunakan data:view, maka anda harus menerapkan tag kondisional untuk mengoptimalkan kode ini.
Di sini saya gunakan untuk halaman artikel dan JSnya tidak memerlukan jQuery.
Letakan kode js di atas </body>
<script type='text/javascript'>//<![CDATA[
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('K a=["\\o\\h\\k\\o\\y","\\k\\f\\f\\b\\g\\1O\\1t\\1m\\1h","\\b\\f\\c\\k\\y\\i\\h\\i\\x\\D\\1F\\e\\f\\m\\i\\l","\\x\\b\\d\\Q\\h\\b\\l\\b\\f\\d\\c\\1r\\D\\1c\\h\\e\\c\\c\\2f\\e\\l\\b","","\\b\\g\\g\\i\\g","\\o\\e\\d\\o\\p","\\1b\\d","\\i\\v\\b\\f\\1p\\b\\e\\g\\o\\p\\1b\\d\\i\\d\\e\\h\\1F\\b\\c\\n\\h\\d\\c","\\F\\b\\b\\m","\\v\\n\\c\\p","\\h\\b\\f\\x\\d\\p","\\g\\e\\f\\m\\i\\l","\\F\\h\\i\\i\\g","\\b\\f\\d\\g\\D","\\h\\k\\f\\y","\\g\\b\\h","\\e\\h\\d\\b\\g\\f\\e\\d\\b","\\p\\g\\b\\F","\\d\\k\\d\\h\\b","\\l\\b\\m\\k\\e\\1b\\d\\p\\n\\l\\I\\f\\e\\k\\h","\\c\\1Y\\1q\\H\\o","\\c\\1q\\1g\\L","\\g\\b\\v\\h\\e\\o\\b","\\n\\g\\h","\\p\\d\\d\\v\\c\\1W\\j\\j\\1U\\R\\I\\v\\R\\I\\h\\i\\x\\c\\v\\i\\d\\R\\o\\i\\l\\j\\H\\1V\\1A\\2a\\1r\\Z\\n\\B\\1A\\i\\1p\\2g\\j\\2d\\c\\M\\y\\1c\\Z\\1m\\i\\h\\d\\Z\\j\\A\\A\\A\\A\\A\\A\\A\\A\\1c\\1Q\\o\\j\\c\\1s\\1s\\1J\\1I\\1g\\P\\Q\\1L\\f\\L\\j\\c\\1v\\1g\\L\\L\\H\\g\\j\\f\\d\\p\\R\\v\\f\\x","\\r\\m\\k\\B\\u\\o\\h\\e\\c\\c\\t\\q\\k\\d\\b\\l\\q\\s\\r\\m\\k\\B\\u\\o\\h\\e\\c\\c\\t\\q\\d\\p\\n\\l\\I\\q\\s\\r\\e\\u\\p\\g\\b\\F\\t\\q","\\q\\s\\r\\k\\l\\x\\u\\c\\g\\o\\t\\q","\\q\\j\\s\\r\\j\\e\\s\\r\\j\\m\\k\\B\\s\\r\\m\\k\\B\\u\\o\\h\\e\\c\\c\\t\\q\\o\\i\\f\\d\\b\\f\\d\\q\\s\\r\\e\\u\\p\\g\\b\\F\\t\\q","\\q\\s","\\r\\j\\e\\s\\r\\j\\m\\k\\B\\s\\r\\j\\m\\k\\B\\s","\\d\\p\\b\\f","\\M\\c\\i\\f","\\j\\F\\b\\b\\m\\c\\j\\v\\i\\c\\d\\c\\j\\c\\n\\l\\l\\e\\g\\D\\1w\\e\\h\\d\\t\\M\\c\\i\\f\\1f\\l\\e\\P\\H\\g\\b\\c\\n\\h\\d\\c\\t\\1v\\1f\\c\\d\\e\\g\\d\\H\\k\\f\\m\\b\\P\\t","\\j\\F\\b\\b\\m\\c\\j\\v\\i\\c\\d\\c\\j\\c\\n\\l\\l\\e\\g\\D\\1w\\e\\h\\d\\t\\M\\c\\i\\f\\1f\\l\\e\\P\\H\\g\\b\\c\\n\\h\\d\\c\\t\\L","\\o\\n\\g\\g\\b\\f\\d\\1t\\e\\g\\x\\b\\d","\\1h\\e\\f\\M\\n\\d\\y\\e\\f\\u\\n\\f\\d\\n\\y\\u\\l\\b\\f\\b\\l\\n\\y\\e\\f\\u\\h\\b\\I\\k\\p\\u\\I\\e\\f\\D\\e\\y\\u\\v\\i\\c\\d\\k\\f\\x\\e\\f","\\e\\m\\m\\Q\\B\\b\\f\\d\\1h\\k\\c\\d\\b\\f\\b\\g","\\g\\e\\f\\m\\i\\l\\Q\\f\\c\\k\\y\\i\\h\\i\\x\\D"];1a[a[3]](a[1X])[0][a[2b]](a[0],(Y)=>{1a[a[3]](a[2])[0][a[1]]=a[4];1y(a[2c])[a[O]]((1C)=>1C[a[1z]]())[a[O]]((1E)=>{C 1G=1E[a[9]][a[8]][a[7]];C 1j=[],1e=[];G(C U=0;U<1G;U++){1j[a[10]](U+1)};K 1o=(E,1B)=>{G(C S=0;S<E[a[11]];S++){W(E[S]==1B){N 1P}};N 1D};K 1i=(E)=>{C T=E[1H[a[13]](1H[a[12]]()*E[a[11]])];W(!1o(1e,T)){1e[a[10]](T);N T};N 1i(E)};G(K 1k=0;1k<6;1k++){G(K 1l=1;1l<=1;1l++){1y((a[1R]+(1i(1j))+a[4]))[a[O]]((1n)=>1n[a[1z]]())[a[O]]((z)=>{C 1d,X,V;G(C w=0;w<z[a[9]][a[14]][a[11]];w++){G(C J=0;J<z[a[9]][a[14]][w][a[15]][a[11]];J++){W(z[a[9]][a[14]][w][a[15]][J][a[16]]===a[17]){X=z[a[9]][a[14]][w][a[15]][J][a[18]];1K}};1d=z[a[9]][a[14]][w][a[19]][a[7]];W(a[20]1Z z[a[9]][a[14]][w]){V=z[a[9]][a[14]][w][a[20]][a[24]][a[23]](a[21],a[22])}2e{V=a[25]};1a[a[3]](a[2])[0][a[1]]+=(a[26]+X+a[27]+V+a[28]+X+a[29]+1d+a[1S])}})[a[6]]((Y)=>1x[a[5]](Y))}}})[a[6]]((1u)=>1x[a[5]](1u));Y[a[1N]][a[1]]=a[1M]},{1T:1D})',62,141,'||||||||||_0xbda9|x65|x73|x74|x61|x6E|x72|x6C|x6F|x2F|x69|x6D|x64|x75|x63|x68|x22|x3C|x3E|x3D|x20|x70|_0x2f4ex14|x67|x6B|_0x2f4ex10|x41|x76|let|x79|_0x2f4ex9|x66|for|x2D|x62|_0x2f4ex15|var|x30|x6A|return|31|x78|x45|x2E|_0x2f4exb|_0x2f4exd|_0x2f4ex7|_0x2f4ex13|if|_0x2f4ex12|_0x2f4ex1|x49|||||||||||document|x24|x43|_0x2f4ex11|_0x2f4ex6|x26|x36|x4C|_0x2f4exc|_0x2f4ex5|_0x2f4exe|_0x2f4exf|x4D|_0x2f4ex16|_0x2f4ex8|x53|x32|x42|x35|x54|_0x2f4ex2|x31|x3F|console|fetch|32|x77|_0x2f4exa|_0x2f4ex17|false|_0x2f4ex3|x52|_0x2f4ex4|Math|x57|x50|break|x4B|36|35|x48|true|x34|33|30|once|x33|x59|x3A|38|x37|in|||||||||||x38|37|34|x56|else|x4E|x51'.split('|'),0,{}))
//]]></script>Jika sudah, silahkan simpan dan periksa hasilnya.
Silahkan tinggalkan komentar jika anda merasa "Postingan Acak Menggunakan Feed JSON Blogger" ini bermanfaat. semoga sukses terus gan xD
Add your comment Hide comment