Cara Membuat Artile Terkait dengan Tumbnail Gambar di Blogspot

pada kesempatan kali ini, saya akan membahas tentang blog, soalnya saya baru sedikit bikin posting tentang blogging, yasudah saya tambah lagi deh tips blognya, oke langsung saja ke tutorialnya.
Cara Membuat Artikel Terkait dengan Gambar di Blog
Cara Membuat Artikel Terkait dengan Gambar di Blog

    1. Masuk Ke Blogger
    2. Pergi ke Template → Edit HTML
    3. Cari kode </head>
    4. Kemudian copy code dibawah ini tepat diatas kode </head>

    <!--Start Related Posts-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>
    #related-posts {
    float:center;
    text-transform:none;
    height:90%;
    min-height:90%;
    padding-top:0px;
    padding-left:8px;
    }
    #related-posts h2{
    font-size: 1.0em;
    font-weight: bold;
    color: white;
    font-family: Rockwell,Georgia,Serif;
    margin-bottom: 0.8em;
    margin-top:0em;
    padding-bottom:0em;
    }
    #related-posts a{
    color:white;
    }
    #related-posts a:hover{
    color:white;
    }
    #related-posts a:hover {
    background-color:#080;
    }
    </style>
    <script type='text/javascript'>
    var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3dzFSVaBv16tTiuuxuChQUJWzKg2kxdBh8wlevfDENnJCTni8LQG60dDS2qHEbFS7_kvcHzU_sL6mmHuTU5LIfHnex1tSAPKDgZ4NMNcfDwXSeN2M7ghIdurGUcBR_pV8bm1qNLn41cj8/s1600/No+Image.jpg&quot;;
    var maxresults=6;
    var splittercolor=&quot;#000000&quot;;
    var relatedpoststitle=&quot;Silahkan Baca Ini Juga:&quot;;
    </script>
    <script src='http://yourjavascript.com/22811210832/RelatedPoststhumb3.txt.js' type='text/javascript'/>
    </b:if>
    <!--End Related Post-->

    5. Kemudian cari kembali kode <data:post.body/>
    6. Bila sudah ditemukan, copy kode dibawah ini tepat dibawah kode <data:post.body/>

    <!-- Start Related Posts-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-posts'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast != &quot;true&quot;'>
    </b:if>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=7&quot;' type='text/javascript'/></b:loop>
    <script type='text/javascript'>
    removeRelatedDuplicates_thumbs();
    printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
    </script>
    </div><div style='clear:both'/>
    </b:if>
    <!-- End Related Posts-->

     7. Simpan template, dan lihat hasilnya


Catatan : Berikut adalah kode yang anda bisa ganti sesuai keinginan anda

    Menampilkan jumlah artikel terkait yang muncul max-results=7
    Judul artikel terkait var relatedpoststitle=&quot;Silahkan Baca Ini Juga:&quot;;
    Warna Tulisan var splittercolor=&quot;#000000&quot;;

Membuat Menu Horizontal Keren di Blogspot

Langkah-langkah  Cara Membuat Menu Horizontal Keren di Blog :

1. Log in ke akun Blog Sobat
2. Kemudian anda klik tata letak -> Tambah gadget/widget -> Pilih HTML/JavaScript
3. Copy kode dibawah ini dan paste pada kotak HTML/JavaScript dan letakkan diatas header (atur di tataletak Bloger):

<style type="text/css">
/* Menu horizontal untuk Blogger http://kursusgratis4u.blogspot.com/ */
div.topbar {
height: 16px;
background: #e16031;
}
ul.claybricks {
font-weight: bold;
width: 100%;
background: #e3e490;
padding: 6px 0 6px 0;
margin: 0;
text-align: left;
font-family: calibri;
}
ul.claybricks li {
display: inline;
}
ul.claybricks li a {
color: black;
padding: 6px 8px 4px 8px;
margin-right: 20px;
text-decoration: none;
}
ul.claybricks li a:hover, ul.claybricks li a.selected {
color: white;
background: #5d4137;
background: -moz-linear-gradient(top, #5d4137 0%, #41251b 12%, #2c0f05 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5d4137), color-stop(12%,#41251b), color-stop(100%,#2c0f05));
background: -webkit-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: -o-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: -ms-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d4137', endColorstr='#2c0f05',GradientType=0 );
-moz-box-shadow: 0 0 5px #595959;
-webkit-box-shadow: 0 0 5px #595959;
box-shadow: 0 0 5px #595959;
padding-top: 17px;
padding-bottom: 6px;
}
/* http://softwaremaniapc.blogspot.com/ */
</style>
<div class="topbar">
</div>
<ul class="claybricks">
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Disclaimer</a></li>
<li><a href="#">tgkboy</a></li>
</ul>

Keterangan :

# :  silahkan anda ganti dengan URL yang diinginkan.

4. Jangan lupa save
5. Lihat tampilan menu horizontal anda.

6. Semoga bermanfaat

7. Jangan lupa tinggalkan pesan.