Fitur Random post Slider widget Blogger
- Komentar
- Author
- Avatar Author
- Tanggal Publikasi
- Label
- Thumbnail
Oke Langsung Saja Inidia Cara Membuat Slider Random Post widget Di Blogspot
1.Login Ke Blogger
2.Backup Template Buat Jaga Jaga :D
3.Klik Tema (
" Edit HTML ")
4.Dan Masukan Script Jquery Dan Font Awesom Dibawah ini Tepat di Atas Kode
"</head>"
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/flexslider.min.css' rel='stylesheet' type='text/css'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/jquery.flexslider.min.js' type='text/javascript'></script>
5.Jika Sudah Menempelkan Jquery Di atas lanjut Cari Kode
"</b:skin>"Dan Pasang kode CSS di bawah ini tepat di atas Kode
"</b:skin>"
.random-post{margin:0;border:0;width:100%;overflow:hidden}
.random-post .slides{margin:0;padding:0}
.random-post li{color:#fff;font-family:helvetica;font-size:12px;overflow:hidden;padding-top:10px;width:50%;}
.random-post .flex-control-nav li{display:table-caption;margin:0}
.random-post .flex-control-nav a{text-indent:9999px;display:table-caption;width:10px;cursor:pointer;height:10px;background-color:#000;border:1px solid #000;border-radius:0!important}
.flex-direction-nav .flex-prev{left:-50px}
.flex-direction-nav .flex-next{right:-50px;text-align:right}
.random-post .flex-control-paging{display:none}
.flex-direction-nav{position:relative;top:-250px}
.random-post .flex-control-nav a.flex-active{background-color:#84db06;border:1px solid #90f128}
.random-post .flex-div{margin:0;padding:0!important;height:370px;width:100%;}
.random-post li a{color:#0080ff;text-decoration:none}
.random-post i{color:#999;padding-right:0px}
.random-post .iline{line-height:2em;margin:0;position:relative;top:-90px;background:#56adff;padding:3px 10px;display:inline-block}
.random-post .icontent{line-height:1.5em;margin-top:5px}
.random-post div span{margin:0 5px 0 0;display:inline-block;font-weight:400}
.random-post .mbttitle{font-family:oswald;font-size:20px;color:#fff;font-weight:400;text-decoration:none;position:relative;top:-90px;background:#66b5ff;padding:15px 10px;display:block}
.random-post .mbttitle:hover,.random-post .itotal a:hover{color:#fff;text-decoration:none}
.random-post .iedit a{text-decoration:none;color:#999;cursor:pointer}
.random-post .iedit:before,.random-post .iauthor:before,.random-post .itag:before,.random-post .icomments:before,.random-post .idate:before,.random-post .itotal span:before{font-family:fontAwesome;position:relative;padding-right:8px;color:#fff}
.random-post .iauthorpic{width:17px!important;height:17px!important;border-radius:50%;float:none;display:inline-block!important;margin:0;padding-right:3px;position:relative;top:3px}
.random-post .iFeatured{overflow:hidden;position:relative;margin:0;padding:0;width:100%}
.random-post .iFeatured a{background:none;padding:0;display:block;border:0px solid #eee;margin:0 -1px}
.random-post .iFeatured img{height:305px!important;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;border-radius:0;margin:0;padding:0;opacity:.7}
.random-post .iFeatured:hover img{opacity:1;-moz-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4)}
.random-post .icomments a, .random-post .itag a{color:#0080ce;font-family:arial;font-size:12px}
.random-post .icomments a:hover, .random-post .itag a:hover{text-decoration:underline}
.random-post .itag:before{content:'\f02c';padding:0 3px 0 7px;color:#fff}
.random-post .icomments:before{content:'\f086';padding:0 3px 0 7px;color:#fff}
.random-post .idate{color:#fff;padding:3px 4px;font-family:arial;font-size:11px}
.random-post .idate:before{content:'\f073';padding:0 5px;color:#fff}
6.Simpan Template
7.Selanjutnya Ke tata letak
8.Klik Add Gadget
9.Judul terserah kalian "Kosong juga gapapa" Dan Masukkan Kode script di bawah ini
<script type="text/javascript">
//################### Defaults
var ListBlogLink = "https://demombill.blogspot.co.id/";
var ListCount = 4;
var TitleCount = 66;
var ImageSize = 800;
$(window).load(function() {
$('.random-post').flexslider({
animation: "slide",
itemWidth: 0,
itemMargin: 0,
directionNav: true,
touch: true,
slideshowSpeed: 2500,
pauseOnHover: true,
animationSpeed: 700,
});
});
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=\"'+ListBlogLink+'/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>
<div class="flexslider random-post">
<ul class="slides">
<script type="text/javascript">
//################### Function Start
function mbtrand(json) {
for (var i = 0; i < json.feed.entry.length; 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 = "";
//################### Category
if (json.feed.entry[i].category != null)
{
for (var k = 0; k < json.feed.entry[i].category.length; k++) {
ListTag += "<a href='"+ListBlogLink+"/search/label/"+json.feed.entry[i].category[k].term+"'>"+json.feed.entry[i].category[k].term+"</a>";
if(k < json.feed.entry[i].category.length-1)
{ ListTag += ", ";}
}
}
//################### 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;
//################### 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
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=800","") + "'";
}
// YouTube scan
else if (json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/) != null)
{
var youtube_id = json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop();
if (youtube_id.length == 11) {
var ListImage = "'//img.youtube.com/vi/"+youtube_id+"/0.jpg'";
}
}
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/AVvXsEi0N0I2-ksgVKdAoCnhGKr9nX6e-uvoFA5nAn1-NkBdIh8-eGjF8bXr_DLK6GcLpU9XNHdPwSfpJirOlHlLbk9tQ0syuXnMN2kanm7oWrHOPqrddKZfXCoZ8y3XTQDNFH_u19cFJFbRLnY/s200/Icon.png'";
}
//################### Printing List
var listing = "<li><div class='flex-div'><div class='iFeatured'><a href="
+ ListUrl+
"><img src="
+ListImage+
"/></a></div><div class='iline'><span class='iauthor'><img class='iauthorpic' src='"+AuthorPic+"'/>"
+ListAuthor+
"</span><span class='icomments'>"
+ListComments +
"</span> <span class='idate'>"
+ D +
" "
+ M +
"</span><span class='itag'>"
+ListTag +
"</span></div><a class='mbttitle' href="
+ListUrl+
"target='_blank'>"
+ListTitle+
"</a></div></li>";
document.write(listing);
} }
<!-- #### Invoking the Callback Function #### -->
for (var i = 0; i < ListCount ; i++) {
GenerateNum();
var scripta = '<script type=\"text/javascript\" src=\"'+ListBlogLink+'/feeds/posts/default?alt=json-in-script&start-index='+RandomArray[i] + '&max-results=1&callback=mbtrand\"><\/script>';
document.write(scripta);
};
</script>
</ul></div>
Pengaturan Slider
Ganti ListBlogLink Menjadi Link blogspot sobat
Ubah ListCount Sesuai selera itu pengaturan buat berapa banyak artikel/postingan yang akan di tampilkan
TitleCount Berapa banyak Judul yang akan di tampilkan
ImageSize Rasio Gambar Atau Resolusi Thumbnail
10.Klik Simpan Dan Lihat Hasilnya :D
Mungkin Sudah Dulu yah Tutorial
Cara membuat slider random post Jika Ada yang error bisa di tanyakan pada comentar dibwah
