Pada kesempatan kali ini saya akan berbagi bagaimana Cara Memasang Recent Posts Slider Di Blogger , Sebenarnya tutorial ini saya dapatkan ...
Fitur unik dari Blogger Posts Slider Terbaru
Widget Recent Posts telah menerapkan beberapa fitur Unique yang diantaranya- Penulis Avatar - Unique
- Menampilkan posting terbaru dalam Dinamis Slider atau sebagai daftar datar Dinamis. - Unique
- Menampilkan posting terbaru dari kategori tertentu / label.
- Slider dengan dua animasi: Slide & Fade
- Clickable Comments Count
- Format Tanggal kustom - Unique
- Clickable Animated Featured Thumbnails - Unique
- Pilihan untuk menambah atau mengurangi Resolusi thumbnail - Unique
- Dukungan untuk Gambar pihak ketiga dan thumbnail YouTube - Unique
- Judul Panjang disesuaikan
Cara Memasang Widget Recent Posts Slider di Blogger
Ikuti langkah-langkah mudah berikut ini untuk menambahkan posting terbaru slider untuk blog blogspot Anda:
- Masuk ke Blogger > Template
- Backup template Anda
- Klik "Edit HTML"
- Tepat di bawah <head> tag paste berikut JS dan sumber link CSS:
<script src='http://ajax.googleapis.com/ajax/libs/ jquery /1/jquery.min.js' type='text/javascript'></script> <script src = 'http: //ajax.googleapis.com/ajax/libs/ jquery /1/jquery.min.js' type = 'text / javascript'> </ script>Catatan: Jangan menambahkan JQuery, FontAwesome atau Oswald link dalam kode di atas untuk template Anda jika Anda telah menggunakan di situs Anda.
<link href='http://fortawesome.github.io/ Font-Awesome /assets/font-awesome/css/font-awesome.css' rel='stylesheet'/> <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 = 'http:? //fonts.googleapis.com/css keluarga = 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'/> <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> <script src = 'https: //cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/jquery.flexslider.min.js' type = 'text / javascript'> </ script>
5. Pencarian berikutnya ]]></b:skin> dan di atas itu paste kode berikut:
<style>
/*######### Recent Posts Slider Stylesheet #############*/
.mbtslides-title{font-family:oswald; font-weight:normal;font-size:18px!important; border-bottom:2px solid rgb(144, 241, 40); color:#242729; width:300px;}.flexslider{ width:300px; margin:0px; border:0;}
.flexslider .slides {list-style-type:none; margin:0px auto 10px auto;padding:0px;} .flexslider li {color:#666; font-family:helvetica; font-size:12px; overflow:hidden; position:relative; padding-top: 10px; line-height: 1.6em;} .flexslider .flex-control-nav{list-style:none outside none;position:absolute;top:-45px;right:5px;text-align:right;height:10px}
.flexslider .flex-control-nav li{display:inline-block;margin:0 2px}
.flexslider .flex-control-nav a{text-indent:9999px;display:block;width:10px;cursor:pointer;height:10px;background-color:#000;border:1px solid #000;border-radius:0!important}
.flexslider .flex-control-nav a.flex-active{background-color:rgb(132, 219, 6);border:1px solid rgb(144, 241, 40)} .flexslider .flex-div{margin:0px auto 20px auto; display:block; border-bottom:1px solid #eee; padding-bottom:20px!important; position:relative;} .flexslider li a { color:#0080ff; text-decoration:none; } .flexslider i{color:#999; padding-right:5px; } .flexslider .iline{line-height:2em; margin-top:3px;} .flexslider .icontent{line-height:1.5em; margin-top:5px;} .flexslider div span{margin:0 5px 0 0; display:inline-block;font-weight: normal; } .flexslider .mbttitle {font-family:oswald; font-size:13px; color:#666; font-weight:normal; text-decoration:none;} .flexslider .mbttitle:hover, .flexslider .itotal a:hover {color:#333; text-decoration:none;}
.flexslider .iedit a{text-decoration:none; color:#999; cursor:pointer}
.flexslider .iedit:before, .flexslider .iauthor:before, .flexslider .itag:before, .flexslider .icomments:before, .flexslider .idate:before, .flexslider .itotal span:before{font-family:fontAwesome; position:relative; padding-right:8px; color:#999;} .flexslider .iauthorpic{width: 17px!important;height: 17px!important;border-radius: 50%; float: none; display: inline-block!important; margin:0px 0px 0px 0px; padding-right:3px; position:relative; top:3px;}
.flexslider .iFeatured{overflow:hidden;position:relative;float:left;margin:0 5px 10px 0;padding:0;} .flexslider .iFeatured a {background: none; padding:0px; display: block;border:1px solid #eee;} .flexslider .iFeatured img{width:110px!important;height:65px!important;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s; border-radius: 2px;} .flexslider .iFeatured:hover img{ opacity:1; -moz-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4)} .flexslider .icomments a{color:#0080ff; font-family: arial;font-size:12px;} .flexslider .icomments a:hover{text-decoration:underline} .flexslider .icomments:before {content:'\f086'; padding:0px 3px 0px 7px; color:#84DB06;} .flexslider .idate {position: absolute;left: 0px;top: -7px; background: rgb(132, 219, 6);color: #fff;padding: 3px 4px;font-family: oswald;font-size: 11px;border: 1px solid rgb(144, 241, 40);} .flexslider .idate div{width:18px; line-height:1.6em; text-align:center;}
.flexslider .idate:after {content: ' ';position: absolute;z-index:-9999px;width: 0;height: 0;left: 25px;top: -1px;border-width: 4px 6px;border-style: solid;border-color: transparent transparent rgb(125, 208, 4) rgb(125, 208, 4);}
</style>
Untuk mengubah tema warna hijau slider cukup mengganti code yang berwarna hijau dengan warna pilihan Anda. warna bisa di rgb atau #hexadecimal, keduanya bekerja. Gunakan tools Color Code Generator.
6. Simpan template Anda.
7. Sekarang pergi ke Blogger> Tata Letak
8. Pilih "Tambah Gadget"
9. Pilih "HTML / JavaScript" gadget
10. Jauhkan bidang judul kosong dan kemudian paste kode berikut di dalamnya:
<script type="text/javascript"> <Script type = "text / javascript">
$(window).load(function() { $ (Window) load (function () {
$('.flexslider').flexslider({ $ ( '. Flexslider'). Flexslider ({
animation : "slide", animasi: "meluncur",
directionNav: false, directionNav: palsu,
touch: true, touch: benar,
slideshowSpeed : 2500, slideshowSpeed: 2500,
pauseOnHover : true, pauseOnHover: benar,
animationSpeed : 700, animationSpeed: 700,
}); });
}); });
</script> </ Script>
<h2 class="mbtslides-title"> Recent Posts Slider </h2> <h2 class = "mbtslides-title"> Recent Posts Slider </ h2>
<div class="flexslider"> <Div class = "flexslider">
<ul class="slides"> <Ul class = "slide">
<script type="text/javascript"> <Script type = "text / javascript">
//################### Defaults // ################### Default
var ListBlogLink = " http://mybloggertricks.com "; var ListBlogLink = "http://mybloggertricks.com";
var ListCount = 6; var ListCount = 6;
var ListLabel = "SEO"; var ListLabel = "SEO";
var TitleCount = 66; var TitleCount = 66;
var ImageSize = 150; var imagesize = 150;
//################### Function Start // ################### Fungsi Mulai
function mbtslider(json) { Fungsi mbtslider (json) {
for (var i = 0; i < ListCount; i++) for (var i = 0; i <ListCount; i ++)
{ {
//################### Variables Declared // ################### Variabel Dideklarasikan
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 = ""; 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 // ################### Kategori
if (json.feed.entry[i].category != null) jika (json.feed.entry [i] .category! = null)
{ {
for (var k = 0; k < json.feed.entry[i].category.length; k++) { for (var k = 0; k <json.feed.entry [i] .category.length; k ++) {
ListTag += "<a 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) if (k <json.feed.entry [i] .category.length-1)
{ ListTag += " ";} {ListTag + = "";}
} }
} }
//################### URL // ################### URL
for (var j = 0; j < json.feed.entry[i].link.length; j++) { for (var j = 0; j <json.feed.entry [i] .link.length; j ++) {
if (json.feed.entry[i].link[j].rel == 'alternate') { jika (json.feed.entry [i] .link [j] .rel == 'alternatif') {
break; istirahat;
} }
} }
ListUrl= "'" + json.feed.entry[i].link[j].href + "'"; ListUrl = " '" + json.feed.entry [i] .link [j] .href + "'";
//################### Info // ################### Info
TotalPosts = json.feed.openSearch$totalResults.$t; TotalPosts = json.feed.openSearch $ totalResults $ t.;
if (json.feed.entry[i].title!= null) jika (json.feed.entry [i] .title! = null)
{ {
ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount); . LISTTITLE = json.feed.entry [i] .title $ t.substr (0, TitleCount);
} }
if (json.feed.entry[i].thr$total) jika (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>"; 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 = json.feed.entry [i] .author [0] .name $ t.split ( ".");
ListAuthor=ListAuthor.slice(0, 1).join(" "); ListAuthor = ListAuthor.slice (0, 1) .join ( "");
AuthorPic = json.feed.entry[i].author[0].gd$image.src; AuthorPic = json.feed.entry [i] .author [0] .gd $ image.src;
//################### Content Check // ################### Konten Periksa
ListConten = json.feed.entry[i].content.$t; ListConten = json.feed.entry [i] .content $ t.;
ListContent= ListConten.replace(/(<([^>]+)>)/ig,"").substring(0, ChrCount); ListContent = ListConten.replace (/ (<([^>] +)>) / ig, "") substring (0, ChrCount).;
//################### Date Format //################### Format tanggal
ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; ListMonth = [ "Jan", "Februari", "Mar", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember" ];
ListDate= json.feed.entry[i].published.$t.substring(0,10); ListDate = json.feed.entry [i] .published $ t.substring (0,10).;
Y = ListDate.substring(0, 4); Y = ListDate.substring (0, 4);
m = ListDate.substring(5, 7); m = ListDate.substring (5, 7);
D = ListDate.substring(8, 10); D = ListDate.substring (8, 10);
M = ListMonth[parseInt(m - 1)]; M = ListMonth [parseInt (m - 1)];
ListUpdate= json.feed.entry[i].updated.$t.substring(0, 16); ListUpdate = json.feed.entry [i] .updated $ t.substring (0, 16).;
YY = ListUpdate.substring(0, 4); YY = ListUpdate.substring (0, 4);
mm = ListUpdate.substring(5, 7); mm = ListUpdate.substring (5, 7);
DD = ListUpdate.substring(8, 10); DD = ListUpdate.substring (8, 10);
TT = ListUpdate.substring(11, 16); TT = ListUpdate.substring (11, 16);
MM = ListMonth[parseInt(mm - 1)]; MM = ListMonth [parseInt (mm - 1)];
//################### Thumbnail Check // ################### Thumbnail Periksa
// YouTube scan // Memindai YouTube
if (json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/) != null) jika (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(); var youtube_id = json.feed.entry [i] .content $ t.match (/youtube\.com * (\ v = |.?. \ / embed \ /) ({11}) /).. pop () ;
if (youtube_id.length == 11) { if (== youtube_id.length 11) {
var ListImage = "'//img.youtube.com/vi/"+youtube_id+"/0.jpg'"; var ListImage = " '//img.youtube.com/vi/"+youtube_id+"/0.jpg'";
} }
} }
else if (json.feed.entry[i].media$thumbnail) lain jika (json.feed.entry [i] .media $ thumbnail)
{ {
thumbUrl = json.feed.entry[i].media$thumbnail.url; thumbUrl = json.feed.entry [i] .media $ thumbnail.url;
sk= thumbUrl.replace("/s72-c/","/s"+ImageSize+"/"); sk = thumbUrl.replace ( "/ S72-c /", "/ s" + imagesize + "/");
ListImage= "'" + sk.replace("?imgmax=800","") + "'"; ListImage = " '" + sk.replace (, "" imgmax = 800? "") + "'";
} }
else if (json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/) != null) lain jika (json.feed.entry [i] .content $ t.match (/ src = (+..?! [\ jpg |. \ .gif | \ .png] ") /) = null)
{ {
// Support For 3rd Party Images // Dukungan Untuk Images 3rd Party
ListImage = json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1]; . ListImage = json.feed.entry [i] .content $ t.match (/ src = (+ [\ jpg | \ .gif | \ .png.] ") /.?) [1];
} }
else lain
{ {
ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRrec2Vrmmem6n2YqJzALmWDSIUKH5U5JAkqli8y7qFTIFzTBD3WRViTqL_o2aZCuy5S6-C36fTZmveXgMmxRmJGT0lGj8vdzzbo28cktUo9NXXGZczbqOGBMTf3_f1DC6P2rcOp9DJFI/s200/Icon.png'"; ListImage = " 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRrec2Vrmmem6n2YqJzALmWDSIUKH5U5JAkqli8y7qFTIFzTBD3WRViTqL_o2aZCuy5S6-C36fTZmveXgMmxRmJGT0lGj8vdzzbo28cktUo9NXXGZczbqOGBMTf3_f1DC6P2rcOp9DJFI/s200/Icon.png'";
} }
//################### Printing List // ################### Daftar Percetakan
var listing = "<div class='flex-div'><div class='iFeatured'><a href=" var daftar = "<div class = 'flex-div'> <div class = 'iFeatured'> <a href ="
+ ListUrl+ + ListUrl +
"><img src=" "> <Img src ="
+ListImage+ + ListImage +
"/></a></div><a class='mbttitle' href=" "/> </a> </ Div> <a href class = 'mbttitle' ="
+ListUrl+ + ListUrl +
"target='_blank'>" "Target = '_ blank'>"
+ListTitle+ + LISTTITLE +
"</a><div class='iline'><span class='iauthor'><img class='iauthorpic' src='"+AuthorPic+"'/>" "</a> <Div class = 'iline'> <span class = 'iauthor'> <img class = 'iauthorpic' src = '" + AuthorPic + "' />"
+ListAuthor+ + ListAuthor +
"</span><span class='icomments'>" "</ Span> <span class = 'icomments'>"
+ListComments + + ListComments +
"</span> <span class='idate'><div>" "</ Span> <span class = 'Idate'> <div>"
+ D + + D +
"</div><div> " "</ Div> <div>"
+ M + + M +
"</div></span></div></div>"; "</ Div> </ span> </ div> </ div>";
if (i == 0) jika (i == 0)
document.write('<li>'); document.write ( '<li>');
if (i < ListCount/2) jika (i <ListCount / 2)
document.write(listing); document.write (daftar);
if (i == ListCount/2) jika (i == ListCount / 2)
document.write('</li><li>'); document.write ( '</ li> <li>');
if (i >= ListCount/2) if (i> = ListCount / 2)
document.write(listing); document.write (daftar);
if (i == ListCount) jika (i == ListCount)
document.write('</li>'); document.write ( '</ li>');
} } }}
<!-- #### Invoking the Callback Function #### --> <! - #### Meminjam yang Callback Function #### ->
document.write("<script document.write ( "<script src='"+ListBlogLink+"/feeds/posts/default /-/"+ListLabel+" ?alt=json-in-script&callback=mbtslider'></"+"script>");
</script> </ Script>
</ul></div> </ Ul> </ div>
Pilihan kontrol berikut akan membantu Anda memodifikasi widget:
- Animation: Pilih jenis animasi Anda, "fade" atau "slide"
- SlideshowSpeed: Anda dapat mengatur kecepatan slideshow bersepeda, dalam milidetik
- AnimationSpeed: Anda juga dapat mengatur kecepatan animasi, dalam milidetik
- PauseOnHover: Jeda slideshow ketika melayang di atas slider, kemudian melanjutkan ketika tidak lagi melayang
- Anda dapat mengedit judul widget dengan mengedit: Recent Posts Slider
- Jika Anda tidak ingin menggunakan judul kemudian menghapus kode disorot yellow.
- ListBlogLink: Masukkan link Blog Anda di sini
- ListCount: Tentukan berapa banyak posting yang ingin ditampilkan. Pilih bahkan bulat hanya seperti 2,4,6,8,10 dll
- ListLabel: Masukkan blog Anda label / kategori di sini. Ingat bahwa label kasus sensitif. Oleh karena itu ketik persis seperti yang ditunjukkan pada address bar browser Anda. Jika label Anda adalah "b logging t ips" dan jika Anda mengetik sebagai "ips T B logging" maka itu tidak akan berhasil. Anda harus memastikan bahwa semua surat-surat yang ditulis dalam kasus yang benar.
- TitleCount: Pilih berapa banyak karakter akan ditampilkan di judul posting.
- Imagesize: Anda dapat mengontrol rasio resolusi atau aspek thumbnail oleh editing imagesize = 150; dimana nilai 150 berarti bahwa Anda ingin gambar Anda berada dalam 150 x 150 piksel. Menjaga nilai ini dekat dengan ukuran thumbnail untuk memastikan waktu buka situs tidak dipengaruhi banyak. Sejak gambar thumbnail kami memiliki lebar sekitar 110px, karena itu saya telah disimpan resolusi 150, sedikit lebih tinggi untuk menampilkan gambar dalam kualitas yang sedikit baik.
- Jika Anda ingin menampilkan posting terbaru yang dipublikasikan di blog Anda, tetapi tidak ingin menampilkan posting dari label tertentu maka cukup menghapus / - / "+ ListLabel +" dari kode di atas.
Tampilan Dinamis Slider atau Hanya Flat List!
Untungnya saya memiliki setup logika sehingga Anda dapat memilih apakah akan menampilkan posting Anda di dalam FlexSlider animasi atau menampilkan mereka yang sederhana daftar datar mirip dengan saya posting terbaru sebelumnya widget . Dengan kata lain Anda dapat memilih untuk mengaktifkan atau menonaktifkan FlexSlider tersebut.
Cara mengaktifkan atau menonaktifkan slider fleksibel?
Logikanya sangat sederhana.
Jika Anda ingin menampilkan dan memungkinkan FlexSlider kemudian memasukkan even integer value next sebelah ListCount, seperti 2,4,6,8,10,12 dll Logika JavaScript di atas akan membagi nilai dimasukkan ke dalam dua bagian dan akan menampilkan posting di setiap slide.
Output akan seperti:
Untuk menampilkan Flat List dinamis atau dengan kata lain untuk menonaktifkan FlexSlider memasukkan nilai integer ganjil, seperti 1,3,5,7,9,11 dll
Output akan seperti:
Mudah bukan? =)
Beritahu saya jika Anda memiliki pertanyaan atau jika Anda memerlukan bantuan. Saya berharap widget baru ini akan membawa blog blogspot Anda ke tingkat berikutnya dan membantu Anda membumbui blog Anda dengan satu widget lebih unik yang sebelumnya hanya ditemukan di blog wordpress. Mengapa Harus Wordpress selagi Blogspot juga bisa =)
