Cara memasang Related Post Responsive Dan Keren


Cara memasang Related Post Responsive Dan Keren - Hallo sobat sobat Blogger maupun sobat netizen semuanya, Selemat datang kembali di Blog bang ariel, Khususnya jika kalian adalah first time visitornya blog saya, Saya ucapkan selamat membaca artikel ini.



Tak terasa waktu sudah sangat siang di daerah saya ini, Waktu menunjukan pukul 10.00 am, Dan saya baru saja dapat ide untuk membagikan sebuah informasi tutorial buat kalian semua, Tutorial ini mungkin akan membantu memperbaiki tampilan blog kalian semua.

Apa sih yang admin maksud ?
Yeahh seperti yang tertera di judul, Sekaramg kita akan membuat sebuah related box yang keren dan juga responsive, Pokok nya enak di pandang dehh 🤣,

Jika kalian memang tertarik, mari kita lanjutkan pembelajarannya, Tapi jika tidak kalian bisa membaca artikel lainnya yang terdapat pada blog saya , Hehehe 😂

Mari langsung saja kita ke inti pembahasan untuk langsung membuat related box ini, Di harapkan kalian fokus ya, Jangan lewatkan satu kalimat pun, Jika terlewat sudah bisa di pastikan pembuatan related box tidak akan berhasil, Jadi fokus ya sob 🤗.

Langkah - Langkah


  1. Silahkan kalian login terlebih dahulu pada akun blogger kalian masing masing.
  2. Selanjutnya pilih menu template.
  3. Lalu pilih opsi edit html.
  4. Selanjutnya salin kode css di bawah ini tepat diatas kode ]]></b:skin>.
    #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. Lalu selanjutnya, Silahkan kalian salin kode di bawah ini dan letakan tepat di bawah kode <data:post.body/>.
    <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 : 'https://www.ariel.web.id', // 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 ariel.web.id
    };
    </script>
    <script type="text/javascript" src="http://cdn.rawgit.com/Dihak/bloggerku/5048c6bd13c0d02a5ae41cfb6827a33a18d53d50/relatedbox/relatedbox.min.js"></script>
    

  6. Selanjutnya perlu kalian ketahui, Ubah Url berwarna merah pada kode diatas, yaitu yang https://www.ariel.web.id, Ubah menjadi Url blog kalian.
  7. Setelah itu, Silahkan kalian savae dan lihat lah hasilnya, Bakal keren banget dahh 🤣.
Didalam beberapa kasus, Tepat nya dalam beberapa template blog, Kalian akan menemukan setidaknya 3 <data:post.body/>, Jadi saya hanya bisa menyarankan, untuk kalian coba satu persatu, Sampai related box ini muncul pada blog kalian.

Dengan demikian kalian bisa memanfaat kan related box ini untuk menaikan visitor blog kalian, Dengan adanya related box ini , Tentunya menjadi daya tarik tersendiri, agar para visitor membaca artikel dalam blog kalian.

Penutup

Demikianlah artikel ini bisa saya sampaikan kepada kalian semua, Semoga bisa menjadi manfaat tersendiri untuk kalian semua, jangan lupa untuk selalu mengunjungi blog saya ini, dan juga sampai jumpa lagi pada update artikel selanjutnya, Cukup sekian dari saya.

Terima kasih.

0 Response to "Cara memasang Related Post Responsive Dan Keren"

Post a Comment

Silahkan Berkomentar Dengan Baik, Dilarang !
- Sara
- Provokasi
- Menggunakan Kata Kasar
- Spam
- Phissing
- Sebar Url
- Dan Lain Lain yang melanggar ketentuan Google.

Berkomentarlah Dengan Sopan Dan Santun,

Jika komentar kalian melanggar ketentuan blog bang ariel, Dalam Sekejap Komentar Anda Akan Saya Hapus.

Terimakasih.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel