Cara membuat recent post seperti mastimon

Daftar Isi
Recent posts ala mastimon

Recent posts atau postingan terbaru seperti mastimon memang menarik dan cukup elegan. Sehingga tak jarang banyak sekali para blogger yang menggunakan recent posts ala mastimon digunakan didalam blognya.

Meskipun begitu, ternyata ada juga Bloggers yang kesulitan dalam memasang recent posts seperti mastimon. Penyebabnya biasa terjadi karena Template yang digunakan tidak support dengan kode yang dipasang. Sehingga tampilan recent posts tidak muncul di homepage atau halaman blog.

Template yang digunakan oleh mastimon sama dengan Bloggers lainnya ialah VioMagz v.3.2.0 yang telah diedit oleh mastimon. Jadi, jika sobat menggunakan template VioMagz maka akan bisa menggunakan recent posts seperti mastimon.

Postingan ini saya buat untuk sobat blogger yang ingin membuat tampilan blognya menjadi lebih keren. sehingga membuat pengunjung terkesan lebih nyaman.

Memang recent post ala mastimon ini cukup dibilang sederhana, tapi siapa sangka banyak dari kalangan blogger yang menggunakan tampilan recent post ala mastimon ini.

Baca juga : cara membuat sitemap keren di blog

Sudah banyak blog yang membahas tutorial ini. selain sederhana dan mudah, mereka juga bisa mendapatkan backlink gratis dari mastimon sehingga dapat meningkatkan trafik blog.


    untuk sobat yang sedang membaca Tulisan ini dan ingin membuat recent post atau postingan terbaru ala  mastimon, silahkan ikuti langkah-langkah dibawah ini. yuk simak sob.

    Membuat postingan terbaru ala mastimon

    langkah pertama

    Silahkan sobat login ke dasbor blogger > lalu pilih tema > edit HTML 

    kemudian copas kode CSS dibawah ini
     /* Artikel Terbaru */
    artikel-terbaru ul li {
        border-bottom: 2px dotted $(label.border.color);
        padding-bottom: 8px;
        margin-bottom: 8px;
        font-weight: 500;
    }
    .list-label-widget-content ul li, .LinkList ul li, .PageList ul li {
        border-bottom: 2px dotted $(label.border.color);
        padding-bottom: 5px;
    }
    .artikel-terbaru ul li:before, .list-label-widget-content ul li:before, .LinkList ul li:before, .PageList ul li:before {
        content: "\f14b";
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        text-decoration: inherit;
        margin-right: 6px;
    }
    .artikel-terbaru ul li:before {
        content: "\f14b";
    }
    .list-label-widget-content ul li:before {
        content: "\f07b";
    }
    .LinkList ul li:before {
        content: "\f14c";
    }
    .PageList ul li:before {
        content: "\f249";
    }
    letakkan kode tersebut dibawah kode Blogger CSS 

    gunakan Ctrl+f untuk memudahkan pencarian lalu isi Blogger CSS di kolom pencarian.

    lihat gambar dibawah
    Recent posts ( Postingan terbaru) ala mastimon

    Jagan lupa disimpan

    jika sudah selesai  postingan terbaru belum bisa tampil di homepage, Karena sobat baru saja menyelesaikan langkah pertama. untuk selanjutnya yuk simak dibawah

    Baca juga : cara membuat about me keren di blog

    langkah kedua


    agar bisa menampilkan postingan terbaru sobat membutuhkan kode CSS yang harus diletakkan didalam widget HTML/javascript

    cara bagaimana ?

    langsung aja sobat copas kode ini
    <div class='artikel-terbaru'>
    <script>
    function artikelterbaru(e){document.write("<ul>");for(var t=0;t<e.feed.entry.length;t++){for(var r=0;r<e.feed.entry[t].link.length&&"alternate"!=e.feed.entry[t].link[r].rel;r++);var n="<li><a href="+("'"+e.feed.entry[t].link[r].href+"'")+'">'+e.feed.entry[t].title.$t+"</a> </li>";document.write(n)}document.write("</ul>")}
    </script>
    <script src="/feeds/posts/summary/?max-results=10&alt=json-in-script&callback=artikelterbaru"></script>
    </div>
    Nb : angka yang berwarna merah adalah jumlah Artikel yang akan di tampilkan.
    silahkan ganti sesuai keinginan sobat.

    Selanjutnya sobat masuk dasbor blogger > tata letak >  tambah widget > pilih HTML/JavaScript 



    Kemudian ikuti gambar dibawah

    kemudian isi judul dengan nama Postingan Terbaru > lalu paste kode tersebut didalam kolom yang sudah di sediakan

    Recent posts (Postingan terbaru) ala mastimon
    terakhir simpan

    selamat recent posts keren sobat sudah jadi. silahkan sobat lihat tampilan blog untuk melihat hasilnya

    Cukup sampai disini pembahasan mengenai cara membuat recent post ala mastimon. selamat mencoba dan semoga sukses.
    Baca juga : cara jitu membuat blog yang SEO


    Posting Komentar

                   
             
    close
       
            Banner iklan disini