Mempercepat Loading Komentar dengan Memperkecil Avatar

Cara mempercepat loading komentar - Diantara yang membuat beratnya komentar untuk diload adalah besarnya ukuran gambar / image pada komentar. Walaupun sobat memperkecil dengan CSS, tetap saja ukuran asli avatar adalah 512x512px. Untuk mencobanya, silahkan klik kanan pada avatar komentar yang ada di blog sobat, kemudian klik kanan pada buka gambar di tab baru. Sebagai contoh, avatar saya sebelum saya rubah ukurannya seperti gambar ini :

Setelah saya rubah, maka ukuran avatar berganti menjadi seperti ini :

Blogger mempunyai cara yang unik dalam menentukan ukuran gambar, untuk ukuran gambar asli biasanya ditandai denga kode s1600 pada URL gambar. Gambar yang sobat upload memiliki beberapa ukuran, dengan merubah ukurannya sobat bisa menentukan berapa pixel gambar yang akan di tampilkan. Sebagai contoh, avatar saya mempunyai URL :

http://lh4.googleusercontent.com/-H08EqbNhKPo/AAAAAAAAAAI/AAAAAAAAADs/jLmlB6cRb8s/s1600/photo.jpg

silahkan copy paste untuk mencoba, kemudian ganti s1600 menjadi s50 misalkan, gambar akan berubah menjadi 50x50px.

Selanjutnya, kita akan merubah ukuran avatar yang tadinya 512px menjadi 65px misalkan, silahkan simak caranya.

Cara Memperkecil Avatar Komentar

Sebagaimana dijelaskan di atas, cara memperkecilnya bukan dengan CSS, melainkan dengan JavaScript. Untuk memasangnya, simpan kode dibawah ini pada template sobat diatas </body>

<script type='text/javascript'>
//<![CDATA[
var avatar=$("#comments");
avatar.find('.avatar-image-container img').each(function() {
        var ava = $(this).attr('longdesc') ? $(this).attr('longdesc') : $(this).attr('src');
        $(this).show().attr('src', ava.replace(/\/s[0-9]+(\-c)?\//,"/s65-c/")).removeAttr('longdesc width height');
});
//]]>
</script>

Ganti angka s65 sesuai ukuran avatar pada blog sobat.

Setelah di save, coba kunjungi postingan yang sudah mempunyai komentar, kemudian buka gambarnya di tab baru. Berubah bukan?

Selengkapnya »

Memasang ShoutMix Gratis di Blog

Memasang ShoutMix Gratis di Blog - Seperti yang kita ketahui banyak penyedia shoutbox untuk buku tamu. Beberapa tahun ke belakang, banyak bloggr menggunakan ShoutBox dari ShoutMix, akan tetapi kini ShoutMix berubah menjadi berbayar. Akhirnya rekan blogger banyak menggunakan CBox, ShoutCamp dll.

Saya pribadi masih melihat ShoutMix yang paling fowerfull, namun untuk memasangnya harus merogoh kocek. Sebagai blogger pemula dan belum menghasilkan dari blogging, saya rasa sayang merogoh kocek untuk sebuah shoutbox.

Hari ini saya menemukan blogger yang berbaik hati membagikan shoutmix secara gratis untuk di simpan di blog sahabat. Namun tentunya ada keterbatasan, karena kita bukan sebagai 'admin' hanya pengguna biasa. Kelebihan admin diantaranya bisa update emoticon, banned ip dll.

Tapi tentunya, hal ini merupakan kabar gembira bagi sahabat yang ingn memasang buku tamu, tidak usah daftar kesana kemari cukup simpan kode saja.

Bagi sahabat yang ingin menyimpan Widget Shoutmix Gratis ini silahkan tambahkan widget HTML/JavaScript dan masukan kode ini :

<script type="text/javascript" src="https://googledrive.com/host/0B3pi8P5BWqm1dk9qM2pkWlVVRWs"></script>

Demonya di bawah ini (lebar ShoutBox akan menyesesuaikan dengan Widget):


Simpan widget.

Selamat, Anda telah mendapatkan Shoutbox dari ShoutMix secara gratissssss.....

Selengkapnya »

Menghapus Tulisan Tampilkan Posting dengan Label

Menghapus Tulisan Tampilkan Posting dengan Label - Apabila kita klik salah satu label pada blog, biasanya di atas blog akan muncul tulisan 'Tampikan posting dengan label ..... Tampilkan semua posting'. Contohnya seperti pada gambar di bawah ini.

Diantara sahabat mungkin ada yang enjoy aja dengan tulisan tersebut, tapi mungkin ada juga yang merasa terganggu dan ingin menghilangkan tulisan tampilkan posting diatas label tersebut.

Bagi sahabat yang ingin menghilangkan, atau lebih tepatnya menyembunyikan tulisan tersebut, silahkan ikuti langkahnya :

1. Login ke Blogger.
2. Masuk ke Template ► Edit HTML
3. Simpan kode ini di ats ]]></b:skin>

.status-msg-wrap{display:none}

4. Simpan Template.

Untuk mencobanya, silahkan klik salah satu label pada blog sobat...

Semoga bermanfaat...

Selengkapnya »

Membuat Persentase pada Scrollbar

Membuat Persentase pada Scrollbar - Tutorial kali ini sebenarnya tidak terlalu penting bagi sebuah blog, namun bagi sahabat yang ingin membuat blognya lebih unik, tidak ada salahnya untuk mencoba menerapkan persentase pada scrollbar ini.

Dengan menambahkan persentase, pengunjung akan bisa melihat berapa persen halaman yang telah di scroll, apabila sampai bawah di scroll maka akan menjadi 100%.

• Demo

Untuk membuatnya silahkan ikuti langkah-langkahnya :

Langkah 1 : Seperti biasa masuk ke Template dan Edit HTML. Simpan kode ini di atas ]]></b:skin>

#scroll {
  display: none;
  position: fixed;
  top: 0;
  right: 20px;
  z-index: 500;
  padding: 3px 8px;
  background-color: #2187e7;
  color: #fff;
  border-radius: 3px;
}
#scroll:after {
  content: " ";
  position: absolute;
  top: 50%;
  right: -8px;
  height: 0;
  width: 0;
  margin-top: -4px;
  border: 4px solid transparent;
  border-left-color: #2187e7;
}

Biasakan untuk membackup template sebelum melakukan editing pada template blog.

Langkah 2 : Simpan kode ini di bawah </head>

<div id='scroll'></div>

Langkah 3 : Simpan JavaScript ini di atas </body>

<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(100);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut();
    }, 1500);
});
//]]>
</script>

Simpan Template.

Selamat... sobat sudah menambahkan persentase di samping scrollbar.

Selengkapnya »

Membuat Efek Loading di Blog

Membuat Efek Loading di Blog - Mungkin sobat sering melihat efek loading di beberapa blog. Menurut saya efek loading ini menambah cantik penampilan blog, dan membuat pengunjung mau menunggu karena blog sedang loading. Bagi sobat yang mau tau demonya, silahkan klik salah satu artikel populer di blog ini, lihat ke samping widget yang berjudul SERING DIBACA.

Untuk membuatnya, silahkan ikuti langkah2 di bawah ini :

Langkah 1 : Tambahkan jQuery pada blog sobat

Simpan kode di bawah ini sebelum </head>

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

Apabila template sobat sudah memiliki jQuery, lewati langkah ini. Harap diperhatikan, tidak boleh ada script jQuery lebih dari satu.

Langkah 2 : Tambahkan CSS

Simpan CSS ini di atas ]]></b:skin>

#page-loader {
  position:fixed !important;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:9999;
  background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhlU_Mfq6nRnhNZYFvv2_qXvohFZDmZxZNpbBailgNvizH3GjB68KGxQYQ6-C21VmIjfSED_pby_XVciSFk0M4LcnC7ovfwfgfgW9kIIyP0tzIfMmM1wu5Rosw8m_y_owQ7ku2dhnkaB0/s1600/loadinfo.net+%284%29.gif') no-repeat 50% 50%;
  color:white;
  padding:1em 1.2em;
  display:none;
}

Untuk merubah warna sesuai dengan blog sobat, silahkan edit warna dan gambar pada kode

background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhlU_Mfq6nRnhNZYFvv2_qXvohFZDmZxZNpbBailgNvizH3GjB68KGxQYQ6-C21VmIjfSED_pby_XVciSFk0M4LcnC7ovfwfgfgW9kIIyP0tzIfMmM1wu5Rosw8m_y_owQ7ku2dhnkaB0/s1600/loadinfo.net+%284%29.gif') no-repeat 50% 50%;

Langkah 2 : Tambahkan JavaScript

Tambahkan kode JavaScript ini di atas </body>

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

Simpan template...

Selengkapnya »

Widget Contact Form Keren pada Halaman Statis

Widget Contact Form Keren pada Halaman Statis - Mungkin sobat sudah pada tau bahwa blogger sudah membuat fitur baru yaitu Contact Form. Namun sesuai jenisnya yaitu widget, maka contact form ini akan ditampilkan di sidebar atau footer.

Tutorial kali ini akan menjelaskan cara membuat widget contact form keren pada halaman statis. Ga tau keren apa ngga, yang pasti berbeda dengan tampilan lain pada umumnya :)

Keren apa ngganya, silahkan sobat cekidot dulu tampilannya :

Screenshoot Light background dan Dark background

• Demo Light Background
• Demo Dark Background

Untuk membuatnya silahkan ikuti langkah mudahnya:

Langkah 1 : Tambahkan Widget Formulir Kontak

Seperti biasa caranya, namun klik dulu Gadget Lainnya, baru Tambahkan Widget Formulir Kontak.

Widget ini jangan dihapus, nantinya akan kita sembunyikan dengan CSS. Penghapusan widget akan mengakibatkan form tidak berfungsi.

Langkah 2 : Buat Halaman Baru

Simpan kode di bawah ini pada mode HTML jangan Compose

<div id="contact_wrap">
<h3>
Hubungi Kami</h3>
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Pesan" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>

<style type="text/css">
/* Menyembunyikan elemen dalam postingan */
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>

Langkah 3 : Tambahkan CSS (Untuk merubah Tampilan)

Untuk mempercantik tampilan, dan sekaligus menyembunyikan Contact form pada Widget di sidebar, simpan CSS dibawah ini di atas ]]></b:skin>

Light Background

/* CSS Contact Form Light Theme by BloggerTut.com */
#ContactForm1{
display:none;
}
#contact_wrap {
margin: auto;
width: 321px;
height: 380px;
padding: 25px;
border-radius: 1em;
border-top:1px solid #dbdbdb;
border-right:1px solid #b2b2b2;
border-left:1px solid #dbdbdb;
border-bottom:1px solid #9d9d9d;
background-color:#cccccc;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');
background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
box-shadow: 1px 1px 5px #ccc;
}
#contact_wrap h3{
color: #e8f3f9;
font-family:Georgia;
font-size: 20px;
font-style:italic;
font-weight:bold;
margin: 0 -36px 20px -36px;
padding: 12px;
text-align: center;
text-shadow: 2px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #3689b9;
position: relative;
}
#contact_wrap h3:before {
content: ' ';
position: absolute;
bottom: -10px;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 0 10px;
border-color: #333 transparent transparent transparent;
}
#contact_wrap h3:after {
content: ' ';
position: absolute;
bottom: -10px;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 10px 10px;
border-color: transparent transparent transparent #333;
}
#ContactForm1_contact-form-name{
width: 270px; 
height:auto;
margin: 5px auto; 
padding: 10px 10px 10px 40px;
background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDP__qN8nWm177Opie6tQXilP9_aMjy9nWDHGqAcmAOfDlobKniRpmUZblzbOdQxmtJtb6pC5B_BGtaKYQ9VdnXi9hUW00zHXUC9w-DS7kqHiDgb8dCVJuKEgDbfR54_kvx2tcBKBNw7I/s1600/user.png)no-repeat 10px center; 
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email{
width: 270px; 
height:auto;
margin: 5px auto; 
padding: 10px 10px 10px 40px;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu3hbqsB5UUvhu9HF8qzy80SNnlx8cJ7L1qBDweS1IoeyeLhHJBAf6SUEpNR73yVpgbeNDkK9oZNLvY7kXJp9qhtAofkLG8vtH5waGwK0AGuWh2W9jgZu1BNpNRrNbbLhi455NqK8r-V0/s1600/pen.png)no-repeat 10px center; 
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email-message{
width: 270px; 
height: 150px; 
margin: 5px auto; 
padding: 10px 10px 10px 40px;
font-family:Arial, sans-serif;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihs32sF1OuJmPsEmEinV00-ADXyhODzoS1tTIhcUO48iKUCkK8_5-o6kC3haqPbEIaW8pUmvqvy9MAhkaIt5XUSzrxrs8iT6Ua_unX6qzh0d-8__1fUaBA06pWCUwNUaYEGC8Y501OKSA/s1600/msg2.png)no-repeat 10px 10px; 
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-submit {
width: 95px; 
height: 30px; 
float: right; 
color: #FFF;
padding: 0; 
cursor:pointer;
margin: 25px 0 3px 0 0;
background-color:#005a8a;
border-radius:4px;
text-shadow: 1px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #3689b9;
border:1px solid #194f6d;
}
#ContactForm1_contact-form-submit:hover {
background:#4c9bc9;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 320px;
margin-top:35px;
}

Dark Background

/* CSS Contact Form Dark Theme by BloggerTut.com */
#ContactForm1{
display:none;
} 
#contact_wrap {
margin: auto;
width: 321px;
height: 380px;
padding: 25px;
border-radius: 1em;
border: #600 solid 1px;
border-bottom: #420000 solid 1px;
background-color:#983738;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#bf5355', endColorstr='#983738');
background-image:-webkit-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);
background-image:-moz-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);
background-image:-ms-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);
background-image:-o-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);
background-image:linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);
}
#contact_wrap h3{
color: #fff;
font-family:Georgia;
font-size: 20px;
font-style:italic;
font-weight:bold;
margin: 0 -36px 20px -36px;
padding: 12px;
text-align: center;
text-shadow: 2px 0 0 #3b5931;
-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #111;
-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #111;
box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #111;
background-color: #659156;
position: relative;
}
#contact_wrap h3:before {
content: ' ';
position: absolute;
bottom: -10px;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 0 10px;
border-color: #000 transparent transparent transparent;
}
#contact_wrap h3:after {
content: ' ';
position: absolute;
bottom: -10px;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 10px 10px;
border-color: transparent transparent transparent #000;
}
#ContactForm1_contact-form-name{
width: 270px; 
height:auto;
margin: 5px auto; 
padding: 10px 10px 10px 40px;
background:#2b2e31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDP__qN8nWm177Opie6tQXilP9_aMjy9nWDHGqAcmAOfDlobKniRpmUZblzbOdQxmtJtb6pC5B_BGtaKYQ9VdnXi9hUW00zHXUC9w-DS7kqHiDgb8dCVJuKEgDbfR54_kvx2tcBKBNw7I/s1600/user.png)no-repeat 10px center; 
color:#d2d2d2;
border:1px solid #ce6d6e;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;
}
#ContactForm1_contact-form-email{
width: 270px; 
height:auto;
margin: 5px auto; 
padding: 10px 10px 10px 40px;
background: #2b2e31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu3hbqsB5UUvhu9HF8qzy80SNnlx8cJ7L1qBDweS1IoeyeLhHJBAf6SUEpNR73yVpgbeNDkK9oZNLvY7kXJp9qhtAofkLG8vtH5waGwK0AGuWh2W9jgZu1BNpNRrNbbLhi455NqK8r-V0/s1600/pen.png)no-repeat 10px center; 
color:#d2d2d2;
border:1px solid #ce6d6e;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;
}
#ContactForm1_contact-form-email-message{
width: 270px; 
height: 150px; 
margin: 5px auto; 
padding: 10px 10px 10px 40px;
font-family:Arial, sans-serif;
background: #2b2e31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8RPwYyYN43MDgTomshr3MNoXIJ3YEBzTP3nFunmMTHZEvPviqVvDEHe_SopuaxKek1Xs2K0LBa2sO02ArZH_k96WEX2lnlo8-MEKo8f8TI527H8MbTbfE98cYVFBMKWDcuat81Ow0jN4/s1600/msg.png)no-repeat 10px 10px; 
color:#d2d2d2;
border:1px solid #ce6d6e;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;
}
#ContactForm1_contact-form-submit {
width: 95px; 
height: 30px; 
float: right; 
color: #FFF;
padding: 0; 
cursor:pointer;
margin: 25px 0 3px 0 0;
background-color:#005a8a;
border-radius:4px;
text-shadow: 1px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #659156;
border:1px solid #333;
}
#ContactForm1_contact-form-submit:hover {
background:#5d894d;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 320px;
margin-top:35px;
}

Silahkan pilih sesuai desain Template sobat...

Selengkapnya »

Membuat Tulisan Dicoret di Blog

Membuat Tulisan Dicoret di Blog - Setelah lama tidak membuat postingan baru, saya coba posting sesuatu yang mungkin sudah tidak aneh bagi sahabat, yaitu cara membuat tulisan dicoret di blog.

Menurut saya, lumayan penting tulisan dicoret ini. Misalkan sobat membuat tutorial tentang blogspot. Ternyata seiring berjalannnya waktu, tutorial tersebut sudah tidak berlaku dan usang. Menurut saya, tutorial tersebut jangan dihapus, apalagi sudah dilirik Search Engine. Solusinya saya tawarkan mencoret tulisan yang tidak berlaku lagi.

Seperti apa sih? contohnya seperti tulisan ini, ini adalah tulisan yang dicoret, betulkan?

Kelamaan ya sob, langsung caranya aja... ketika menulis gunakan mode HTML jangan Compose, tulis kode

<strike>tulisan yang akan dicoret</strike>

Menurut W3Schools.com <strike> tidak valid HTML5, dan sudah usang pada HTML4

Karena tidak valid HTML5, sobat bisa gunakan kode

<del>tulisan yang akan dicoret</del>

Selamat mencoba, semoga bermanfaat....

Selengkapnya »