Cara Membuat Related Box Untuk Blogger

Cara Membuat Related Box Untuk Blogger
Cara Membuat Related Box Untuk Blogger
5/5 (1)

Cara Membuat Related Box Untuk Blogger » Hallo juragan, kali ini admin ingin berbagi tutorial membuat Related Box di blogger/blogspot, Realated blog ini sebenarnya mirip dengan punyanya kaskus dulu, Namun sekarang entak kenapa kaskus sudah tidak lagi menggunakanya.

Oia Related Box ini berbeda lo dengan Related post pada umumnya, Related Box adalah related yang hanya akan muncul jika blog di scroll kebawah, dengan related box ini saya jamin blog juragan akan meningkat pagr viewnya.

Oke tanpa banyak basa-basi lagi langsung saja simak yuk Cara Membuat Related Box Untuk Blogger

Cara Membuat Related Box Untuk Blogger

  1. Masuk pada halaman dasboard blogger kamu.
  2. Kemudian pilih Tema/Template » Edit HTML
  3. Cari code 
    ]]></b:skin>
  4. Lalu Pastekan code dibawah ini tepat di atas tersebut 
     #related-box {
    width: 350px;
    overflow: hidden;
    height: 200px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #fff;
    box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.29);
    transition: all 0.5s;
    }
    #related-box .header h2 {
    font-size: 12px;
    margin: 0;
    }
    #related-box .header {
    padding: 10px 15px;
    color: #fff;
    background: #00ABFF;
    }
    #related-box .tombol {
    position: absolute;
    top: 10px;
    right: 15px;
    }
    #related-box .item {
    padding: 15px;
    width: 320px;
    float: left;
    }
    #related-box .list {
    height: 120px;
    overflow: hidden;
    width: 600px;
    transition: all 0.5s;
    }
    #related-box .gambar img {
    height: 100px;
    float: left;
    width: 50%;
    margin-right: 10px;
    }
    #related-box .header a {
    color: #fff;
    }
    #related-box .info {
    font-size: 12px;
    }
    #related-box .navigation a {
    float: left;
    border: 1px solid rgba(0, 0, 0, 0.32);
    margin-left: 10px;
    font-size: 10px;
    width: 10px;
    padding: 3px;
    }
    #related-box .navigation {
    position: absolute;
    width: 60px;
    right: 20px;
    bottom: 20px;
    }
    .relatedshow {
    position: fixed;
    bottom: 190px;
    right: -50px;
    transition: all 0.5s;
    }
    .relatedshow a {
    color: #fff;
    background: #00ABFF;
    padding: 7px 15px;
    box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.29);
    }
  5. Cari lagi kode 
    <data:post.body/>
  6. dan Copy Kode dibawah ini, kemudian letakan di atas kode tersebut 
     <script type=”text/javascript”>
    // Related Article Settings
    var labelArray = [<b:if cond=’data:post.labels’><b:loop values=’data:post.labels’ var=’label’>&quot;<data:label.name/>&quot;<b:if cond=’data:label.isLast != &quot;true&quot;’>, </b:if></b:loop></b:if>];
    var relatedbox = {
    homepage : ‘http://www.bloggerku.com’, // Change with your homepage url
    title: ‘Related Post’, // Widget Title
    post: 3, // Max post
    date: true, // Show date
    scr: 500, // Show the related box if scroll more than 500
    showcredit: true // Add credit link to support bloggerku.com
    };
    </script>
    <script type=”text/javascript” src=”http://cdn.rawgit.com/Dihak/bloggerku/5048c6bd13c0d02a5ae41cfb6827a33a18d53d50/relatedbox/relatedbox.min.js”></script>
  7. Kemudian ganti pada bagian text yang bewarna putih sesuai dengan keinginan juragan
     var relatedbox = {
    homepage : ‘http://www.bloggerku.com‘, // Change with your homepage url
    title: ‘Related Post‘, // Widget Title
    post: 3, // Max post
    date: true, // Show date
    scr: 500, // Show the related box if scroll more than 500
    showcredit: true // Add credit link to support bloggerku.com
    };
  8. Terahir klik Save/Simpan Template

Sekian artikel Cara Membuat Related Box Untuk Blogger semoga artikel ini bisa menjadi asbab kesuksesan teman-teman blogger yang bersedia membaca artikel ini.

 

Sumber Ilmu

Nilai Kualitas Konten

2 thoughts on “Cara Membuat Related Box Untuk Blogger

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *