Hilbram Kurnia Blog's Tutorial

Cara Sederhana Mengatasi Thumbnail Default pada Blog

2015-10-10T09:33:00.001+07:00

Default Thumbnail overcome the Blog - Sering kali disaat kita memposting artikel dengan gambar, kita berharap postingan kita tersebut terutama gambar/thumbnail responsive dengan tampilan blog kita. Namun, pada kenyataannya sering kita lihat blog tersebut khususnya yang menyisipkan thumbnail pada post mereka, terlihat No Image/Default dan terkadang berwujud loading image yang tak kunjung selesai untuk menampilkan thumbnail tersebut. Nah, kali ini saya akan kasih pembahasan bagaimana caranya agar thumbnail postingan yang kita publish dapat tampil dengan sempurna pada bidang post di homepage blog kita. Simak yuk..

Sebenarnya caranya begitu mudah dan pasti pernah dilakukan oleh pemilik blog saat membuat artikel namun tidak disadari dengan hal yang kecil dapat mengubah tampilan blog kita. Yaa apa itu? Insert Image.

Hal sederhana memang dan sudah pasti bawaan dari Blogger bagi setiap membernya saat membuat postingan, tapi inilah penyebab permasalahan kita ini. Mengapa? Blogger melarang setiap membernya untuk menyisipkan gambar dengan cara Copas, ini termasuk ilegal karena melanggar hak cipta, maka dari itu setiap gambar yang dipost dengan cara Copas, tidak akan ditampilkan pada blog membernya. Selain itu, dengan menysipkan gambar melalui Insert Image, postingan kita akan cepat terindex dan SEO friendly.

Tips Menempatkan Spot Iklan yang Strategis

2015-02-01T16:51:00.000+07:00

Tips Menempatkan Spot Iklan yang Strategis - Dipostingan kali ini saya akan mencoba sedikit berbagi tips mengenai penempatan spot iklan yang strategis, tepat sasaran, dan minimalis...

Tujuannya untuk apa? Tentu untuk memperbesar peluang bagi visitor mengklik iklan tersebut, selain itu juga yaa.. untuk memuaskan hati dibenak para pemasang iklan :). Jadi, dengan strategi Anda menempatkan posisi spot iklan yang tepat dan strategis, akan membuat visitor lebih terasa nyaman pada saat melihat bukan? Ini menurut saya sangat diutamakan bagi blog yang memang memprioritaskan banner yang cukup banyak.

1. Header

Menempatkan spot iklan diheader menjadi solusi yang tepat bagi pemasang iklan yang ingin mendapatkan lebih arus visitor dari blog tersebut, walaupun dengan harga yang sedikit mahal. Nah, bagi sang pemilik blog juga perlu diperhatikan jika ingin membuka spot di bagian header. Gunakan maksimal banner 728 X 90, karena ukuran tersebut sudah cukup besar dan tepat sasaran, pertimbangkan juga bila ingin memasang ukuran slot ini, jika blog Anda dibagian header tidak menjangkau luas, bisa pakai slot ukuran 468 X 60 saja.

2. Sidebar

Selain di bagian Header, Sidebar juga sangat disarankan bagi pemilik blog. Karena diposisi ini bisa dibilang sangat strategis. Karena berbagai macam ukuran spot bisa kompatibel dibagian ini, salah satunya 300 X 250, 250 X 250, 150 X 150 (4), 125 X 125 (4), dan masih banyak lagi. Tapi, saya sarankan untuk cukup memasang 2 ukuran saja, yaitu 300 X 250/250 X 250 dan 150 X 150/125 X 125. Karena ukuran tersebut banyak dicari oleh pemasang iklan, selain ukuran yang cukup, ukuran tersebut juga sangat strategis.

3. Penempatan yang Tepat di Artikel

Sering kali, pemilik blog memasang 2 buah tempat sekaligus untuk spot iklan di bagian artikel, dibagian Bawah Judul Artikel dan Bawah Posting Akhir. Saya sarankan cukup untuk memasang 1 buah slot saja, yaitu di bagian Bawah Posting Akhir. Kenapa? Jika Anda memasang spot iklan dibagian Bawah Judul Artikel, saya rasa visitor akan merasa tidak nyaman karena slot dan teks akan terasa sedikit rapat, dan malah akan membuat visitor lebih memfokuskan ke iklan bukan ke artikel. Memang sangat tepat sasaran, tapi apakah sang Pemilik Blog rela ditinggalkan pengunjungnya dengan cepat tanpa membaca artikel si pemilik blog?

4. Hindari Penempatan Slot Iklan di Footer

Saya rasa akan sedikit visitor yang menscroll sampai kebawah bagian blog walau hanya sekedar melihat link Credit atau lain-lain, bagian ini disebut Footer, ini menjadi tumpuan bagi sang pemasang iklan karena tentu untuk mendapatkan peluang visitor sangat kecil dibanding dengan pemasang iklan lainnya yang memasang iklannya di muka blog. Memang, pasti semua pemilik blog akan menghargai spot tersebut dengan harga yang relatif terjangkau, tapi apakah menjamin dengan banyaknya visitor mengklik iklan tersebut? Walau ukuran spot yang lumayan besar.. Dan saya sarankan hindari menempatkan/memasang iklan di bagian Footer..

5. Iklan Melayang Sangat Mengganggu

Saya sarankan jangan menempatkan sesekali slot iklan melayang, karena slot ini sangat-sangat mengganggu dan tidak nyaman karena terhalang oleh spot iklan tersebut. Dan visitorpun harus mengklik tombol Close, kalau tidak akan terhalang selalu :D. Memang hal yang kecil jika harus mengklik tombol Close, tapi jika setiap halaman harus mengklik? Akan terasa gimanaa gitu.. Maka saya sarankan untuk tidak menempatkan slot melayang.

Oke saya rasa sudah cukup dari 5 daftar tips tersebut untuk membuat penempatan spot yang strategis, tepat sasaran, dan minimalis. Saya sekali lagi mengucapkan mohon maaf bagi para visitor karena saya sudah sangat lama sekali tidak memposting artikel di blog ini, hehehe.. Mau tau kenapa? Anda bisa lihat alasannya disini. Kurang lebihnya mohon maaf apabila ada kata-kata yang tidak pantas mohon dibukakan pintu maafnya, terima kasih dan Salam Blogger..

Selamat Tahun Baru 2015

2015-01-02T15:30:00.003+07:00

Selamat Tahun Baru 2015 - Kami segenap keluarga blog HKBT Mengucapkan " Selamat Tahun Baru 2015 " Semoga di tahun yang baru ini kita bisa menjadi pribadi yang lebih baik dari tahun sebelumnya. Tentu ucapan tersebut tidak menjadi kata akhir dipostingan ini, saya akan sedikit mengeluarkan sedikit ungkapan dalam benak hati saya. Salah satunya, saya yang sudah tidak aktif lagi di blog HKBT ini..

Mengapa? Oke saya akan sedikit menceritakan mengapa saya sudah tidak aktif lagi mengolah blog ini. Semenjak terakhir saya memposting Memasukan Gambar, Youtube, Blockquote, dan Kode Pada Komentar Blogger pada tanggal 28 Maret 2014 Kurang lebih 9 bulan yang lalu. Saya jawab karena Saya sedang menekuni banyak sekali bisnis yang bisa saya muat di dunia internet maupun nyata. Sehingga tentu untuk meluangkan waktu memposting artikel di blog HKBT ini sangat kecil. Walau begitu saya berusaha untuk aktif dalam membalas semua komentar di blog ini, jadi jika Anda yang ingin memberikan sebuah komentar di blog ini jangan takut untuk tidak balas.

Sekali lagi kami meminta maaf atas kekecewaan yang mungkin ada dalam benak hati Anda yang selama ini berlangganan atau memfollowup blog HKBT ini. Saya akan semaksimal mungkin untuk meluangkan waktu untuk memposting artikel, setidaknya untuk mengupdate blog ini dalam segi tampilan.

Sekali lagi kami sekeluarga Blog HKBT Mengucapkan " Selamat Tahun Baru 2015 "..

Memasukan Gambar, Youtube, Blockquote, dan Kode pada Komentar Blogger

2014-03-28T22:44:00.005+07:00

Inserting Images, Youtube, and Blockquote Code in Comments - Sudah lama saya tidak posting, karena banyak aktifitas diluar sana. Oke baiklah kali ini saya akan memposting artikel yang berjudul Memasukan Gambar, Youtube, Blockquote, dan Kode pada Komentar Blogger seperti yang telah dijelaskan oleh +Kang Ismet dan disini akan saya repost untuk teman-teman semua.

Sebetulnya tutorial ini sudah banyak yang membuatnya. Akan tetapi karena banyak pertanyaan tentang bagaimana cara memasukan gambar, video youtube, kode, catatan ke komentar Blogger, maka saya buat tutorial ini untuk memudahkan pengunjung blog ini.

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


#comment-holder .cm-youtube {
  display:block;
  border:none !important;
  background-color:#333;
  width:450px;
  height:240px;
  margin:0 auto 30px;
}
#comment-holder .cm-image {
  display:block;
  margin:0 auto 15px;
  outline:none;
  border:1px solid #ccc;
  background-color:white;
  -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
  -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
  box-shadow:0px 1px 3px rgba(0,0,0,0.2);
  padding:5px;
  max-width:96%;
  height:auto;
  width:auto;
}
code, #comment-holder code,
#comment-holder i[rel="code"] {
  font:normal 12px Monaco,"Courier New",Monospace;
  color:blue;
}
pre, #comment-holder pre,
#comment-holder i[rel="pre"] {
  display:block;
  font:normal 12px Monaco,"Courier New",Monospace;
  background-color:#333;
  color:white;
  padding:0.5em 1em;
  word-wrap:normal;
  white-space:pre;
  overflow:auto;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}
blockquote, #comment-holder blockquote,
#comment-holder b[rel="quote"] {
  margin:0 2%;
  background-color:#eee;
  padding:1em 1.2em;
  border-left:4px solid #7498AD;
  display:block;
  font-weight:normal;
  font-style:italic;
}
#comment-holder i[rel="image"],
#comment-holder i[rel="youtube"] {
  display:block;
  overflow:hidden;
  border:2px solid black;
  position:relative;
  width:170px;
  height:100px;
  margin:0 auto 30px;
}
#comment-holder i[rel="image"]:before,
#comment-holder i[rel="youtube"]:before {
  content:"Please enable your JavaScript to see this image!";
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background-color:red;
  color:white;
  font-weight:bold;
  text-align:center;
  padding:15px 0;
}
#comment-holder i[rel="youtube"]:before {
  content:"Please enable your JavaScript to watch this video!";
}

Kemudian, simpan kode ini di atas </body>

<script type='text/javascript'>
//<![CDATA[
function repText(id) {
var a = document.getElementById(id),
 b = a.innerHTML,
 b = b.replace(/<i rel="image">(.[^\>]*)<\/i>/ig, "<img class='cm-image' src='$1' alt='loading...' \/>");
 b = b.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img class='cm-image' src='$1' alt='loading...' \/>");
 b = b.replace(/<i rel="youtube">http:\/\/www.youtube.com\/embed\/(.[^>]*)<\/i>/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$1'><\/iframe>");
 b = b.replace(/<i rel="youtube">(http:\/\/youtu.be|http:\/\/www.youtube.com\/watch\?v=)(.[^>]*)<\/i>/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$2'><\/iframe>");
 b = b.replace(/\[youtube\]http:\/\/www.youtube.com\/embed\/(.[^\]]*)\[\/youtube\]/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$1'><\/iframe>");
 b = b.replace(/\[youtube\](http:\/\/youtu.be|http:\/\/www.youtube.com\/watch\?v=)(.[^\]]*)\[\/youtube\]/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$2'><\/iframe>");
 document.getElementById(id).innerHTML = b;
 b = b.replace(/<i rel="code">(.*?)<\/i>/ig, "<code>$1<\/code>");
 b = b.replace(/<i rel="pre">(.*?)<\/i>/ig, "<pre>$1<\/pre>");
 b = b.replace(/<b rel="quote">(.*?)<\/b>/ig, "<blockquote>$1<\/blockquote>");
 b = b.replace(/&amp;feature=[0-9a-zA-Z-_]*/ig, "");
 b = b.replace(/\/s(640|1600)/g, "/s400");
 } repText('comment-holder');   
c = document.getElementById('comment-holder');
if (c) {
 b = c.getElementsByTagName("p");
 for (i = 0; i < b.length; i++) {
  if (b.item(i).getAttribute('CLASS') == 'comment-content') {
   ki_comm = b.item(i).innerHTML.replace(/\[code\](.[^\]]*)\[\/code\]/ig, "<code>$1<\/code>");
   ki_comm = ki_comm.replace(/\[pre\](.[^\]]*)\[\/pre\]/ig, "<pre>$1<\/pre>");
   ki_comm = ki_comm.replace(/\[blockquote\](.[^\]]*)\[\/blockquote\]/ig, "<blockquote>$1<\/blockquote>");
   ki_comm = ki_comm.replace(/\[quote\](.[^\]]*)\[\/quote\]/ig, "<blockquote>$1<\/blockquote>");          
   b.item(i).innerHTML = ki_comm;
  }
 }
}
//]]>
</script>

Simpan Template

Format Penulisan

Menulis Tag <code>

<i rel="code">Tulis kode yang sudah diparse di sini</i>, atau
[code]Tulis kode yang sudah diparse di sini[/code]

Menulis Tag <pre>

<i rel="pre">Tulis kode yang sudah diparse di sini</i>, atau
[pre]Tulis kode yang sudah diparse di sini[/pre]

Menulis Catatan (Blockquote)

<b rel="quote">Tulis catatan di sini</b>, atau
[quote]Tulis catatan di sini[/quote], atau
[blockquote]Tulis catatan di sini[/blockquote]

Memasukan Gambar

<i rel="image">Tulis URL gambar di sini</i>, atau
[img]Tulis URL gambar di sini[/img]

Memasukan Video Youtube

<i rel="youtube">Tulis URL Video Youtube di sini</i>, atau
[youtube]Tulis URL Video Youtube di sini[/youtube]

Semoga bermanfaat..

Sumber kode : http://blog.kangismet.net/2013/08/memasukan-gambar-youtube-kode-pada-komentar-blogger.html

Menerapkan Efek Toggle Pada Sidebar Blogger

2014-03-10T17:55:00.000+07:00

Applying Toggle Effect In Blogger Sidebar - Masih dalam pembahasan artikel Toggle, kali ini kita akan mencoba mengaplikasikan efek Toggle ini pada widget sidebar. Sehingga dengan ini content sidebarnya disembunyikan dan akan tampil ketika judul widgetnya diklik. Dengan begitu daerah di sidebar akan irit tempat dan dengan ini juga kita bisa memilih isi widget mana yang ingin disembunyikan.

Tertarik mencobanya? Mari kita mulai mencoba cara mudah menambahkan efek Toggle pada sidebar ini.

Pertama kita harus mengetahui dulu ID dari widget sidebar yang isinya ingin kita sembunyikan. Sebagai contoh biasanya kode widget sidebar tampak seperti di bawah ini.

<b:widget id='HTML6' locked='false' title='Blog&apos;s Stats' type='HTML'>
      <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:includable>
    </b:widget>

Dari kode widget di atas tersebut kita telah mengetahui bahwa ID widgetnya adalah HTML6 dan isi widgetnya dibungkus dengan class "widget-content". Maka kita membuat Togglenya seperti di bawah ini.

$(function() { 
    $("#HTML6").click(function () {
    $("#HTML6 .widget-content").toggle("slow")
});
 });

Seperti biasa silahkan simpan script Toggle-nya di atas kode </body>

Agar isi widgetnya tidak muncul dan akan muncul ketika judul widgetnya diklik, silahkan buat kode CSS seperti di bawah ini.

#HTML6 .widget-content {display:none}

Dan rubah bentuk kursor pada judul widgetnya menjadi pointer seperti di bawah ini.

#HTML6 h2{cursor:pointer}

Setelah itu silahkan SAVE perubahan edit HTML blog Anda. Namun perlu diingat, karena ini menggunakan Toggle jadi pastikan blog Anda telah dipasang jquery library. Dan jika ingin mencoba menggunakan fungsi Toggle lainnya seperti bounce, clip, blind, dan lain-lain silahkan baca lagi postingannya di link di bawah ini. Jangan lupa untuk menambahkan jquery-ui agar efeknya bisa berjalan.

Baca juga: Beberapa Jenis Efek Toggle Dengan Jquery

Untuk demonya silahkan lihat pada blog ini sendiri, khususnya terletak pada Chatbox atau Donasi KPK.

Sumber kode : http://www.kompiajaib.com/2014/01/cara-mudah-menambahkan-efek-toggle-pada.html

Beberapa Jenis Efek Toggle Dengan Jquery

2014-03-01T23:24:00.000+07:00

Some Type Toggle Effect In Jquery - Secara sederhana Toggle di sini adalah sebuah tombol yang berguna untuk menyembunyikan dan menampilkan unsur lain dengan efek khusus yang halus.

Banyak widget di blog yang menggunakan Toggle dan kali ini saya akan share beberapa jenis efek Toggle dengan jQuery. Dengan ini kita bisa berkreasi membuat widget di dalam blog dengan sentuhan efek-efek Toggle. Setelah berkelana saya mengumpulkan beberapa efek Toggle diantaranya ada sekitar 10 efek yang akan saya share kali ini.

Persyaratan pertama yang harus ada di blog yaitu tentunya jQuery. Silahkan simpan jQuery di bawah ini di blog Anda, jika sudah ada berapa pun versinya silahkan abaikan langkah ini.


<script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

CSS


.button1 {
    width: 217px;
 font-size:16px;
 font-family:Arial;
 font-weight:normal;
 border:1px solid #3866a3;
 padding:9px 18px;
 text-decoration:none;
 background-color:#63b8ee;
 color:#ffffff;
 display:inline-block;
 text-shadow:1px 1px 0px #7cacde;
  box-shadow:inset 1px 1px 0px 0px #bee2f9;
}
.button1:hover {
 background-color:#468ccf;
}

.toggler {
    width: 500px;
    height: 200px;
  }
  #box {
    position: relative;
    width: 240px;
    height: 135px;
    padding: 0.4em;
    background-color:#efefef;
    border:1px solid #ccc;
  }
  #box h3 {
    margin: 0;
    padding: 0.4em;
    text-align: center;
    border:1px solid #ccc;
    background:#ddd;
  }

HTML


<a href="#" class="button1" id="run">Click Me</a>
<div class="toggler">
  <div id="box">
    <h3>Toggle</h3>
    <p>
      Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
    </p>
  </div>
</div>

Efek-efek Toggle dengan Jquery

1. Efek Blind
Javascript


$(function() { 
    $("#run").click(function () {
    $("#box").toggle("blind")
});
 });

Demo

2. Efek Bounce
Javascript


$(function() { 
    $("#run").click(function () {
    $("#box").toggle("bounce")
});
 });

Demo

3. Efek Clip
Javascript


$(function() { 
    $("#run").click(function () {
    $("#box").toggle("clip")
});
 });

Demo

4. Efek Drop
Javascript


$(function() { 
    $("#run").click(function () {
    $("#box").toggle("drop")
});
 });

Demo

5. Efek Explode
Javascript


$(function() { 
    $("#run").click(function () {
    $("#box").toggle("explode")
});
 });

Demo

6. Efek Fold
Javascript


$(function() { 
    $("#run").click(function () {
    $("#box").toggle("fold")
});
 });

Demo

7. Efek Pulsate
Javascript


$(function() { 
    $("#run").click(function () {
    $("#box").toggle("pulsate")
});
 });

Demo

8. Efek Scale
Javascript


$(function() { 
    $("#run").click(function () {
    $("#box").toggle("scale")
});
 });

Demo

9. Efek Shake
Javascript




$(function() { 
    $("#run").click(function () {
    $("#box").toggle("shake")
});
 });

Demo

10. Efek Slide
Javascript


$(function() {  
    $("#run").click(function () { 
    $("#box").toggle("slide") 
}); 
 });

Demo

Semoga bermanfaat..

Sumber : http://www.kompiajaib.com/2013/12/beberapa-jenis-efek-toggle-dengan-jquery.html

Membuat Bingkai Chatbox Dengan Efek Toggle

2014-02-26T11:36:00.000+07:00

Membuat Bingkai Chatbox Dengan Efek Toggle - Setelah ada teman saya yang request artikel membuat sebuah bingkai pada objek Chatbox dengan tombol buka/tutup nya yang lembut dan support pada area disekitarnya.

Secara sederhana Toggle di sini adalah sebuah tombol yang berguna untuk menyembunyikan dan menampilkan unsur lain dengan efek khusus yang halus dan support pada area disekitarnya. Bagi Anda yang belum mengenal istilah Toggle, insya allah pada postingan berikutnya akan saya bahas beserta efek-efeknya.

CSS


#kangischat{
background:white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHxcOEfMfqZ-JK6J4ez667Vdj48qTkeqhPIo7v6cM4UOWLxIcb_BVWbYCC8LnyBHI2huFZa14xPgOl84ljHnLTmquG3nBk8oWJstI232uQp9Ao47wABDV7WlYrEA5s66Vc-i2HrjxbMfU/s1600/chatbg2.png)repeat-x top;
text-align:left;
color:#333;
font-family:Arial, Sans-serif;
box-shadow: 0 0 5px 1px #bbb;
padding:12px 11px 10px;
}
#kangischat a {
color:#45b2a7;
}
.chatdalem {
background:white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0Tfju52Jw7LT7hFjVJK4AV55jJLFYqPvk3DKwf1amMo_iVIz6S1haQDv966zNxRLPNnjnkSQ9UXTXzH2P8erY5nAO5NtTeGgR5PbFBVUr7f9_GQuddaQHDRd0PlrsYJ4FA5xELSULL6Y/s1600/shoutmix-loader.gif)no-repeat 50% 40%;
position: relative;
margin-top:17px
}
#bukachat {
background:#45b2a7 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLOndK4rn-WpCiYWdJ7Ep6wK4-_AhBPntUWCMAAdLDCccvKk1JT5d-ksKKRXv2CPAbx6A3bmuhxxZUQUAptZOJFAo9KCnXWCaKVM86XI7R1Skcyibik0sWzetIHPHShDY9vs0Uo3LcaDM/s1600/ngobrol.png)no-repeat 10px 50%;
color:white;
padding:10px 10px 10px 45px;
font-family:Oswald, Arial;
font-size:130%;
text-transform:uppercase;
height:25px;
line-height:25px;
cursor:pointer;
box-shadow: 0 0 5px 1px #bbb;
display:none;
}
#tutupchat {
background:#45b2a7 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLOndK4rn-WpCiYWdJ7Ep6wK4-_AhBPntUWCMAAdLDCccvKk1JT5d-ksKKRXv2CPAbx6A3bmuhxxZUQUAptZOJFAo9KCnXWCaKVM86XI7R1Skcyibik0sWzetIHPHShDY9vs0Uo3LcaDM/s1600/ngobrol.png)no-repeat 10px 50%;
color:white;
padding:10px 10px 10px 45px;
font-family:Oswald, Arial;
font-size:130%;
text-transform:uppercase;
height:25px;
line-height:25px;
box-shadow: 0 0 5px 1px #bbb;
cursor:pointer;
}

HTML


<div id="bukachat">
Buka Obrolan
</div>
<div id="tutupchat">
Tutup Obrolan
</div>
<div id="kangischat">
<div class='brol'>Ikuti aturannya <a href="http://hilbramkurnia3.blogspot.com/p/peraturan-chatbox-blog-hkbt.html"><b style='color:#80bc00'>disini</b></a></div>
<div class="chatdalem">

Kode objek Chatbox disini

<script type='text/javascript'>
$('#bukachat').click(function() {
    $('#kangischat').show(500);
    $('#bukachat').hide();
    $('#tutupchat').show();
});
$('#tutupchat').click(function() {
    $('#kangischat').hide(500);
    $('#bukachat').show();
    $('#tutupchat').hide();
});
</script></div></div>

Semoga bermanfaat

Menambahkan Judul pada Tag Pre

2014-02-23T12:03:00.001+07:00

Menambahkan Judul pada Tag Pre - Masih seputar pembahasan episode artikel TAG PRE, kali ini saya akan menambahkan/menyisipkan judul pada Tag Pre.

Mungkin sobat pernah melihat beberapa blog yang menggunakan tag pre, mempunyai judul dan warna berbeda sesuai kode, baik CSS, HTML, XML, JavaScrip, JQuery dll.

Penambahan judul otomatis ini biasanya sering digunakan pada tag PRE dengan Vanilla Style. Bagi sobat yang ingin menggunakan nya, silahkan simpan kode ini di atas ]]></b:skin> atau </style>

CSS


pre[data-codetype]:before {
content:attr(data-codetype);
display:block;
margin:-11px -13px 10px -54px;
padding:8px 12px;
font-family:Arial,Sans-serif;
font-size:14px;
text-transform:uppercase;
background-color:#41749f;
color:white
}
pre[data-codetype=&quot;CSS&quot;]:before{background-color:#5fbbba}
pre[data-codetype=&quot;HTML&quot;]:before{background-color:#4fc1eb}
pre[data-codetype=&quot;JavaScript&quot;]:before{background-color:#ff6c60}
pre[data-codetype=&quot;JQuery&quot;]:before{background-color:#99c262}

Bagi sobat yang menggunakan tag blockquote apabila ingin menggunakan cara ini, tinggal mengganti CSS diatas dari pre menjadi blockquote.

Untuk penulisan, tambahkan data-codetype="JenisKode" seperti contoh di bawah ini

HTML


<pre data-codetype="CSS"><code>...........</code></pre> /* Untuk CSS */
<pre data-codetype="HTML"><code>...........</code></pre> /* Untuk HTML */
<pre data-codetype="JavaScript"><code>...........</code></pre> /* Untuk JavaScript */
<pre data-codetype="JQuery"><code>...........</code></pre> /* Untuk kode JQuery */
dst...

Sumber : http://blog.kangismet.net/2013/11/membuat-judul-pada-tag-pre.html

PRISM SyntaxHighlighter untuk Blogger

2014-02-20T19:40:00.000+07:00

PRISM SyntaxHighlighter untuk Blogger - Sesuai dengan janji saya untuk meneruskan/melengkapi episode selanjutnya untuk tema TAG PRE, pada postingan ini akan dibahas mengenai struktur/desain pada TAG PRE.

Bagi Anda yang belum mengenal istilah kode TAG PRE, baca kutipan link berikut :

Mengenal Tag Pre

Untuk pemasangannya, hanya memerlukan dua langkah mudah, yaitu memasang kode CSS dan JavaScript. Sebelum memasang kode CSS, silahkan pilih tema Dark atau Light.

Langkah 1 : Tambahkan CSS

Silahkan pilih sesuai kebutuhan di blog sobat, versi Light atau Dark. Silahkan simpan salah satu kode CSS di bawah ini di atas ]]></b:skin>

Light Theme



/* Tema : LightSyntax oleh Blog HKBT
URL: http://hilbramkurnia3.blogspot.com/2014/02/prism-syntaxhighlighter-untuk-blogger.html */ 
pre {
margin:15px 15px 15px 0;
padding:10px;clear:both;
background:#f2f2f2;
color:#666;
border:1px solid #ddd;
overflow:auto;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
font-weight: normal !important;
font-style: normal !important;
font-size: 12px !important;
}
code {
color:#126AAF;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
font-weight: normal !important;
font-style: normal !important;
font-size: 13px !important;
}
code .token.punctuation {
  color:#83405A;
}
pre code .token.punctuation {
  color:#800000;
}
code .token.comment,
code .token.prolog,
code .token.doctype,
code .token.cdata {
  color:#008200;
}
code .namespace {
  opacity:.8;
}
code .token.property,
code .token.tag,
code .token.boolean,
code .token.number {
  color:#881280;
}
code .token.selector,
code .token.attr-name,
code .token.string {
  color:#986A7C;
}
pre code .token.selector,
pre code .token.attr-name,
pre code .token.string {
  color:#994500;
}
code .token.entity,
code .token.url,
pre .language-css .token.string,
pre .style .token.string {
  color:#994500;
}
code .token.operator {
  color:#878A85;
}
code .token.atrule,
code .token.attr-value {
  color:#48D30F;
}
pre code .token.atrule,
pre code .token.attr-value {
  color:#227BC0;
}
code .token.keyword {
  color:#881280;
  font-style:italic;
}
code .token.comment {
  font-style:italic;
}
code .token.regex {
  color:#B43D3D;
}
code .token.important {
  font-weight:bold;
}
code .token.entity {
  cursor:help;
}

Dark Theme


/*
Tema RDark oleh DTE:] berdasarkan tema-tema SyntaxHighligter dari Alex Gorbatchev
URL: http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/rdark.html
*/
pre {
  padding:.5em 1em;
  margin:.5em 0;
  white-space:pre;
  word-wrap:normal;
  overflow:auto;
  background-color:#1B2426;
}
code {
  font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;
  line-height:16px;
  color:#B43D3D;
  background-color:#eee;
  border:1px solid #ddd;
  padding:1px 2px;
}
pre code {
  display:block;
  background:none;
  border:none;
  color:#B9BDB6;
  direction:ltr;
  text-align:left;
  word-spacing:normal;
  padding:0 0;
}
code .token.punctuation {
  color:#83405A;
}
pre code .token.punctuation {
  color:#B9BDB6;
}

code .token.comment,
code .token.prolog,
code .token.doctype,
code .token.cdata {
  color:#435A4D;
}
code .namespace {
  opacity:.8;
}
code .token.property,
code .token.tag,
code .token.boolean,
code .token.number {
  color:#5BA1CF;
}

code .token.selector,
code .token.attr-name,
code .token.string {
  color:#986A7C;
}
pre code .token.selector,
pre code .token.attr-name,
pre code .token.string {
  color:#E0E8FF;
}
code .token.entity,
code .token.url,
pre .language-css .token.string,
pre .style .token.string {
  color:#E0E8FF;
}
code .token.operator {
  color:#878A85;
}
code .token.atrule,
code .token.attr-value {
  color:#48D30F;
}

pre code .token.atrule,
pre code .token.attr-value {
  color:#48E638;
}
code .token.keyword {
  color:#47A1CF;
  font-style:italic;
}
code .token.comment {
  font-style:italic;
}
code .token.regex {
  color:#B43D3D;
}
code .token.important {
  font-weight:bold;
}
code .token.entity {
  cursor:help;
}

Langkah 2 : Tambahkan JavaScript di atas </body>

<script type="text/javascript" src='http://kang-is.googlecode.com/svn/trunk/javascript/prism.js'></script>

CARA PENGGUNAAN

Setiap tipe bahasa mempunyai kelas masing-masing

HTML, XML, PHP ⇒ language-markup
CSS ⇒ language-css
JavaScript ⇒ language-javascript

Detail penulisan seperti ini:


<pre><code class="language-markup"> ... kode HTML (yang sudah di`escape`) di sini ... </code></pre>

<pre><code class="language-css"> ... kode CSS di sini ... </code></pre>

<pre><code class="language-javascript"> ... kode JavaScript di sini ... </code></pre>

Semoga bermanfaat.....

Sumber : http://blog.kangismet.net/2013/05/prism-syntaxhighlighter-untuk-blogger.html

Mengenal Tag Pre

2014-02-17T19:59:00.000+07:00

Pre Tag - Ada beberapa pertanyaan yang diajukan oleh member blog ini seputar tag pre. Diantara pertanyaan yang diajukan adalah: Apa bedanya PRE dengan Blockquote? Mana yang lebih baik digunakan untuk menulis kode? Bagaimana Cara membuat kode warna-warni? Saya suka menggunakan blockquote, bagaimana?

Pertanyaan2 itu akan coba saya jawab satu per satu. Akan tetapi sebelum itu, saya ajak sobat mengenal lebih jauh apa itu tag pre.

PRE artinya pre-formatted atau secara mudahnya, apabila teks ditulis dalam tag pre maka hasilnya akan sama dengan apa yang kita tulis, baik dalam jarak (white space, line break atau tab.

Apabila pada penulisan menggunakan mode HTML, kemudian membuat spasi yang jauh, maka hasilnya akan tetap seperti biasa. Berbeda dengan tag pre, spasi akan tetap.

Untuk lebih memahaminya coba sobat copy kode ini pada postingan (mode HTML).

<pre>

ini     adalah contoh

  tag pre

    coba      tulis

      seperti

  ini di

blog sobat

</pre>



<p>

ini     adalah contoh

  tag pre

    coba      tulis

      seperti

  ini di

blog sobat

</pre>

kemudian lihat hasilnya pada mode Compose, maka akan ada perbedaan yang mencolok antara keduanya. Dengan menggunakan tag pre, spasi akan dipertahankan, berbeda dengan penggunaan tag p hasilnya akan lurus atau berjejer ke bawah.

PRE dan BLOCKQUOTE

Banyak yang menggunakan blockquote untuk berbagi kode. Untuk menjawab pertanyaan "Mana yang lebih baik untuk berbagi kode? blockquote atau pre?" Sebelum melangkah pada jawaban, silahkan simak pengertian blockquote.

Blockquote adalah kutipan penting dan menonjol dari tulisan lainnya, agar tidak terlewatkan oleh pembaca. Contohnya ini.. sobat akan lebih tertarik pada paragraf ini, daripada di atasnya.

Kalau melihat pengertian blockquote, tentunya kurang pas untuk berbagi kode, secara bahasa pun sudah dimengeri blockquote merupakan 'blok kutipan'. Menurut saya sah2 saja menggunakan blockquote sebagai tempat kode.

Tapi kalau dibandingkan, lebih baik menggunakan tag pre daripada blockquote untuk kode. Berikut ini kelebihan tag pre dibanding blockquote :

1. Struktur HTML lebih mudah difahami, lihat gambar :

Lihat yang saya tandai dengan garis merah, jelas mana pembuka dan penutup. Sobat akan melihat susunan otomatis apabila menulis kode menggunakan Notepad++ atau Macromedia DreamWeaver. Bandingkan dengan gambar dibawahnya yang menggunakan blockquote, rada susah untuk memahami struktur htmlnya.

2. Standar huruf menggunakan monospace.

Artinya, tanpa CSS pun tag pre akan mempunya hurup monospace, dimana hurup 'W' akan sama dengan huruf 's' atau lainnya dalam segi ukuran. lebih jelasnya baca disini.

3. Bisa disisipi SyntaxHighlighter (Kode warna warni).

Pewarnaan kode ini, bukan hanya mengejar nilai estetika (enak dilihat), tapi dengan pembedaan warna akan mudah memahami, mana JavaScript, mana CSS, mana HTML, mana tag pembuka, penutup, command, string, dll.

Mungkin masih banyak kelebihan lainnya, silahkan bisa sobat cari dan temukan.

MENGGUNAKAN SYNTAXHIGHLIGHTER

Di blog ini saya sudah share SyntaxHighlighter, berikut cara penulisannya, yaitu PRISM

MENULIS KODE DENGAN TAG PRE

Untuk penulisan standar seperti ini

<pre>

isi kode

</pre>

apabila menggunakan syntaxhighlighter, ada beberapa tambahan seperti :

<pre><code>

isi kode

</code></pre>



atau



<pre lang="css">

isi kode

</code>


dan lain-lain

TAG PRE DETAILS

1. Browser Support :

Netscape 2, 3, 4, 6, 7 dst
Chrome 1 dst
Firefox 1 dst
Internet Explorer 2, 3, 4, 5, 6 dst
Opera 3, 4, 5, 6, 7, 8 dst
Safari 1 dst
WebTV / MSNTV
AvantGo Palm OS
AvantGo Windows CE
HTML 3.2, 4.0
XHTML 1.0
XHTML Text Module, XHTML Legacy Module

2. Atribut

align (optional)
class (optional)
dir (optional)
id (optional)
lang (optional)
onclick (optional)
ondblclick (optional)
onkeydown (optional)
onkeypress (optional)
onkeyup (optional)
onmousedown (optional)
onmousemove (optional)
onmouseout (optional)
onmouseover (optional)
onmouseup (optional)
style (optional)
title (optional)

3. Contents:

Teks. Beberapa tag yang valid pada tag pre tag:
a, abbr, acronym, applet, b, basefont, bdo, big, br, button, cite, code, dfn, em, font, i, iframe, img, input, kbd, label, map, object, q, s, samp, script, select, small, span, strike, strong, sub, sup, textarea, tt, u, var

4. Valid Context :

blockquote, body, button, center, dd, div, fieldset, form, iframe, li, noframes, noscript, object, td, th.

Sumber : http://blog.kangismet.net/2013/10/mengenal-tag-pre.html

Membuat Notifikasi Komentar ala Google Plus

2014-02-02T11:03:00.000+07:00

Notifikasi Komentar Ala Google Plus - Terlalu sudah umum membuat Recent Comments dalam bentuk widget, nah pada postingan kali ini saya buatkan sebuah Recent Comments dalam bentuk Notifikasi ala Google Plus yang telah dirangkum sebelumnya oleh +Kang Ismet dan di repost oleh blog ini.

Demo

JQUERY

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

Lewati langkah ini apabila sudah terdapat jQuery pada template Anda.

CSS

/* Notifikasi Komentar
----------------------------------------------- */
#cm-total {
  position:fixed;
  top:14px;
  right:0;
  width:188px;
  text-align:left;
  z-index:9999;
  cursor:pointer;
}
.total-counter {
  background-color:#d11919;
  color:white;
  padding:1px 4px;
  font-family:Arial,Sans-serif;
  font-size:11px;
  border-radius:5px;
  font-weight:bold;
}
#notif {
  position:fixed;
  top:20px;
  right:180px;
  z-index:9999;
  height:22px;
  width:19px;
  opacity:.4;
  cursor:pointer;
}
#notif:hover {
  opacity:1;
}
.close-notif {
  position:fixed;
  top:92px;
  right:20px;
  z-index:9999;
  cursor:pointer;
  display:none;
}
#cm-container {
  width:355px;
  position:fixed;
  top:67px;
  right:0;
  z-index:9999;
  background-color:#e5e5e5;
  padding:60px 20px 10px 20px;
  color:#666;
  box-shadow:0 4px 15px -4px rgba(0,0,0,.4) !important;
  text-align:left;
  border:1px solid rgba(0,0,0,.2);
  background-clip:padding-box;
  display:none;
}
#cm-container:before {
  content:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrNy6g831BsKCLLFt9VJuhOYQX2_7yiDUBhSevoVqzBpd4Z_YYv7-f4oFrtYWXx0r1TgnHTy5c71GPvnXy72QCJWnis23Vw4km0EsPTdZPyXixuwd6DzSOSJJmyHNxF0pHAkv5qJuWH4Y/s1600/arrow-notif.png');
  position:absolute;
  top:-14px;
  left:196px;
}
#cm-container:after {
  content:"Komentar Terbaru";
  position:absolute;
  top:22px;
  left:150px;
  text-align:center;
  font:normal 14px Arial;
  color:#333;
}
.cm-outer {
  margin:0 auto;
  padding:0;
  font-size:11px;
  text-align:left;
  font:normal 12px Arial;
}
.cm-outer ul{
  margin-bottom:5px;
}
.cm-outer li {
  padding:9px 10px 14px;
  list-style:none;
  clear:both;
  position:relative;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  background-color: white;
  margin-bottom:10px;
}
.cm-text {color:#797979;}
.cm-outer {margin:0 0 5px}
.cm-header {margin: 4px 0 8px 90px;font-size:11px;font-weight:normal !important;}
.cm-header a {color:#262626;text-decoration:none;font-size:14px;font-weight:bold}
.cm-header a:hover {color:#74a2c3;text-decoration:none;}
.cm-outer .cm-content {overflow:hidden}
.cm-content {margin-left:90px}
.cm-outer img {
  display:block;
  float:left;
  background:#ececec url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0JT0BaqpQe9C_WPoPlKYPO8cepNL63cy2OuxwpGdr87qNaiFkn_N-AY_X-GGTsU-upyOCONS1BDZ_sgrJc-cLCd8qohxd1SHF07BnQ6WFqa9pqpXGJl7hwD88qKUmFXBhQJm3l9jUSGo/s1600/anon80.png') no-repeat 50% 50%;
  overflow:hidden;
  border-radius:3px 0 0 3px;
  position:absolute;
  top:0;
  left:0;
}
.cm-footer {margin-top:7px;}
.cm-footer a {color:#5886a7;text-decoration:none;}
.cm-footer a:hover {color:#74a2c3;text-decoration:none;}
div.cm-header img[src=&#39;http://img1.blogblog.com/img/openid16-rounded.gif&#39;] {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8ztKEra_L-Dz9jRsIEViPnfRG87PifGIpF506Q4vXBrEtmnVUX8u9_hJGbj3x_wjBq9eYS-UEDoKCNHq8G7cCrCFTM9RqXUuMMoqnGEMaSlNXAkRm0YUkqR2hvuRDDcbhlkW4sLqhOtU/s80-c/gravatar.png);
}

JavaScript

<div id='cm-container'/>
<div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglobWDhhYNDcQBUXgcqVS7xwe2-uTIAUkerrYE5htettOL_HaNLUf2yI9a4vjpBHFw57Iw6TBkz8eooCQ0ui5ajT7CtdFzVcEqprKYbpukLfUbWAZwV5giMKmknP5WuNITq4JtNcVueL4/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic6ll4ZuEtLNtiy_HQkN47bwWGNdb2iekYzJNpkPh3fZHmtFIqV4lGRCDA9NR_7vbA9xQCtieTf-eYflNhldeXuSnLGiIgG8fWENY0zIR7uwquxMEkrN2Rdb-GWin28oDW4F4ezob-JKI/s1600/delete4.png' title='close'/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
    home_page: "http://hilbramkurnia3.blogspot.com/",
    max_result: 6,
    t_w: 80,
    t_h: 80,
    summary: 40,
    new_tab_link: true,
    ct_id: "cm-container",
    new_cm: " Komentar Baru!",
    interval: 30000,
    alert: true,
    alert: function(total) {
        document.getElementById("cm-total").innerHTML = '<strong class=\'total-counter\'>'+total+'</strong>';
        document.title = '(' + total + ') ' + originalTitle;
    }
};
$('#notif').click(function(){$('#cm-container, .close-notif').toggle();});$('.close-notif').click(function(){$('#cm-container, .close-notif').hide();});document.getElementById('notif').onclick = function(){document.title = originalTitle;$('#cm-total').hide();};document.getElementById('show-total').onclick = function(){document.title = originalTitle;$('#cm-total').hide();$('#cm-container').show();};
//]]>
</script>
<script src='https://googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/notif-komen.js' type='text/javascript'/>

Semoga bermanfaat...

Sumber kode : http://blog.kangismet.net/2013/11/notifikasi-komentar-ala-google-plus.html

Membuat Panel Kontrol Scrollbar di Blogger

2014-01-26T12:05:00.000+07:00

Membuat Panel Kontrol Scrollbar di Blogger - Bagi sebagian orang setidaknya untuk menambahkan fungsi kontrol hanya menggunakan tombol Back to Top/Kembali ke Atas, nah pada artikel ini saya buatkan sebuah panel kontrol untuk scrollbar yang lebih bervarian. Diantaranya ada 6 tombol fungsi sekaligus, yaitu Back to Top, Page up, Page down, To Bottom, Auto Scroll, dan Stop Scroll.

JavaScript

<style>
#dp-scroll{position:fixed;z-index:9999;bottom:0;right:0}
#dp-scroll a{display:block;float:left;background-color:#5cd4f5;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgArsH4S9AbEUDr2Nmc5V5u0Yfe2fqbNU77sNriXkS6bk-MMJwcsLFHXqyoL0PO6r082JjpbcJiP3bLSjxM3KauuzZF_bGvzbLxQyESdILhPpC6Nc73d0sPK2ObtPRI9smbmhHqm_ksIrQ/s216/scroll.png);width:36px;height:36px;text-indent:-999em}
#dp-scroll a.dp-up{background-position:0 -36px}
#dp-scroll a.dp-down{background-position:0 -72px}
#dp-scroll a.dp-bottom{background-position:0 -108px}
#dp-scroll a.dp-scroll{background-position:0 -144px}
#dp-scroll a.dp-stop{background-position:0 -180px}
#dp-scroll a:hover{background-color:#5cbbf5}
</style>
<script>
function autoScroll(){window.scrollBy(0,1);scrolldelay=setTimeout('autoScroll()',50)}
function stopScroll(){clearTimeout(scrolldelay)}
</script>  
<div id='dp-scroll'>
<a class='dp-top' href='javascript:window.scrollTo(0,0);' rel='nofollow' title='To Top'>To Top</a>
<a class='dp-up' href='javascript:window.scrollBy(0,-window.innerHeight);' rel='nofollow' title='Page Up'>Page Up</a>
<a class='dp-down' href='javascript:window.scrollBy(0,window.innerHeight);' rel='nofollow' title='Page Down'>Page Down</a>
<a class='dp-bottom' href='javascript:window.scrollTo(0,999999);' rel='nofollow' title='To Bottom'>To Bottom</a>
<a class='dp-scroll' href='javascript:autoScroll();' rel='nofollow' title='Auto Scroll'>Auto Scroll</a>
<a class='dp-stop' href='javascript:stopScroll();' rel='nofollow' title='Stop Scroll'>Stop Scroll</a>
</div>

Demo

Angka 50 untuk mengurangi atau menambah kecepatan auto-scrolling halaman.

Terakhir SAVE Template..

Semoga bermanfaat..

Sumber kode : http://blog.duypham.info/2013/05/thanh-dieu-khien-cuon-trang-cho-blog.html

Membuat Widget Subscribe Email ala Blog HKBT

2014-01-23T23:07:00.000+07:00

Membuat Widget Subscribe Email ala Blog HKBT - Sesuai yang telah saya janjikan kepada rekan saya sebelumnya yang request cara membuat widget subscribe email ala Blog HKBT di ChatBox.

Apa kelebihan dari tampilan Subscribe Email box ala Blog HKBT ini? kelebihannya mungkin terlihat lebih simpel dan lebih efektif dalam jangkauan visitor yang akan berlangganan di Blog tersebut, dengan tampilan padat, ringan dan dilengkapi dengan tombol css.

CSS

/* Tema : Subscribe By Email oleh Blog HKBT
URL: http://hilbramkurnia3.blogspot.com/2014/01/membuat-widget-subscribe-email-ala-blog-hkbt.html */ 
#subscribe-css{padding:3px 0}
.subscribe-wrapper{color:#fff; background:#F06666; font-size:12px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:none;font-weight:500}
.subscribe-form{background:#F06666; clear:both;display:block;margin:10px 0;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:10px 0 0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKbYY1AoPH9yaHfIpEmmYfjY4hhbYHuC9F2xg5c-9nHO2e5NvwFIhAqflG9DUpxRDE5GbqWRsYLLhzuNZgav5IYQzcjnUAkSxpqH4tRDSBQpNVjeWH5Ue5RNx4RVMYInGVK1xt7lrYCfZj/s1600/sprites.png) no-repeat 1px -27px;color:#444;margin:0 0 15px;padding:12px 40px;width:100%;border:none}
.subscribe-css-email-button{background:#febdaf;color:#fff;cursor:pointer;font-weight:700;padding:10px;text-transform:none;width:100%;border:none;font-size:16px}
.subscribe-css-email-button:hover{transition:all .3s ease-in;background:#d12300;border:none}

HTML

<div id="subscribe-css">
<div class="subscribe-wrapper">
<p>
Dengan memasukkan email pada kolom di bawah ini, Anda akan mendapatkan update artikel dari <b style='color:#F9D233'>Blog HKBT</b> secara gratis.</p>
<div class="subscribe-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=HilbramKurniaBlogsTutorial" class="subscribe-form" method="post" onsubmit="window.open
('http://feedburner.google.com/fb/a/mailverify?uri=HilbramKurniaBlogsTutorial', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="HilbramKurniaBlogsTutorial" /><input name="loc" type="hidden" value="en_US" /><input class="subscribe-css-email-field" name="email" autocomplete="off" placeholder="Enter your email address "/><input class="subscribe-css-email-button" title="" type="submit" value="Subscribe Now !" /></form>
</div>
<center>Powered by : <a href="http://hilbramkurnia3.blogspot.com/"><b style='color:#FFE100'>HKBT</b></a></center></div>
</div>

Kode yang telah saya bidangi sengaja untuk memudahkan Anda mengedit/merubah tampilan sesuai dengan keinginan.

Semoga bermanfaat..

Pure CSS3 Glossy Social Media Drop Down Menu

2014-01-20T20:48:00.000+07:00

Pure CSS3 Glossy Social Media Drop Down Menu - Sebuah menu media sosial yang terbuat dari (hampir) murni CSS3. Di sini Saya menggunakan kombinasi CSS3 Gradien dan Box Shadow untuk menciptakan efek realistis. Pada dasarnya, tombol panah di sisi kanan adalah pseudo elemen dari elemen <label> yang kemudian Saya tutupi dengan elemen checkbox.

Jadi, ketika Anda mengeklik tombol drop down di bagian kanan, maka yang terjadi sebenarnya adalah Anda sedang mengeklik elemen checkbox transparan yang berada di atas elemen palsu (pseudo elemen) dari <label> :

HTML

<div class="glossy-selectbox">
    <input type="checkbox">
    <label data-default="Share This Post!" data-focus="Select one of the social media service..."></label>
    <ul>
        <li><a class="social-rss" href="#" target="_blank">RSS Feed</a></li>
        <li><a class="social-facebook" href="#" target="_blank">Facebook</a></li>
        <li><a class="social-twitter" href="#" target="_blank">Twitter</a></li>
        <li><a class="social-google" href="#" target="_blank">Google+</a></li>
    </ul>
</div>

CSS

/*
 * Pure CSS3 (with some data URI images for the social media icons) Drop Down Menu for Social Media Sharing
 * Author: Taufik Nurrohman
 * URL: https://plus.google.com/108949996304093815163/about
 */

.glossy-selectbox {
  display:inline-block;
  font:normal bold 12px Arial,Sans-Serif;
  position:relative;
  width:300px;
  background-color:#111;
  text-align:left;
  /* CSS3 Browser */
  background-image:-webkit-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
  background-image:-moz-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
  background-image:-ms-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
  background-image:-o-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
  background-image:linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
  /* IE only */
  filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#333333',endColorstr='#111111');
  -webkit-border-radius:7px;
  -moz-border-radius:7px;
  border-radius:7px;
  -webkit-box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7);
  -moz-box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7);
  box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7);
}

.glossy-selectbox:before,
.glossy-selectbox:after {
  content:"";
  display:block;
  width:0;
  height:0;
  border:3px solid transparent;
  border-width:5px 3px;
  border-bottom-color:#999;
  position:absolute;
  top:25%;
  right:5px;
  z-index:4;
}

.glossy-selectbox:after {
  border-color:#999 transparent transparent;
  top:auto;
  bottom:25%;
}

.glossy-selectbox input {
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:15px;
  height:100%;
  opacity:0;
  z-index:10;
  cursor:pointer;
}

.glossy-selectbox label {
  display:block;
  line-height:45px;
  color:rgba(255,255,255,.5);
  padding:0 15px;
  -webkit-transition:all 0s ease-out;
  -moz-transition:all 0s ease-out;
  -ms-transition:all 0s ease-out;
  -o-transition:all 0s ease-out;
  transition:all 0s ease-out;
}

.glossy-selectbox label:before {
  content:attr(data-default);
}

.glossy-selectbox label:after {
  content:"";
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:15px;
  border-left:1px solid rgba(0,0,0,.4);
  -webkit-border-radius:0 7px 7px 0;
  -moz-border-radius:0 7px 7px 0;
  border-radius:0 7px 7px 0;
  -webkit-box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
  -moz-box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
}

.glossy-selectbox input:hover + label {
  color:white;
}

.glossy-selectbox input:hover + label:after {
  background-color:rgba(255,255,255,.04);
}

.glossy-selectbox ul {
  margin:0 0;
  padding:0 0;
  position:absolute;
  top:100%;
  left:14px;
  right:14px;
  background-color:#222;
  border:1px solid #111;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4);
  visibility:hidden;
  opacity:0;
  z-index:99;
}

.glossy-selectbox li {
  margin:0 0;
  padding:0 0;
  list-style:none;
  float:left;
  width:50%;
  display:inline;
}

.glossy-selectbox a {
  display:block;
  position:relative;
  color:#999;
  text-decoration:none;
  text-shadow:0 0 2px black;
  line-height:30px;
  border-top:1px solid #111;
  border-right:1px solid #111;
  padding:0 15px 0 32px;
  -webkit-box-shadow:inset 0 0 0 1px #333;
  -moz-box-shadow:inset 0 0 0 1px #333;
  box-shadow:inset 0 0 0 1px #333;
  /* Opera note: An unstable box shadow will appear if you don't define the border radius less than 1 pixel. Weird! */
  -webkit-border-radius:1px;
  -moz-border-radius:1px;
  border-radius:1px;
}

.glossy-selectbox a:nth-child(even) {
  border-right-width:0;
}

.glossy-selectbox a:before {
  content:"";
  display:block;
  width:16px;
  height:16px;
  position:absolute;
  top:7px;
  left:7px;
  background-color:transparent;
  background-repeat:no-repeat;
  background-position:50% 0;
}

.glossy-selectbox a:hover:before {
  background-position:50% 100%;
}

.glossy-selectbox .social-rss:before      {background-image:url('img/social_rss.png');}
.glossy-selectbox .social-facebook:before {background-image:url('img/social_facebook.png');}
.glossy-selectbox .social-twitter:before  {background-image:url('img/social_twitter.png');}
.glossy-selectbox .social-google:before   {background-image:url('img/social_google.png');}

.glossy-selectbox a:hover {
  background-color:rgba(0,0,0,.2);
  color:#ccc;
}

/* On click, then... */
.glossy-selectbox input:checked + label {
  color:rgba(255,255,255,.4);
  -webkit-transition-duration:.4s;
  -moz-transition-duration:.4s;
  -ms-transition-duration:.4s;
  -o-transition-duration:.4s;
  transition-duration:.4s;
}

.glossy-selectbox input:checked + label:before {
  content:attr(data-focus);
}

.glossy-selectbox input:checked + label:after {
  background-color:rgba(0,0,0,.2);
  -webkit-box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
  -moz-box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
  box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
}

.glossy-selectbox input:checked ~ ul {
  visibility:visible;
  opacity:1;
}

Demo : JSFIDDLE | CSSDECK

Sumber bacaan : http://www.dte.web.id/2012/09/pure-css3-glossy-social-media-drop-down.html

Navigasi Menu CSS3 Sohtanaka

2014-01-16T20:11:00.000+07:00

Navigasi Menu CSS3 Sohtanaka - Pada artikel ini masih bertema CSS3, yaitu membuat menu navigasi dengan efek hover menggulung dari Sohtanaka.

Yang masih pemula saya jelaskan sedikit konsep efek hover menggulung menggunakan CSS3, ketika Anda menyentuh menu navigasi tersebut dengan cursor, maka yang tadinya warna dari menu navigasi tersebut berubahdan disertai animasi menggulung. Untuk lihat secara langsungnya, bisa dilihat demo di akhir artikel.

HTML

<nav id='rolling-nav'>
    <ul>
        <li><a href='#' data-clone='Home'>Home</a></li>
        <li><a href='#' data-clone='About'>About</a></li>
        <li><a href='#' data-clone='Portfolio'>Portfolio</a></li>
        <li><a href='#' data-clone='Comments'>Comments</a></li>
        <li><a href='#' data-clone='Contact'>Contact</a></li>
    </ul>
</nav>

CSS

#rolling-nav {
  font:normal 12px 'Trebuchet MS',Arial,Sans-Serif;
  color:white;
  text-transform:uppercase;
}

#rolling-nav ul {
  height:50px;
  margin:0px 0px;
  padding:0px 0px;
  overflow:hidden;
}

#rolling-nav li {
  float:left;
  display:inline;
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;
}

#rolling-nav a,
#rolling-nav a:before {
  display:block;
  margin:0px 0px;
  padding:0px 30px;
  line-height:50px;
  color:white;
  text-decoration:none;
  background-color:#900;
  background-image:-webkit-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-moz-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-ms-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-o-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  position:relative;
  /* CSS Transisi */
  -webkit-transition:all 0.3s ease-in-out;
  -moz-transition:all 0.3s ease-in-out;
  -ms-transition:all 0.3s ease-in-out;
  -o-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
}

#rolling-nav a:before {
  content:attr(data-clone); /* Memuat data atribut */
  position:absolute;
  top:100%;
  left:0px;
  display:block;
  background-color:white;
  background-image:-webkit-linear-gradient(top, #ddd, white);
  background-image:-moz-linear-gradient(top, #ddd, white);
  background-image:-ms-linear-gradient(top, #ddd, white);
  background-image:-o-linear-gradient(top, #ddd, white);
  background-image:linear-gradient(top, #ddd, white);
  border-top:2px solid rgba(0,0,0,0.2);
  color:#333;
}

#rolling-nav a:hover {
  margin-top:-50px;
  margin-bottom:1px;
}

Demo

Atribut data-clone digunakan untuk menyimpan nilai kloning yang dituliskan secara manual menggantikan fungsi .clone() dalam JQuery. Efek animasi dibuat dengan cara menganimasikan properti margin dengan CSS transisi.

Sumber kode : http://www.dte.web.id/2012/05/navigasi-css3-sohtanaka.html

Tips Membuat Blog Valid CSS3

2014-01-14T22:17:00.001+07:00

Tips on Creating a Blog Valid CSS3 - Setelah sempat kemarin membahas semua validasi tentang HTML5, nah sekarang kita bahas dan membuka episode baru sesuai yang telah saya bilang sebelumnya, yaitu CSS3.

Sengaja saya buatkan langsung ke materi penerapannya dan tidak membahas terlebih dahulu definisi dan pengertian dari CSS3 ini, karena konsepnya sama dengan HTML5 bisa didefinisikan sendiri :

Mengenal Seputar HTML5

Perlu dicatat, bahwa validasi baik HTML5 maupun CSS3 bukan sesuatu yang sempurna. Artinya, ketika sebuah blog valid HTML5 atau CSS3 tidak berarti sempurna dalam CSS dan HTML. Validasi hanya merupakan panduan dalam menyusun HTML dan CSS yang baik.

MENON-AKTIFKAN CSS RESET STYLESHEET BLOGGER

Menonaktifkan CSS Reset ini, saya temukan di Blog Damar Zaky dan aplikasinya dipermudah oleh Kompi Ajaib. Sebelum menonaktifkan CSS Reset Stylesheet Blogger, silahkan lihat kode dibawah, biasanya susunan template akan seperti ini :


<b:skin><![CDATA[*

......

KODE CSS DI SINI

......

]]></b:skin>

ganti <b:skin><![CDATA[* dengan


&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /* <b:skin><![CDATA[*/]]></b:skin>

<style type='text/css'>

ganti kode ]]></b:skin> dengan kode :


</style>

Setelah menonaktifkan CSS Reset ini, biasanya akan ada sedikit perobahan tampilan, baik di dashboard atau di blog. Saran saya tidak usah panik, edit saja satu persatu.

HAPUS BEBERAPA KODE

Banyak tutorial yang memberikan kode CSS untuk diterpakan pada berbagai browser. Dengan hadirnya CSS3 ini, kode-kode tersebut sudah tidak diperlukan lagi. Seperti contoh kode rounded corner (ujung membulat) biasanya kodenya akan seperti ini :


-moz-border-radius:5px;

-khtml-border-radius:5px;

-o-border-radius:5px;

-webkit-border-radius:5px;

border-radius:5px;

dengan hadirnya CSS3, untuk beberapa browser hanya diperlukan kode border-radius:5px, oleh karena itu, hapus semua kode yang berawalan:


-moz-

-khtml-

-o-

-webkit-

Hapus juga kode dengan awalan


DXImageTransform

PERHATIKAN BEBERAPA PERINTAH VALIDATOR

Masih banyak perintah-perintah perbaikan dari CSS Validator tahap demi tahap. Sebagai contoh perintah seperti ini :

Family names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the name are ignored and any sequence of whitespace characters inside the name is converted to a single space.

Itu artinya, apabila ada hurup yang mempunyai spasi, tambahkan tanda petik ("). Misalkan sobat menggunakan huruf Open Sans, Segoe UI, Arial (sebagai backup apabila huruf pertama tidak bisa diload) maka penulisannya


font-family: 'Open Sans', 'Segoe UI', Arial, sans-serif

Sebetulnya masih banyak perintah yang lain, silahkan lakukan secara santai. Sobat juga bisa berdiskusi di kolom komentar apabila ada permasalahan dalam validasi ini.

Sumber bacaan : http://blog.kangismet.net/2013/09/cara-membuat-blog-valid-css3.html

Membuat Halaman Posting Blog Valid HTML5

2014-01-13T21:43:00.000+07:00

Creating Valid HTML5 Blog Post Pages - Mungkin artikel ini yang terakhir dalam episode kita dalam pembahasan seputar HTML5, dan insya allah episode selanjutnya saya akan membahas seputar CSS3.

BREADCRUMBS

Saat ini sudah banyak tutorial tentang breadcrumbs yang SEO friendly, tapi kebanyakan masih menggunakan markup rdfa, untuk membuatnya valid html5 Anda harus menggunakan markup microdata.

Membuat Breadcrumbs SEO Friendly dan Valid HTML5

GAMBAR / IMAGE

Apabila Anda mengupload gambar pada postingan, biasanya akan muncul kode seperti ini (pada mode HTML)


<div class="separator" style="clear: both; text-align: center;">

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEges5l3r8r4iqLwmkg_z9Rfd8ssboaXqrzxC2Yq-Q2zKeSkFzlICqwiGlOCrVeLrkwdjBCVFuGnOrgrBgb3eiXxJJPulZZVS5K4tiEDfm559NK9iW-iZ0po6cNnkJV0rXKiHOktXFvtVsMT/s1600/abstract2.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="177" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEges5l3r8r4iqLwmkg_z9Rfd8ssboaXqrzxC2Yq-Q2zKeSkFzlICqwiGlOCrVeLrkwdjBCVFuGnOrgrBgb3eiXxJJPulZZVS5K4tiEDfm559NK9iW-iZ0po6cNnkJV0rXKiHOktXFvtVsMT/s320/abstract2.jpg" width="320" /></a></div>

hapus imageanchor="1", dan ganti border="0" dengan alt="keterangan gambar".

Intinya, ketika menyimpan gambar pada postingan atau widget, jangan menggunakan border="0". Hal yang wajib ditambahkan adalah alt="keterangan gambar" lebih bagus lagi menggunakan tag title. Sebagai contoh menampilkan gambar yang baik:


<img alt="ipad4" src="http://blogspot.com/ipad4.png" title="Ipad Terbaru"/>

ARTIKEL TERKAIT / RELATED POST

Ada beberapa script yang saya temui pada related posts ini error vaidasi. Diantara penyebabnya adalah karena label menggunakan 2 kata atau lebih seperti Tutorial Blogger, dengan kondisi seperti itu, membuat white space yang seharusnya. Bagi sobat yang menggunakan script ini, saya sarankan untuk membuat label hanya dengan 1 kata saja. Apabila sudah banyak label dengan 2 kata atau lebih.

Menampilkan Artikel Terkait Blog Valid HTML5

WIDGET

Untuk validasi widget sebetunya sudah dibahas pada artikel yang lalu. yang pasti selalu menghapus <b:include name='quickedit'/> setelah menambah widget baru.

Ada hal lain yang harus diperhatikan yaitu ketika menambah kode pada widget, banyak tutorial yang menyatukan antara kode CSS, HTML dan JavaScript di widget. Misalnya kode Recent Post dengan Avatar, Blog Pager menjadi Judul, dll.

Sebagai gambaran seperti ini :


<style type="text/css">

.home-link{display:none} #blog-pager-newer-link {font-size:12px;width:300px;float:left; text-align:left;font-family:Arial, sans-serif;} #blog-pager-older-link {font-size:12px;width:300px;float:right; text-align:right;font-family:Arial, sans-serif;}

</style>

<script type="text/javascript">

$(document).ready(function(){ var olderLink = $("a.blog-pager-older-link").attr("href"); $("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() { var olderLinkTitle = $("a.blog-pager-older-link").text(); $("a.blog-pager-older-link").text(olderLinkTitle + "\u2192");//rgt });

</script>

Kode <style type="text/css"> inilah yang menyababkan error, untuk solusinya tambahkan scoped atau scoped='' atau scoped='scoped'. Inilah yang dinamakan Boolean Attribute. Maka kode yang benar menjadi:


<style type="text/css" scoped>

KOMENTAR

Inilah penyumbang error terbanyak pada validasi. Dengan menggunakan komentar standar blogger, akan susah melakukan validasi. Oleh karena itu, untuk membuat halaman posting menjadi valid HTML5, ada satu alternatif khusus untuk Anda :

Mengaktifkan Sistem Komentar Google+ di Blogger

Bila ada kekurangan, insya allah menyusul..

Sumber bacaan : http://blog.kangismet.net/2013/09/tips-membuat-halaman-posting-valid-html5.html

Menampilkan Artikel Terkait Blog Valid HTML5

2014-01-11T13:57:00.002+07:00

Showing Related Articles Blog Valid HTML5 - Artikel Terkait/Related Post sudah seharusnya ditampilkan pada postingan blog, ini cara termutakhir untuk membuat pengunjung meminati artikel-artikel lainnya, sehingga peningkatan visitor-pun bertambah dan seimbang.

Selain untuk membuat pengunjung meminati artikel-artikel lainnya, Artikel Terkait/Related Post ini juga menambahkan score SEO blog yang menampilkannya. Tetapi, saya akan menambahkan kualitas Artikel Terkait/Related Post itu dengan HTML5, tentu dengan ditambahkannya HTML5 ini, score SEO-nya pun akan di double pula.

Langkah 1 : Backup dulu template Anda untuk menghindari hal-hal yang tidak diinginkan.
Langkah 2 : Dari Dashboard Blogger Anda Buka Template > Edit HTML.
Langkah 3 : Simpan kode ini di atas ]]></b:skin>


#related-post background:none;width:100%;margin-top:35px;margin-bottom:10px;padding:5px 0 10px 0px}

#related-post h4{font-size:150%;text-transform:uppercase;margin:0 0 15px;padding:0;font-weight:normal}

#related-post li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2MYBoQArXmdLxkIhyFgEocfh8QwBdhM3Csj384LomkXa5oVlaAM4vOrUrXZRVwJwuWcKdI4XRMLxAcBpxylKMFwb-8-Sm288YP2lvflYRKdGPsOm3bGUIHfGp67nchDgmNiaYNDvIsl7_/s1600/bullet.png) no-repeat 1px 5px;color:#2c3e50;text-indent:0;line-height:1.6em;margin:0;padding:0 0 3px 19px}

#related-post .widget{margin:0;padding:0}

#related-post ul{list-style:none;margin:0;padding:0}

Tambahkan kode berikut dibawah <div class='post-footer-line post-footer-line-1'>


<!-- Related Post Widget Start -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

  <div id='related-post' class='related-post'/>

  <script type='text/javascript'>

  var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>

          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>

      </b:loop></b:if>];

  var relatedPostConfig = {

      homePage: &quot;<data:blog.homepageUrl/>&quot;,

      widgetTitle: &quot;&lt;h4&gt;Artikel Terkait:&lt;/h4&gt;&quot;,

      numPosts: 5,

      titleLength: &quot;auto&quot;,

      containerId: &quot;related-post&quot;,

      newTabLink: false,

      widgetStyle: 1,

      callBack: function() {}

  };

  </script>

  <script type='text/javascript' src='https://kang-is.googlecode.com/svn/trunk/javascript/related-post.min.js'/>

</b:if>

<!-- Related Post Widget End -->

Save, lihat hasilnya...

Baca juga : Membuat Artikel Terkait dengan Thumbnail

Sumber kode : http://blog.kangismet.net/2010/01/menampilkan-artikel-terkait-related.html

Membuat Breadcrumbs SEO Friendly dan Valid HTML5

2014-01-07T19:44:00.000+07:00

Creating SEO Friendly Breadcrumbs and Valid HTML5 - Sebelumnya saya juga sudah memposting 2 artikel mengenai Breadcrumbs yaitu Cara Membuat Breadcrumbs Terindex Google dan Cara Membuat Breadcrumbs Master SEO di Blog, namun pada episode Breadcrumbs yang satu ini akan menambahkan kualitas termasuk memasukan validasi HTML5 didalamnya.

Lantas apa bedanya script sebelumnya dan yang sekarang? Sebetulnya sama kodenya, namun dalam format penulisan, pada pembahasan sebelumnya menggunakan markup RDFa sedangkan sekarang menggunakan Microdata. Untuk markup RDFa sendiri tidak valid HTML5.

Namun secara singkat, markup HTML RDFa biasanya menggunakan kode kurang lebih seperti ini :


<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>

kode inilah yang membuatnya tidak valid html5.

Kembali lagi kepada tutorial Cara membuat breadcrumbs SEO friendly dan valid html5, bagi sobat yang ingin menerapkan, silahkan simak langkahnya :

Langkah 1 : Simpan kode ini di atas ]]></b:skin>


.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}

Langkah 2 : Cari kode <b:includable id='main' var='top'> kemudian ganti dengan :


<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>

<b:else/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- breadcrumb for the post page -->

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.labels'>

<div class='breadcrumbs'>

<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span>

<b:loop values='data:post.labels' var='label'>

  &#187; <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>

</b:loop>

&#187; <span><data:post.title/></span>

</div>

<b:else/>

<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>

</b:if>

</b:loop>

<b:else/>

<b:if cond='data:blog.pageType == &quot;archive&quot;'>

<!-- breadcrumb for the label archive page and search pages.. -->

<div class='breadcrumbs'>

<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>

</div>

<b:else/>

<b:if cond='data:blog.pageType == &quot;index&quot;'>

<div class='breadcrumbs'>

<b:if cond='data:blog.pageName == &quot;&quot;'>

<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>

<b:else/>

<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>

</b:if>

</div>

</b:if>

</b:if>

</b:if>

</b:if>

</b:if>

</b:includable>

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

<b:include data='posts' name='breadcrumb'/>

Saya sudah menerapkan kode sebelumnya? mana yang harus diedit?

Apabila sobat sudah menerapkan breadcrumbs pada artikel sebelumnya, silahkan cari kode seperti ini :


<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>

<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>

<b:loop values='data:post.labels' var='label'>

&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>

ganti dengan kode ini :


<div class='breadcrumbs'>

<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span>

<b:loop values='data:post.labels' var='label'>

  &#187; <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>

Semoga bermanfaat...

Sumber bacaan : http://blog.kangismet.net/2013/09/breadcrumbs-seo-friendly-dan-valid-html5.html

Tutorial Membuat Blog Valid HTML5

2014-01-04T23:28:00.000+07:00

Valid HTML5 Tutorial Create a Blog - Setelah kemarin sempat membahas artikel terkait seputar HTML5, kali ini saya akan membahas episode selanjutnya dalam penerapannya ke blog.

KEUNTUNGAN WEB/BLOG VALID HTML5

1. Membantu Search Engine meng-indeks dokumen website/blog lebih baik.
2. Render browser lebih baik dan lebih cepat
3. DOCUMENT OBJECT MODEL (DOM) lebih stabil dan konsisten
4. Future Proof, yang berarti HTML lebih kompatible, backward compatible terhadap browser terbaru.
5. Mengetahui kondisi website/blog lebih detail ( link-link broken, link mati, dst.)
6. Lebih disukai browser-browser dan tentu masih banyak lagi keuntungan lain dari validasi HTML ini.

BAGAIMANA DENGAN SEO?

Menurut pribadi saya, blog yang bervalid HTML5 bisa meningkatkan kualitas SEO. Ini dikarenakan fungsi HTML5 memperbaiki teknologi HTML agar mendukung teknologi multimedia.

TUTORIAL MEMBUAT BLOG VALID HTML5

Langkah 1 : Backup template sebelum melakukan editing.
Langkah 2 : Cari kode seperti ini :


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>

ganti dengan :


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>

Langkah 3 : Ganti kode </html> dengan </HTML> (paling bawah di template)
Langkah 4 : ganti kode ini :


<b:include data='blog' name='all-head-content'/>

dengan kode di bawah ini :


<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='description'/>
</b:if>
</b:if>

Langkah 5 : Ganti <b:skin><![CDATA[ dengan kode dibawah :


<link href='//www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css' rel='stylesheet' type='text/css'/>
&lt;style type=&quot;text/css&quot;&gt; &lt;!-- /*<b:skin><![CDATA[*/]]
<style>

Langkah 6 : Hapus semua kode ini :


<b:include name='quickedit'/>

Setiap kali menambahkan widget baru, hapus kode di atas.

Langkah 7: Hapus semua kode ini (opsional)


<a expr:name='data:post.id'/>

Langkah 8 : hapus kode seperti ini :


<b:include data='post' name='postQuickEdit'/>

atau seperti ini :


<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='&quot;item-control &quot; + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</b:if>
</b:includable>

Langkah 9 : Hapus kode dibawah ini (kalau ditemukan, kalau tidak ada, lewati saja)


<div class='post-share-buttons goog-inline-block'>...sampai...</div>

Langkah 10 : Ganti semua code & dengan &

Sampai di sini, template sobat sudah bisa Valid HTML5 untuk Homepage. Akan tetapi pada postingan masih banyak error karena komentar blogger (kecuali komentar hack seperti blog ini). Mudah-mudahan saya bisa share cara mem-fix-an postingan.

HARAP DIPERHATIKAN

Cara diatas sebenarnya sudah valid, tapi mungkin belum fix 100%. Nah, harap perhatikan poin ini untuk mendapatkan blog valid 100%.

1. Selalu gunakan tag alt pada gambar, contoh :


<img alt="HTML5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj51UdAGcG2RpAwA_GGlZnqvovTyigt00KoLzDK1vk4IFTLIJTy-wN5k_wO4O5WCs-wt8WR5RdH9qo2EzMYL7icUdPpt_xoQaClNmouCCpkQ4-PCHA3sRDCWapbeZtBtTIIlo-mNRsYB74/s1600/html5.png" />

2. Jangan gunakan border="0" pada gambar, sebagai gantinya tambahkan kode :


style="border:none"

atau CSS terpisah seperti :


img{border:none}

3. Pada iFrame, jangan menggunakan frameborder="0" atau allowtransparency:"true" scrolling="no", sebagai gantinya gunakan kode :

 
style="border:none;overflow:hidden"

atau CSS terpisah seperti :


iframe{border:none;overflow:hidden}

4. Pada tag a jangan menggunakan tag name seperti :


<a name='comment-form'>

sebagai gantinya gunakan id seperti :


<a href='#comment-form'>

5. Jangan ada dua id pada template.
6. Hapus kode <b:include name='quickedit'/> setiap menambah widget baru.

Resource : http://blog.kangismet.net/2013/08/cara-membuat-blog-valid-html5.html

Mengenal Seputar HTML5

2014-01-03T14:44:00.001+07:00

Know Regarding HTML5 - HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997) dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

HTML5 merupakan salah satu karya Konsortium Waring Wera Wanua (World Wide Web Consortium, W3C) untuk mendefinisikan sebuah bahasa markah tunggal yang dapat ditulis dengan cara HTML ataupun XHTML. HTML5 merupakan jawaban atas pengembangan HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, dan diimplementasikan secara berbeda-beda oleh banyak perangkat lunak pembuat web.

STRUKTUR HTML5


<!DOCTYPE html>
<html>
<head>
<title>Judul</title>
</head>
<body> Isi dan Konten </body>
</html>

MARKUP

Pada HTML 5 diperkenalkan beberapa elemen baru dan atribut yang merefleksikan tipikal penggunaan website modern. Beberapa diantaranya adalah pergantian yang bersifat semantik pada blok yang umum digunakan: yaitu elemen (<div>) dan inline (<span>), sebagai contoh (<span>) (sebagai blok navigasi website) dan <footer> (biasanya dikaitkan pada bagian bawah suatu website atau baris terakhir dari kode html). Banyak elemen lain yang memberikan kegunaan baru melalui antar muka yang telah distandarkan, seperti elemen multimedia <audio> dan <video>. Beberapa elemen yang telah ditinggalkan juga ditiadakan, termasuk elemen presentasi semata seperti <font> dan <center>, yang sebenarnya dapat dikerjakan menggunakan Cascading Style Sheet (CSS).

PENGHAPUSAN PADA TAG HTML5


<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>
<u>

HAL YANG BARU PADA HTML5

Pada awalnya untuk membuat layout sebuah web kita menggunakan <div id='header'> untuk header, <div id='main-content'> untuk artikel, <div id='sidebar'> untuk sidebar, dan <div id='footer'> untuk footer. Gambarannya seperti ini :

Dengan menggunakan HTML5 maka struktur tersebut menjadi <header>, <article>, <aside> dan <footer>. Untuk merubah tampilan, tambahkan id dan ubah CSSnya, <header id='header'>.

Keuntungan dari struktur diatas dengan menggunakan semantik HTML5 akan memudahkan mesin pencari untuk menelusuri bagian mana saja dari sebuah blog/website. Dengan struktur yang mudah difahami oleh mesin pencari, tentunya akan mempunyai pengaruh terhadap SEO itu sendiri.

Sumber bacaan:
http://blog.kangismet.net/2013/12/html5-dan-seo.html
http://under-88.blogspot.com/2012/05/definisi-dan-pengertian-html5.html
http://id.wikipedia.org/wiki/HTML5

Struktur Membuat Artikel Blog Menarik

2013-12-26T22:31:00.002+07:00

Struktur Membuat Artikel Blog Menarik - Menarik disini bukan berarti bahwa artikel tersebut keren atau cantik melainkan dalam konsep kualitas artikel dari segi kegunaan artikel tersebut. Apakah artikel Anda sudah sesuai dengan yang namanya menarik? Jika bagi Anda artikel tersebut sudah benar-benar menarik, Bagaimana menurut Google? Apakah sudah sesuai? Disini Anda akan mendapatkan tipsnya!

Memang dengan konsep artikel menarik, apa kegunaannya? Tentu kriteria dalam menulis artikel harus menggunakan konsep menarik, dengan ini, maka kualitas artikel kita di Serp meningkat. Bagaimana Google bisa tahu bahwa artikel kita dengan konsep menarik dan tidak menarik? Google bukan hanya sebuah Search Engine belaka, ia mempersembahkan berbagai produknya termasuk Blogger. Nah, dengan ini Google menciptakan sebuah Algoritma, salah satunya yang baru-baru ini adalah Hummingbird Google bertugas untuk mengintai berbagai blog untuk diuji kualitas artikel tersebut. Sudah paham? Jika iya, silahkan simak beberapa tips yang telah saya rangkum untuk membuat artikel blog menarik.

MENGGUNAKAN TEMA MENARIK

Sebuah artikel akan dibaca oleh banyak orang jika temanya menarik. Sebuah tema yang jarang dibahas di blog bukan berarti kurang diminati. Jadi coba pikirkan tema apa yang kira-kira bisa Anda angkat untuk dijadikan sebuah artikel menarik.

TULIS ARTIKEL DENGAN BAHASA RINGKAS DAN MUDAH DIPAHAMI

Sebagian orang kadang sering menulis berbelit-belit. Hindari hal tersebut, mulailah menggunakan bahasa yang sederhana agar dapat dimengerti orang lain.

FOKUS TERHADAP TEMA

Nah, ini merupakan poin terpenting. Jangan sampai karena terlalu asyik menulis Anda jadi membahas hal-hal yang di luar konteks pembahasan dan tema tulisan yang Anda pilih.

MERAPIKAN FORMAT PENULISAN

Format penulisan juga sangat penting. Jangan sampai artikel Anda terlihat berantakan. Penulisan yang berantakan akan membuat orang malas untuk membacanya.

LENGKAPI ARTIKEL DENGAN GAMBAR YANG SESUAI

Penambahan gambar pada artikel akan meningkatkan minat pembaca. Karena jika artikel Anda hanya berisi tulisan saja, mungkin sebagian orang akan menunda untuk membacanya. Tapi ingat, penambahan gambar untuk artikel Anda harus sesuai dengan tema artikel itu sendiri.

MEMILIH JUDUL ARTIKEL YANG MENARIK

Judul sebuah artikel dapat dikatakan bertindak sebagai pintu gerbang. Semakin menarik judul artikel, pembaca akan semakin “penasaran” terhadap isi artikel yang Anda buat. Hanya saja, pemilihan judul yang tepat dan menarik juga harus memperhatikan isi artikel. Jangan sampai judul dan isi artikel berbeda.

Semoga bermanfaat..

Membuat Dialog Box Dengan Fungsi jQuery

2013-12-25T14:23:00.001+07:00

Membuat Dialog Box Dengan Fungsi jQuery - Tentu Anda pernah membuat sebuah dialog box dengan menggunakan popup, tapi pada artikel ini saya akan memodifikasi dialog box tersebut dengan fungsi jQuery agar lebih simpel dan mudah dipahami.

MEMBUAT KOTAK DIALOGNYA

Langkah 1 : Langkah yang pertama dilakukan adalah membuat kotak dialog, silahkan sesuaikan ukuran dan warna sesuai keinginan sobat, penempatannya seperti biasa sebelum ]]></b:skin> atau </style>. Contoh CSS :


#dialog-box {
    position:fixed;
    top:50px;
    left:50%;
    width:320px;
    margin-left:-160px; /*setengah dari lebar kotak dialog*/
    color:white;
    background-color:#174a87;
    border:8px solid #0a2e58;
    box-shadow: 0 0 2px 1px black,0 0 10px black;
    font:normal 12px Arial;
    line-height:1.6em;
    padding:15px;
    text-align:left;
    border-radius:5px;
    z-index:1000;
}

Langkah 2 : Buat juga CSS untuk menutup kotak dialog yang nantinya berupa tanda silang (X) atau tombol OK


.close {
    background:#0a2e58;
    color:#d9e0e9;
    border-radius:3px;
    padding:4px;
    text-align:center;
    margin:25px auto 2px;
    cursor:pointer;
    width:30px;
}
.close:hover {
    background-color:#041f3e
}

Langkah 3 : Setelah itu buat kode HTMLnya, tambahkan juga html untuk tombol yang nantinya dipakai untuk membuka kotak dialog, simpan diatas </body>:


<button class='muncul'>Munculkan Dialog</button>
<div id='dialog-box'>
    Selamat datang di Hilbram Kurnia Blog's Tutorial. Ini hanya contoh dialog box sederhana dengan jQuery. Untuk membuatnya, silahkan fahami sedikit demi sedikit, jangan terburu-buru.
    <div class='close'>OK</div>
</div>

MENAMBAHKAN FUNGSI JQUERY

Sebelum membuat fungsi jquery, tentunya sembunyikan dulu kotak dialog dengan display:none atau visibility:hidden


#dialog-box {
    ....
    ....
    ....
    display:none;
}

Supaya jQuery berfungsi, pastinya template sobat harus terpasang jQuery library. Selanjutnya hal yang wajib difahami adalah kode HTML yang dibuat (kembali ke atas untuk melihat kode HTML). Tombol untuk membuka dialog kita buat dengan class='muncul' sedangkan untuk menutup kotak dialog mempunyai class='close'. Harap di ingat, id ditandai dengan # sedangkan class dengan . (titik).

Inilah perintah jQuery untuk menutup dan membuka kotak dialog, simpan diatas </body>


<script type="text/javascript">
//<![CDATA[
$(function() {
     //Tampilkan kotak dialog saat .muncul diklik
     $('.muncul').click(function() {
          $('#dialog-box').fadeIn();
     });
     //Tutup kotak dialog saat .close diklik
     $('.close').click(function() {
          $('#dialog-box').fadeOut();
     });
});
//]]>
</script>

MENAMBAHKAN FUNGSI OVERLAY

Overlay mempunya arti menyimpan sesuatu di atas sesuatu. Dalam istilah website, overlay merupakan tabir transparan untuk menutupi keseluruhan web sehingga fokus pada elemen tertentu. Kebanyakan tabir yang digunakan berwarna hitam transparan.

Kode CSS untuk overlay kurang lebih seperti ini :


#dialog-overlay {
    position:fixed !important;
    position:absolute; /*tambahkan posisi ini supaya fix di IE*/
    z-index:999; /*nilai ini harus dibawah nila z-index pada kotak dialog*/
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    background-color:#000;
    display:none;
}

Setelah selesai dengan CSS, kita tambahkan HTMLnya pada HTML yang telah kita buat di atas


<button class='muncul'>Munculkan Dialog</button>
<div id='dialog-overlay'></div><div id='dialog-box'>
    Selamat datang di Blog Kang Ismet. Ini hanya contoh dialog box sederhana dengan jQuery. Untuk membuatnya, silahkan fahami sedikit demi sedikit, jangan terburu-buru.
    <div class='close'>OK</div>
<div>

Tambahkan juga pada fungsi jQuery, supaya terbuka dan tertutup. Pada saat terbuka, saya menggunakan .fadeTo("normal", 0.4) supaya tabir menjadi transparan.


<script type="text/javascript">
//<![CDATA[
$(function() {
     //Tampilkan kotak dialog saat .muncul diklik
     $('.muncul').click(function() {
          $('#dialog-box').fadeIn();
          $('#dialog-overlay').fadeTo("normal", 0.4);     });
     //Tutup kotak dialog saat .close diklik
     $('.close').click(function() {
          $('#dialog-box').fadeOut();
          $('#dialog-overlay').hide();     });
});
//]]>
</script>

Semoga bermanfaat..

Resource : http://blog.kangismet.net/2013/11/membuat-simple-dialog-box-dengan-jquery.html

Menampilkan Screenshot Preview Responsive Web Design

2013-12-11T21:54:00.000+07:00

Menampilkan Screenshot Preview Responsive Web Design - Banyak user yang browsing di internet untuk mencari sebuah tool yang berfungsi untuk menampilkan screenshot dari hasil desain web mereka, tentu untuk mengetahui apakah Responsive atau tidak. Nah, dalam konsep artikel ini saya akan melepas kebuntuan Anda yang sedang mencari sebuah tool Screenshot Preview Responsive Web Design.

Mungkin Anda mengira tool ini dalam sistem Software bukan? Tentu tidak, karena tool ini sudah disediakan dalam bentuk aplikasi web, namanya adalah Am I Responsive?. Ya ini dia tool yang baru saya temuin dan cukup bagus buat kalian yang ingin menampilkan preview desain blog dibeberapa perangkat sekaligus dan tool ini sebenarnya bukan hanya untuk preview saja tetapi sekaligus buat melakukan testing secara nyata.

Untuk menggunakan tool diatas caranya sangat mudah, kita hanya memasukan URL alamat blog atau website dan selanjutnya biarkan tool tersebut bekerja otomatis menampilkan Screenshot-nya, selain itu kita juga bisa mengatur letak posisi perangkat dengan hanyak menggesernya. Untuk hasil Screenshot karena tidak ada fasilitas untuk menyimpan gambar cara termudah tentu saja hanya menekan tombol PrintScreen dan simpan hasil gambarnya dikomputer kalian.

Untuk mencobanya silahkan sambangi langsung demonya DISINI

Resource : http://www.o-om.com/2013/09/menampilkan-screenshot-preview.html

Blog Sepi Komentar? Ini Solusinya!

2013-12-05T22:50:00.001+07:00

Blog Sepi Komentar? Ini Solusinya! - Sebenarnya pembahasan materi ini sudah umum dan semestinya sudah banyak yang memahaminya dari segi teori, tapi disini saya akan merangkum kembali sebagai pembelajaran tahap berikutnya (secara mendalam).

Banyaknya komentar mungkin sudah menjadi prioritas dalam suatu blog, dalam artian jika suatu blog memiliki komentar ramai pada setiap postingan, tentu secara otodidak blog tersebut memiliki visitor/pengunjung yang tinggi. Tapi, belum tentu juga blog sepi komentar berarti dikunjungi visitor rendah, melainkan sang visitor mungkin malas berkomentar walau blog tersebut memiliki artikel yang menarik. Lalu bagaimana agar visitor mau berkomentar diblog kita? Ini ulasannya:

Menghilangkan kode Chapta

Seringkah Anda menemukan blog yang jika kita ingin berkomentar muncul kode chapta setelah dipublish? Lalu bagaimana perasaan Anda? Tentu akan terasa tidak nyaman, ini poin pertama.

Hindari Komentar yang Menggunakan Sistem Moderasi

Poin yang kedua ini memang cukup wajar, karena tentu visitor akan merasa jengkel bila saat dia publish komentar, malah harus menunggu moderasi/persetujuan dari admin blog tersebut.

Selalu Balas jika Visitor Berkomentar

Ini poin yang mutlak dan harus dijalani oleh setiap admin blog, karena apa? Karena dengan kita selalu memberi balasan/tanggapan kepada visitor tentu mereka akan senang dan merasa dihargai.

Gunakan Ucapan Terima kasih bila Visitor telah berkomentar

Poin ini memang tidak bergantungan dengan masalah blog sepi komentar, namun dengan teks ucapan terima kasih ini tentu akan membuat visitor merasa senang karena merasa dihargai, dan tidak segan-segan untuk kembali ingin berkomentar. Baca : Membuat Kotak Pesan Dibawah Editor Komentar.

Saya rasa 4 poin diatas sudah cukup untuk membuat blog kita ramai komentar. Tapi walau 4 poin diatas telah diterapkan dengan benar, kita tetap harus menjaga keseimbangan arus visitor.

Semoga bermanfaat...