Cara Menambahkan Widget Posting Fitur Otomatis di Blogger

    Widget Posting yang Ditampilkan

    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= "'http://4.bp.blogspot.com/-HALLtgFeep0/VfryhQ0C5oI/AAAAAAAAPcY/77mSGND4q84/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.



    No comments