Showing posts with label Javascript. Show all posts
Showing posts with label Javascript. Show all posts
Dua (2) Cara Dalam Membuat Dan Memasang Widget WhatsApp Diblog Paling Mudah & Keren

Dua (2) Cara Dalam Membuat Dan Memasang Widget WhatsApp Diblog Paling Mudah & Keren

syugulnajeh -  Hampir semua blog yang ada di internet mencantumkan kontak mereka yang dapat dihubungi, yang bertujuan untuk mempermudah para pengunjung supaya bisa berkomunikasi dengan Admin blog tersebut dengan cepat, efektif dan yang pasti tidak ribet. 

Salah satu cara supaya para pengunjung blog bisa berkomunikasi dengan Admin blog dengan mudah dan cepat adalah dengan memasangnya fitur live chat pada blog tersebut. Ada banyak sekali aplikasi atau fitur yang bisa kamu gunakan diblog kamu. Diantaranya Tawk To dan masih ada banyak lagi yang lainnya. 

Selain aplikasi diatas masih ada lagi aplikasi yang lebih simpel dan praktis untuk diterapkan diblog kamu. Contohnya seperti Whatsapp atau Disqus. Kedua fitur ini sangat relavan sekali untuk diterapkan diblog kamu. Karena disamping banyak sekali para penggunanya, kedua aplikasi ini juga memiliki segudang fitur-fitur canggih lainnya. 

Seiring berjalannya waktu, para programmer mereka mencoba membuat aplikasi tersebut supaya dalat digunakan diblog maupun website. Dan ternyata memang, kedua aplikasi ini kini sudah dapat kita gunakan untuk diterapkan diblog kita. 

Hal ini tentu akan sangat membantu sekali bagi para blogger yang konten blognya berisi jualan produk secara online. Terutama whastapp, yang hampir semua orang menggunakan aplikasi yang satu ini. Entah itu whatsapp resmi Play Store ataukah hasil modifikasi. 

Di artikel kali ini saya akan membagikan tips cara memasang fitur widget WhatsApp dengan gaya mengambang diblog. Widget ini pasti akan sangat membantu blog kamu untuk berjualan. Widget ini sangatlah mudab untuk diterapkan diblog kamu dan kamu akan menemukan berbagai keuntungan dalam memasang widget ini. 

Untuk bisa memasang widget whastapp ini ada dua cara yang berbeda. Tapi keduanya sama-sama menggunakan bantuan dari website lain. Kalau kamu seorang programmer yang sudah sangat ahli, mungkin artikel ini tidak akan membantu kamu. Tapi kalau kamu sama seperti saya yang statusnya masih belajar, mungkin ini bisa jauh membantu untuk mengembangkan bisnis kamu. 

Okeh, kita langsung saja ke tutorial cara memasang widget WhatsApp ini diblog kamu. Untuk cara yang pertama kita menggunakan fitur canggih dari website terkenal yaitu whasthelp.io. Di website ini kamu bisa memasang widget whastapp secara singkat. Tak perlu memakan waktu lama. Berikut adalah langkah-langkahnya.

0.1 ) Cara Memasang Widget WhatsApp Diblog Melalui Whasthelp.io


  1. Pertama-tama kamu masuk dulu ke situsnya.
  2. Kemudian pilih whastapp di choose messaging apps.
  3. Setelah itu, kamu isi saja nomor yang ingin kamu pakai pada kolom yang sudah disediakan. cara memasang widget whatsapp
  4. Pada add the code to your website, kamu masukan saja alamat email kamu. Klik get button code, maka akan muncul beberapa baris kode pada tema blog kamu. 
  5. Kemudian salin semua kodenya dan templekan di HTML blog kamu. 

Cara memasang widget whastapp di blog


  1. Kamu masuk ke Dashbord blogger kamu.
  2. Masuk ke menu Theme => Edit HTML.
  3. Kemudian cari kode dengan tag </body> dan taruh kode yang kamu salin tadi tepat diatas tag tersebut.  
  4. Jika sudah klik simpan dan lihat hasilnya. 

0.2 ) Cara Membuat Widget WhastApp Menggunakan Widgetwhats.com


  1. Buka situsnya terlebih dahulu di widgetwhats.com.
  2. Kalau kamu belum pernah daftar sebelumnya, silahkan daftar terlebih dahulu menggunakan email kamu. 
  3. Jika sudah daftar, kamu akan diarahkan ke halaman Dashbord situs tersebut. 
  4. Kemudian klik "Create Widget" dan buatlah widget sesuka hati kamu. 
  5. Jangan lupa isi nomor, nama, pesan pembuka dan jam kerja saat online. 
  6. Jika semuanya sudah kamu atur sesuka kamu, langsung saja di save widgetnya dan kamu akan diperlihatkan dengan code widgetnya. 
  7. Langsung saja salin dan taruh kode tersebut ke dalam laman HTML blog kamu. Caranya sama saja seperti langkah-langkah diatas tadi.!

Hasil untuk widget whatsapp melalui widgetwhats.com akan seperti gambar berikut ini. 


Itulah tutorial cara memasang widget whatsapp yang bisa saya berikan pada artikel ini. Mungkin artikel ini bisa bermanfaat buat kamu yang lagi cari tutorial ini. Kalau kamu masih bingung, atau mengalami masalah saat penerapan kodenya, kamu bisa tanyakan dikolom komentar.
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 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>
  5. 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!


  4. 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
Subscribe to: Comments (Atom)