Membuat Entri Post Bergambar pada Blog




Selamat Hari Ini sobat Blogger :)

Kali ini saya akan membagikan sedikit trik mengenai cara membuat Entri post atau juga bisa disebut sebagai post populer bergambar. Seperti yang kita bisa lihat pada gambar di bawah, ini adalah contohnya. 
Pada dasarnya entri post / populer post diadakan untuk sarana agar memudahkan pengunjung dapat melihat isi postingan anda yang lain secara langsung tanpa harus mencari. Tentunya akan sangat bermanfaat bagi pengunjung jika kebetulan postingan yang sedang ia cari - cari ada terselip pada entri post anda, tentunya akan bermanfaat juga bagi anda sebagai pembuat postingan tersebut.
Yang menjadi pembeda daridapa entri post yang akan saya bagikan ini dengan entri post lain atau seperti saat awal membuat blog yang di mana isi dari entri hanya bertuliskan judul postingan saja, dan kelebihan dari entri post yang akan saya bagikan ini tentunya memiliki gambar sebagai petunjuk pertama, dapat di atur besar atau kecilnya gambar postingan pada entri dan ukuran lain yang bisa kita sesuaikan sendiri, 
adanya petunjuk lain yaitu kita dapat melihat jumlah komentar yang ada pada pstingan kita.


Berikut cara memasang Widget/Gadget Entri Post atau Populer Post pada blog anda :

"bagi yang sudah tau bisa langsung copy code script di bawah lalu mem paste kannya ke 
HTML/java script"

1. Masuk ke Blogger Sobat atau kesin www.blogger.com

2. Pada halaman Utama pilih terlebih dahulu blog yang ingin sobat gunakan.
    lalu klik area seperti tanda bulat berwarna merah untuk masuk ke dashboard 

3. klik tata letak

4. Tambahkan Gadget. sobat bisa pilih add gadget di mana saja sesuai selera untuk menentukan dimana Entri post akan bersemayam, lalu klik


5. Setelah itu maka akan terbuka tab baru seperti gambar di bawah, lalu klik HTML/java script / tanda +



6. Dan Akan terbuka tampilan seperti gambar di bawah ini


7. Copy lalu Paste Code script di bawah ini ke dalam kotak konten, seperti gambar di atas.



<style>
#random-posts img {
    border-radius: 10px;
    float: left;
    margin-right: 5px;
    width: 100px;
    height: 100px;
    background-color: #F5F5F5;
    padding: 3px;
    transition: all 0.2s linear 0s;
}

#random-posts img:hover {
    opacity: 0.6;
}

ul#random-posts {
    list-style-type: none;
    padding: 0px;
}

#random-posts a {
    font-size: 9px;
    text-transform: uppercase;
    padding: 0px auto 5px;
}

#random-posts a:hover {
    text-decoration: none;
}

.random-summary {
    font-size: 0px;
    background: none;
    padding: 5px;
    margin-right: 8px;
}

#random-posts li {
    margin-bottom: 0px;
    border-bottom: 1px solid #EEEEEE;
    padding: 4px;
}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>





var randomposts_number = 7;
var randomposts_chars = 100;
var randomposts_details = 'yes';
var randomposts_comments = 'Comments';
var randomposts_commentsd = 'Comments Disabled';
var randomposts_current = [];
var total_randomposts = 0;
var randomposts_current = new Array(randomposts_number);




function randomposts(json) {
    total_randomposts = json.feed.openSearch$totalResults.$t
}
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>');

function getvalue() {
    for (var i = 0; i < randomposts_number; i++) {
        var found = false;
        var rndValue = get_random();
        for (var j = 0; j < randomposts_current.length; j++) {
            if (randomposts_current[j] == rndValue) {
                found = true;
                break
            }
        };
        if (found) {
            i--
        } else {
            randomposts_current[i] = rndValue
        }
    }
};

function get_random() {
    var ranNum = 1 + Math.round(Math.random() * (total_randomposts - 1));
    return ranNum
};
</script>
<script type='text/javaScript'> 
function random_posts(json) {
    for (var i = 0; i < randomposts_number; i++) {
        var entry = json.feed.entry[i];
        var randompoststitle = entry.title.$t;
        if ('content' in entry) {
            var randompostsnippet = entry.content.$t
        } else {
            if ('summary' in entry) {
                var randompostsnippet = entry.summary.$t
            } else {
                var randompostsnippet = "";
            }
        };
        randompostsnippet = randompostsnippet.replace(/<[^>]*>/g, "");
        if (randompostsnippet.length < randomposts_chars) {
            var randomposts_snippet = randompostsnippet
        } else {
            randompostsnippet = randompostsnippet.substring(0, randomposts_chars);
            var whitespace = randompostsnippet.lastIndexOf(" ");
            randomposts_snippet = randompostsnippet.substring(0, whitespace) + "&#133;";
        };
        for (var j = 0; j < entry.link.length; j++) {
            if ('thr$total' in entry) {
                var randomposts_commentsnum = entry.thr$total.$t + ' ' + randomposts_comments
            } else {
                randomposts_commentsnum = randomposts_commentsd
            }; if (entry.link[j].rel == 'alternate') {
                var randompostsurl = entry.link[j].href;
                var randomposts_date = entry.published.$t;
                if ('media$thumbnail' in entry) {
                    var randompoststhumb = entry.media$thumbnail.url
                } else {
                    randompoststhumb = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihx45iwiHLDpRcvgDlH2d3DKU6nnEHjucaIZL15wMxOxJclxcEIaPNZdL-5tjqwJvyXNrxwfncpYtREs6V-n7XIOyIy_rQtO9m2-4ByVfQDdFZY6csLoWN8PUTHHJgl7D-VwUDdOVQD90/s1600/no_thumb.png"
                }
            }
        };
        document.write('<li>');
        document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="' + randompoststitle + '" src="' + randompoststhumb + '"/></a>');
        document.write('<div><a href="' + randompostsurl + '" rel="nofollow">' + randompoststitle + '</a></div>');
        if (randomposts_details == 'yes') {
            document.write('<span><div  class="random-info">' + randomposts_date.substring(8, 10) + '.' + randomposts_date.substring(5, 7) + '.' + randomposts_date.substring(0, 4) + ' - ' + randomposts_commentsnum) + '</div></span>'
        };
        document.write('<br/><div class="random-summary">' + randomposts_snippet + '</div><div style="clear:both"></div></li>')
    }
};
getvalue();
for (var i = 0; i < randomposts_number; i++) {
    document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=' + randomposts_current[i] + '&max-results=1&callback=random_posts\"><\/script>')
};
</script>
</ul>

8. Selesai, Lalu lihat Hasilnya 




Sekian yang bisa saya bagikan kali ini mengenai cara "Membuat Entri Post Bergambar pada Blog"
Selebihnya anda bisa merubah ukuran dari tanda yang saya berikan pada script di atas, lebih tepatnya yang berwarna Merah adalah ukuran yang bisa anda rubah sesuai keinginan sobat. Sebelum dan Sesudah saya ucapkan Terima Kasih . .