BLOG DESIGN, WIDGET "ALSO READ"

Ref. : Arlina Design

Ini juga Jangkr*k! 😁 karena tulisan ini juga termasuk yang harus ketik-ulang, hadeeeh...

OK, saya akan coba ringkas kembali point² pentingnya, meskipun mungkin tidak akan sedetail tulisan aslinya lagi, idenya sudah menguap jack! 🙏

Intinya adalah, membuat widget "ALSO READ" yang akan muncul pada setiap halaman artikel postingan kita. Ide liciknya (hehehe...) sebenarnya adalah sedapat mungkin mengikat ketertarikan pengunjung blog supaya muter² saja di blog kita. Saat ada pengunjung membaca salah satu artikel postingan kita, maka - dengan asumsi dia tertarik pada topik artikel tersebut - dia akan digoda terus-menerus dengan artikel lain dengan topik sejenis. Secara tidak sadar dia akan terus mengubek-ubek seantero isi blog kita, sampai dia tidak menemukan lagi artikel lain yang menarik minatnya.... atau setelah dia sadar bahwa sudah kelamaan buka blog kita, sampai lupa mandi, lupa gosok gigi, dan makan qiqiqiqiq... dan hasilnya adalah traffic untuk blog kita. Hmmm licik ya... 😛

Tapi memang demikianlah yang jamak dilakukan, terutama pada website² portal berita terkenal misalnya...

Nah, ide itu yang akan coba kita terapkan kali ini pada blog kita.

Oyah, sebelum mulai, ada baiknya saya ingatkan sedikit warning... kali ini kita akan sedikit "bermain" dengan kode² html programming, meskipun - jangan takut - gak susah² amat kok. Resiko terburuknya adalah kalau terjadi sedikit kekacauan pada pengkodean kita paling blognya jadi rusak aja.... hahaha just kidding 😄. Oleh karena itu perlu ada langkah safety first terlebih dahulu. Biasakanlah setiap akan mulai mengotak-atik kode html, backup terlebih dahulu! Jika anda bermain dengan kode html template/theme blog, sudah disediakan oleh Blogger tombol rescue tersebut. Jika anda masuk pada tab "Theme", di pojok sebelah kanan atas ada tombol "Backup/Restore". Manfaatkan fungsi itu...

OK, sekarang pembahasannya. Tadaaa...

Langkah pertamax, pada side panel Blogger masuk ke tab "Theme" (jangan lupa, backup terlebih dahulu template/theme anda). Click/tap tombol "Edit HTML", kemudian copy-paste-kan kode CSS dibawah ini 👇 ke template anda, pada baris sebelum/diatas kode ekspresi </head> (gunakan fungsi search untuk mencarinya)

<b:if cond='data:blog.pageType != "index"'> <style type='text/css'> /* CSS WIDGET ALSO READ (PILIHAN 1), ARLINA DESIGN */ .arldzgnMultiRelated{color:#000;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;border:1px solid rgba(0,0,0,0.2);transition:all .3s} .arldzgnMultiRelated .content{padding:12px 15px} .arldzgnMultiRelated .content .text{margin-right:5px} .arldzgnMultiRelated .content a{color:#000;text-decoration:none;line-height:1.5em} .arldzgnMultiRelated .icon{height:auto;min-width:55px;background:transparent url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='%23000'/%3E%3C/svg%3E") center / 40px no-repeat;border-left:1px solid rgba(0,0,0,0.2);transition:all .3s} .arldzgnMultiRelated:hover .icon,.arldzgnMultiRelated .content a:hover{color:#0984e3} </style> </b:if>

Langkah berikutnya, search kode <data:post.body/> dan copy-paste-kan kode berikut dibawah ini 👇 pada baris setelah/dibawah kode <data:post.body/> tersebut.

<b:if cond='data:view.isPost'> <script type='text/javascript'> //<,a = jumlah + 1,b = post['length'] / a;c = Array['from']({length: jumlah}, (redfx, blufx) => blufx + 1); for (let d = 0; d < c['length']; d++) {let e = c[d],f = parseInt((b * e)),g = document['createElement']('div');g['className'] = 'arldzgnMultiRelated';if (post[f]['nodeName'] == 'P') {post[f]['parentNode']['insertBefore'](g, post[f])} else {post[f]['parentNode']['insertBefore'](g, post[f]['nextSibling'])}}})(); var relatedTitles = new Array();var relatedTitlesNum = 0;var relatedUrls = new Array();function related_results_labels(nerdfx) {for (var desfx = 0; desfx < nerdfx['feed']['entry']['length']; desfx++) {var nefx = nerdfx['feed']['entry'][desfx];relatedTitles[relatedTitlesNum] = nefx['title']['$t'];for (var ciafx = 0; ciafx < nefx['link']['length']; ciafx++) {if (nefx['link'][ciafx]['rel'] == 'alternate') {relatedUrls[relatedTitlesNum] = nefx['link'][ciafx]['href'];relatedTitlesNum++;break}}}} function removeRelatedDuplicates() {var viefx = new Array(0);var labfx = new Array(0);for (var desfx = 0; desfx < relatedUrls['length']; desfx++) {if (!contains(viefx, relatedUrls[desfx])) {viefx['length'] += 1;viefx[viefx['length'] - 1] = relatedUrls[desfx];labfx['length'] += 1;labfx[labfx['length'] - 1] = relatedTitles[desfx]}};relatedTitles = labfx;relatedUrls = viefx} function contains(yelfx, yufx) {for (var grefx = 0; grefx < yelfx['length']; grefx++) {if (yelfx[grefx] == yufx) {return true}};return false} //]]> </script> <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:view.isPost'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=100"'/> </b:if> </b:loop> </b:if> <script type='text/javascript'> //< * Math['random']());let i = 0;let jumlah = document['querySelectorAll']('.arldzgnMultiRelated');while (i < relatedTitles['length'] && i < jumlah['length']) {for (let a = 0; a < jumlah['length']; a++) {jumlah[a]['innerHTML'] = '<span class="content"><span class="text">' + text + '</span><a href="' + relatedUrls[r] + '" title="' + relatedTitles[r] + '">' + relatedTitles[r] + '</a></span><span class="icon"></span>';if (r < relatedTitles['length'] - 1) {r++} else {r = 0};i++}}})(); //]]> </script> </b:if>

CATATAN :

Jika ada beberapa (lebih dari satu) kode <data:post.body/> pada template anda (seperti pada template blog ini) pilihlah yang berada dalam tag kondisional "halaman postingan". Penjelasan lengkap tentang Tag Kondisional Blogger Terbaru, silahkan anda merefer ke tulisannya mbak Arlina (website Arlina Design) disini.... cekidot

Langkah terakhirnya seperti biasa adalah kustomisasi. Yang pertama adalah kustomisasi jumlah link "ALSO READ" yang ingin anda munculkan pada setiap halaman postingan anda. Cari kode ekspresi var jumlah = 1. Saya cuma menggunakan jumlah 1 disini, karena pertimbangan kenyamanan pembaca. Kalau terlalu banyak tawaran "ALSO READ" ini pada saat membaca postingan akan membuat pembaca jenuh (annoyed) saya rasa. Tapi terserah kalau anda menghendaki jumlah 10 juga gpp sih, sah sah aja... 😊. Kustomisasi lainnya adalah pe-label-an "ALSO READ". Saya menggunakan kata itu supaya konsisten saja dengan "style" yang sudah ada. Jika anda menghendaki label lain, "Baca juga" misalnya, boleh... silahkan anda menggantinya pada kode ekspresi var text = 'ALSO READ :'

Setelah selesai semuanya simpan.... click/tap tombol "Save Theme". Selesai... silahkan lihat previewnya untuk mengagumi hasil kerja anda 😃


CATATAN LAGI :

Seperti sudah saya bilang, widget "ALSO READ" ini adalah kreasi dari si mbakayu sing pinter dewe: mbak Arlina, di websitenya Arlina Design. Ada beberapa versi tampilan sebenarnya yang dibikinkan sama si mbaknya. Saya pilih yang versi ini (lihat di halaman postingan blog ini) karena ini yang paling nyetel dengan style keseluruhan blog saya. Untuk pilihan versi lainnya - mohon ijin mbak Arlina 🙏 - berikut saya kutipkan kembali di bawah ini, cekidot 👇 (Untuk mengganti versinya anda tinggal mengganti kode CSS-nya saja pada langkah pertama tutorial diatas ya)


- VERSI 1

Kode CSS : 
<b:if cond='data:blog.pageType != "index"'> <style type='text/css'> /* Multi Related Post */ .arldzgnMultiRelated{background-color:#2a2a2a;color:#fff;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;overflow:hidden;transition:all .3s} .arldzgnMultiRelated:hover{background-color:#222} .arldzgnMultiRelated .content{padding:12px 15px} .arldzgnMultiRelated .content .text{margin-right:5px} .arldzgnMultiRelated .content a{color:#fff;text-decoration:none;line-height:1.5em} .arldzgnMultiRelated .content a:hover{text-decoration:underline} .arldzgnMultiRelated .icon{height:auto;min-width:55px;background:#f44336 url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='%23fff'/%3E%3C/svg%3E") center / 40px no-repeat;transition:all .3s} </style> </b:if>
 
Penampakan :

- VERSI 2

Kode CSS : 
<b:if cond='data:blog.pageType != "index"'> <style type='text/css'> /* Multi Related Post */ .arldzgnMultiRelated{background-color:#eaeaea;color:#000;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;transition:all .3s} .arldzgnMultiRelated:hover{background-color:#e3e3e3} .arldzgnMultiRelated .content{padding:12px 15px} .arldzgnMultiRelated .content .text{margin-right:5px} .arldzgnMultiRelated .content a{color:#000;text-decoration:none;line-height:1.5em} .arldzgnMultiRelated .icon{height:auto;min-width:55px;background:#f5f5f5 url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='%23888'/%3E%3C/svg%3E") center / 40px no-repeat;transition:all .3s} .arldzgnMultiRelated:hover .icon{background-color:#f9f9f9} </style> </b:if>
 
Penampakan :

- VERSI 3

Kode CSS : 
<b:if cond='data:blog.pageType != "index"'> <style type='text/css'> /* Multi Related Post */ .arldzgnMultiRelated{background-color:#c0392b;color:#fff;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;transition:all .3s} .arldzgnMultiRelated:hover{background-color:#e74c3c} .arldzgnMultiRelated .content{padding:12px 15px} .arldzgnMultiRelated .content .text{margin-right:5px} .arldzgnMultiRelated .content a{color:#fff;text-decoration:none;line-height:1.5em} .arldzgnMultiRelated .icon{height:auto;min-width:55px;background:rgba(255,255,255,.25) url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='%23fff'/%3E%3C/svg%3E") center / 40px no-repeat;transition:all .3s} .arldzgnMultiRelated:hover .icon{background-color:rgba(255,255,255,.15)} </style> </b:if>
 
Penampakan :

- VERSI 4

Kode CSS : 
<b:if cond='data:blog.pageType != "index"'> <style type='text/css'> /* Multi Related Post */ .arldzgnMultiRelated{background:#ffeaa7;color:#000;margin:15px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;border-left:4px solid #d63031;transition:all .3s} .arldzgnMultiRelated .content .text{margin-right:5px} .arldzgnMultiRelated .content{padding:10px 15px} .arldzgnMultiRelated .content a{color:#000;text-decoration:none;line-height:1.5em} .arldzgnMultiRelated .content a:hover{color:#111;text-decoration:underline} </style> </b:if>
 
Penampakan :

Silahkan pilih sendiri, dipiliiiih dipiliiiih yang sukaaa.... 😌


Jangan pernah berhenti belajar
SALAM PUSTAKA

You might also like :