Untuk setiap blogger yang menampilkan posting Anda memungkinkan Anda untuk meletakkan konten terbaik Anda di depan atau di atas halaman blog Anda, di mana pembaca Anda dapat melihatnya dengan lebih mudah.
Posting yang ditampilkan sangat membantu dan ini juga merupakan cara untuk menyambut pembaca Anda ke blog Anda atau menyoroti posting atau pengumuman penting.
Manfaat widget posting fitur di Blogger
Karena widget Unggulan posting memungkinkan Anda menampilkan konten yang dipilih dan lebih banyak pemaparan, ia memiliki banyak manfaat. Beberapa dari mereka adalah:
Posting terbaik dan terpenting Anda mendapatkan lebih banyak perhatian dan menarik pembaca Anda.
Bot mesin pencari dapat dengan mudah mengakses artikel terbaik dan penting Anda.
Sebagai posting fitur widget umumnya ditempatkan di atas. Dengan mudah memungkinkan pembaca Anda dengan mudah membaca artikel dan ini mengurangi tingkat bouncing .
Selengkapnya: Cara membuat Daftar Isi Otomatis di Blogger
Selengkapnya: Cara membuat Daftar Isi Otomatis di Blogger
Fitur Otomatis Menampilkan Widget Slider Posting
Penggeser posting pilihan adalah widget canggih yang dilengkapi dengan fitur-fitur ini:
Penulis Avatar.
Ini menampilkan posting terbaru Anda secara otomatis.
Ini memiliki Thumbnail Gambar Unggulan yang Dapat Diklik
Itu dapat mengekstraksi dan menampilkan posting terbaru Anda secara dinamis dari kategori / label tertentu.
Ini memiliki 2 efek animasi, Slide & Fade.
Ini mendukung Gambar Pihak Ketiga dan gambar mini Video YouTube juga.
Hitungan Komentar yang Dapat Diklik
Ini memiliki Format Tanggal kustom
Anda memiliki opsi untuk menambah atau mengurangi Resolusi Gambar dan memberi Anda gambar yang berkualitas.
Panjang Judul juga bisa disesuaikan. Jadi Lebih Banyak: 9 widget posting Terbaru Terbaik untuk Blogger
Cara Menambahkan Posting Fitur Otomatis di Blogger
Cukup ikuti beberapa langkah sederhana dan Anda akan selesai dalam waktu singkat.
Langkah 1. Masuk ke blog Blogger Anda, pilih Template / Tema dan klik Edit HTML.
Langkah 2. Cari untuk </head> tag dan paste di bawah JS & sumber CSS link hanya </head> tag.
<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> 
Langkah 3. Sekarang, cari ]]></b:skin> dan rekatkan kode di bawah tepat di atas ]]></b:skin> kode.
.mbt-s{margin:0 5px;border:0;width:100%;overflow:hidden}
.mbt-s .slides{list-style-type:none;margin:0 auto;padding:0}
.mbt-s li{color:#fff;font-family:helvetica;font-size:12px;overflow:hidden;padding-top:10px}
.mbt-s .flex-control-nav li{display:inline-block;margin:0 2px}
.mbt-s .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}
.flex-direction-nav .flex-prev{left:-50px}
.flex-direction-nav .flex-next{right:-50px;text-align:right}
.mbt-s .flex-control-paging{display:none}
.flex-direction-nav{position:relative;top:-250px}
.mbt-s .flex-control-nav a.flex-active{background-color:#84db06;border:1px solid #90f128}
.mbt-s .flex-div{margin:0 auto;display:block;padding:0!important;position:relative;height:370px}
.mbt-s li a{color:#0080ff;text-decoration:none}
.mbt-s i{color:#999;padding-right:5px}
.mbt-s .iline{line-height:2em;margin:0;position:relative;top:-90px;background:#31363a;padding:3px 10px;display:inline-block}
.mbt-s .icontent{line-height:1.5em;margin-top:5px}
.mbt-s div span{margin:0 5px 0 0;display:inline-block;font-weight:400}
.mbt-s .mbttitle{font-family:oswald;font-size:20px;color:#ff0;font-weight:400;text-decoration:none;position:relative;top:-90px;background:#222;padding:15px 10px;display:block}
.mbt-s .mbttitle:hover,.mbt-s .itotal a:hover{color:#fff;text-decoration:none}
.mbt-s .iedit a{text-decoration:none;color:#999;cursor:pointer}
.mbt-s .iedit:before,.mbt-s .iauthor:before,.mbt-s .itag:before,.mbt-s .icomments:before,.mbt-s .idate:before,.mbt-s .itotal span:before{font-family:fontAwesome;position:relative;padding-right:8px;color:#fff}
.mbt-s .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}
.mbt-s .iFeatured{overflow:hidden;position:relative;margin:0;padding:0;width:100%}
.mbt-s .iFeatured a{background:none;padding:0;display:block;border:0px solid #eee;margin:0 -1px}
.mbt-s .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}
.mbt-s .iFeatured:hover img{opacity:1;-moz-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4)}
.mbt-s .icomments a{color:#0080ff;font-family:arial;font-size:12px}
.mbt-s .icomments a:hover{text-decoration:underline}
.mbt-s .icomments:before{content:'\f086';padding:0 3px 0 7px;color:#fff}
.mbt-s .idate{color:#fff;padding:3px 4px;font-family:arial;font-size:11px}
.mbt-s .idate:before{content:'\f073';padding:0 5px;color:#fff}
Kustomisasi
Ubah # 222 untuk mengubah latar belakang hitam di belakang judul.
Ubah # ff0 untuk mengubah warna kuning dari font judul slide.
Ubah # 0080ff untuk mengubah warna tautan komentar.
Ubah #fff untuk mengubah warna kursor mouse.
Langkah 4. Klik Simpan untuk menyimpan pengaturan Anda.
Selengkapnya: Cara membuat Pengunci Konten Sosial di Blogger
Selengkapnya: Cara membuat Pengunci Konten Sosial di Blogger
Langkah 5. Sekarang pilih Layout dan klik Add a Gadget.
Langkah 6. Pilih HTML / JavaScript dan rekatkan kode di bawah ini di dalam ruang kosong
<script type="text/javascript">
$(window).load(function() {
$('.mbt-s').flexslider({
animation: "slide",itemWidth: 600,itemMargin: 25,directionNav: true,touch: true,slideshowSpeed: 2500,pauseOnHover: true,animationSpeed: 700,});});</script>
<div class="flexslider mbt-s">
<ul class="slides">
<script type="text/javascript">
//################### Defaults
var ListBlogLink = "http://mybloggertricks.com";
var ListCount = 6;
var ListLabel = "Events";
var TitleCount = 66;
var ImageSize = 600;
//################### Function Start
function mbtslide(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 = "";
//################### 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/AVvXsEgZ_X8VMPWt975by66o8KW1sM8vhaj-MNyTkKqKmj9JIcJ2ZcOcYu9dc6dO9tshY58K1zgLkgt9iOjSRS6MN0aKD2oWUi8Y6SoeCpxCQvewO_Quj9PuHuiILpSvfA5pw8bFZbvMGfCoc-Q/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></div><a class='mbttitle' href="
+ListUrl+
"target='_blank'>"
+ListTitle+
"</a></div></li>";
document.write(listing);
} }
<!-- #### Invoking the Callback Function #### -->
document.write("<script src='"+ListBlogLink+"/feeds/posts/default/-/"+ListLabel+"?alt=json-in-script&callback=mbtslide'></"+"script>");
</script>
</ul></div>
Kustomisasi
Anda dapat mengubah opsi di bawah ini untuk meningkatkan atau slider widget Featured Post.
animasi : Anda dapat memilih dua nilai di sini. "geser" atau "pudar"
slideshowSpeed : Anda dapat mengatur kecepatan tayangan slide slideshow, dalam milidetik
animationSpeed : Anda juga dapat mengatur kecepatan animasi, dalam milidetik
pauseOnHover : Jeda rangkai salindia ketika melayang di atas slider, lalu lanjutkan kembali ketika tidak lagi melayang
Jika Anda tidak ingin menggunakan judul maka hapus kode yang disorot kuning.
ListBlogLink : Masukkan URL Blog Anda di sini
ListCount : Tentukan berapa banyak posting yang ingin Anda tampilkan.
ListLabel : Masukkan label blog Anda di sini. Ingat bahwa label peka huruf besar-kecil. Oleh karena itu ketikkan persis seperti yang ditampilkan di bilah alamat browser Anda.
TitleCount : Pilih berapa banyak karakter untuk ditampilkan dalam judul slide.
ImageSize: Anda dapat mengontrol resolusi atau rasio aspek gambar mini dengan mengedit ImageSize = 600; di mana nilai 600 berarti bahwa Anda ingin gambar Anda berada dalam dimensi 600 x 600 piksel.
/ - / "+ ListLabel +" Hapus baris ini jika Anda ingin menampilkan posting terbaru dari blog Anda tanpa menyebutkan label.
Langkah 7. Klik Simpan dan hanya itu.
Sekarang lihat blog Anda.
Lainnya: Cara menyematkan dokumen PDF dan lainnya di pos Blogger
Kesimpulan untuk Widget Posting Unggulan Otomatis untuk Blogger
Script dan kode di atas telah diambil dari Trik Blogger Saya . Dan jika tutorial ini membantu Anda atau menemukan kesulitan dalam menambahkan skrip.Anda dapat meninggalkan komentar di bawah ini.
Juga, jangan lupa mengucapkan terima kasih kepada Trik Blogger Saya karena membuat tutorial yang luar biasa.
Post a Comment
Post a Comment