• Home
  • About
  • Contact
  • Privacy
  • Sign in
Search
34.08 C
Banjarmasin
Sunday, June 15, 2025
  • Home
  • About
  • Contact
  • Privacy
  • Sign in
Desainweb.my.id
  • Home
  • News
    • All
    • LifeStyle
    • Sosial Media
    • Woman
    • Keuangan
    • Videos
      • VideoS
      • Products
      • Tutorial
      • Parse HTML
      • Kamus HTML
      • More Menu
        • Home
        • About Us
        • Contact Us
        • Privacy Policy
        • TOS
        • CSS Minifier
        • Kamus HTMLNew
        • Parse HTMLNew
        Desainweb.my.id
        Search
        Home Tutorial Cara Memasang Related Post Dengan Scroll
        Tutorial

        Cara Memasang Related Post Dengan Scroll

        Membuat Related Post tanpa gambar pada blog biasanya dilakukan di bawah Postingan. Meskipun ada yang ditempatkan di sidebar, namun lebih sering kita
        Kuamangmedia.com
        Kuamangmedia.com
        13 Jul, 2021 0 0
        Facebook
        Twitter
        Telegram
        WhatsApp

        DESAINWEB.MY.ID - Cara Memasang Related Post Dengan Scroll - Related post memang menjadi suatu kewajiban tersendiri bagi para blogger Apalagi Dengan Menggunakan Scroll, Membuat Suatu widget berupa Related Post Yang menjadi ramping terlebih lagi tidak membuat tampilan suatu blog menjadi kurang memadai. Untuk itu disini saya terlebih dahulu akan menjelaskan kepada Anda sekalian. Pengertian Dari Related post tersebut.

        Pengertian Dari Arti kata Related Post " Artikel terkait "
        Cara Memasang Related Post Dengan Scroll

        Artikel Terkait itu bahasa Indonesianya. Namun para blogger lebih familiar dengan sebutan RELATED POST. Blog ini menggunakan bahasa RELATED ARTICLE, kebenaran bawaan dari template yang diberikan oleh mas kolis secara cuma-cuma. Tujuan cuma satu membantu para Pembaca / Pengunjung / Visitor agar bisa lebih gampang mencari postingan /artikel kita yang menyerupai atau satu Kategori / Label dengannya (postingan).

        Ada beberapa Cara Membuat Related Post Pada Blog
        1. Dengan membuat Related Post tanpa gambar

        2. Dengan membuat Related Post dengan gambar (thumbail) Saya jelasin dulu yah satu-satu biar lebih paham.

        1. Membuat Related Post tanpa gambar

        Membuat Related Post tanpa gambar pada blog biasanya dilakukan di bawah Postingan. Meskipun ada yang ditempatkan di sidebar, namun lebih sering kita temukan di bawah postingan.

        Ada banyak cara para blogger membuat related post di dalam blog yang mereka kelola. Antara lain dengan menggunakan Scroll dan tanpa menggunakan Scroll. Semua tergantung selera masing-masing.

        Pada blog kali ini sementara menggunakan Related Post tanpa Scroll. Terlihat lebih simpel sih. Tanpa menggunakan Scroll biasanya paling banyak artikel terkaitnya 10 artikel (lebih banyak juga tidak apa-apa), dan hanya di kaitkan pada 1 label atau kategori.

        Apabila Label / Kategori yang anda buat didalam blog anda lebih dari 1 Label/Kategori biasanya yang di kaitkan hanya 1 label / kategori saja. Sedangkan yang menggunakan Scroll bisa lebih dari 1 kategori / label.

        2. Membuat Related Post dengan gambar (thumbail)

        Penjelasannya hampir sama saja dengan diatas, bedanya ya related post menggunakan Gambar. Kelemahannya adalah apabila dalam postingan kawan-kawan tidak menggunakan Gambar, maka gambarnya tidak muncul.

        Membuat Related Post dengan gambar (thumbail) ada 2 cara juga, pertama dengan menyatukan script (kode) related post pada blog kita. Cara kedua adalah dengan memanfaatkan pihak ketiga. Yang paling populer adalah menbuat related post dengan Linkwithin.

        Linkwithin adalah salah satu penyedia script untuk memasang related post di dalam blog kita. Masih ada lagi situs-situs pihak ketiga yang menyediakan cara ini, tapi Linkwihtin lebih familiar di mata para blogger.

        Menggunakan related post ini semua tergantung anda mau pilih yang mana. Yang penting anda paham apa fungsi dan kegunaan related post.

        Di atas adalah untuk suatu pengertian dan pemahaman Mengenai Widget Related Post Pada Blog yang bisa kalian baca dan pahami tentunya. Sebagai seorang blogger harus mampu memahami dan mengerti sisi dari cara kerja suatu blog yang telah di kelola tersebut.

        Nah kembali pada topik pembahasan kita kali ini mengenai Cara Memasang Related Post Dengan Menggunakan Scroll. Untuk itu silahkan simak dan ikuti tutorial berikut yang akan saya jelaskan untuk anda.

        Cara Memasang Related Post Dengan Scroll

        Disini saya akan memberikan suatu tutorial yang tentunya untuk anda belum paham dan cara kerjanya, pada kesempatan kali ini adalah tutorial yang akan mengenai widget tersebut membuat tampilan blog lebih menarik. berikut ini adalah tutorial dan cara-cara nya. Jika ingin mempelajari dan memahami cara kerjanya silahkan ikuti berikut ini.

        • Terlebih dahulu anda wajib login ke dalam blogger
        • Setelah itu Lihat Pada bagian Menu " Tema " Masuk ke Edit Template di blog Anda tersebut.
        • Sekarang yang anda lakukan dengan cara mencari kode berikut ini dengan memakai CTRL +F :<div class='post-footer-line post-footer-line-1'>

        Jika anda telah menemukan kode yang ada di atas, maka di bagian kode tersebut ada 2 kode yang sama, Maka anda pilih saja kode yang pertama sekali pada saat anda mau mencari kode di atas. selanjutnya ikuti lah pada bagian berikut ini.

        Di bawah ini anda melihat kode yang sungguh banyak, Maka kode ini nantinya akan di pasang ke dalam blog anda. Copy dan pastekan di bawah kode yang ada di atas. Jika tidak tahu kode yang saya maksud disini adalah kode berikut ini :

        •  <div class='post-footer-line post-footer-line-1'>
        Pakailah kode ini :
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <H2>Artikel Terkait:</H2>
        <Div class='rbbox'>
        <Div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
        <Div id='albri'/>
        <Script type='text/javascript'>
        var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
        var maxNumberOfPostsPerLabel = 4;
        var maxNumberOfLabels = 10;
        maxNumberOfPostsPerLabel = 100;
        maxNumberOfLabels = 3;
        function listEntries10(json) {
        var ul = document.createElement(&#39;ul&#39;);
        var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
        json.feed.entry.length : maxNumberOfPostsPerLabel;
        for (var i = 0; i &lt; maxPosts; i++) {
        var entry = json.feed.entry[i];
        var alturl;
        for (var k = 0; k &lt; entry.link.length; k++) {
        if (entry.link[k].rel == &#39;alternate&#39;) {
        alturl = entry.link[k].href;
        break;
        }
        }
        var li = document.createElement(&#39;li&#39;);
        var a = document.createElement(&#39;a&#39;);
        a.href = alturl;
        if(a.href!=location.href) {
        var txt = document.createTextNode(entry.title.$t);
        a.appendChild(txt);
        li.appendChild(a);
        ul.appendChild(li);
        }
        }
        for (var l = 0; l &lt; json.feed.link.length; l++) {
        if (json.feed.link[l].rel == &#39;alternate&#39;) {
        var raw = json.feed.link[l].href;
        var label = raw.substr(homeUrl3.length+13);
        var k;
        for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
        var txt = document.createTextNode(label);
        var h = document.createElement(&#39;b&#39;);
        h.appendChild(txt);
        var div1 = document.createElement(&#39;div&#39;);
        div1.appendChild(h);
        div1.appendChild(ul);
        document.getElementById(&#39;albri&#39;).appendChild(div1);
        }
        }
        }
        function search10(query, label) {
        var script = document.createElement(&#39;script&#39;);
        script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
        + label +
        &#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
        script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
        document.documentElement.firstChild.appendChild(script);
        }
        var labelArray = new Array();
        var numLabel = 0;
        <b:loop values='data:posts' var='post'>
        <b:loop values='data:post.labels' var='label'>
        textLabel = &quot;<data:label.name/>&quot;;
        var test = 0;
        for (var i = 0; i &lt; labelArray.length; i++)
        if (labelArray[i] == textLabel) test = 1;
        if (test == 0) {
        labelArray.push(textLabel);
        var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
        labelArray.length : maxNumberOfLabels;
        if (numLabel &lt; maxLabels) {
        search10(homeUrl3, textLabel);
        numLabel++;
        }
        }
        </b:loop>
        </b:loop>
        </Script>
        </Div>
        <script type="text/javascript">RelPost();</script>
        </Div>
        </b:if>

        Simpan di blog anda , setelah selesai lihat hasilnya di blog yang anda baru selesai pakai kode yang di atas tersebut. Setelah itu baru selesai.


        Tambahan kepada anda :
        1. <h2>Artikel Terkait:</h2> bisa anda ganti sesuai keinginan anda ( misal : Related post, artikel yang berhubungan dll ) atau anda juga bisa menghapusnya.
        2. <div style="border: 1px solid #ccc; height: 200px; margin: 0; overflow: auto; padding: 10px;"> adalah tampilan kotak artikel terkait tsb. Margin : jarak antara kotak dengan main, Padding : jarak antara isi artikel terkait dengan kotak, border : batas, 1px tsb adalah tebal batasnya, solid adalah jenis batasnya dan #ccc adalah warna batasnya, Height : tinggi kotak artikel tekait ( kalau anda rubah kode 200px menjadi 0 maka kotak related post yang tampil akan menyesuaikan dengan jumlah artikel terkait. Sedangkan jika tetap 200px maka kotak tsb akan otomatis memberi tombol scrool apabila artikel terkait tsb sudah melebihi batas.
        3. maxNumberOfPostsPerLabel = 100; adalah jumlah posting atau artikel terkait yang ingin di tampilkan maxNumberOfLabels = 3; adalah jumlah label terkait yang ingin ditampilkan

        Nah bagaimana menurut anda kira-kira ? Begitu mudah bukan mengetahui dan memahami cara kerja tutorial yang saya berikan pada artikel ini. Namun jika anda masih dalam kebingungan atau masih kurang paham, Silahkan anda bisa meninggalkan komentar yang saya sudah sediakan untuk anda, Saya akan coba bantu dimana permasalahan ketika sedang mengikuti dan mengetahui cara kerja tutorialnya. Sekian dan terimakasih.

        Via Tutorial
        Facebook
        Twitter
        Telegram
        WhatsApp
        Older Posts
        Newer Posts 4 Kondisi Kamu Ingin Butuh Pinjaman Tercepat
        Kuamangmedia.com
        Kuamangmedia.com Portal Berita Terpercaya, Menyajikan Ragam Informasi Bisnis, Technology, Pendidikan, Otomotif, Saham, Investasi, Aplikasi, Software, dan Berita Daerah.

        You may like these posts

        An3Disc - Premium Blogger Template Modifikasi

        Calegnya Responsive Blogger Template

        Education WordPress Theme

        Post a Comment

        Popular Post

        Desainweb Toko Online Mirip Tiktok

        Reyvan Mustofa- 21:17 0
        Desainweb Toko Online Mirip Tiktok
        Promo Rp390.000 Rp.150.000 Varian Pro Pro Max Desainweb Toko Online Mirip Tiktok Desainweb.my.id menerima Jasa Pembuatan…

        Most Popular

        Yoast WooCommerce SEO Premium

        Yoast WooCommerce SEO Premium

        22:20
        6 Cara Mendapatkan Uang Lewat Blog Bahasa Indonesia

        6 Cara Mendapatkan Uang Lewat Blog Bahasa Indonesia

        16:23
        Yoast WordPress SEO Premium 16.7 (Update)

        Yoast WordPress SEO Premium 16.7 (Update)

        17:19

        Category

        Adsense Blogger Keuangan News Products Template Tutorial Videos

        Editor Post

        Desainweb Toko Online Murah Indonesia

        Desainweb Toko Online Murah Indonesia

        19:34
        VioMagz v.4.6.0 Template Blogger Premium

        VioMagz v.4.6.0 Template Blogger Premium

        01:00
        Desainweb Toko Online Mirip Tiktok

        Desainweb Toko Online Mirip Tiktok

        21:17

        Popular Post

        Yoast WooCommerce SEO Premium

        Yoast WooCommerce SEO Premium

        22:20
        6 Cara Mendapatkan Uang Lewat Blog Bahasa Indonesia

        6 Cara Mendapatkan Uang Lewat Blog Bahasa Indonesia

        16:23
        Yoast WordPress SEO Premium 16.7 (Update)

        Yoast WordPress SEO Premium 16.7 (Update)

        17:19

        Populart Categoris

        • Adsense3
        • Keuangan1
        • News3
        • Products14
        • Template1
        • Tutorial25
        • Videos2
        Desainweb.my.id

        About Us

        Jasa Pembuatan Website Company Profile , Web Sekolah, Toko Online, Aplikasi, Android, IOS, Desain Undangan, Baleho, Neon BOX,

        Follow Us

        © 2020 Desainweb.my.id
        • Disclaimer
        • Privacy
        • Advertisement
        • Contact Us