Blog Seputar Tutorial Komputer, Printer, Windows, Android, Blackberry, Dan Informasi Teknologi

Cara Membuat Artikel Terkait Dengan Scroll

Cara Mudah Membuat Artikel Terkait Dengan Scroll. Artikel terkait adalah sebuah artikel yang terkait dengan artikel lainya yang muncul berdasarkan label, Sehingga mempermudah pengunjung untuk membaca artikel yang berkaitan dengan yang sedang sedang dibacanya. sebenarnya cara membuat artikel terbaik sangat banyak, karena artikel terkait juga banyak jenis-jenisnya mulai dari artikel terkait dengan gambar, judulnya saja, dan masih banyak lainya.
Cara Mudah Membuat Artikel Terkait Dengan Scroll

Pada kesempatan kali ini kita akan membahas tentang bagaimana cara membuat artikel terkait dengan scroll pada sebuah blog, kenapa menggunakan scroll? ada banyak manfaatnya membuat artikel terkait dengan scroll, diatara lain adalah menghemat ruang artikel terkait tersebut, terlihat rapih karna tidak terlalu memanjang, dan juga lebih simpel.
Cara Mudah Membuat Artikel Terkait Dengan Scroll

Bila kawan ingin membuat artikel terkait menggunakan scroll pada blog masing-masing, dapat mengikuti langkah-langkah di bawah ini

Cara Mudah Membuat Artikel Terkait Dengan Scroll

1. Login ke blog anda
2. Masuk ke pengaturan template
3. Kemudian pilih Edit template
4. Cari kode scricpt ]]></b:skin> gunakan ( CTRL+F ) untuk mempermudah pencarian
5. Jika sudah ketemu silahkan anda letakan kode dibawah ini tepat di atas kode ]]></b:skin>
.rbbox{border:1px solid rgb(192,192,192);padding:5px;background-color:#f0f0f0;-moz-border-radius:5px;margin:5px}.rbbox:hover{background-color:rgb(255,255,255)}
6. Kemudian cari kode <data:post.body/>, Jika kode tersebut lebih dari satu silahkan anda pilih yang terahir sendir, atau anda bisa mencobanya satu persatu.
7. Jika sudah ketemu silahkan anda letakan kode dibawah ini tepat di bawah <data:post.body/>
<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 = 10; 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>

Keterangan :

  • Tulisan yang berwarna kunining adalah nama artikel terkait tersebut, anda bisa menggantinya dengan Related Post, Artikel Lainya, atau yang sesuai dengan keinginan anda
  • Tulisan yang berwarna Biru adalah tinggi artikel terkait tersebut, silahkan di sesuaikan
  • Tulisan yang berwarna Merah untuk menampilkan jumlah post yang akan tampil di artikel terkait, rubah sesuai keinginan anda
8. Jika sudah silahkan simpan template dan lihat hasilnya

Sekian pembahasan kita tentang cara membuat artikel terkait menggunakan scroll, silahkan di coba pada blog masing-masing, bila ada pertanyaan silahkan tinggalkan pertanyaan anda pada kotak komentar yang tersedia dibawah. Selamat mencoba dan semoga bermanfaat

Previous
Next Post »

5 komentar

ujung timur delete December 26, 2014 at 6:35 AM

makasih infonya sob. bermanfaat sekali

wong cilik delete December 26, 2014 at 3:37 PM

sma-sama bos, semoga bermanfaat :D

Muhamad Fajrin delete January 15, 2015 at 10:22 PM

Bos ane kok ga bisa bisa ya kodenya??udah beberapa kali coba. Bingung nih

wong cilik delete January 16, 2015 at 6:12 AM

mgkin mslah pada peletakanya. kode biasanya lebih dari satu bos,, pilih yang terahir atau dicoba satu persatu.. silhkan dicoba lagi bos :D

dani hamdani delete July 21, 2015 at 8:49 PM

hamdani
terimakasih gan untuk tipsnya,aye tunggu tips selanjutnya.

PERINGATAN..!!
1. Berkomentarlah Sesuai Judul Diatas Dengan Sopan dan Jangan Spaming.!!
2. Dilarang Berkomentar Yang Mengandung Unsur Pornografi dan Sara.!!
3. Mohon Maaf Bagi Yang Berkomentar Melampirkan Link Langsung Ane Masukan Spam.!!

Matur Nuwon Sanget Atas Perhatiane Panjenengan Sedoyo. Salam Blogger Wongcilik.

 

Contact Form

Name

Email *

Message *