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 
Cara Membuat Kotak Script Scroll Keren Didalam Artikel Blog

Cara Membuat Kotak Script Scroll Keren Didalam Artikel Blog

syugulnajeh - Kotak script sangatlah penting untuk blog apabila blog tersebut banyak membahas tentang tips atau tutorial seputar blog atau yang lainnya. 

Kotak script ini berguna supaya para pembaca tidak kebingungan dalam membedakan antara konten artikel dan inti dari pembahasnya.


Bisa kamu bayangkan jika sebuah blog tutorial yang menyediakan script, namun dalam penulisan dan penyusunan katanya sangat kacau, antara script dan konten artikel tidak tersusun dengan rapi. Apa jadinya? Pengunjung akan merasa kebingungan dan bahkan cenderung akan menutup artikel tersebut. 

Walaupun isi artikel yang kamu berikan bagus dan akan sangat membantu mereka. Mereka justru akan kabur jika susunan artikelnya kacau. 

Maka solusi paling tepat dalam masalah ini adalah dengan membuat kotak script khusus. Dalam membuat kotak script sebenarnya sangatlah mudah. Dan ada banyak sekali desain atau tampilan kotak script tersebut. 

Dan disini saya akan memberikan contoh kotak script yang paling keren dan responsive pastinya. Berikut adalah penjelasan singkat dalam membuat kotak script HTML di dalam postingan blog.

Cara Membuat Kotak Script HTML, CSS Dan Javascript Di dalam Postingan Artikel Blog


1. Masuk terlebih dahulu ke Dashbor blogger kamu.
2. Masuk ke menu Theme --> Edit HTML.
3. Kemudian copy dan pastekan kode berikut ini tepat diatas ]]></b:skin>.

/* KOTAK SCRIPT By hartomy*/
.post-body pre{border-left:5px solid var(--color-main); padding:0;margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#292E34;position:relative;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}
.post-body pre.html:before, .post-body pre.css:before, .post-body pre.javascript:before, .post-body pre.jquery:before {display: block; background-color:#bde0b9; padding:5px 35px; font-weight:500; font-size:16px; font-family:Google Sans, -apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif; background-repeat:no-repeat; background-size:20px 20px; background-position-x:7px; background-position-y:center;}
.post-body pre.html:before {content:'HTML'; background-image:url("data:image/svg+xml,<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12,17.56L16.07,16.43L16.62,10.33H9.38L9.2,8.3H16.8L17,6.31H7L7.56,12.32H14.45L14.22,14.9L12,15.5L9.78,14.9L9.64,13.24H7.64L7.93,16.43L12,17.56M4.07,3H19.93L18.5,19.2L12,21L5.5,19.2L4.07,3Z" fill="%231d2129"></path></svg>");}
.post-body pre.css:before {content:'CSS'; background-image:url("data:image/svg+xml,<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5,3L4.35,6.34H17.94L17.5,8.5H3.92L3.26,11.83H16.85L16.09,15.64L10.61,17.45L5.86,15.64L6.19,14H2.85L2.06,18L9.91,21L18.96,18L20.16,11.97L20.4,10.76L21.94,3H5Z" fill="%231d2129"></path></svg>");}
.post-body pre.javascript:before {content:'Javascript'; background-image:url("data:image/svg+xml,<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z" fill="%231d2129"></path></svg>");}
.post-body pre.jquery:before {content:'jQuery'; background-image:url("data:image/svg+xml,<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M22.88,10.41C20.77,12.18 17.61,11.9 15.84,9.79C14.06,7.67 14.34,4.5 16.45,2.75L16.96,2.37C15.27,4.19 15.16,7.03 16.8,9C18.43,10.94 21.25,11.32 23.34,9.97L22.88,10.41M21.1,14.5C17.93,17.17 13.2,16.76 10.54,13.58C7.87,10.41 8.29,5.68 11.46,3L12.38,2.36C9.96,5.09 9.84,9.26 12.26,12.14C14.68,15 18.8,15.63 21.91,13.72L21.1,14.5M19.97,19.38C15.53,23.11 8.9,22.53 5.17,18.08C1.45,13.64 2.03,7 6.47,3.29L7.58,2.5C4.07,6.3 3.85,12.23 7.28,16.32C10.71,20.4 16.59,21.22 20.96,18.43L19.97,19.38Z" fill="%231d2129"></path></svg>");}
.post-body pre::-webkit-scrollbar,pre::-moz-scrollbar,pre code::-webkit-scrollbar,pre code::-moz-scrollbar,code::-webkit-scrollbar,code::-moz-scrollbar{display:none} .post-body pre code{line-height:1.5em;display:block;background:none;border:none;color:#BFBF90;padding:10px 15px; font-size:12px;white-space:pre;overflow:auto;max-height:250px; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text;} pre mark,code mark,pre code mark{background-color:#95b2f6 !important;color:#292E34 !important;padding:0px;margin:0px} .post-body code {user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text;} .post-body code.tutor {color:#f44336; letter-spacing:-0.3px} post-body quote{border-left:5px solid var(--color-main); user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; padding:0;margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#292E34;position:relative;width:100%;-moz-tab-size:2;-o-tab-size:2; tab-size:2; word-break:normal; -webkit-hyphens:none; -moz-hyphens:none; -ms-hyphens:none; hyphens:none}

4. Klik simpan dan kembali ke Postingan kamu untuk membuat kotaknya.

Untuk cara penggunaan atau memanggil kode tersebut supaya bisa muncul di artikel blog, copy kode berikut ini ke dalam postingan kamu dalam mode HTML!

 

--> Kode dibawah ini untuk menampilkan HTML 

<pre class="html"><code> KODE PASTE DI SINI SCRIPT </code></pre> 

--> Kode untuk menampilkan CSS :

<pre class="css"><code> KODE PASTE DI SINI SCRIPT </span></code></pre> 

--> Kode untuk menampilkan Javascript :

<pre class="javascript"><code> KODE PASTE DI SINI SCRIPT </span></code></pre> 

--> Kode untuk Menampilkam jQuery :

<pre class="jquery"><code> KODE PASTE DI SINI SCRIPT </span></code></pre> 

! Apabila dibagian atas terpotong atau kotak scriptnya gak nongol, coba kamu kasih Enter dibagian atas dan bawah kode.

 

<pre class="html"><code>
.....berikan enter
masukkan kode HTMLyang telah di PARSE di sini
.....berikan enter
</code></pre>

Satu hal lagi, kalau kamu tidak ingin menggunakan logo disetiap kotak script, hilangkan saja elemen class-nya.

Dan sesuaikan kotak script dengan kode yang ingin ditampilkan. Jika kode berupa HTML, gunakan script khusus HTML dan begitu pula yang lainnya.

Itulah tutorial singkat cara membuat kotak script keren dan responsive di dalam postingan blog. 
Cara Memasang Dark Mode Keren Disemua Halaman blog

Cara Memasang Dark Mode Keren Disemua Halaman blog

syugulnajeh - Dark mode adalah salah satu fitur familiar saat ini. Dan fitur ini sudah banyak sekali digunakan diberbagai platform Android dan Windows. 


Dark mode ini terkadang kita jumpai di sebuah aplikasi atau website. Salag satunya adalah YouTube, Facebook dan juga Instagram. Karena sudah familiarnya fitur ini, maka banyak dari kalangan Programmer mereka membuat fitur dark mode ini di blogger dan wordpress.

Contoh blogger yang menggunakan fitur ini adalah blog syugulnajeh ini. Karena dengan adanya fitur mode gelap, akan memberikan kenyaman yang maksimal ketika membaca artikel.

Tombol dark mode ini berfungsi disemua halaman blog atau website kamu. Dan tombol dark mode ini sangatlah efektif sekali bagi para pembaca diblog, karena mereka tidak perlu mengklik kembali tombolnya meskipun mereka pindah halaman.

Kode dark mode ini sudah saya rangkai sedemikian rupa agar blog kamu tetap ringan saat diakses dan tidak mengurangi skor di Gtmatrix ataupun Googlespeed.

Untuk cara pembuatan dark mode ini, kamu bisa ikuti langkah-langkah dibawah ini sampai selesai. 

Cara Memasang Fitur Dark Mode Disemua Halaman Blog Atau Website


1. Masuk ke Dashbord blogger masing-masing.
2. Masuk ke menu Theme --> Edit HTML.
3. Kemudian cari kode ]]><b:skin> atau </style> (gunakan Ctrl + F untuk mencari kode) lalu pastekan kode CSS dibawah ini tepat berada diatas kode tersebut.



/* Dark Mode by hartomy.com */
.hartomySwitch{text-align:center;display:inline-block;align-items:center;padding:0}
.ictoggler.theme{text-align:left;}
.ictoggler .text{color:#5e5e5e;text-transform:uppercase;font-size:.7rem;font-weight:600;padding:5px 0}
.switch{position:relative;display:inline-block}
.switch input{display:none}
.gesek:before{border-radius:100%;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63Z' fill='%235f7dde'/%3E%3C/svg%3E") center /21px no-repeat;transition:0.3s cubic-bezier(0.175,0.885,0.32,1.275),padding 0.3s ease,margin 0.3s ease;position:absolute;content:"";height:24px;width:24px;left:-12px;bottom:-7px;background-color:#fff;box-shadow:rgba(74,74,74,0.5) 0 1px 3px,rgba(45,45,45,0.1) 0 0 0 6px}
.gesek.round{border-radius:34px;cursor:pointer}
.hartodark .gesek:before{position:absolute;content:"";left:-12px;height:24px;width:24px;bottom:-7px;background-color:#fff;background:#95a5a6 url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ5OS43MTIgNDk5LjcxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDk5LjcxMiA0OTkuNzEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4IiBjbGFzcz0iIj48Zz48cGF0aCBzdHlsZT0iZmlsbDojRDlFM0Q0IiBkPSJNMTQ2Ljg4LDM3NS41MjhjMTI2LjI3MiwwLDIyOC42MjQtMTAyLjM2OCwyMjguNjI0LTIyOC42NGMwLTU1Ljk1Mi0yMC4xNi0xMDcuMTM2LTUzLjUyLTE0Ni44OCAgQzQyNS4wNTYsMzMuMDk2LDQ5OS42OTYsMTI5LjY0LDQ5OS42OTYsMjQzLjcwNGMwLDE0MS4zOTItMTE0LjYwOCwyNTYtMjU2LDI1NmMtMTE0LjA2NCwwLTIxMC42MDgtNzQuNjQtMjQzLjY5Ni0xNzcuNzEyICBDMzkuNzQ0LDM1NS4zNjgsOTAuOTQ0LDM3NS41MjgsMTQ2Ljg4LDM3NS41Mjh6IiBkYXRhLW9yaWdpbmFsPSIjRkZEOTNCIiBjbGFzcz0iYWN0aXZlLXBhdGgiIGRhdGEtb2xkX2NvbG9yPSIjRkZEOTNCIi8+PHBhdGggc3R5bGU9ImZpbGw6I0NDRDFDOSIgZD0iTTQwMS45Miw0Mi43NzZjMzQuMjQsNDMuNTA0LDU0LjgxNiw5OC4yNzIsNTQuODE2LDE1Ny45NTJjMCwxNDEuMzkyLTExNC42MDgsMjU2LTI1NiwyNTYgIGMtNTkuNjgsMC0xMTQuNDQ4LTIwLjU3Ni0xNTcuOTUyLTU0LjgxNmM0Ni44NDgsNTkuNDcyLDExOS4zNDQsOTcuNzkyLDIwMC45MjgsOTcuNzkyYzE0MS4zOTIsMCwyNTYtMTE0LjYwOCwyNTYtMjU2ICBDNDk5LjcxMiwxNjIuMTIsNDYxLjM5Miw4OS42NCw0MDEuOTIsNDIuNzc2eiIgZGF0YS1vcmlnaW5hbD0iI0Y0QzUzNCIgY2xhc3M9IiIgZGF0YS1vbGRfY29sb3I9IiNGNEM1MzQiLz48Zz4KCTxwb2x5Z29uIHN0eWxlPSJmaWxsOiNGRkQ4M0I7IiBwb2ludHM9IjEyOC4xMjgsOTkuOTQ0IDE1NC40OTYsMTUzLjQgMjEzLjQ3MiwxNjEuOTYgMTcwLjgsMjAzLjU2IDE4MC44NjQsMjYyLjI5NiAgICAxMjguMTI4LDIzNC41NjggNzUuMzc2LDI2Mi4yOTYgODUuNDQsMjAzLjU2IDQyLjc2OCwxNjEuOTYgMTAxLjc0NCwxNTMuNCAgIiBkYXRhLW9yaWdpbmFsPSIjRkZEODNCIiBjbGFzcz0iIi8+Cgk8cG9seWdvbiBzdHlsZT0iZmlsbDojRkZEODNCOyIgcG9pbnRzPSIyNzYuODY0LDgyLjg0IDI5MC41MjgsMTEwLjU1MiAzMjEuMTA0LDExNC45ODQgMjk4Ljk3NiwxMzYuNTUyIDMwNC4yMDgsMTY2Ljk4NCAgICAyNzYuODY0LDE1Mi42MTYgMjQ5LjUyLDE2Ni45ODQgMjU0Ljc1MiwxMzYuNTUyIDIzMi42MjQsMTE0Ljk4NCAyNjMuMiwxMTAuNTUyICAiIGRhdGEtb3JpZ2luYWw9IiNGRkQ4M0IiIGNsYXNzPSIiLz4KPC9nPjwvZz4gPC9zdmc+Cg==") center / 17px no-repeat;box-shadow:rgb(182, 200, 212) 0 0px 8px, rgba(0, 0, 0, 0.16) 0 0 0 8px;}
@media screen and (max-width:736px){.gesek:before{height:35px;width:35px;left:-12px;bottom:0}.hartodark .gesek:before{height:35px;width:35px;left:-12px;bottom:0}}
.hartodark .Read-more:before{background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22,3H5A2,2 0 0,0 3,5V9H5V5H22V19H5V15H3V19A2,2 0 0,0 5,21H22A2,2 0 0,0 24,19V5A2,2 0 0,0 22,3M7,15V13H0V11H7V9L11,12L7,15M20,13H13V11H20V13M20,9H13V7H20V9M17,17H13V15H17V17Z' fill='%23fff'/%3E%3C/svg%3E") center no-repeat;}
.hartodark body{background:#121212;color:#fff}
.hartodark #header-wrapper{background:#232323;color:#fff}
.hartodark{background:#252f36;color:#fff}
.hartodark a{color:#eee;}
.hartodark .class-baru{}
.hartodark #id-baru{}

Kalau blog kamu belum terpasang jQuery, copy dan pastekan terlebih dahulu kode jQuery ini diatas tag </head>. Tapi kalau sudah terpasang, bisa dilewati!



<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'/>

4. Kemudian pastekan HTML dibawah ini ditempat kamu ingin menampilkan mode gelapnya. Contoh seperti blog ini, maka letakan kodenya didalam tag <header>.




<div class='hartomySwitch'>
<div class='switchtheme'>
<div class='theme ictoggler'>
<label class='switch' for='hartodark'>
<input id='hartodark' type='checkbox'/>
<div class='gesek round'/>
</label>
</div>
</div>
</div>

6. Kemudian letakan kode berikut ini tepat diatas tag </body>.



<script type="text/javascript">
//<![CDATA[
// Night Mode by hartomy.com
var _0x1231=['#hartodark','click','body','toggleClass','hartodark','toggled'];(function(_0x48eed7,_0x55592a){var _0x52efff=function(_0x25873e){while(--_0x25873e){_0x48eed7['push'](_0x48eed7['shift']());}};_0x52efff(++_0x55592a);}(_0x1231,0x120));var _0x5310=function(_0xdab843,_0x5c5fdb){_0xdab843=_0xdab843-0x0;var _0x27e15d=_0x1231[_0xdab843];return _0x27e15d;};$(_0x5310('0x0'))[_0x5310('0x1')](function(){$(_0x5310('0x2'))[_0x5310('0x3')](_0x5310('0x4'));}),$(_0x5310('0x2'))[_0x5310('0x3')](localStorage['toggled']),$(_0x5310('0x0'))[_0x5310('0x1')](function(){_0x5310('0x4')!=localStorage[_0x5310('0x5')]?($(_0x5310('0x2'))[_0x5310('0x3')](_0x5310('0x4'),!0x0),localStorage[_0x5310('0x5')]=_0x5310('0x4')):($(_0x5310('0x2'))['toggleClass'](_0x5310('0x4'),!0x1),localStorage[_0x5310('0x5')]='');});
//]]>
</script>

7. Klik simpan dan jika ingin melihat demonya, silahkan klik tombol dibawah ini.


Atau kamu bisa lihat langsung demo pada blog yang sedang kamu baca ini. Disamping logo header terdapat tombol mode gelap. Sihalkan diklik saja untuk pratinjaunya.

cara membuat efek animasi keren pada loading page diblog

cara membuat efek animasi keren pada loading page diblog

syugulnajeh - Efek loading page pada blog itu memang tidak terlalu penting untuk blog. Bahkan dengan adanya efek loading page ini mungkin kecepatan dalam mengakses blog kamu akan menurun karena banyaknya script yang harus dimuat.


Tapi dengan adanya loading page ini desain blog kamu akan lebih cantik lagi dan akan membuat para pengunjung terkesan dengan desain yang dimiliki.

Untuk bisa memasang efek loading lage ini sangatlah mudah. Caranya sama seperti tutorial blogging yang sebelumnya. Dengan memasukan sedikit baris kode CSS dan jQuery pada blog, efek animasi ini sudah bisa dilihat dengan nyaman.

Sebelum kamu memasang efek animasi ini, sebaiknya kamu pikirkan kembali efek samping atau kekurangan yang akan kamu dapat jika kamu memasangnya. Diantaranya adalah :

1. Mengurangi kecepatan loading blog


Kalau kecepatan load blog kamu sangatlah kurang (alias lambat), maka otomatis para pengunjung akan malas mengkases artikel yabg akan dibaca.

2. Menurunkan skor SEO dihalaman Google


Kekurangan yang lainnya jika kamu memasang efek animasi loading page ini adalah dapat menurunkan skor SEO blog dihalaman pencarian Google.

Dan kalau skor blog kamu menurun, maka otomatis artikel-artikel yabg ada diblog kamu semakin lama akan semakin terpendam. Karena Google hanya akan memunculkan artikel atau web dengan kualitas terbaik dan terutama saat loading.

Tapi kalau kamu tetep masih pengen masang efek animasi pada loading page ini, kamu bisa ikuti langkah-langkah dibawah ini.

Cara Membuat Efek Animasi Pada Loading Page Agar Terlihat Keren


1. Masuk ke Daskbor blogger masing-masing.
2. Masuk ke menu Theme --> Edit HTML.
3. Kemudian cari kode ]]></b:skin> atau </style> juga bisa (gunakan CTRL + F untuk memudahkan dalam pencarian kode).
4. Jika sudah ketemu, paste CSS dibawah ini tepat diatas kode tersebut.

/*Loading Page*/
#page-loader {position:fixed! important;position:absolute;top:0;right:0;bottom:0;
left:0;z-index:9999;background:#fff url ('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBO6Xy9DV6Z7Sk2iA3hYHmLoKDFz7eNe925hghw0liddLRXytrO7nRoY6oNuQfA42ny1kkZZ7lh4oGPB1yt6WKNMZ5lBw64h5JBNrgcOAWifzI491RC4kV_ormmQp1dDphaWicau3NrSIx/s1600/LoadingBSU.gif')
no-repeat 50% 50%;color:#fcfcfc;padding:1em 1.2em;display:none;}

! Ganti teks yang sudah ditandai garis dan tebal dengan link animasi gif yang ingin kamu gunakan

5. Kemudian cari pastekan kembali kode dibawah ini tepat berada diatas tag </body> (tag ini terletak dibagian paling bawah sebelum tag penutup HTML).

<script type="text/javascript">
//<![CDATA[
$(document.body).append('<div id="page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
$('#page-loader').fadeIn(1000).delay(9000).fadeOut(1000);
});
//]]>
</script>

6. Langka terakhir simpan dan lihat hasilnya. 

Itulah tutorial singkat mengenai cara membuat efek animasi pada loadkng page diblogger yang bisa saya tulis pada artikel ini.

Ouh iya, untuk url animasi gifnya kamu bisa cari sendiri di Google dengan kata kunci "Loading Page Keren"

Cara Memasang Efek Bergoyang Pada Gambar Disemua Postingan blog

Cara Memasang Efek Bergoyang Pada Gambar Disemua Postingan blog

syugulnajeh - Desain pada blog tentu menjadi peran yang sangat penting untuk merebut perhatian para pengunjung blog kamu. Ada banyak cara agar blog kamu bisa terlihat keren, elegan dan profesional.

Salah satunya adalah dengan cara memberikan efek animasi atau bergerak pada gambar dalam artikel blog. Efek bergoyang ini sudah banyak sekali digunakan oleh para blogger. 

Karena dengan cara yang praktis dan tidak mengurangi kualitas SEO ini blog kamu akan mendapatkan berbagai keuntungan. Sebelum artikel ini ditulis, saya sudah pernah memberikan tutorial cara membuat efek bergerak pada link diblog. 

Memasang efek bergoyang pada gambar ini sebenarnya tidaklah sulit. Kamu tidak perlu susah-susah belajar bahasa program terlebih dahulu. Karena disini saya akan berikan langkah-langkah secara detail dan rinci.

Efek bergoyang pada gambar ini akan berfungsi apabila ada cursor yang melewati gambar tersebut (kalau diakses menggunakan desktop). Atau gambar yang akan bergerak jika diklik (kalau diakses menggunakan mobile).

Untuk demonya kamu bisa klik atau mengarahkan cursor kamu ke gambar dibawah ini :


Gimana bro? asyikkan? kerenkan? Kalau mau, ikutin langkah-langkah dibawah ini.

Cara Memasang Efek Bergoyang Pada Gambar Di Postingan Blog

1. Masuk ke Daskbord blogger kamu.
2. Masuk ke menu Theme --> Edit HTML.
3. Kemudian copy dan pastekan kode dibawah ini tepat berada diatas ]]></b:skin>

.entry-content img { transition-duration:0.5s; transition-timing-function: ease; transition-delay:0s; -moz-transition-duration:0.5s; -moz-transition-timing-function:ease; -moz-transition-delay:0s; -webkit-transition-duration:0.5s; -webkit-transition-timing-function:ease; -webkit-transition-delay:0s; -o-transition-duration:0.5s; -o-transition-timing-function:ease; -o-transition-delay:0s; } .entry-content img:hover { animation-name: goyang; animation-duration: 0.8s; transform-origin:50% 50%; animation-iteration-count: infinite; animation-timing-function: linear; -moz-animation-name: goyang; -moz-animation-duration: 0.8s; -moz-transform-origin:50% 50%; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -webkit-animation-name: goyang; -webkit-animation-duration: 0.8s; -webkit-transform-origin:50% 50%; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } @keyframes goyang{ 0% { transform: translate(2px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(0px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(2px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(2px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } } @-moz-keyframes goyang{ 0% { -moz-transform: translate(2px, 1px) rotate(0deg); } 10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); } 20% { -moz-transform: translate(-3px, 0px) rotate(1deg); } 30% { -moz-transform: translate(0px, 2px) rotate(0deg); } 40% { -moz-transform: translate(1px, -1px) rotate(1deg); } 50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); } 60% { -moz-transform: translate(-3px, 1px) rotate(0deg); } 70% { -moz-transform: translate(2px, 1px) rotate(-1deg); } 80% { -moz-transform: translate(-1px, -1px) rotate(1deg); } 90% { -moz-transform: translate(2px, 2px) rotate(0deg); } 100% { -moz-transform: translate(1px, -2px) rotate(-1deg); } } @-webkit-keyframes goyang{ 0% { -webkit-transform: translate(2px, 1px) rotate(0deg); } 10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); } 20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); } 30% { -webkit-transform: translate(0px, 2px) rotate(0deg); } 40% { -webkit-transform: translate(1px, -1px) rotate(1deg); } 50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); } 60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); } 70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); } 80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); } 90% { -webkit-transform: translate(2px, 2px) rotate(0deg); } 100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); } }

4. Jika sudah klik simpan dan coba kamu publikasikan gambar ke dalam artikel kamu.

Cara ini menggunakan kode otomatis, yang artinya semua gambar yang ada di blog kamu akan ikut bergerak jika disentuh!

Itulah tutorial cara memasang efek bergerak pada semua gambar yang ada diartikel blog. Cara yang sangat simpel, mudah, ringkas dan banyak manfa'at pastinya!
√ Cara Membuat Halaman Error 404 Diblogger Jadi Keren

√ Cara Membuat Halaman Error 404 Diblogger Jadi Keren

syugulnajeh - Error 404 Page Not Found adalah halaman web atau blog yang telah dihapus oleh pemilik blog atau url yang tidak valid. Sehingga kalau kamu mencari halaman pada suatu web, dan halaman tersebut ternyata sudah dihapus, maka error 404 ini akan muncul.

Secara default, piha Blogger sudah support atau mendukung adanya Custom Error 404 Page Not Found ini (sebagai halaman yang tidak ditemukan). Pada umumnya, halaman eror ini memiliki tampilan yang kurang menarik.

Halaman eror 404 ini pun masih bisa kita edit dengan berbagai rupa. Agar para pengunjung merasa terkesan dengan desain blog kamu.

Maka dari itu saya ingin berbagi sedikit tips menganai cara mempercantik halaman ini. Cara ini sebenarnya sudah menjadi ciri khas bagi sebuah blog atau web. 

Tapi kalau blog kamu memiliki tampilan yang kurang menarik, kamu bisa coba cara yang satu ini. Cara ini menggunaka beberapa baris kode HTML yang akan di taruh ke dalam laman blog kamu. Untuk caranya kamu bisa ikutin langkah-langkah dibawah ini.

Cara Mempercantik Tampilan Halaman Error 404 Page Not Found Diblog



1. Masuk ke Daskbord blogger kamu.
2. Masuk ke menu Theme --> Edit HTML.
3. Kemudian cari kode dengan tag </head> (gunakan Ctrl + F untuk memudahkan dalam pencarian).

<b:if cond="data:view.isError"><style> /*Error Page ===============================*/ .cloud{width:350px;height:120px;background:#fff;background:linear-gradient(top,#fff 100%);background:-webkit-linear-gradient(top,#fff 100%);background:-moz-linear-gradient(top,#fff 100%);background:-ms-linear-gradient(top,#fff 100%);background:-o-linear-gradient(top,#fff 100%);border-radius:100px;-webkit-border-radius:100px;-moz-border-radius:100px;position:absolute;margin:120px auto 20px;z-index:-1;transition:ease 1s} .cloud:after,.cloud:before{content:'';position:absolute;background:#fff;z-index:-1} .cloud:after{width:100px;height:100px;top:-50px;left:50px;border-radius:100px;-webkit-border-radius:100px;-moz-border-radius:100px} .cloud:before{width:180px;height:180px;top:-90px;right:50px;border-radius:200px;-webkit-border-radius:200px;-moz-border-radius:200px} .x1{top:-50px;left:100px;-webkit-transform:scale(.3);-moz-transform:scale(.3);transform:scale(.3);opacity:.9;-webkit-animation:moveclouds 15s linear infinite;-moz-animation:moveclouds 15s linear infinite;-o-animation:moveclouds 15s linear infinite} .x1_5{top:-80px;left:250px;-webkit-transform:scale(.3);-moz-transform:scale(.3);transform:scale(.3);-webkit-animation:moveclouds 17s linear infinite;-moz-animation:moveclouds 17s linear infinite;-o-animation:moveclouds 17s linear infinite} .x2{left:250px;top:30px;-webkit-transform:scale(.6);-moz-transform:scale(.6);transform:scale(.6);opacity:.6;-webkit-animation:moveclouds 25s linear infinite;-moz-animation:moveclouds 25s linear infinite;-o-animation:moveclouds 25s linear infinite} .x3{left:250px;bottom:-70px;-webkit-transform:scale(.6);-moz-transform:scale(.6);transform:scale(.6);opacity:.8;-webkit-animation:moveclouds 25s linear infinite;-moz-animation:moveclouds 25s linear infinite;-o-animation:moveclouds 25s linear infinite} .x4{left:470px;botttom:20px;-webkit-transform:scale(.75);-moz-transform:scale(.75);transform:scale(.75);opacity:.75;-webkit-animation:moveclouds 18s linear infinite;-moz-animation:moveclouds 18s linear infinite;-o-animation:moveclouds 18s linear infinite} .x5{left:200px;top:300px;-webkit-transform:scale(.5);-moz-transform:scale(.5);transform:scale(.5);opacity:.8;-webkit-animation:moveclouds 20s linear infinite;-moz-animation:moveclouds 20s linear infinite;-o-animation:moveclouds 20s linear infinite} @-webkit-keyframes moveclouds{0%{margin-left:1000px}100%{margin-left:-1000px}} @-moz-keyframes moveclouds{0%{margin-left:1000px}100%{margin-left:-1000px}} @-o-keyframes moveclouds{0%{margin-left:1000px}100%{margin-left:-1000px}} @import url('https://fonts.googleapis.com/css?family=Ruda:400,700'); #header, #outer-wrapper, #post-wrapper, #sidebar-wrapper, #content-wrapper, #footer-wrapper, #wrapper, .ignielToTop {display:none} body,html {overflow:hidden; margin:0; padding:0; width:100%; min-height:100vh} body {background:#fff; color:#1d2129} #igniel404 {background:#eceeee; text-align:center; margin:auto; font-weight:700; font-size:45px; font-family:'Ruda',sans-serif; position:fixed; width:100%; height:100%; line-height:1.25em; z-index:9999;} #igniel404 #error-text {position:relative; font-size:40px; color:#666; top:50%; right:50%; transform:translate(50%,-50%);} #igniel404 #error-text a {color:#888; text-decoration:none} #igniel404 #error-text p {margin:
0!important; letter-spacing:.5px;} #igniel404 #error-text span { color: rgba(0,0,0,.9); font-size: 100px; } #igniel404 #error-text a.back { background: #212529; color: #fff; padding: 10px 20px; font-size: 20px; -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); transition: all 0.5s ease-out; } #igniel404 #error-text a.back:hover { background: #424242; color: #fff; } #igniel404 #error-text a.back:active {-webkit-transform:scale(0.9);-moz-transform:scale(0.9);transform:scale(0.9);background:#333;color:#fff;border:double #eceeee;} #igniel404 #error-text #copyright {font-size:16px} #igniel404 #error-text #copyright a { color: #000000; } @media only screen and (max-width:640px){ #igniel404 #error-text {font-size:20px;} #igniel404 #error-text span {font-size:60px;} #igniel404 #error-text a.back {padding:5px 10px;font-size:15px;} } </style></b:if>

4. Lalu tempelkan juga kode dibawah ini tepat setelah tag <body>

<b:if cond="data:view.isError">
<div id="igniel404">
<div id="clouds">
<div class="cloud x1">
<div class="cloud x1_5">
<div class="cloud x2">
<div class="cloud x3">
<div class="cloud x4">
<div class="cloud x5">
</div>
<div id="error-text">
<span>404</span>
<p>HALAMAN TIDAK DITEMUKAN!</p>
<p><a class="back" expr:title="data:blog.title" href="/">Kembali Ke Halaman Awal</a></p>
<div id="copyright">
<a expr:title="data:blog.title" href="/"><data:blog .title=""></data:blog></a> © 2017 - <script>document.write(new Date().getFullYear())</script>. All Rights Reserved
</div>
</div>
</div>
</div></div></div></div></div></div></b:if>

Kamu bisa ganti tulisan ditandai tebal dan bergaris sesuai dengan teks yang ingin kamu tampilkan!


5. Terakhir klik simpan dan lihat hasilnya.

Untuk hasil atau demonya, kamu bisa klik tombol dibawah ini. Atau jika ingin lihat diblog kamu sendiri, coba tempel link ini pada blog kamu.


Ganti tulisan bergaris dengan url blog kamu sendiri!