Showing posts with label JavaScript. Show all posts
Showing posts with label JavaScript. Show all posts

9/09/2020

Tutorial Lengkap Membuat dan Menambahkan AMP HTML di Template Blogger Blogspot

Menambahkan AMP di blog Blogger adalah cara agar blog Blogger Anda dimuat lebih cepat di perangkat seluler. Dengan pemuatan cepat memberikan pengalaman pengguna yang lebih baik dan dapat meningkatkan lalu lintas blog Anda. Pada artikel ini, saya akan menunjukkan bagaimana cara menambahkan AMP di blog Blogger.
Apa itu Accelerated Mobile Pages

Apa Itu AMP ?

Laman Seluler yang Dipercepat(bahasa inggris: Accelerated Mobile Pages) atau AMP adalah project Google untuk membuat web seluler lebih cepat. Untuk mencapai tujuan ini, standar AMP membatasi penggunakan HTML, CSS, dan JavaScript, dan mengelola pemuatan sumber daya eksternal, seperti gambar, video, dan iklan.

Mengapa tidak ada Blogger AMP?

Meskipun Accelerated Mobile Pages adalah proyek yang didukung Google dan Blogspot adalah platform blogging Google, “Blogger saat ini tidak mendukung AMP HTML.” Jadi itu yang bisa dijawab Google. Tapi kita tidak bisa membiarkannya seperti itu, bukan? Jadi ikuti langkah-langkah dibawah ini untuk menambahkan AMP di Blogger dan buat Blog AMP baru Anda.

Bagaimana cara mengimplementasikan Blog Blogger AMP?

Seperti yang Anda tahu, kita berbicara tentang bagaimana cara menambahkan amp di blog blogger. Ikuti langkah-langkah yang diberikan di bawah ini untuk melanjutkannya.

Langkah 1: Buat HTML AMP

Buat HTML AMP
Cadangan Template Blogger Anda agar aman dari segala jenis masalah. Sekarang tuju pada Dasbor Blogger Anda -> Template -> Edit Template.
Ganti kode <html> dengan kode berikut
<html amp="amp"> 

Langkah 2: Tambahkan Charset dan Viewport Meta Tags

Tambahkan Charset dan Viewport Meta Tags
Cari dan periksa tag meta charset dan viewport. Jika tidak ada, copy dan paste kode berikut setelah tag <head>
<meta content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui' name='viewport'/>

Langkah 3: Tambahkan Tag Canonical

Tambahkan Tag Canonical
Jadikan blog Anda mudah ditemukan menggunakan tag kanonik. Periksa tag tautan kanonik. Jika tidak ada, tambahkan link kanonik seperti dibawah ini
Copy dan paste kode berikut setelah tag viewport atau setelah tag <head>
<link expr:href='data:blog.url' rel='amphtml'/>
<link expr:href='data:blog.url' rel='canonical'/>

Langkah 4: Menyiapkan AMP CDN

Menyiapkan AMP CDN
Paste kode dibawah ini tepat di atas tag </head>
<style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

Langkah 5: Tambahkan AMP Javascript Library

Tambahkan AMP Javascript Library
Paste kode dibawah ini tepat dibawah kode AMP CDN atau diatas tag </head>
<script async src="https://cdn.ampproject.org/v0.js"></script>

Langkah 6: Penggunaan AMP Image:

Ubah tag img menjadi tag amp-img seperti contoh kode berikut
<amp-img src="/img/amp.jpg"
  width="1080"
  height="610"
  layout="responsive"
  alt="AMP"></amp-img>

Beberapa hal yang harus diperhatikan

Dalam membuat blog berbasis AMP HTML, selain hal di atas ada beberapa hal yang harus diperhatikan diantaranya :
  • Tidak boleh ada dua tag <style>, apabila ada penambahan maka gunakan <style amp-custom>, itupun hanya satu saja yang diizinkan.
  • Tidak boleh membuat inline CSS seperti <aside class='sidebar' style='margin-top:0;padding:10px'>.
  • Script harus external dan menggunakan async.
  • Script tidak diperbolehkan menggunakan attribute type='text/javascript'
  • Seperti langkah ke 6 di atas, tidak boleh menggunakan tag img tapi harus amp-img

Memvalidasi Google AMP di Blogger

Untuk Validasi Halaman AMP Anda di Blogger, Anda dapat mengunjungi situs resmi Google AMP. JIKA ada kesalahan, validator akan memberitahukan kesalahan.
Berikut adalah URL untuk memvalidasi halaman amp di blogger.
https://search.google.com/test/amp
Itu saja sekiranya untuk menambahkan amp pada blog di blogger.com, nanti kedepannya saya tambahkan apabila ada aturan-aturan lain yang belum tertulis.

9/01/2020

Tutorial Lengkap Cara Memasang Kode Meta Tag Facebook Open Graph Di Blog









Ketika membagikan URL blog di Facebook, URL itu akan diubah menjadi tampilan ringkas atau intisari dari blog tersebut. Didalamnya terdapat komponen-komponen dari blog yang bersangkutan berupa judul, thumbnail (gambar), deskripsi, URL blog, dan nama author. Untuk mendapatkan tampilan ringkas yang sesuai dengan isi blog ketika dibagikan di Facebook, kamu perlu memasang meta tag Facebook Open Graph. Apa sih Facebook Open Graph itu? Bagaimana cara memasang Facebook Open Graph yang baik dan benar agar tampilannya bagus ketika dishare di Facebook? Simak baik-baik ya. Lagi-lagi blog Igniel akan berbagi sedikit informasi mengenai ilmu Facebook.

Apa Itu Kode Meta Tag Facebook Open Graph?

Facebook Open Graph adalah sederetan kode khusus berupa meta tag HTML yang berfungsi membaca komponen-komponen halaman ketika URL dari halaman tersebut dibagikan di Facebook untuk nantinya ditampilkan menjadi konten. Komponen yang ditampilkan berupa judul, thumbnail (gambar), deskripsi, URL blog, dan nama author. Kode Facebook Open Graph ini dapat dipasang di semua platform blog seperti Blogspot, Wordpress, dan lain sebagainya.

Kenapa Harus Memasang Meta Tag Facebook Open Graph?

Kamu butuh memasang Facebook Open Graph untuk menarik minat pengunjung. Dia akan membuat intisari blog kamu terlihat lebih cantik ketika dibagikan ke dinding Facebook (social media share). Tanpanya adanya kode ini, Facebook tidak akan mampu menampilkan intisari blog kamu dengan benar. Dijamin deh, pengunjung tidak akan tertarik ketika menemukan konten seperti ini. Berikut perbandingan antara blog yang memasang dan tidak memasang kode meta tag Facebook Open Graph.





Cara Memasang Kode Open Graph Facebook

Daftar Kode Meta Tag Facebook Open Graph

Berdasarkan dokumen developers Facebook yang ada di Webmaster, ada 5 kode inti yang harus kamu pasang. Saya jelaskan satu-satu ya berdasarkan hasil translate dari page tersebut. Tidak 100% translate sih, saya ambil kesimpulannya saja.
  1. URL canonical dari blog kamu.
  2. og:title

    Judul dari artikel.
  3. og:description

    Ringkasan dari isi artikel, biasanya terdiri dari 2 sampai 4 kalimat. Ditampilkan dibawah judul dari post Facebook.
  4. og:image

    Gambar atau thumbnail. Biasanya diambil dari gambar pertama yang ada di dalam artikel.
  5. fb:admins

    Nama author. Berupa sebuah URL yang dapat di-klik untuk menuju ke profil Facebook dari author bersangkutan.
Ada juga beberapa kode meta tag opsional yang dapat dipasang. Kode lengkapnya ada di bawah ini, termasuk cara pasangnya.

Cara Memasang Meta Tag Open Graph Facebook di Blog

Kita masuk ke bagian inti dari tutorial kali ini. Jangan ada langkah yang terlewat agar hasilnya maksimal.
  1. Masuk ke menu Template lalu klik tombol Edit HTML.
  2. Cari kode </head>. Untuk memudahkan mencari kode tersebut, gunakan CTRL + F.
  3. Masukkan kode berikut SEBELUM </head>


<!-- [ Facebook Open Graph Meta Tag by igniel.com ] -->
<b:if cond='data:view.isHomepage'>
<b:if cond='data:view.isPost'>
<b:if cond='data:view.isPage'>
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if></b:if></b:if></b:if>
<meta content='blog' property='og:type'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhK-E6wwtw2EEc1J784VX4fIMwPEb-SkFAWeTe6VSf5qFuZ_yO_GazXJycUurp4gE9wtOl2LoanE5PxWAeLlOTrgs-chChchrC1ACYLhXwtqEhz1afplIAPBnjSsJF2CcpA1a7x4F4Wnjw/s1600/ignielcom.png' property='og:image'/>
</b:if></b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='data:post.snippet' property='og:description'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='https://www.facebook.com/106660612706164' property='article:author'/>
<meta content='https://www.facebook.com/106660612706164' property='article:publisher'/>
<meta content='106660612706164' property='fb:admins'/>
<meta content='1804789006468790' property='fb:app_id'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>

Penjelasan

  1. Jika kamu membagikan URL artikel, misalnya https://www.igniel.com/2017/01/cara-pasang-facebook-open-graph-baik-benar.html, secara otomatis gambar akan diambil dari artikel tersebut. Tapi jika kamu membagikan URL homepage blog seperti https://www.igniel.com, maka yang muncul adalah gambar yang harus kamu tentukan sendiri. Ganti https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhK-E6wwtw2EEc1J784VX4fIMwPEb-SkFAWeTe6VSf5qFuZ_yO_GazXJycUurp4gE9wtOl2LoanE5PxWAeLlOTrgs-chChchrC1ACYLhXwtqEhz1afplIAPBnjSsJF2CcpA1a7x4F4Wnjw/s1600/ignielcom.png dengan URL gambar favicon / icon blog.
  2. Ganti 106660612706164 dengan ID atau username profil pribadi Facebook, atau Fanspage juga bisa. Saran saya, pakailah ID karena dia bersifat tetap. Sedangkan username dapat diubah. Siapa tahu kamu ganti username, tapi lupa mengedit meta tagnya di blog. Kan berabe juga.
  3. Ganti 1804789006468790 dengan ID dari aplikasi Facebook kamu.

Begini tampilan akhir jika kamu berhasil memasang kodenya.





Cara Pasang Meta Tag Open Graph Facebook Untuk Blogger

Kenapa Gambar Saya Tidak Muncul?

Jika kamu merasa sudah menulis kode diatas dengan benar tapi gambar tidak muncul, kemungkinan besar resolusi gambarnya kurang besar. Facebook mengharuskan ukuran minimal 200 x 200 pixels. Edit lagi ya artikelnya. Buat gambarnya sesuai ketentuan Facebook.


Semua Sudah Benar. Kenapa Hasil Share di Facebook Masih Tidak Sesuai?

Itu karena Facebook butuh waktu untuk membaca ulang struktur blog kamu. Untuk cara cepatnya, ikuti langkah berikut.
  1. Masuk ke Sharing Debugger.
  2. Masukkan URL homepage atau URL artikel.
  3. Klik tombol Debug.
  4. Klik tombol Scrape Again.
  5. Dan sim salabim! Coba share ulang URL kamu dan cek apakah sudah benar.
Sekian artikel blog Igniel mengenai cara pasang kode meta tag Open Graph Facebook di blog. Jangan lupa bagikan artikel ini agar teman-teman Blogger yang lain tahu. Thank you~

https://developers.facebook.com/docs/sharing/webmasters

3/16/2020

Tutorial Lengkap Cara Membuat Iklan Penelusuran Bersponsor Google Adsense di Blog



Sebelumnya apakah anda pernah melihat dimana ada iklan yang bernama penelusuran bersponsor di situs - situs yang anda kunjungi, dan ya pada kali ini artikel kita akan mengulah habis apa itu iklan penelusuran dan cara membuat serta memasangnya.

Apa itu Iklan Penelusuran ?

Iklan Penelusuran atau yang juga sering juga di istilah lain kan dengan beberapa teman blogger kita sebagai iklan tulisan, bersusun, iklan link dan sebagainya adalah iklan berbentuk seperti susunan link penelusuran.

Iklan Penelusuran ini bisa anda dapatkan dengan mudah di akun adsense lama atau tahun 2018, karena baru - baru ini pada tahun 2019 iklan ini sudah tidak bisa di akses dari dashboard google adsense yang versi terbaru.

Tapi, tak usah berkecil hati untuk itulah saya membuat tutorial berikut ini agar anda bisa membuat iklan penelusuran bersponsor dengan penjelasan lengkap dan mendetail, berikut ini adalah beberapa manfaat membuat iklan penelusuran.

Kelebihan Iklan Penelusuran

Banyak manfaat dan juga kelebihan yang bisa kita peroleh dengan membuat iklan penelusuran, beberapa diantaranya akan saya sebutkan dibawah ini.
  • Meningkatkan Click Rate Google Adsenae, yang berdampak
  • Meningkatkan penghasilan seorang blogger, yang membuat
  • Anda senang dan bahagia, serta
  • Iklan yang ringan dan sangat Responsif
  • Serta enak dilihat oleh pembaca

Contoh atau Preview Iklan Penelusuran



Diatas anda bisa lihat contoh iklan penelusuran dari salah satu blog saya lainnya yang bisa dengan mudah anda kunjungi di www.chord.blogbot.site, blig yang berisi seputar lagu, music video dan semacamnya.

Selain kelebihan dan manfaat yang telah saya sebutkan diatas iklan penelusuran memiliki tingkat klik rate yang lebih besar dan lebih baik dari iklan pada umumnya karena penyesuaian dan tampilannya yang mungkin tidak bisa dibedakan dengan tampilan iklan pada umumnya.

Cara Membuat Iklan Penelusuran Adsense

Nah telah sampailah kita pada inti dari semua perbincangan singkat kita pada kesempatan kali, berikut ini saya akan membagikan tutorial mudah cara membuat iklan penelusuran hanya dengan beberapa detik saja.

1. Silahkan anda akses google adsense anda jika anda memiliki akun lama tahun 2018, dan pilih iklan link atau penelusuran.
2. Jika tidak ditemukan next ke tutorial kedua, yakni copy kode berikut ini.
<ins class="adsbygoogle iklan_susun" style="display:block" data-ad-client="ca-pub-**kodeanda**" data-ad-slot="**kodeanda**" data-ad-format="link"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script&gt
3. Selanjutnya isi tulisan **kodeanda** dengan kode iklan di google adsense anda.
4. Buka dahboard blogger anda, lalu klik layout atau mode html.
5. Letakkan kode iklan susun atau penelusuran tersebut di mana saja yang anda inginkan.

Penutup 

Demikian informasi seputar tutorial cara membuat iklan susun atau iklan penelusuran link di google adsense selanjutnya jika ada pertanyaan yang berkaitan dengan tutorial pada kesempatan kali ini silahkan tanyakan dibawah ini.

Kotak kritik dan saran terbuka bagi anda jika ada beberapa kesalahan baik pengucapan kata dan sebagainya, mohon dukungan dari sobat blogger lainnya.

Tutorial Lengkap Cara Membuat Related Post/Artikel Terkait di Dalam Postingan

blogrtrwnet.blogspot.com - Related post atau Artikel terkait merupakan salah satu bagian yang cukup penting didalam konten artikel, dimana artikel terkait ini difungsikan untuk menampilkan link/url artikel-artikel didalam suatu blog yang mempunyai kategori pembahasan yang sama serta pada umumnya fitur ini sering terapkan dihampir semua blog atau website yang sering kita jumpai di mesin pencari . 



Related Post juga merupakan salah satu cara yang bisa kalian lakukan untuk membuat SEO onpage pada sebuah blog, dan dipercaya dapat mendongkrak reputasi blog menjadi lebih baik dimata mesin pencari (search engine) karena dengan adanya related post ini, para pengunjung blog akan merasa sangat nyaman dalam meng-eksplore seluruh artikel yang terdapat pada blog kalian.

Membahasa masalah related post. dalam artikel ini, saya akan menjelaskan bagaimana cara membuat artikel terkait otomatis atau fitur baca juga di tengah-tengah postingan blog dengan gaya yang sangat menarik dan patut kalian aplikasikan pada blog yang kalian kelola.


Membuat Artikel Terkait / Baca Juga Otomatis di Blog

Sebelum membuat related post, artikel terkait atau baca juga otomatis di blog kalian dengan menggunakan tutorial yang akan saya bagikan, harap diperhatikan terlebih dahulu bahwa di template kalian harus sudah terpasang script font awesome seperti dibawah ini dan letak script tersebut tepat diatas kode </head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/> 

Jika script diatas belum kalian pasang, silahkan pasang script tersebut tepat diatas kode </head>



A. Memasang Related Post Keren di Blog #1


  • Langkah pertama silahkan kalian masuk ke menu tema kemudian pilih menu edit html
  • Setelah berada di halaman edit html silahkan kalian cari kode </head>, kemudian tempatkan kode dibawah ini tepat diatas kode </head>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var relatedSimply = new Array(); var relatedSimplyNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedSimply[i];}} relatedSimply = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
</b:if>

<style>
/* Related Post Style 1 */
.related-simplify{position:relative;padding:0;margin:15px auto;width:100%;}
.related-simplify h4{background:#3498db;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5}
.related-simplify ul{margin:0;padding:0}
.related-simplify ul li{background:#f6f6f6;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);border-bottom:0;transition:all .3s}
.related-simplify ul li:nth-child(odd){background:#fefefe}
.related-simplify ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)}
.related-simplify ul li:before{content:'\f138';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#2ecc71;overflow:hidden;transition:all .3s}
.related-simplify ul li:hover:before{content:'\f138';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
.related-simplify a{color:#0383d9;font-size:13px;margin:0 0 0 30px;}
.related-simplify a:hover{color:#0383d9;text-decoration:underline}
.related-simplify ul li:nth-child(n+4) {display:none;}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}
</style>
  • Kode warna merah silahkan sesuaikan dengan warna yang sesuai dengan warna dominan blog kalian
  • Langkah selanjutnya silahkan kalian cari kode <data:post.body/>, bisanya didalam template blog terdapat 3 (tiga) kode tersebut, silahkan kalian ganti kode <data:post.body/> yang ke dua (2) dengan kode dibawah ini
    <div expr:id='&quot;post1&quot; + data:post.id'/>
    <div class='related-simplify'>
    <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' type='text/javascript'/>
    </b:if>
    </b:loop>
    </b:if>
    <h4>Baca Juga</h4>
    <script type='text/javascript'>
    removeRelatedDuplicates();
    printRelatedLabels();
    </script>
    </div>
    <div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></div>
    <script type='text/javascript'>
    var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
    var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
    var s=obj1.innerHTML;
    var t=s.substr(0,s.length/2);
    var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
    if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
    </script> 
    
    • Kode berwarna merah silahkan kalian ganti dengan tulisan yang kalian inginkan
    • Selanjutnya silahkan kalian tekan tombol simpan tema dan lihat related post tersebut di dalam postingan artikel kalian

    B. Memasang Artikel Terkait Keren di Blog #2


    • Langkah pertama silahkan kalian masuk ke menu tema kemudian pilih menu edit html
    • Setelah berada di halaman edit html silahkan kalian cari kode </head>, kemudian tempatkan kode dibawah ini tepat diatas kode </head>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script type='text/javascript'>
    //<![CDATA[
    var relatedSimply = new Array(); var relatedSimplyNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedSimply[i];}} relatedSimply = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
    //]]>
    </script>
    </b:if>
    
    <style>
    /* Related Post Style 2 */
    .related-simplify{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:93%;border:4px double rgba(0,0,0,0.2)}
    .related-simplify h4{background:#fff;padding:8px 10px;position:absolute;margin:0;font-size:17px;font-weight:700;color:#000;top:-21px;left:2.5%}
    .related-simplify ul{margin:0;padding:0}
    .related-simplify ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}
    .related-simplify ul li:before{content:'\f0c8';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(0,0,0,0.5);overflow:hidden;font-size:60%;left:10px;transition:all .3s}
    .related-simplify ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#0383d9;}
    .related-simplify a{color:#000;font-size:14px;margin:0 0 0 30px;}
    .related-simplify a:hover{color:#0383d9;}
    .related-simplify ul li:nth-child(n+4) {display:none;}
    @media only screen and (max-width:768px){
    .related-simplify{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
    .related-simplify h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
    .related-simplify a{font-size:14px;margin:0}.related-simplify a:hover{color:#e74c3c}
    .related-simplify ul li{padding:5px 0}
    .related-simplify ul li:before,.related-simplify ul li:hover:before{display:none}}
    </style>
    
    • Kode warna merah silahkan sesuaikan dengan warna yang sesuai dengan warna dominan blog kalian
    • Langkah selanjutnya silahkan kalian cari kode <data:post.body/>, bisanya didalam template blog terdapat 3 (tiga) kode tersebut, silahkan kalian ganti kode <data:post.body/> yang ke dua (2) dengan kode dibawah ini
      <div expr:id='&quot;post1&quot; + data:post.id'/>
      <div class='related-simplify'>
      <b:if cond='data:post.labels'>
      <b:loop values='data:post.labels' var='label'>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' type='text/javascript'/>
      </b:if>
      </b:loop>
      </b:if>
      <h4>Baca Juga</h4>
      <script type='text/javascript'>
      removeRelatedDuplicates();
      printRelatedLabels();
      </script>
      </div>
      <div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></div>
      <script type='text/javascript'>
      var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
      var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
      var s=obj1.innerHTML;
      var t=s.substr(0,s.length/2);
      var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
      if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
      </script> 
      
      • Kode berwarna merah silahkan kalian ganti dengan tulisan yang kalian inginkan
      • Selanjutnya silahkan kalian tekan tombol simpan tema dan lihat related post tersebut di dalam postingan artikel kalian


      C. Membuat Related Post / Baca Juga Keren #3


      • Langkah pertama silahkan kalian masuk ke menu tema kemudian pilih menu edit html
      • Setelah berada di halaman edit html silahkan kalian cari kode </head>, kemudian tempatkan kode dibawah ini tepat diatas kode </head>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <script type='text/javascript'>
      //<![CDATA[
      var relatedSimply = new Array(); var relatedSimplyNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedSimply[i];}} relatedSimply = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
      //]]>
      </script>
      </b:if>
      
      <style>
      /* Related Post Style 3 */
      .related-simplify{display:inline-block;background:#34495e;color:#fff;position:relative;padding:0;margin:20px auto;width:100%;border:6px double #fff;}
      .related-simplify ul{background:rgba(38,62,87,0.8);margin:0;padding:20px}
      .related-simplify ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}
      .related-simplify ul li:before{content:'\f0c8';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(255,255,255,0.7);overflow:hidden;font-size:60%;left:10px;transition:all .3s}
      .related-simplify ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#f1c40f;}
      .related-simplify a{color:#fff;font-size:17px;margin:0 0 0 30px;}
      .related-simplify a:hover{color:#fff;text-decoration:underline}
      .related-simplify ul li:nth-child(n+4) {display:none;}
      @media only screen and (max-width:768px){
      .related-simplify{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
      .related-simplify h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
      .related-simplify a{font-size:14px;margin:0}.related-simplify a:hover{color:#e74c3c}
      .related-simplify ul li{padding:5px 0}
      .related-simplify ul li:before,.related-simplify ul li:hover:before{display:none}}
      </style>
      
      • Kode warna merah silahkan sesuaikan dengan warna yang sesuai dengan warna dominan blog kalian
      • Langkah selanjutnya silahkan kalian cari kode <data:post.body/>, bisanya didalam template blog terdapat 3 (tiga) kode tersebut, silahkan kalian ganti kode <data:post.body/> yang ke dua (2) dengan kode dibawah ini
        <div expr:id='&quot;post1&quot; + data:post.id'/>
        <div class='related-simplify'>
        <b:if cond='data:post.labels'>
        <b:loop values='data:post.labels' var='label'>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' type='text/javascript'/>
        </b:if>
        </b:loop>
        </b:if>
        <h4>Baca Juga</h4>
        <script type='text/javascript'>
        removeRelatedDuplicates();
        printRelatedLabels();
        </script>
        </div>
        <div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></div>
        <script type='text/javascript'>
        var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
        var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
        var s=obj1.innerHTML;
        var t=s.substr(0,s.length/2);
        var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
        if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
        </script> 
        
        • Kode berwarna merah silahkan kalian ganti dengan tulisan yang kalian inginkan
        • Selanjutnya silahkan kalian tekan tombol simpan tema dan lihat related post tersebut di dalam postingan artikel kalian

        D. Membuat Related Post Otomatis di Blog #4


        • Langkah pertama silahkan kalian masuk ke menu tema kemudian pilih menu edit html
        • Setelah berada di halaman edit html silahkan kalian cari kode </head>, kemudian tempatkan kode dibawah ini tepat diatas kode </head>
        <style>
        /* Related Posts Middle by igniel.com */
        .ignielRelatedMiddle {background-color:#f5f5f5; border:1px solid #e5e5e5; display:block; margin:20px 0px; padding:10px 20px;}
        .ignielRelatedMiddle .judul {color:#f44336; font-size:120%; font-weight:600; text-transform:uppercase}
        .ignielRelatedMiddle ul {margin:10px 0px 0px !important; padding:0px !important;}
        .ignielRelatedMiddle ul li {list-style:none; padding:5px 0px !important; border-bottom:2px dotted #aaa !important; text-align:left !important; line-height:1.25em !important;}
        .ignielRelatedMiddle ul li:first-child {padding-top:0px; !important;}
        .ignielRelatedMiddle ul li:last-child {padding-bottom:0px !important; border:0px !important}
        .ignielRelatedMiddle ul li a:before{content:''; display:inline-block; width:17px; height:17px; margin-right:3px; vertical-align:-3px; background: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='%23333'/%3E%3C/svg%3E") center / 20px no-repeat;}
        </style>
        
        • Kode warna merah silahkan sesuaikan dengan warna yang sesuai dengan warna dominan blog kalian
        • Langkah selanjutnya silahkan kalian cari kode <data:post.body/>, bisanya didalam template blog terdapat 3 (tiga) kode tersebut, silahkan kalian simpan kode dibawah ini tepat diatas kode <data:post.body/> yang ke dua (2) 
          <b:if cond='data:view.isPost'>
            <script> //<![CDATA[
              // Related Posts Middle by igniel.com
              var jumlah = 4;
              eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('c a=["\\e\\d\\s\\Q\\f\\C","\\d\\s\\f\\h\\W","\\B\\d\\d\\I","\\V\\f","\\f\\k\\f\\e\\d","\\e\\k\\s\\S","\\h\\d\\e","\\r\\e\\f\\d\\h\\s\\r\\f\\d","\\C\\h\\d\\B","\\h\\r\\s\\I\\F\\U","\\B\\e\\F\\F\\h","\\m\\O\\e\\l","\\T\\h\\k\\f\\d","\\m\\e\\k\\l\\m\\r\\K\\C\\h\\d\\B\\P\\w","\\w\\K\\f\\k\\f\\e\\d\\P\\w","\\w\\l","\\m\\D\\r\\l\\m\\D\\e\\k\\l","\\m\\D\\O\\e\\l"];c g=x y();c v=0;c j=x y();z R(H){u(c b=0;b<H[a[2]][a[1]][a[0]];b++){c p=H[a[2]][a[1]][b];g[v]=p[a[4]][a[3]];u(c q=0;q<p[a[5]][a[0]];q++){A(p[a[5]][q][a[6]]==a[7]){j[v]=p[a[5]][q][a[8]];v++;18}}}}z X(){c n=x y(0);c o=x y(0);u(c b=0;b<j[a[0]];b++){A(!J(n,j[b])){n[a[0]]+=1;n[n[a[0]]-1]=j[b];o[a[0]]+=1;o[o[a[0]]-1]=g[b]}};g=o;j=n}z J(G,L){u(c t=0;t<G[a[0]];t++){A(G[t]==L){M 1b}};M Y}z 19(){c i=N[a[10]]((g[a[0]]-1)*N[a[9]]());c b=0;E[a[12]](a[11]);Z(b<g[a[0]]&&b<1c){E[a[12]](a[13]+j[i]+a[14]+g[i]+a[15]+g[i]+a[16]);A(i<g[a[0]]-1){i++}1a{i=0};b++};E[a[12]](a[17])}',62,75,'||||||||||_0x22c4|_0x6c56x6|var|x65|x6C|x74|relatedTitles|x72|_0x6c56x11|relatedUrls|x69|x3E|x3C|_0x6c56xa|_0x6c56xb|_0x6c56x7|_0x6c56x8|x61|x6E|_0x6c56xf|for|relatedTitlesNum|x22|new|Array|function|if|x66|x68|x2F|document|x6F|_0x6c56xd|_0x6c56x5|x64|contains|x20|_0x6c56xe|return|Math|x75|x3D|x67|related_results_labels|x6B|x77|x6D|x24|x79|removeRelatedDuplicates|false|while|||||||||break|ignielBacaJuga|else|true|jumlah'.split('|'),0,{}));
            //]]></script>
            <div class='ignielRelatedMiddle'>
              <b:if cond='data:post.labels'>
                <b:loop values='data:post.labels' var='label'>
                  <b:if cond='data:view.isPost'>
                    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=100&quot;'/>
                  </b:if>
                </b:loop>
              </b:if>
              <span class='judul'><span>Baca Juga</span></span>
              <script> //<![CDATA[
                eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('L b=["\\i\\p\\e\\i\\a\\c\\K\\a\\c\\m\\d\\a\\h\\J\\i\\h\\h\\c\\a","\\p\\a\\d\\S\\c\\a\\s\\a\\e\\d\\j\\v\\r\\R\\c\\m\\j\\j\\t\\m\\s\\a","\\x\\n\\f\\j\\d\\y\\o\\f\\h\\r\\u\\o\\k\\Q\\u\\x\\n\\f\\j\\d\\y\\o\\f\\h\\r\\u\\n","\\P\\D\\a\\k\\r\\w\\a\\c\\a\\E\\d\\f\\k\\F\\c\\c","\\c\\a\\e\\p\\d\\G","\\e\\f\\h\\a\\t\\m\\s\\a","\\C","\\i\\e\\j\\a\\k\\d\\v\\a\\H\\f\\k\\a","\\n\\m\\k\\a\\e\\d\\t\\f\\h\\a","\\e\\a\\I\\d\\w\\i\\o\\c\\i\\e\\p"];O();(N(){A q=z[b[1]](b[0])[0];B(q){A g=z[b[3]](b[2]),l=M(g[b[4]]/2);B(g[l][b[5]]==b[6]){g[l][b[8]][b[7]](q,g[l])}T{g[l][b[8]][b[7]](q,g[l][b[9]])}}})()',56,56,'||||||||||x65|_0x9301|x6C|x74|x6E|x6F|_0xa209x2|x64|x69|x73|x72|_0xa209x3|x61|x70|x62|x67|_0xa209x1|x79|x6D|x4E|x20|x42|x53|x2E|x2D|document|let|if|x50|x75|x63|x41|x68|x66|x78|x4D|x52|var|parseInt|function|ignielBacaJuga|x71|x2C|x43|x45|else'.split('|'),0,{}));
              //]]> </script>
            </div>
          </b:if>
          
          • Kode berwarna merah silahkan kalian ganti dengan banyaknya artikel terkait yang kalian inginkan
          • Selanjutnya silahkan kalian tekan tombol simpan tema dan lihat related post tersebut di dalam postingan artikel kalian

          E. Membuat Related Post Otomatis Simple #5


          • Langkah pertama silahkan kalian masuk ke menu tema kemudian pilih menu edit html
          • Setelah berada di halaman edit html silahkan kalian cari kode </head>, kemudian tempatkan kode dibawah ini tepat diatas kode </head>
          <style type="text/css">
          /*Artikel Terkait Tengah Postingan*/
          .bacajuga{position:relative;display:inline-block;border:1px solid #DDD;margin:20px 0}
          .bacajuga h4{background-color:#FFF;position:absolute;margin-left:30px;margin-top:-14px;padding:0 15px;border:1px solid #DDD}
          .bacajuga ul{padding:11px 41px 0;list-style:none}
          .bacajuga ul a:before{font-family:fontawesome;content:"\f105";padding-right:10px}
          .bacajuga li{border-radius:5px;border-bottom:1px solid rgba(227,227,227,0.33);line-height:1.7em}
          </style>
          <script type="text/javascript">  
          //<![CDATA[  
          eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('2 4=g f();2 9=0;2 6=g f();d z(m){c(2 i=0;i<m.u.5.3;i++){2 5=m.u.5[i];4[9]=5.v.$t;c(2 k=0;k<5.h.3;k++){b(5.h[k].A==\'y\'){6[9]=5.h[k].x;9++;C}}}}d B(){2 7=g f(0);2 8=g f(0);c(2 i=0;i<6.3;i++){b(!q(7,6[i])){7.3+=1;7[7.3-1]=6[i];8.3+=1;8[8.3-1]=4[i]}}4=8;6=7}d q(a,e){c(2 j=0;j<a.3;j++)b(a[j]==e)p M;p L}d D(){2 r=s.K((4.3-1)*s.I());2 i=0;n.l(\'<o>\');E(i<4.3&&i<F){n.l(\'<w><a x="\'+6[r]+\'" J ="G" v="\'+4[r]+\'">\'+4[r]+\'</a></w>\');b(r<4.3-1){r++}H{r=0}i++}n.l(\'</o>\')}',49,49,'||var|length|relatedTitles|entry|relatedUrls|tmp|tmp2|relatedTitlesNum||if|for|function||Array|new|link||||write|json|document|ul|return|contains||Math||feed|title|li|href|alternate|related_results_labels|rel|removeRelatedDuplicates|break|printRelatedLabels|while|20|_blank|else|random|target|floor|false|true'.split('|'),0,{}))
          //]]>  
          </script>
          
          • Kode warna merah silahkan sesuaikan dengan warna yang sesuai dengan warna dominan blog kalian
          • Langkah selanjutnya silahkan kalian cari kode <data:post.body/>, bisanya didalam template blog terdapat 3 (tiga) kode tersebut, silahkan kalian ganti kode <data:post.body/> yang ke dua (2) dengan kode dibawah ini
            <div expr:id='&quot;post1&quot; + data:post.id'/>
            <div class='bacajuga'>  
            <b:if cond='data:post.labels'>  
            <b:loop values='data:post.labels' var='label'>  
            <b:if cond='data:blog.pageType == "item"'>  
            <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>  
            </b:if>  
            </b:loop>  
            </b:if>  
            <b:if cond='data:blog.pageType == "item"'>  
            <h4>Baca Juga</h4>  
            <script type="text/javascript">  
            removeRelatedDuplicates();  
            printRelatedLabels();  
            </script>  
            </b:if>  
            </div>
            <div expr:id='&quot;post2&quot; + data:post.id'><data:post.body/></div>
            <script type='text/javascript'>
            var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
            var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
            var s=obj1.innerHTML;
            var t=s.substr(0,s.length/2);
            var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
            if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
            </script>
            
            • Kode berwarna merah silahkan kalian ganti dengan tulisan yang kalian inginkan
            • Selanjutnya silahkan kalian tekan tombol simpan tema dan lihat related post tersebut di dalam postingan artikel kalian

            F. Membuat Artikel Terkait / Baca Juga #6


            • Langkah pertama silahkan kalian masuk ke menu tema kemudian pilih menu edit html
            • Setelah berada di halaman edit html silahkan kalian cari kode </head>, kemudian tempatkan kode dibawah ini tepat diatas kode </head>
            <b:if cond='data:blog.pageType == &quot;item&quot;'>
            <script type="text/javascript">
            //<![CDATA[
            var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i];}} relatedTitles = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedTitles.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
            //]]>
            </script>
              </b:if>
            <style>
            /* Related Post di dalam postingan by Bung Frangki */
            .post-terkait {position:relative;background:#fff;padding:0;margin:10px 15px 0 0;float:left;width:165px;border:1px solid #1b71bc}
            .post-terkait h4{background:#1b71bc !important;padding:5px 0 !important;margin:0;text-align:center !important;font-size:15px !important;font-weight:400;text-transform:uppercase;color:#fff !important}
            .post-terkait ul {margin:0;padding:0}
            .post-terkait ul li {list-style:none !important;padding:7px 0;margin:0 7px;border-bottom:2px dotted #ddd;line-height:1.4em !important;text-align:left !important}
            .post-terkait ul li:last-child{border:none !important}
            .post-terkait a {color:#1b71bc;font-size:13px !important}
            .post-terkait a:hover {text-decoration:underline}
            </style>
            
            • Kode warna merah silahkan sesuaikan dengan warna yang sesuai dengan warna dominan blog kalian
            • Langkah selanjutnya silahkan kalian cari kode <data:post.body/>, bisanya didalam template blog terdapat 3 (tiga) kode tersebut, silahkan kalian ganti kode <data:post.body/> yang ke dua (2) dengan kode dibawah ini
              <div expr:id='&quot;post1&quot; + data:post.id'/>
              <div class='post-terkait'>
              <b:if cond='data:post.labels'>
              <b:loop values='data:post.labels' var='label'>
              <b:if cond='data:blog.pageType == &quot;item&quot;'>
              <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' type='text/javascript'/>
              </b:if>
              </b:loop>
              </b:if>
              <h4>Baca Juga</h4>
              <script type='text/javascript'>
              removeRelatedDuplicates();
              printRelatedLabels();
              </script>
              </div>
              <div expr:id='&quot;post2&quot; + data:post.id' class='artbody' itemprop='articleBody description'><data:post.body/></div>
              <script type='text/javascript'>
              var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
              var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
              var s=obj1.innerHTML;
              var t=s.substr(0,s.length/3);
              var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
              if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
              </script>
              
              • Kode berwarna merah silahkan kalian ganti dengan tulisan yang kalian inginkan
              • Selanjutnya silahkan kalian tekan tombol simpan tema dan lihat related post tersebut di dalam postingan artikel kalian

              3/07/2020

              Tutorial Lengkap Cara Membuka Semua Link Otomatis di Tab Baru dengan Javascript


              Penggunaan javascript memungkinkan link terbuka di tab baru berlaku pada semua link yang ada di blog. Jadi ketika kita menambahkan fungsi otomatis tab baru ini melalui javascript, maka blogger tidak perlu lagi membuat fungsi link manual melalui kode html karena secara otomatis semua link sudah di-setting untuk terbuka di tab baru.

              Membuka Semua Link Otomatis di Tab Baru dengan Javascript


              Login ke Blogger > Klik Tema > Edit HTML > Cari kode </body> > Salin dan tambahkan javascript di bawah ini sebelum kode </body>



              <script type="text/javascript">
              //<![CDATA[
              function externalLinks(){if(document.getElementsByTagName)for(var e=document.getElementsByTagName("a"),t=0;t<e.length;t++){var n=e[t];n.getAttribute("href")&&(n.target="_blank")}}window.onload=externalLinks;
              //]]>
              </script>


              Klik Simpan Tema dan selesai.

              Coba lihat hasilnya dengan membuka salah satu artikel di blog sobat. Sekian dari Arlina Design dan Wassalam.