Cara Menambahkan Widget Posting Fitur Otomatis di Blogger

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

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.

Featured Posts Widget

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>  
Featured Posts Widget

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

Langkah 5. Sekarang pilih Layout dan klik Add a Gadget.

Featured Posts Widget

Langkah 6. Pilih HTML / JavaScript dan rekatkan kode di bawah ini di dalam ruang kosong


Featured Posts Widget



 <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/AVvXsEgm5IFuUVyhrJ_Zs25Kl3YeyhWXSLW-tejqkaYRmDwvBbj_pQVhD9lW4-dYvxU9eVPVpMpZqaMBgc8OYZMfoEuf_5-50ENgVEj94-KJeZZud-ffp7EEBTvpsdeDoMrTFrc59Y3wH1I7g5I/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.
Next Post Previous Post