Menandai Post Label Tertentu Dengan Tag Kondisional

Menandai Post Label Tertentu Dengan Tag Kondisional

HTML Javascript Tips Blogger

Menandai Post Label Tertentu dengan Tag Kondisional - Seperti yang kita tahu sekarang Blogger mengupdate fitur-fitur terbaru yang dapat kita manfaatkan semoga acara blogging menjadi semakin menarik. Salah satu fitur barunya ialah fitur Lambda Expression yang dapat mempersingkat penuisan markup pada tag kondisional tertentu sehingga akan menjadi lebih sederhana dan menghemat penulisan kode.

Sebagai teladan pada tutorial blog kali ini aku akan memanfaatkan fitur tersebut pada post label di halaman index.

Disini kita dapat menambahkan icon, gambar maupun tulisan. Pada teladan ini aku akan menunjukkan post label dengan icon fontawesome menyerupai gambar di bawah ini.

Bukan hanya ditambahkan pada satu label saja, sahabat juga dapat menambahkan beberapa label tertentu dan membedakan tampilannya dengan mudah.

Bagaimana cara membuatnya?

Di bawah ini ialah instruksi yang dipakai untuk memunculkan icon jikalau sahabat memilih label tertentu pada postingan. instruksi di bawah ini dapat sahabat simpan sebelum instruksi epilog head.

<b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <script type='text/javascript'> //<![CDATA[ //Post Label function label_pilihan(e){labelku=new Array,labelku[1]="<div class='badge badge1'><div class='badge-img'><i class='fa fa-star'></i></div></div>",labelku[2]="<div class='badge badge2'><div class='badge-img'><i class='fa fa-video-camera'></i></div></div>",labelku[3]="<div class='badge badge3'><div class='badge-img'><i class='fa fa-camera'></i></div></div>",labelku[4]="<div class='badge badge4'><div class='badge-img'><i class='fa fa-music'></i></div></div>",labelku[5]="<div class='badge badge5'><div class='badge-img'><i class='fa fa-paint-brush'></i></div></div>","Hot"==e&&document.write(labelku[1]),"Video"==e&&document.write(labelku[2]),"Gambar"==e&&document.write(labelku[3]),"Musik"==e&&document.write(labelku[4]),"Lukisan"==e&&document.write(labelku[5])} //]]> </script> </b:if> </b:if>

Kode yang ditandai merupakan nama-nama label yang ditentukan dan instruksi yang dapat sahabat ganti nantinya dengan kreasi sendiri.

Kode pemanggil

<b:loop values='data:post.labels' var='label'> <script type='text/javascript'>label_pilihan(&quot;<data:label.name/>&quot;);</script> </b:loop>

Untuk instruksi pemanggilnya dapat sahabat simpan di dalam markup post.

<b:includable id='post' var='post'>...</b:includable>

Atau dapat juga disimpan di dalam markup ini

<b:includable id='main' var='top'>...</b:includable>

CSS

Agar menciptakan tampilannya lebih menarik, sahabat dapat menambahkan CSS menyerupai di bawah ini

/* Post Label */ .badge{background:#95a5a6;color:#fff;position:absolute;font-weight:normal;line-height:1;bottom:0;right:0;left:0;display:block;text-align:center;width:100%;height:50px;line-height:50px;font-size:18px;z-index:1;transition:all .3s} .badge1{background:#e89c0f;opacity:.98} .badge2{background:#40d47e;opacity:.98} .badge3{background:#3498db;opacity:.98} .badge4{background:#1abc9c;opacity:.98} .badge5{background:#95a5a6;opacity:.98} .post:hover .badge{color:rgba(255,255,255,.6);font-size:44px;height:100%;line-height:100%} .post:hover .badge-img{margin:85px 0 0 0}

Cara kerja dari instruksi di atas ialah jikalau sahabat menunjukkan label pada postingan tertentu, maka otomatis akan memunculkan icon yang sudah dimodifikasi menyerupai teladan di bawah ini.

Demo

Semoga dengan teladan Menandai Post Label Tertentu dengan Tag Kondisional yang sudah aku bagikan akan menunjukkan wangsit bagi sahabat semua. Terima kasih.
Sumber http://arlinadesign.blogspot.com

Cara Membatasi Jumlah Post Di Halaman Pencarian

Cara Membatasi Jumlah Post Di Halaman Pencarian

HTML Tips Blogger

Cara Membatasi jumlah Post di Halaman Pencarian - Apa kabar teman blogger, kali ini akan memperlihatkan sedikit tips ihwal cara membatasi jumlah pos yang tampil ketika mencari sebuah artikel di halaman pencarian blog.

Trik ini cukup mudah, cara kerjanya sama ibarat pada tutorial Membatasi Jumlah Posting di Halaman Label. Silakan ikuti langkah berikut ini.

Cara Membatasi jumlah Post di Halaman Pencarian

1. Buka blog Anda di Blogger > Template > Buka template editor blog > Cari markup kotak pencarian (sesuai dengan template yang teman gunakan)

Contoh, di sini aku memakai markup kotak pencarian dari template Simplify 2

<form action='/search' id='search-us' method='get'> <table> <tbody> <tr> <td class='search-boxy1'> <input id='search-boxy1' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Cari artikel lainnya...'/> </td> <td class='search-button1'> <input id='search-button1' type='submit' value=''/> </td> </tr> </tbody> </table> </form>

2. Selanjutnya teman hanya perlu menambahkan arahan yang diberi tanda di bawah ini sempurna di bawah tag input dari kotak pencarian

<form action='/search' id='search-us' method='get'> <table> <tbody> <tr> <td class='search-boxy1'> <input id='search-boxy1' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Cari artikel lainnya...'/> <input name='max-results' type='hidden' value='7'/> </td> <td class='search-button1'> <input id='search-button1' type='submit' value=''/> </td> </tr> </tbody> </table> </form>

Tentukan angka 7 dari value='7' dengan jumlah post yang ingin ditampilkan.

3. Simpan template dan lihat hasilnya.

Demikian tips Cara Membatasi jumlah Post di Halaman Pencarian yang dapat berikan, supaya bermanfaat.
Sumber http://arlinadesign.blogspot.com

Cara Memperbaiki Error Publisher, Datemodified Dan Datepublished

Cara Memperbaiki Error Publisher, Datemodified Dan Datepublished

HTML Tips Blogger

Structured Data Testing Tool ialah alat untuk mengetahui lengkapnya isu yang ada pada blog atau situs kita. Alat ini akan menjadi penguji isu blog kita yang akan dikimkan ke Search Engine Google dan Yahoo. Google, Yahoo dan Microsoft mereka bertiga berkolaborasi dalam schema.org untuk meningkatkan metode pencarian.

Sobat sanggup mengecek Structured Data Testing Tool dengan membuka halaman http://kileakskiteaks.blogspot.com/search?q=memperbaiki-error-publisher-datemodified-dan-datepublished">Error Headline, Image, Publisher, dateModified dan datePublished silakan membaca cara berikut ini.

Cara Memperbaiki Error Publisher, dateModified dan datePublished

Pada Structured Data Testing Tool anda sanggup mengetes atau mengecek kelangkapan isu data blog anda. Jika ada tanda error, berarti teman belum memasukan isu yang benar. Ada aneka macam macam error pada Structured Data Testing Tool. Dan berikut ialah cara memperbaiki Structured Data Testing Tool pada blog.

Error Headline "A value for headline field is required"

Jika teman mendapati pesan "A value for headline field is required" pada dikala mengecek struktur data, maka teman sanggup melaksanakan cara di bawah ini untuk memperbaikinya.

Cari instruksi dibawah ini

<h1 class='post-title entry-title' itemprop='name'>   <h2 class='post-title entry-title' itemprop='name'>  <h3 class='post-title entry-title' itemprop='name'>

Dan ganti dengan headline

<h1 class='post-title entry-title' itemprop='headline'>  <h2 class='post-title entry-title' itemprop='headline'>  <h3 class='post-title entry-title' itemprop='headline'>

Mungkin saja h1 sanggup ada lebih dari 1, begitupula dengan h2 dan h3. Makara jikalau ada itemprop='name' di belakangnya ganti saja dengan itemprop='headline'.

Error Image, Publisher dan MainEntityOfPage

Jika teman menemui instruksi error "A value for image field is required" dan instruksi error "A value for publisher field is required" perbaiki dengan cara mencari instruksi di bawah ini.

<article class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

Dan sehabis ketemu, letakan instruksi berikut di bawah instruksi tadi

<div itemType='https://schema.org/WebPage' itemprop='mainEntityOfPage' itemscope='itemscope'/> <b:if cond='data:post.firstImageUrl'> <div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>   <meta expr:content='data:post.firstImageUrl' itemprop='url'/>   <meta content='600' itemprop='width'/>   <meta content='300' itemprop='height'/>   </div>     </b:if>   <div itemprop='publisher' itemscope='itemscope' itemtype='https://schema.org/Organization'>     <div itemprop='logo' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>      <meta content='URL LOGO BLOG ANDA' itemprop='url'/>       <meta content='300' itemprop='width'/>       <meta content='300' itemprop='height'/>     </div>     <meta expr:content='data:blog.title' itemprop='name'/>   </div>

Error dateModified dan datePublished

Jika teman menemukan error pada dateModified dan datePublished cari instruksi dibawah ini.

<a class='updated' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='updated' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>

Dan ganti dengan menambahkan instruksi <span itemprop='dateModified'> di awal dan di selesai </span>, yang akan menjadi ibarat ini

<span itemprop='dateModified'> <a class='updated' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='updated' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a> </span>

Apabila dateModified dan datePublished masih error. Tetap gunakan cara diatas, simpan template, kemudian masuk ke Setelan > Bahasa dan Pemformatan kemudian ubah ketiga hal dibawah ini.

1. Format Header Tanggal
2. Format Timestamp
3. Format Stempel Waktu Komentar

Dengan format (Hari, Bulan Tanggal, Tahun) teladan Monday, Sept 10, 2016.

Error Missing Author (hCard "Author")

Setelah semua instruksi sudah tidak muncul pesan error, biasanya suka ada Missing Author. Sobat sanggup memperbaikinya dengan cara mencari kode.

<data:post.body/>

Dan letakan instruksi berikut dibawahnya

 <!-- hCard"author" Start --> <span class='post-author vcard' style='display:none'> <b:if cond='data:top.showAuthor'> <data:top.authorLabel/> <b:if cond='data:post.authorProfileUrl'> <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta expr:content='data:post.authorProfileUrl' itemprop='url'/> <a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'> <span itemprop='name'> <data:post.author/> </span> </a> </span> <b:else/> <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <span itemprop='name'><data:post.author/> </span> </span> </b:if> </b:if> </span> <!-- hCard"author" End -->

Cara di atas merupakan cara yang sudah dicoba 100% berhasil memperbaiki Headline, Image, Publisher, MainEntityOfPage, dateModified dan datePublished dan Author di Structured Data Testing Tool. Sebenarnya masih banyak bermacam-macam error pada Structured Data Testing Tool. Tapi yang dibahas tadi ialah yang sudah dicoba 100% bekerja dengan baik. Semoga bermanfaat dan wassalam.
Sumber http://arlinadesign.blogspot.com

Cara Menyembunyikan Atau Menampilkan Widget Di Mobile Device

Cara Menyembunyikan Atau Menampilkan Widget Di Mobile Device

HTML Tips Blogger

Seperti yang kita tahu sesuai dengan perkembangan zaman sekarang perangkat mobile sudah menjadi kebutuhan pokok setiap orang sebagai alat komunikasi yang memperlihatkan banyak manfaat bagi kita semua.

Masih berafiliasi dengan hal ini, sesudah Algoritma Google Mobile Friendly diperbarui pada tanggal 21 April 2015 lalu. Banyak webmaster menciptakan situs yang Mobile Friendly dan juga responsive semoga sanggup diakses lebih cepat dan nyaman melalui perangkat mobile. Tentunya hal ini merupakan langkah nyata dan sebagai pondasi awal dalam membangun sebuah website, untuk langkah selanjutnya tinggal bagaimana kita mengelola situs tersebut.

Oke, tips blogger kali ini saya akan memperlihatkan tips bagaimana cara menyembunyikan atau menampilkan sebuah widget di blog pada perangkat mobile. Trik ini memang sanggup sahabat lakukan dengan menambahkan tag CSS display:none pada widget tertentu yang ingin disembunyikan pada perangkat mobile dengan resolusi tertentu, namun ada yang lebih baik dan lebih mudah lagi ialah dengan cara yang akan saya berikan di bawah ini

Trik ini hanya berlaku pada perangkat smartphone saja dan tidak akan kuat terhadap perangkat tablet, iPad, dan lainnya.

Menyembunyikan Widget di Mobile Device

Pertama, silakan buka template editor di blog sobat. Kemudian tentukan widget apa yang akan disembunyikan dari perangkat mobile, misalnya di sini saya akan menyembunyikan widget HTML1 di dalam template dengan penulisan tag kondisional menyerupai ini

<b:if cond='data:blog.isMobileRequest == "false"'> <b:widget id='HTML1' locked='false' title='' type='HTML' version='1' visible='true'> ----- </b:widget> </b:if>

Menampilkan Widget di Mobile Device

Dan kalau sahabat ingin menampilkan widget hanya di perangkat mobile saja sahabat sanggup mengganti nilai false pada arahan di atas menjadi true

<b:if cond='data:blog.isMobileRequest == "true"'> <b:widget id='HTML1' locked='false' title='' type='HTML' version='1' visible='true'> ----- </b:widget> </b:if>

Selanjutnya simpan template dan lihat hasilnya.

Nah, bagaimana? Cukup gampang bukan. Sekian dari saya perihal Cara Menyembunyikan atau Menampilkan Widget di Mobile Device. Semoga bermanfaat bagi sahabat semua, terima kasih.

Sumber http://arlinadesign.blogspot.com

Cara Menampilkan Tombol Di Sidebar Pada Template Digizena

Cara Menampilkan Tombol Di Sidebar Pada Template Digizena

HTML Tips Blogger

Pada kesempatan kali ini akan memperlihatkan tips blogger atas undangan teman blogger di sini wacana Cara Menampilkan Tombol di Sidebar Pada Template Digizena.

Bagi teman yang memakai template Digizena yang saya bagikan di blog Idntheme, maka teman akan melihat tombol live preview dan tombol download serta tombol lainnya di bab sidebar pada halaman artikel di blog idntheme menyerupai gambar di bawah ini

Tombol tersebut akan muncul jikalau teman menambahkan arahan pemanggil dari HTML tombol di dalam artikel blog.

Cara Menampilkan Tombol di Sidebar Pada Template Digizena

Pertama, buka dasbor blogger, buka editor postingan, lalu tambahkan arahan di bawah ini pada tab HTML (bukan compose)

<div style="display: none;"> <div id="Theme-details"> <div id="store-style"> <a class="storebutton but1" href="LINK-TUJUAN" rel="nofollow" target="_blank">LINK TUJUAN</a> <div class="rio-ss idb"> Isi deskripsi bebas di sini.</div> </div> <div id="store-style"> <a class="storebutton but2" href="LINK-TUJUAN" target="_blank">LINK TUJUAN</a> <div class="rio-ss"> <span class="storelist">Deskripsi 1</span> <span class="storelist">Deskripsi 2</span> <span class="storelist">Deskripsi 3</span> <span class="storelist">Deskripsi 4</span> <span class="storelist">Deskripsi 5</span></div> </div> </div> </div>

Edit kembali arahan tersebut sesuai kebutuhan lalu simpan artikel.

Tips Cara Menampilkan Tombol ini berlaku untuk versi free dan premium template Digizena. Demikian tips blogger kali ini, terima kasih dan aemoga bermanfaat.
Sumber http://arlinadesign.blogspot.com

Cara Memasang Iklan Adsense Di Tengah Postingan

Cara Memasang Iklan Adsense Di Tengah Postingan

AdSense CSS HTML Javascript Tips Blogger

Cara Memasang Iklan Adsense di Tengah Postingan - Masih membahas seputar Adsense, kali ini membahas perihal trik dan tips Cara Memasang Iklan Adsense di tengah postingan. Sebetulnya sudah berbagai artikel yang membahas perihal trik ini, namun kebetulan di blog ini belum ada jadi aku bagikan dan mungkin judulnya agak mainstream berdasarkan aku tapi tidak apa-apa yang penting berbagi.

Manfaat dari trik Memasang Iklan Adsense di tengah postingan ini ialah teman sanggup lebih meningkatkan pendapatan Google Adsense blog teman dengan jumlah rasio klik yang lebih tinggi dan biasanya akan lebih menarik minat pembaca dengan konten iklan yang ditampilkan sebab posisi iklan yang strategis berada di tengah postingan. Singkat saja, berikut Cara Memasang Iklan Adsense di Tengah Postingan.

Cara Memasang Iklan Adsense di Tengah Postingan

Caranya sangat mudah, d sini teman hanya perlu mengganti isyarat tertentu pada template dan menggantinya dengan isyarat yang akan aku berikan pada panduan di bawah ini.

1. Silakan login ke Blogger dan pilih blog yang akan diedit, klik hidangan Template, klik tombol Edit HTML, lalu cari dan ganti isyarat ini <data:post.body/> di template teman dengan isyarat di bawah ini

Di dalam template teman akan menemukan beberapa isyarat <data:post.body/> tergantung template yang digunakan, coba satu persatu hingga iklan tampil di dalam halaman artikel

<div expr:id='&quot;zet1&quot; + data:post.id'/> <div class='googlezet'> <!-- pasang isyarat iklan yang telah diparse di sini --> </div> <div expr:id='&quot;zet2&quot; + data:post.id'><p><data:post.body/></p></div> <script type='text/javascript'> var obj0=document.getElementById(&quot;zet1<data:post.id/>&quot;);var obj1=document.getElementById(&quot;zet2<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+16);} </script>

Tambahkan isyarat iklan pada isyarat yang ditandai

2. Tambahkan juga isyarat CSS di bawah ini semoga tampilan iklan terlihat rapi rata tengah sebelum  ]]></b:skin> atau </style>

.googlezet{margin:15px auto;text-align:center}

3. Simpan template dan lihat hasilnya.

Result

Bukan hanya untuk menampilkan iklan dari Google Adsense, namun teman juga sanggup memasang isyarat iklan lain atau konten lain menyerupai link postingan terkait, atau lainnya.

Demikian artikel singkat yang mudah-mudahan bermanfaat bagi sobat, terima kasih sudah berkunjung dan salam blogger.
Sumber http://arlinadesign.blogspot.com

Cara Memasang Artikel Terkait Di Dalam Postingan

Cara Memasang Artikel Terkait Di Dalam Postingan

CSS HTML Javascript Tips Blogger Widget

Cara Memasang Artikel Terkait di Dalam Postingan - Halo sahabat blogger, tentunya sahabat sudah mengetahui dengan fungsi sebuah widget artikel terkait di blog yang menampilkan sejumlah artikel terkait sesuai label di bawah artikel baik itu dalam bentuk link dan thumbnail ataupun link saja.

Namun sedikit berbeda dari sebelumnya, di sini aku akan menunjukkan tutorial Cara Memasang Artikel Terkait di Dalam Postingan. Seperti yang aku singgung sebelumnya di artikel Cara Memasang Iklan Adsense di Tengah Postingan bahwa sahabat juga sanggup memasang instruksi atau widget lain di dalam instruksi tersebut, tutorial blogger kali ini pun masih memakai instruksi yang sama. Tutorial ini aku dapatkan dari blog http://kileakskiteaks.blogspot.com/search?q=cara-memasang-iklan-adsense-di-tengah-postingan dan telah aku modifikasi kembali diadaptasi dengan style saya.

Manfaat lain yang didapatkan dari memasang artikel terkait di dalam postingan ini adalah untuk menambah jumlah pengunjung serta meningkatkan kualitas Internal Link di blog sobat.

Bagi yang ingin memasangnya di blog, silakan ikuti langkah-langkah Cara Memasang Artikel Terkait di Dalam Postingan atau lebih tepatnya di tengah konten artikel berikut ini

Cara Memasang Artikel Terkait di Dalam Postingan

1. Buka Blogger > Template > Klik tombol Edit HTML > Tambahkan instruksi di bawah ini sebelum tag </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>

2. Tambahkan CSS di bawah ini sebelum instruksi ]]></b:skin> atau </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)}}

Contoh tampilan widget Artikel Terkait Style 1

/* 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}}

Contoh tampilan widget Artikel Terkait Style 2

/* 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}}

Pastikan di blog sahabat sudah memasang Font Awesome semoga icon sanggup muncul

3. Selanjutnya, cari dan ganti instruksi <data:post.body/> dengan instruksi di bawah ini

Di dalam template sahabat akan menemukan beberapa instruksi <data:post.body/> tergantung template yang digunakan, coba satu persatu hingga artikel terkait muncul di dalam halaman artikel

<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>

4. Simpan template dan lihat hasilnya.

Result

Makara dengan memasang instruksi ini sahabat tidak perlu lagi repot-repot memasang link secara manual di artikel blog. Demikian tutorial Cara Memasang Artikel Terkait di Dalam Postingan yang sanggup berikan. Terima kasih sudah berkunjung dan semoga bermanfaat.
Sumber http://arlinadesign.blogspot.com