Search
24 C
en-GB
  • 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
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

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

Desainweb Toko Online Murah Indonesia

Desainweb Toko Online Murah Indonesia

19:34
Desainweb Toko Online Mirip Tiktok

Desainweb Toko Online Mirip Tiktok

21:17
Mengatasi Situs yang di Tolak AdSense

Mengatasi Situs yang di Tolak AdSense

16:46

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

Desainweb Toko Online Murah Indonesia

Desainweb Toko Online Murah Indonesia

19:34
Desainweb Toko Online Mirip Tiktok

Desainweb Toko Online Mirip Tiktok

21:17
Mengatasi Situs yang di Tolak AdSense

Mengatasi Situs yang di Tolak AdSense

16:46

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