Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts
4 Cara Direkomendasikan Untuk Menghapus Dan Memblokir Link Aktif Diblog Permanen

4 Cara Direkomendasikan Untuk Menghapus Dan Memblokir Link Aktif Diblog Permanen

syugulnajeh - Link aktif sering kali kita jumpai di dalam kotak komentar blog kita masing-masing. Tujuan mereka meninggalkan jejak berupa link dalam komentar blog mungkin karena berharap adanya orang lain dari pengunjung blog kamu mengklik link tersebut. 
Menghapus Link Aktif di Komentar Blog secara otomatis

Tentu saja link tersebut akan mengakibatkan hal buruk pada blog kamu. Terlebih lagi jika link yang ditaruh menuju kepada tempat atau situs yang isinya berupa negatif, pasti akan menjadi masalah besar bagi blog kamu. Maka dari itu cegahlah komentar-komentar tidak berguna (sampah, promosi pruduk dan lain sebagainya) seperti link tadi agar dihapus secara langsung. 

Supaya blog kamu tetap sehat dan aman, kamu bisa coba cara yang akan saya berikan pada artikel ini. Cara ini adalah cara untuk menghapus semua link aktif yang ada di komentar blog kamu. Ada empat cara agar link tersebut menjauh dari blog kamu. Ikuti langkah-langkah yang berikut ini. 

Empat {4} Cara Menghapus atau Menyembunyikan Link Aktif Di dalam Kolom Komentar


0.1 ) Menyembunyikan Link Aktif Menggunakan Bantuan CSS


Cara yang pertama dan utama tentu menggunakan bantuan CSS yang ditempelkan ke dalam laman blog kamu. Hal ini sangat unggul sekali dalam hal kecepatan. Karena sedikitnya kode CSS yang akan digunakan nantinya. 

Dengan menggunakannya CSS ini, maka link aktif dalam komentar tidak akan bisa diklik karena link tersebut tidak ditampilkan. Contohnya seperti gambar berikut ini :


Untuk cara pemasangnya adalah sebagai berikut ini. 

Masuk ke Dashbord blogger kamu. 
Masuk ke menu Theme => Edit HTML.
Tambahkan kode CSS dibawah ini tepat berada diatas ]]></b:skin>.

#comments p a{ display: none !important;} 

Namun menyembunyikan link tersebut menggunakan CSS masih memiliki kelemahan. Link tersebut tetap akan muncul atau nampak apabila dilihat di Page Source. Walaupun para pengunjung sedikit dari mereka yang menyadari akan hal link itu, taoi Google masih tetap bisa mendeteksi akan hal tersebut. 

0.2 ) Menghilangkan Link Aktif Dengan Bantuan Javascript & jQuery


Menghilangkan link aktif dalam komentar menggunakan Javascript dan jQuery sangat saya rekomendasikan. Karena dengan memasang kode tersebut, link komentar akan benar-benar menghilang tanpa bekas apapun.

Dan memang cara ini sudah banyak sekali digunakan oleh para blogger lainnya dengn tujuan agar blog mereka terjauhkan dari link aktif dan spam. Untuk cara pemasangannya pun sangat mudah, kamu hanya perlu memasukan javascript dibawah ini ke dalam tag </body> pada HTML blog. 

0.3 ) Berikut adalah cara memasang anti link menggunakan Javascript :

Masuk ke Dashbord blogger kamu. 
Masuk ke menu Theme => Edit HTML.
Kemudian taruh kode berikut ini telat berada diatas tag </body>.
Jika sudah silahkan simpan.

<script type='text/javascript'>
//<![CDATA[
function blockLinks(parentID, children) {
var parent = document.getElementById(parentID),
content = parent.getElementsByTagName(children);
for (var i = 0; i < content.length; i++) {
if (content[i].innerHTML.indexOf('</a>') !== -1) {
var salinan = content[i].innerHTML;
content[i].innerHTML = "<div>Maaf, link aktif tidak diperkenankan di sini. Salinan komentar Anda :</div><div><textarea>" + salinan + "</textarea> <div>Terima kasih atas pengertiannya</div>";
content[i].className = "spammers";
}
}
}
// Jalankan fungsi!
blockLinks('comments', 'p');
//]]>
</script>

Kode tersebut berguna untuk memblokir semua link pada komentar blog kamu secara otomatis. Sehingga jika ada link, maka link tersebut tidak akan ditampilkan berupa link. Namun akan diperlihatkan seperti komentar pada awalnya. Contoh seperti ini :

Saya akan menuliskan link dikomentar blog yang sudah terpasang script diatas. Contoh dibawah ini adalah contoh untuk link yang belum terblokir oleh javascript dan jQuery tadi. 

Kunjungi blog saya disini

Dan jika link komentar tadi sudah diblokir maka hasilnya akan seperti dibawah ini. 

Kunjungi blog saya <a href="https://syugulnajeh.blogspot.com/" rel="nofollow">disini</a>

Untuk yang jQuery itu ada berbagai macam ragam fungsinya. Ada yang berfungsi menghilangkan link tersebut dan mengembalikannya seperti teks biasa dan ada juga yang lainnya. Dan untuk cara mengembalikan ke teks biasa caranya adalah sebagai berikut :

√ Membuat Multi Related Post Otomatis Diantara Paragraf Artikel

√ Membuat Multi Related Post Otomatis Diantara Paragraf Artikel

syugulnajeh - Related post merupakan salah satu hal penting yang membuat para pembaca selalu berkunjung dari satu artikel ke artikel yang lainnya. Related post pun beragam macam jenis dan bentuknya. Ada yang otomatis di tengah, diawal, atau diakhir artikel. Tapi pada kali ini saya akan membahas hal yang berbeda. Yaitu multi related post diantara paragraf artikel. 
Memasang Multi Related Post Syugul Najeh

Multi related post ini akan muncul secara otomatis diantara paragraf artikel kamu. Related ini akan menyesuaikan jumlahnya tergantung dengan panjang dan pendeknya artikel yang kamu buat. Misalkan artikel kamu panjangnya 40 paragraf, maka si related post ini akan menyesuaikan letak dan jumlahnya. 

Kenapa harus memasang multi related post ini untuk blog? Dan apa keuntungannya?


Multi related post ini udah sangat jelas sangat berguna. Selain dari sisi meningkatkan trafik dan jumlah klik untuk setiap artikel, related ini juga mempengaruhi skor SEO pada blog kamu. Selain itu, related post ini juga akan memperbanyak  visitor blog karena banyaknya jumlah internal link tersebut. 

Okeh, itulah beberapa keuntungan dan kelebihan dalam memasang multi related post untuk blog. Kalau kamu tertarik untuk memasangnya kamu bisa ikuti saja langkah-langkah dibawah ini.

Cara Memasang Multi Related Post Diantara Paragraf Artikel Blog


1. Masuk ke Dashbord blogger masing-masing. 
2. Masuk ke menu Theme => Edit HTML.
3. Kemudian copy dan pastekan kode CSS dibawah ini tepat diatas tag  </head>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<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(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z&#39; fill=&#39;%23fff&#39;/%3E%3C/svg%3E&quot;) center / 40px no-repeat;transition:all .3s}
</style>
</b:if>

4. Lalu cari kode atau kode <data:post.body/> dan letakan diatas kode tersebut.

Untuk kode <data:post.body/> mungkin berbeda-beda, tergantung template yang digunakan.Ada yang berada di 3 tempat dan ada yang 2. Kamu coba saja satu pertasu hingga muncul multi related postnya.

 

<b:if cond='data:view.isPost'>
<script type='text/javascript'>
//<![CDATA[
// Multi Related Post
(function() {var jumlah = 3;let post = document['querySelectorAll']('.post-body br, .post-body p'),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='&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>
<script type='text/javascript'>
//<![CDATA[
(function arldzgnMultiRelated() {var text = 'Also read :';let r = Math['floor']((relatedTitles['length'] - 1) * 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>

 
Kamu bisa ganti jumlah related post yang akan muncul diartikel kamu dengan mengganti teks yang ditandai garis dan tebal. (var jumlah='3')

5. Langkah terakhir simpan temanya dan lihat hasilnya. 

Itulah cara memasang multi related post yang bisa saya berikan. Kalau masih ada keluhan atau masalah saat memasang kodenya, kamu bisa tanyakan dikolom komentar. 

√ Cara Membuat Tombol Demo Dan Download Keren Gradian Ala Arlina

√ Cara Membuat Tombol Demo Dan Download Keren Gradian Ala Arlina

syugulnajeh - Kamu pasti tahukan blog terpopuler di indonesia milik mba arlina? Salah satu blog impian para blogger lainnya. Kenapa bisa menjadi impian para blogger? Ada beberapa alasan kenapa orang-orang mengininkan desain blog seperti mba arlina ini. Salah satunya desain blog yang terlihat cantik dan elegan. 
cara membuat tombol demo seperti arlina

Salah satu yang membuat tampilan blognya menjadi terlihat cantik adalah dengan adanya tombol demo dan download yang elegan. Kalau kamu pernah mengunjungi blognya, pasti kamu sudah tahu bagaimana bentuk dan desain tombol demo dan downloadnya. 

Tombol demo ini memiliki bentuk yang beragam namun identik dengan gradian. Ada tombol yang berbentuk bulat dan ada juga yang berbentuk kotak. 

Untuk bisa memasang tombol yang mirip seperti mba arlina ini cukup mudah kok. Kamu tidak perlu belajar program dulu untuk bisa memasang tombol ini. Hanya perlu mengikuti langkah-langkah didalam artikel ini, kamu sudah bisa memasang tombol demo yang cantik seperti arlinadzgn.com ini. 

Tanpa lama-lama kita langsung aja ke tutorial cara membuat tombol demo dan download ala arlina. Simak baik-baik!

Cara Membuat Dan Memasang Tombol Demo & Download Keren Seperti Arlina


1. Masuk ke Dashbord blogger kamu. 
2. Kemudian masuk ke menu Theme --> Edit HTML. 
3. Lalu masukan atau pastekan kode CSS dibawah ini tepat diatas </head>.

<style type="text/css">
/* buttom by paseo design */
body{
font-family: Arial, Helvetica, sans-serif;
margin:0;
}

.container {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
flex-wrap: wrap;
width: 50vw;
margin: 0 auto;
min-height: 0vh;
}
.btn {
flex: 1 1 auto;
margin: 8px;
padding: 15px;
text-align: center;
text-transform: uppercase;
transition: 0.15s;
background-size: 400% auto;
color: white;
/* text-shadow: 0px 0px 0px rgba(0,0,0,0.2);*/
box-shadow: 0 0 20px #eee;
border-radius: 3px;
text-decoration: none;
}

.btn:hover {
background-position: right center; /* change the direction of the change here */
}

.gradien-paseo{
background-image: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;} @-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}

/* Magic End*/
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

4. Kemudian simpan temanya. Sampai disini kamu sudah berhasil memasukan kode demonya. Dan untuk pemasangan tombol demonya didalam postingan, masuk ke postingan kamu dan pastekan kode pemanggil ini kedalam mode HTML (bukan Compose). 

<div class="container">
<a href="#" class="btn gradien-paseo">Demo</a>
</div>
<div class="container">
<a href="#" class="btn gradien-paseo">Download</a>
</div>

Silahkan ganti pada elemen href dengan link tujuan. Dan kalau mau buat lebih dari dua tombol, tambahkan saja elemen tag <a href="......" hingga </a> kedalam tag </div>.

Jika semuanya sudah publikasikan postingannya dan lihat hasilnya. 
Cara Membuat Contact From WhatsApp Keren Diblog atau Situs

Cara Membuat Contact From WhatsApp Keren Diblog atau Situs

syugulnajeh - Dijaman 2020 ini siapa sih yang nggak kenal dengan Aplikasi paling populer yang bernama WhatsApp? Atau biasa disebut dengan WA? Saya yakin kamu semua yang baca artikel ini pada punya akun WA kan? Iya lah, jaman sekarang kalo gak pakai WA kurang srek rasanya. 
widget contact from whatapp diblog

Karena beragam fitur yang ada didalam  aplikasi ini, semua orang merasa terbantu atas permasalahan atah kebutuhan orang sehari-hari. Terlebih lagi kalau kamu penjual produk online shop, pasti sangat membutuhkan sekali yang namanya WA. 

Kalau kamu memiliki blog atau situs toko online, cara memasang widget whatsapp kali ini akan sangat membantu kamu ketika berjualan melalui toko online kamu. Widget whatsapp ini dibuat oleh para ahli programmer yang bertujuan untuk memudahkan masyarakat ketika berkomunikasi secara online. 

Widget whatsapp ini juga sebenarnya sudah banyak sekali digunakan oleh berbagai sifus besar seperti halodoc dan lain-lain. Dengan memasangnya widget ini, para pembeli ditoko online kamu akan merasa nyaman dan lebih simpel tentunya. 

Untuk cara pemasangan contact from WA ini sangatlah mudah.  Bahkan kamu bisa memasang fitur ini ke situs kamu tanpa harus paham bahasa program atau membahayar orang lain untuk memasangnya. 

Disini saya selaku penulis, saya akan berikan tutorial lengkap mengenai cara membuat contact from WA di blog atau situs kamu. Okeh langsung aja ke inti pembahasannya. 

Cara Memasang Contact From WhastApp Di Blog atau Situs Toko Online


  1. Masuk ke Dashbord blogger kamu terlebih dahulu. 
  2. Masuk ke menu Theme --> Edit HTML
  3. Kemudian pastekan kode berikut ini diatas tag </head>.
    <style type="text/css">
    * {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;
    outline:none;
    margin:0;
    padding:0;
    }
    .whatsapp-btn {
    cursor:pointer;
    position:fixed;
    bottom:40px;
    right:40px;
    display:block;
    width:50px;
    height:50px;
    border-radius:50px;
    text-indent:-9999px;
    background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHoLtVSCZINbexUkn7WCUUsZEYOsC7EG9quURyC4NQBNpT7LaGGtEqU-mav1qotVP63x9-XW3TBKDHB_ZUZYsnPItw3unkBkWrMq2b6bilH_Oa3ePUdXf9dg2G1Aqx19D23zE9f461ciC6/s300/Whatsapp.png) no-repeat center center;
    background-size:50% auto;
    box-shadow:0 20px 25px rgba(0,0,0,.05);
    transition:.2s;
    }
    .whatsapp-btn:active {
    bottom:35px;
    }
    #whatsapp {
    position:fixed;
    z-index:+100;
    bottom:0px;
    right:0px;
    display:block;
    background:#fff;
    box-shadow:0 20px 25px rgba(0,0,0,.05);
    max-width:300px;
    font-family:Helvetica, sans-serif;
    font-size:90%;
    border-radius:4px;
    visibility:hidden;
    opacity:0;
    transition:.3s;
    }
    #whatsapp.toggle {
    bottom:110px;
    right:40px;
    visibility:visible;
    opacity:1;
    }
    @media(max-width:320px) {
    .whatsapp-btn {
    bottom:10px;
    right:10px;
    }
    #whatsapp.toggle {
    bottom:80px;
    right:10px;
    visibility:visible;
    opacity:1;
    }
    }
    #whatsapp label,
    #whatsapp a {
    display:block;
    margin:15px;
    text-decoration:none;
    }
    #whatsapp input,
    #whatsapp textarea {
    display:block;
    border:1px solid #eee;
    box-shadow:inset 0 2px 5px #eee;
    width:100%;
    padding:15px;
    border-radius:2px;
    }
    #whatsapp input.nama {
    text-transform:capitalize;
    }
    #whatsapp input:focus,
    #whatsapp textarea:focus {
    border:1px solid #ddd;
    }
    #whatsapp textarea {
    min-height:80px;
    resize: none;
    }
    #whatsapp a {
    cursor:pointer;
    display:block;
    padding:10px;
    font-weight:bold;
    text-align:center;
    background:#25D366;
    color:white;
    border-radius:2px;
    }
    #whatsapp a:hover {
    background:#20b558;
    }
    </style>
  4. Kemudian pastekan juga jQuery dibawah ini tepat berada diatas Tag </body>.
  5. <script type="text/javascript">
    $('.whatsapp-btn').click(function(){
    $('#whatsapp').toggleClass('toggle');
    });
    // Onclick Whatsapp Sent!
    $('#whatsapp .submit').click(WhatsApp);

    $("#whatsapp input, #whatsapp textarea").keypress(function() {
    if (event.which == 13) WhatsApp();
    });
    var reg = /^([A-Za-z0-9_-.])+@([A-Za-z0-9_-.])+.([A-Za-z]{2,4})$/;
    function WhatsApp() {
    var ph = '';
    if ($('#whatsapp .nama').val() == '') { // Cek Nama
    ph = $('#whatsapp .nama').attr('placeholder');
    alert('Silahkan tulis ' + ph);
    $('#whatsapp .nama').focus();
    return false;
    } else if ($('#whatsapp .email').val() == '') { // Cek Email
    ph = $('#whatsapp .email').attr('placeholder');
    alert('Silahkan tulis ' + ph);
    $('#whatsapp .email').focus();
    return false;
    } else if (reg.test($('#whatsapp .email').val()) == false) { // Cek Validasi Email
    alert('Alamat E-mail tidak valid.');
    $('#whatsapp .email').focus();
    return false;
    } else if ($('#whatsapp .pesan').val() == '') { // Cek Pesan
    ph = $('#whatsapp .pesan').attr('placeholder');
    alert('Silahkan tulis ' + ph);
    $('#whatsapp .pesan').focus();
    return false;
    } else {
    if (!confirm("Sudah menginstall WhatsApp?")) {
    window.open("https://www.whatsapp.com/download/");
    } else {
    // Check Device (Mobile/Desktop)
    var url_wa = 'https://web.whatsapp.com/send';
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    url_wa = 'whatsapp://send/';
    }
    // Get Value
    var tujuan = $('#whatsapp .tujuan').val(),
    via_url = location.href,
    nama = $('#whatsapp .nama').val(),
    email = $('#whatsapp .email').val(),
    pesan = $('#whatsapp .pesan').val();
    $(this).attr('href', url_wa + '?phone=62 ' + tujuan + '&text=Halo, saya *' + nama + '* (' + email + ').. %0A%0A' + pesan + '%0A%0Avia ' + via_url);
    var w = 960,
    h = 540,
    left = Number((screen.width / 2) - (w / 2)),
    tops = Number((screen.height / 2) - (h / 2)),
    popupWindow = window.open(this.href, '', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=1, copyhistory=no, width=' + w + ', height=' + h + ', top=' + tops + ', left=' + left);
    popupWindow.focus();
    return false;
    }
    }
    }
    </script>
  6. Kemudian klik simpan.

Sampai disini kamu sudah berhasil memasukan kode widget whatsappnya. Kemudian bagaimana cara memasangnya diblog agar bisa muncul? Caranya mudah banget, ikuti langkah dibawah ini. 

Cara Menggunakan Kode Widget WA Untuk Memasangnya Diblog


  1. Masuk ke menu layout atau tata letak

  2. Tambahkan Gadget HTML/Javascript(dimana saja). 
  3. Kemudian masukan kode berikut ini kedalam kolom konten tersebut. 
  4. <i class="whatsapp-btn">WhatsApp</i>
    <div id="whatsapp">
    <input class="tujuan" type="hidden" value="089618885066"> <!-- No. WhatsApp -->
    <label>
    <input class="nama" type="text" placeholder="Nama Lengkap..">
    </label>
    <label>
    <input class="email" type="email" placeholder="Alamat E-mail..">
    </label>
    <label>
    <textarea class="pesan" placeholder="Pesan.."></textarea>
    </label>
    <a class="submit">Kirim</a>
    </div>

     

    Jangan lupa untuk mengganti nomor WhatsAppnya dengan nomor kamu!


  5. Klik simpan dan lihat hasilnya! 

Nah, itulah tutorial singkat mengenai cara memasang widget Contact From WhatsApp diblog yang bisa saya sampaikan pada artikel kali ini. Jangan lupa di share kalau artikel ini dirasa bermanfaat buat kamu. 
Cara Membuat Related Post Dengan Thumbnail Dan Snippet Model Grid igniel

Cara Membuat Related Post Dengan Thumbnail Dan Snippet Model Grid igniel

syugulnajeh- Related post termasuk salah satu hal terpenting yang wajib dimiliki blog. Related post dapat meningkatkan waktu pengunjung saat membaca artikel blog. Apalagi kalau desainnya itu bagus, rapih dan elegan. Pasti para pembaca betah untuk membaca artikel kamu.

Dalam memasang related post ini ada beberapa jenis dan beragam pula desainnya. Ada yang ditengah artikel, ada yang diawal dan ada juga yang dibagian bawah setelah artikel selesai. Untuk desainnya pun beragam, ada yang simpel, ada yang beserta gambar, ada juga yang disertai dengan cuplikan artikelnya. 

Kali ini saya akan memberikan cara memasang related post yang berbeda dari yang lain dan pastinya gak kalah keren. Ďan tutorial ini saya dapat dari blognya igniel yang sudah pernah saya terapkan diblog saya ini. Dan hasilnya sangat bagus dan bisa meningkatkan skor SEO. 

Cara Membuat Related Post Dengan Thumbnail Dan Snippet Model List Dibawah Postingan 



1. Masuk ke Dashbord blogger kamu terlebih 
2. Masuk ke menu Theme --> Edit HTML kemudian copas kode CSS dibawah ini tepat berada diatas ]]></b:skin> atau </style>

/* Related Post List by igniel.com */
#ignielRelatedList{
display:block;
margin:20px 0px;
line-height:1.25em;
}
#ignielRelatedList h3.title{
font-size:16px;
font-weight:600;
text-align:center;
text-transform:uppercase;
line-height:initial;
}
#ignielRelatedList h3.title span{
background-color:#fff;
padding:0px 15px;
position:relative;
z-index:1;
}
#ignielRelatedList h3.title:before{
content: '';
display: block;
position: relative;
top:10px;
width: 100%;
border-top: 2px solid #cccccc;
}
#ignielRelatedList ul{
margin:20px 0px 0px;
padding:0px;
}
#ignielRelatedList ul li{
list-style:none;
margin-bottom:15px;
padding-bottom:15px;
border-bottom:1px solid #ccc;
-webkit-margin-start:0px !important;
display:inline-block;
width:100%;
clear:both;
}
#ignielRelatedList ul li:last-child{
border:0px;
padding:0px;
}
#ignielRelatedList ul li .thumb{
overflow:hidden;
line-height:0px;
border-radius:7px;
float:left;
margin-right:15px;
}
#ignielRelatedList ul li a{
display:block;
}
#ignielRelatedList ul li a.judul{
color:#000; /* Warna Huruf */
font-weight:600;
font-size:16px;
overflow:hidden;
line-height:1.25em;
}
#ignielRelatedList ul li .snippet{
color:#444;
font-size:13px;
overflow:hidden;
margin:7px 0px 0px;
padding:0px;
}
#ignielRelatedList ul li a.judul:hover, #ignielRelatedList ul li:hover a.judul{
color:#ff5722; /* Warna Huruf Ketika Disorot */
}
#ignielRelatedList ul li a img{
width:120px;
height:90px;
transition:all .3s ease;
border:0px;
margin:0px;
}
#ignielRelatedList ul li a img:hover, #ignielRelatedList ul li:hover img{
transform:scale(1.1) rotate(-5deg);
filter: brightness(75%);
-webkit-filter: brightness(75%);
}
#ignielRelatedList .norelated{
text-align:center;
font-weight:600;
}
@media screen and (max-width:480px){
#ignielRelatedList ul li a.judul{
font-size:14px;
}
#ignielRelatedList ul li .snippet{
font-size:12px;
}
}

3. Kemudian copas kembali javascript dibawah ini tepat setelah atau dibawah <data:post.body/>

<!-- Related Post List by igniel.com -->
<b:if cond='data:view.isPost'>
<div id='ignielRelatedList'>
<h3 class='title'><span>Related Posts</span></h3>
<script>//<![CDATA[
var jumlah = 6;
var kata = 150;
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}('d a=["\\w","\\q\\L\\g\\j\\h","\\g\\e\\l\\I\\h\\G","\\v","\\j\\l\\D\\e\\1X\\1d\\T","\\q\\E\\Z\\q\\h\\p\\j\\l\\I","","\\1o\\K\\j\\l","\\e\\l\\h\\p\\1x","\\T\\e\\e\\D","\\1E\\h","\\h\\j\\h\\g\\e","\\Q\\K\\l\\h\\e\\l\\h","\\q\\E\\z\\z\\f\\p\\1x","\\z\\e\\D\\j\\f\\1E\\h\\G\\E\\z\\Z\\l\\f\\j\\g","\\E\\p\\g","\\D\\f\\h\\f\\2p\\j\\z\\f\\I\\e\\C\\L\\l\\I\\2n\\Z\\f\\q\\e\\1K\\1G\\2q\\j\\1u\\1B\\1d\\1N\\1j\\1r\\2r\\2u\\I\\K\\b\\b\\b\\b\\1H\\1n\\1g\\G\\W\\1g\\I\\b\\b\\b\\b\\W\\b\\b\\b\\b\\1B\\O\\b\\1v\\b\\b\\b\\O\\1a\\D\\1P\\2c\\e\\b\\b\\b\\b\\b\\2s\\1H\\O\\1n\\1u\\1a\\1v\\O\\b\\1o\\Z\\1G\\1g\\C\\I\\b\\b\\b\\b\\2l\\W\\g\\W\\1a\\1u\\1a\\1v\\z\\2d\\1d\\K\\p\\1K\\2k\\2t\\b\\b\\1M\\2i\\b\\2j\\2g\\1p\\1d\\1Q\\1S\\1J\\b\\b\\b\\b\\b\\W\\g\\1Q\\1J\\1q\\1n\\E\\1a\\z\\O\\O","\\g\\j\\l\\1q","\\p\\e\\g","\\f\\g\\h\\e\\p\\l\\f\\h\\e","\\G\\p\\e\\T","\\p\\f\\l\\D\\K\\z","\\T\\g\\K\\K\\p","\\1g\\1N\\1M","\\w\\g\\j\\v","\\w\\D\\j\\1p\\y\\Q\\g\\f\\q\\q\\M\\n\\h\\G\\E\\z\\Z\\n\\v\\w\\f\\y\\G\\p\\e\\T\\M\\n","\\n\\y\\h\\j\\h\\g\\e\\M\\n","\\n\\v\\w\\j\\z\\I\\y\\q\\p\\Q\\M\\n","\\C\\1j\\1P\\1S\\1r\\1b\\G\\1Z\\1r\\1b\\L\\1b\\1q\\1b\\l\\K\\1b\\l\\E","\\p\\e\\L\\g\\f\\Q\\e","\\n\\y\\f\\g\\h\\M\\n","\\n\\C\\v\\w\\C\\f\\v\\w\\C\\D\\j\\1p\\v","\\w\\f\\y\\G\\p\\e\\T\\M\\n","\\n\\y\\Q\\g\\f\\q\\q\\M\\n\\1o\\E\\D\\E\\g\\n\\v","\\w\\C\\f\\v","\\w\\q\\L\\f\\l\\y\\Q\\g\\f\\q\\q\\M\\n\\q\\l\\j\\L\\L\\e\\h\\n\\v","\\y\\1m\\1m\\1m\\y\\w\\C\\q\\L\\f\\l\\v","\\w\\C\\g\\j\\v","\\1j\\p\\j\\h\\e"];d R=0,o=J H(),u=J H(),B=J H();F=J H();1c 1O(t,Y){d k=t[a[1]](a[0]);P(d m=0;m<k[a[2]];m++){x(k[m][a[4]](a[3])!=-1){k[m]=k[m][a[5]](k[m][a[4]](a[3])+1,k[m][a[2]])}};k=k[a[7]](a[6]);k=k[a[5]](0,Y-1);1t k}1c 2f(Y){P(d k=0;k<Y[a[9]][a[8]][a[2]];k++){d t=Y[a[9]][a[8]][k];o[R]=t[a[11]][a[10]];1h=a[6];x(a[12]1i t){1h=t[a[12]][a[10]]}1w{x(a[13]1i t){1h=t[a[13]][a[10]]}};F[R]=1O(1h,2h);x(a[14]1i t){1l=t[a[14]][a[15]]}1w{1l=a[16]};B[R]=1l;P(d m=0;m<t[a[17]][a[2]];m++){x(t[a[17]][m][a[18]]==a[19]){u[R]=t[a[17]][m][a[20]];1k}};R++}}1c 1R(1s,k){P(d m=0;m<1s[a[2]];m++){x(1s[m]==k){1t!0}};1t!1}1c 2e(){d S=J H(0);d V=J H(0);d U=J H(0);d X=J H(0);P(d i=0;i<u[a[2]];i++){x(!1R(S,u[i])){S[a[2]]+=1;S[S[a[2]]-1]=u[i];V[a[2]]+=1;V[V[a[2]]-1]=o[i];U[a[2]]+=1;U[U[a[2]]-1]=F[i];X[a[2]]+=1;X[X[a[2]]-1]=B[i]}};o=V;u=S;F=U;B=X;P(d i=0;i<o[a[2]];i++){d A=1e[a[22]]((o[a[2]]-1)*1e[a[21]]());d 1F=o[i];d 1I=u[i];d 1A=F[i];d 1z=B[i];o[i]=o[A];u[i]=u[A];F[i]=F[A];B[i]=B[A];o[A]=1F;u[A]=1I;F[A]=1A;B[A]=1z};d 1f=0;d r=1e[a[22]]((o[a[2]]-1)*1e[a[21]]());d 1L=r;d N;d 1D=1y[a[23]];2m(1f<1C){x(u[r]!=1D){N=a[24];N+=a[25]+u[r]+a[26]+o[r]+a[27]+B[r][a[29]](/\\/s[0-9]+(\\-c)?/,a[28])+a[2o]+o[r]+a[26]+o[r]+a[2v];N+=a[1Y]+u[r]+a[1T]+o[r]+a[1U];N+=a[1V]+F[r]+a[1W];N+=a[2b];1y[a[2a]](N);1f++;x(1f==1C){1k}};x(r<o[a[2]]-1){r++}1w{r=0};x(r==1L){1k}}}',62,156,'||||||||||_0x7d7f|x41||var|x65|x61|x6C|x74|_0x8ebex12|x69|_0x8ebex8|x6E|_0x8ebex9|x27|judul|x72|x73|_0x8ebex19||_0x8ebex6|urls|x3E|x3C|if|x20|x6D|_0x8ebex13|gambar|x2F|x64|x75|snippet|x68|Array|x67|new|x6F|x70|x3D|_0x8ebex1b|x43|for|x63|rel|_0x8ebexe|x66|_0x8ebex10|_0x8ebexf|x45|_0x8ebex11|_0x8ebex7|x62|||||||||||x51|x2D|function|x4F|Math|_0x8ebex18|x55|postcontent|in|x77|break|postimg|x2E|x53|x6A|x76|x6B|x30|_0x8ebexc|return|x56|x49|else|x79|document|_0x8ebex17|_0x8ebex16|x42|jumlah|_0x8ebex1c|x24|_0x8ebex14|x34|x4E|_0x8ebex15|x54|x36|_0x8ebex1a|x4C|x52|filter|x31|x46|contains|x32|33|34|35|36|x78|32|x39|||||||||||38|37|x50|x57|ignielRelatedList|relpostimgcuplik|x37|kata|x2B|x58|x38|x44|while|x3B|30|x3A|x2C|x4B|x33|x48|x47|31'.split('|'),0,{}));
//]]></script>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=25&quot;'/>
</b:loop>
<ul>
<script>ignielRelatedList();</script>
</ul>
<b:else/>
There is no other posts in this category.
</b:if>
</div>
<div class='clear'/>
</b:if>


Kamu bisa ganti teks yang ditandai merah dan biru. var jumlah adalah total artikel yang akan muncul dan var kata adalah jumlah kata untuk ringkasan dalam isi konten tersebut (biasa disebut dengan cuplikan artikel).


4. Klik simpan dan lihat hasilnya! 

Itulah cara memasang related post dengan desain thumbnail dan snippet model grid yang bisa saya sampaikan diartikel kali ini. 
Kalau bingung ketika pemasanganya atau related postnya tidak muncul, komentar aja dibawah. Kalau mau lebih jelasnya lihat artikel dari mba Rain di igniel.com. 

https://www.igniel.com/2018/11/related-post-thumbnail-snippet-list.html?m=1