Tampilkan postingan dengan label Trik. Tampilkan semua postingan
Tampilkan postingan dengan label Trik. Tampilkan semua postingan

Membatasi jumlah posting di halamam label


Seringkali terkadang jumlah posting yang muncul di halaman search label blogger melebihi jumlah yang sudah kita terapkan di pengaturan dasar, ketik kita telah mengatur jumlah posting yang muncul di halaman beranda blogger dengan jumlah maksimal misalkan sepuluh posting maka poating yang akan muncul di halaman label akan tetap berada di jumlah default.

untuk mengatasi hal tersebut kita bisa menggunakan trik yang cukup sederhana untuk di terapkan bagi sobat blogger yang sudah paham dan untuk sobat yang belum tahu jadi ikuti saja sob triknya...

Halaman label akan muncul ketika kita membuka link label yang ada di blogger, bisa sobat lihat di blog masing masing, umumnya link label ini terdapat di menu nav atau menu drop down, label dan menu breadcrum. cara yang harus kita lakukan adalah:

Buka editor template anda, lalu cari kode dan Temukan kode apa saja yang tampak kurang lebih seperti ini (kususkan pencarian pada tag yang memiliki atribut expr:href, beberapa atribut lain mungkin juga ditemukan di dalam tag yang sama misalnya expr:dir tips tekan Ctrl + F untuk pencarian cepat:

<a expr:href='data:label.url'>

Ubah atribut di ats yang di awali expr:href menjadi seperti ini:

<a expr:href='data:label.url + &quot;?max-results=5&quot;'>

nilai max-results=5 adalah jumlah posting yang akan di tampilkan dsi halaman label ketika di buka, silahkan anda ubah sesuai keingan.

langkah berikutnya, tambah atribut di bawah ini di url yang ada pada menu drop dwon atau nav blog

?max-results=5

sehingga menjadi seperti berikut:

<a href='http://defandaky.blogspot.com/search/label/HTML?max-results=5'>HTML</a>

tinggal anda lihat dan klik sana sini untuk mencoba hasilnya...

Jangan lupa untuk mengubat semua atribut di widget label dan menu breadcrum yang ada di template, cara cari atribut sampai semua telah terlihat anda tambahkan kode + "?max-results=5"

semoga membantu dan berguna...

Pencarian dengan tombol bersihkan


Salah satu yang membuat blog kita menjadi user friendly adalah dengan adanya kotak pencarian, Kotak pencarian ini sangat penting untuk memudahkan pengunjung menjelajahi blog Anda atau mencari artikel lainnya di blog Anda.

Fungsi kotak pencarian untuk saya sendiri adalah untuk mempermudah mencari posting yang akan saya tambahkan sebagai link internal ketika akan menerbitkan sebuah posting baru.

Pada kali ini saya akan share sebuah kotak pencarian dengan tambahan fitur tombol pembersih text input, kotak pencarian ini sederhana hanya ada sedikit tambahan jQuery.

CSS

#search-form {width:200px;padding:4px;background:#242424;}
.text-input-wrapper {
border:1px solid #282828;
padding:0px;
display:inline-block;
width:150px;
}
.text-input-wrapper input {
border:none;
background:#fff;
outline:none;
padding:0;
margin:0;
font:inherit;
width:150px;
}
.text-input-wrapper span {
cursor:pointer;
color:#369;
font-weight:bold;
visibility:hidden;
}
.bersih{ background:#fff;margin-left:-15px}
.search-btn{cursor:pointer;width:40px;height:22px;background:#444;color:#fff;border:1px solid #262626;}
.search-btn:hover{background:#666;}

HTML From

<form id="search-form" action="/search" method="get">
<span class="text-input-wrapper"><input type="text" name="q" autocomplete="off" size="18"/><span class="bersih" title="bersihkan!">&times;</span></span>
<button class='search-btn' type="submit" value="Submit">cari</button>
</form>

jQuery

<script type="text/javascript">
//<![CDATA[
(function() {
var searchForm = document.getElementById('search-form'),
textInput = searchForm.q,
clearBtn = textInput.nextSibling;
textInput.onkeyup = function() {
clearBtn.style.visibility = (this.value.length) ? "visible" : "hidden";
};
clearBtn.onclick = function() {
this.style.visibility = "hidden";
textInput.value = "";
};
})();
//]]></script>


Penambahan fungsi pembatasan hasil pencarian:


jika anda ingin membatasi hasil pencarian sesuai dengan nilai atau jumlah yang ingin anda sesuaikan tambahkan kode berikut

<input name='max-results' type='hidden' value='8'/>

Perhatikan pada nilai value='8' ini bisa anda rubah sesuai kebutuhan.

Cara membuat judul header untuk tag pre


Selamat malam sobat blogger kali ini saya mau berbagi tentang cara dan trik membuat judul pada tag pre demo lihat blog ini, biar blognya tambah keren dan terlihat bagus. untuk demo dan hasilnya silahkan lihat di blog ini. cara dan langkahnya cukup mudah silahkan saja ikuti trik di bawah ini.

pertama silahkan buka editor template blogger sobat dan cari kode </style> atau jika sobat masih menggunakan struktur template defaul blogger cari kode ]]></b:skin> setelah ditemukan silahkan copy dan letakkan kode css di bawah ini di atas kode tadi:

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:#006666}
pre[data-codetype=&quot;HTML&quot;]:before{background-color:#ffcc66}
pre[data-codetype=&quot;JavaScript&quot;]:before{background-color:#ff6c60}
pre[data-codetype=&quot;JQuery&quot;]:before{background-color:#99c262}

untuk menggunakan atau memanggilnya di dalam posting, buat di pos editor kode berikut ini

<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

Silahkan hapus tulisan untuk css, html, js dan jquery yang ada di kode. jika anda ingin menambahkan lebih banyak judul untuk kode tag pre lakukan langkah seperti di atas dan jika setelah langkah semua diatas sudah sobat lakukan atur kembali css

margin:-11px -13px 10px -54px;

kode diatas menyesuaikan letak judul tag pre lebih ke kiri atau kanan.

semoga berhasil...

Menandai komentar admin dengan css


Buat sahabta blogger yang masih bertanya tanya tentang cara membuat tanda pada komentar admin untuk mempermudah pengunjung mencari mana komentar admin kali ini saya beri trik dan caranya.
blogger tidak memberikan ijin secara penuh untuk melakukan modifikasi penuh komentar admin, lalu bagaimana jika kita ingin membuat tampilan komentar yang berbeda pada blok komentar administrator secara keseluruhan? Dulu kita bisa menggunakan tag kondisional, tapi sekarang tidak lagi.
jadi untuk lebih mudahnya kita akan menggunakan dan memanfaatkan css tanpa javascript...


oke langsung saja simak trik di bwah ini:

Pertama buka editor template blogger

cari kode tag berikut ini dalam template sobat...

<b:includable id='comments' var='post'>

lalu temukan kode di bawah ini dalam area tag komentar tersebut

<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow' target='_blank'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>

setelah anda temukan, letakkan kode berikut ini di bawah kode di atas

<span class='comment_author_flag'>Admin</span>

Kemudian, tambahkan kode ini di atas ]]></b:skin> atau </style>:

.comment_admin .comment_author_flag {display:inline;background:#bbb;font-size:13px;font-weight:normal;padding:2px 6px;margin-left:8px;color:#fff;border-radius:4px;text-transform:uppercase;letter-spacing:.1em}

untuk mengubah background komentar milik admin tambahkan kode css berikut ini di atas   ]]></b:skin> atau </style>:

div.comment_inner.comment_admin {background:#394549;}

jika dalam template sobat sudah ada, ganti saja warnanya dengan tampilan warna yang anda suka dengan merubah nilai pada {background:#394549;}

sekarang tinggal lihat hasilnya...

demikian saja semoga berguna dan bermanfaat sob...

Membuat ucapan terimakasih di bawah komentar


Pagi sobat blogger lagi liburan buat posting hiasan untuk blogger, kali ini saya mau share cara dan trik untuk membuat pesan ucapan terimakasih di bawah kotak komentar.
 

Triknya cukup mudah tinggal menambahkan css dan sedikit kode html di template sobat, langsung aja berikut ini caranya

Buka editor template blogger anda sperti biasanya, dan tekan Ctrl + F untuk menemukan kode

<b:includable id='threaded-comment-form' var='post'>

setelah anda temukan gulung kebawah dan cari kedi di bawah ini:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src'/>
</b:if>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>

ada dua kode serupa seperti diatas, tapi yang membedakan adalah akhiran kode name='comment-editor' style='display: none'/> jadi lewati kode ini, ini adalah kode untuk tampilan form komentar mobile.

lalu letakkan kode berikut setelah kode di atas

<div class='db-comment-thanks'>Terima kasih telah berkomentar</div>

kemudian kita beri style kode di atas dengan css berikut, letakkan di antara css template blog anda

.db-comment-thanks {font-family:Arial, sans-serif;font-size:12px;right:27px;margin-top:-73px;padding:6px 12px;background:#f8f8f8;color:#999;border:1px solid #c9cacb;border-radius:3px;position:absolute;}

jangan lupa untuk menyesuaikan letak ucapan terimakasih ini lebih kekiri atau kanan dan atas bawahnya demgan merubah nialai pada css right:27px; margin-top:-73px;.

semogas berhasil dan membantu...

Menerapakan jquery lightbox evolution


Salam sobat blogger membuat postingan untuk share kali ini buat sobat yang masih bingung tentang jquery lightbox evolution. jquery lightbox ini saya gunakan di template ini pada konversi kode dan kontak bisa sobat lihat seperti apa itu jquery lightbox.

untuk sobat yang tertarik dan ingin menerapkan ini untuk blognya saya akan memberikan trik dan caranya memasang trik ini, silahkan disimak sampai paham...

pertama untuk memasang jquery lightbox silahkan letakkan kode berikut ini di atas kode </head> pada template sobat

<link href='https://googledrive.com/host/0B05MjHQkbOjhSXduOHNBdmFUTWc' rel='stylesheet' type='text/css'/>
<script src='https://googledrive.com/host/0B05MjHQkbOjhZWhBM2JHRGczX2s' type='text/javascript'/>

jika di dalam template sobat sudah terpasang jquery library versi lama silahkan ganti dengan versi terbaru <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"> agar jquery lightbox nanti bisa berfungsi dan berjalan di template.

setelah selesai dengan semua langkah di atas sekarang kita akan membuat file htmnya untuk demo, contoh lihat di bawah ini

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>contohku lo ini</title>
<style type="text/css">
/* tulis css ente disini gan */
</style>
</head>
<body>
/* html contoh aja bro tanpa div elemen */
<h4>Berhasil berhasil berhasil dora dora dora</h4>
<h5>gimana coi ganteng kan</h4>
</body>
</html>

setelah selesai kita unggah lalu share untuk public seperti langkah biasanya yang anda lakukan saat menyimpan file di google drive maka simpan terlebih dahulu linknya contohnya seperti ni https://googledrive.com/host/0B05MjHQkbOjhbVVpWUhzNHpSS0k

sekarang saya akan membuat sebuah tombol dan sedikit css untuk demo dan contoh trik ini, silahkan di lihat

untuk css tombolnya saya buat sebagai berikut

.tombol{float:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both;}
.tombol ul {margin:0;padding:0}
.tombol li{display:inline;margin:0;padding:0}
.db-tombol-demo {border-radius:2px;padding: 8px 10px !important; background: #000; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s;letter-spacing:1px; }
.db-tombol-demo:hover { background: #FF8C00; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }

lalu untuk html tombolnya seperti berikut

<div style="text-align: center;">
<ul class="tombol">
<li><a class="db-tombol-demo" href="#">Demo lihat disini coi...</a></li>
</ul>
</div>
<div class="clear"></div>

nah sekarang tiba di bagian meletakkan pemanggilan jquery lightbox tadi, maka yang harus kita tambahkan adalah class='lightbox' jadi hasilnya akan seperti ini

<li><a class="db-tombol-demo lightbox" href="#">Demo lihat disini coi...</a></li>

cara menambahkan file html dalam trik ini adalah gunakan langkan sebagai berikut yaitu memanggile file html kita tadi menggunakan iframe

<a data-options='{&quot;width&quot;:600, &quot;height&quot;:450, &quot;iframe&quot;: true}' href='link html yang telah di unggah di host'></a>

silahkan ubah ukuran nilai pada lebar width&quot;:600, dan tinggi height&quot;:450, sesuai keinginan atau kebutuhan

jadi untuk hasil akhir jika semua langkah di atas di satukan maka demikianlah hasil kodenya

<div style="text-align: center;">
<ul class="tombol">
<li><a class="db-tombol-demo lightbox" data-options='{&quot;width&quot;:600, &quot;height&quot;:450, &quot;iframe&quot;: true}' href='link html yang telah di unggah di host'>Demo lihat disini coi...</a></li>
</ul>
</div>
<div class="clear"></div>

untuk penerapan pada gambarvideofile swf tau banner boleh lihat kode di bwah ini

Penggunaan untuk video

<a class="lightbox" href="http://www.youtube.com/watch?v=e1c-wAT0b6g">YouTube</a>

Banner atau SWF

<a class="lightbox" href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf">Flash</a>

Penggunaan pada gambar

<a class="lightbox" href="url-gambar-besar-ente-gan"><img src="url-gambar-ente-kecil-gan" alt=""/></a>

untuk penerapan lainnya coba saja di pelajari sendiri...

demikian saja sob, selamat mencoba dan berekperimen sesuai kesenangan ya....

widget amoung tanpa javascript


Memasang widget amoung memang bukan hal yang rahasia bagi blogger, widget among berguna sebagai counter banyak user yang sedang mengunjungi laman di blog kita tapi mungkin penggunaan javascript dari widget ini menambah beratnya dan waktu memuat laman kita dalam blog apalagi blog sobat yang sdah memasang banyak javascript.

untuk itu kali ini saya akan mengeshare cara memasang widget amoung tanpa menggunakan javascript itung itung sedikit mengurangi beban load atau muat pada blog sobat blogger sekalain.

langsung saja kita bahas triknya, silahkan ikuti langkah di bawah ini:

Buat sobat blogger yang belum memiliki widget amoung silahkan daftar di wibsitenya secara gratis di whos.amung.us
Setelah itu copy javascriptnya lalau ambil id yang ada dalam javascript tersebut, lihat pada gambar berikut


gunakan kode di bawah ini sesuai selera anda dan letakkan di widget sobat

online
kodenya

<a href="http://whos.amung.us/stats/kode-anda"><img src="http://whos.amung.us/widget/
kode-anda" /></a>

online
kodenya

<a href="http://whos.amung.us/stats/kode-anda"><img src="http://whos.amung.us/cwidget/kode-anda/ff0000ffffff/" /></a>

online
kodenya

<a href="http://whos.af/mung.us/stats/kode-anda"><img src="http://whos.amung.us/cwidget/kode-anda/ffc20e000000/" /></a>

online
kodenya

<a href="http://whos.af/mung.us/stats/kode-anda"><img src="http://whos.amung.us/swidget/kode-anda" /></a>

agar valid dalam validator html5, berikan gambar dengan atribut alternatif dengan alt seperti berikut ini:

<a href="http://whos.af/mung.us/stats/kode-anda"><img alt='online' src="http://whos.amung.us/swidget/kode-anda" /></a>

simpan dan lihat hasilnya...

demikian saja share saya kali ini, tentang memasang widget amoung tanpa javascript semoga berguna.

Highlighter Language Autodetection


Syntax Highlighter Language Autodetection ini saya dapatkan dari Software Maniacs dan saya terapkan di blog ini hanya saja tampilannya masih menggunakan Syntax Highlighter lama. seperti biasa anda mungkin sudah tau kegunaannya untuk di terapkan di blog, jadi tidak usah di jelaskan tinggal sekarang langsung saja ke cara bagaimana memasang Syntax Highlighter Language Autodetection ini di blog anda.

jika sebelumnya anda sudah pernah memasang Syntax Highlighter sebaiknya css dan jsnya di pindahkan dulu agar tidak ada masalah nantinya. langsung saja

Struktur penggunaannya agar berbeda dari Syntax Highlighter yang pernah anda gunakan setiap bahasa memiliki kelas berbeda. coba lihat di bawah ini

    Java Script  ⇒ data-codetype="JavaScript" , code class="Javascript"
    HTML ⇒ data-codetype="HTML" , code class="HTML"
    JQuery ⇒ data-codetype="JQuery" , code class="JQuery"
    XML ⇒ data-codetype="XML" , code class="XML"
    CSS  ⇒ data-codetype="CSS" , code class="CSS"

Cara pemasangan Syntax Highlighter Language Autodetection

silahkan masuk ke editor Template kemudian pilih Edit HTML, copy css berikut

pre,i[rel="pre"]{
display:block;
padding:5px .5em 5px 1em;
font:normal normal 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
background-color:#e6e9f1;
position:relative;
overflow:auto;
word-wrap:normal;
white-space:pre
}
pre:hover,i[rel="pre"]:hover {
background-color: #DDE0E7
}
pre code{
display:block;
color:#111;font:normal normal 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
letter-spacing:0;
white-space:pre
}
pre[rel="HTML"],pre[data-codetype="HTML"]{
border-left-color:#0B7E88
}
pre[rel="CSS"],pre[data-codetype="CSS"]{
border-left-color:#5DA028
}
pre[rel="JavaScript"],pre[data-codetype="JavaScript"]{
border-left-color:#40627E
}
pre[rel="JQuery"],pre[data-codetype="JQuery"]{
border-left-color:#40627E
}
pre[rel="JQuery UI"],pre[data-codetype="JQuery UI"]{
border-left-color:#40627E
}
pre[rel="XML"],pre[data-codetype="XML"]{
border-left-color:#C44032
}
pre[rel*="+"],pre[data-codetype*="+"]{
border-left-color:#0B7E88
}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .lisp .string,pre .javadoc{
color:#00BB4B;font-style:italic
}
pre .keyword,pre .css .rule .keyword,pre pre .winutils,pre .javascript .title,pre .method,pre .addition,pre .css .tag,pre .lisp .title{
color:#859900
}
pre .number,pre .command,pre .string,pre .tag .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{
color:#A60A0A
}
pre .title,pre .localvars,pre .function .title,pre .chunk,pre .decorator,pre .builtin,pre .built_in,pre .lisp .title,pre .identifier,pre .title .keymethods,pre .id{
color:#103197
}
pre .tag .title,pre .rules .property,pre .django .tag .keyword{
font-weight:bold
}
pre .attribute,pre .variable,pre .instancevar,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .label{
color:#0499D3
}
pre .preprocessor,pre .pi,pre .shebang,pre .symbol,pre .diff .change,pre .special,pre .keymethods,pre .attr_selector,pre .important,pre .subst,pre .cdata{
color:#cb4b16
}
pre .deletion{
color:#dc322f
}
pre .tex .formula{
background:#073642
}
pre.numbered{
border-left-width:2px;
padding-left:1em
}
pre .line-number,pre.numbered code{
display:block;
line-height:16px
}
pre .line-number{
float:left;
margin:0 1em 0 -1em;
color:#586E75;
border-right:2px solid #9B9DA1;
text-align:right;
min-width:35px
}
pre .line-number span{
display:block;
position:relative;
padding:0 .5em 0 1em
}
pre .line-number span:nth-child(even){
background-color:#FAFAFA
}
pre .line-number span em{
position:absolute;
bottom:-1px;
left:100%;
background-color:red;
padding:0 2px 1px 2px;
border:1px solid black;
font-style:normal;
color:black;
display:none
}
pre .line-number span:hover em{
display:block
}
pre .line-number span:target a{
display:block;
color:white;
position:relative;
background-color:#268bd2;
margin:0 -.5em 0 -1em;
padding:0 .5em 0 0
}
pre.numbered code span{
line-height:12px
}
pre[data-codetype="HTML"] .line-number span:target a{
background-color:#4584BE
}
pre[data-codetype="CSS"] .line-number span:target a{
background-color:#5DA028
}
pre[data-codetype="JavaScript"] .line-number span:target a{
background-color:#bbbbbb
}
pre[data-codetype="JQuery"] .line-number span:target a{
background-color:#7073CF
}
pre[data-codetype="JQuery UI"] .line-number span:target a{
background-color:#E36B23
}
pre[data-codetype="XML"] .line-number span:target a{
background-color:#C44032
}
pre[data-codetype*="+"] .line-number span:target a{
background-color:#0B7E88
}
pre[rel],pre[data-codetype]:before {
content: attr(data-codetype);
display: block;
position: static;
top: 0;
right: 0;
left: 0;
background-color: #666;
padding: 5px 7px;
margin: -5px -6px 0px -12px;
font: bold 11px/20px Arial,Sans-Serif;
color: white;
}
pre[rel="CSS"],pre[data-codetype="CSS"]:before {
background-color: #5DA028;
}
pre[rel="JavaScript"],pre[data-codetype="JavaScript"]:before {
background-color: #40627E;
}
pre[rel="HTML"],pre[data-codetype="HTML"]:before {
background-color: #0B7E88;
}
pre[rel="JQuery"],pre[data-codetype="JQuery"]:before, pre[rel="JavaScript"],pre[data-odetype="JavaScript"]:before {
background-color: #40627E;
}
pre[rel="XML"],pre[data-codetype="XML"]:before {
background-color: #E55E48;
}
pre[data-codetype*="+"]:before {
background-color: #0B7E88;
}
pre .line-number span:target:before{
content:"";
display:block;
height:150px;
margin-top:-150px;
visibility:hidden
}

silahkan letakkan CSS di atas tepat diatas kode </style> atau ]]></b:skin>  pada template anda

kemudian silahkan letakkan kode di bawah ini di atas kode </body>

<script type="text/javascript">//<![CDATA[
/*
Syntax highlighting with language autodetection.
http://softwaremaniacs.org/soft/highlight/
*/

function autoSelect(a){var b,range;if(window.getSelection){b=window.getSelection();range=document.createRange();range.selectNodeContents(a);b.removeAllRanges();b.addRange(range)}else if(document.selection){b=document.selection.createRange().text;range=document.body.createTextRange();range.moveToElementText(a);range.select()}}function makeNumber(){var a=document.getElementsByTagName('pre'),pl=a.length;for(var i=0;i<pl;i++){if(/(^| )numbered( |$)/.test(a[i].className)){a[i].innerHTML='<span class="line-number"></span>'+a[i].innerHTML+'<span class="cl"></span>'}}for(var j=0;j<pl;j++){if(a[j].getElementsByTagName('span')[0]&&a[j].getElementsByTagName('span')[0].className=='line-number'){var b=a[j].getElementsByTagName('code')[0].innerHTML.split(/\n/).length,line=a[j].getElementsByTagName('span')[0];for(var k=0;k<b;k++){line.innerHTML+='<span id="line-'+(j+1)+'-'+(k+1)+'"><em>line-'+(j+1)+'-'+(k+1)+'</em><a href="#line-'+(j+1)+'-'+(k+1)+'">'+(k+1)+'</a></span>'}}}var code=document.getElementsByTagName('code'),clen=code.length;for(var i=0;i<clen;i++){code[i].ondblclick=function(){autoSelect(this);if(document.getElementById('tt-search')){document.getElementById('tt-search').style.display="none"}}}}

var hljs=new function(){function m(p){return p.replace(/&/gm,"&amp;").replace(/</gm,"&lt;")}function c(r,q,p){return RegExp(q,"m"+(r.cI?"i":"")+(p?"g":""))}function j(r){for(var p=0;p<r.childNodes.length;p++){var q=r.childNodes[p];if(q.nodeName=="CODE"||q.nodeName=="SPAN"){return q}if(!(q.nodeType==3&&q.nodeValue.match(/\s+/))){break}}}function g(t,s){var r="";for(var q=0;q<t.childNodes.length;q++){if(t.childNodes[q].nodeType==3){var p=t.childNodes[q].nodeValue;if(s){p=p.replace(/\n/g,"")}r+=p}else{if(t.childNodes[q].nodeName=="BR"){r+="\n"}else{r+=g(t.childNodes[q])}}}if(/MSIE [678]/.test(navigator.userAgent)){r=r.replace(/\r/g,"\n")}return r}function a(s){var q=s.className.split(/\s+/);q=q.concat(s.parentNode.className.split(/\s+/));for(var p=0;p<q.length;p++){var r=q[p].replace(/^language-/,"");if(d[r]||r=="no-highlight"){return r}}}function b(p){var q=[];(function(s,t){for(var r=0;r<s.childNodes.length;r++){if(s.childNodes[r].nodeType==3){t+=s.childNodes[r].nodeValue.length}else{if(s.childNodes[r].nodeName=="BR"){t+=1}else{q.push({event:"start",offset:t,node:s.childNodes[r]});t=arguments.callee(s.childNodes[r],t);q.push({event:"stop",offset:t,node:s.childNodes[r]})}}}return t})(p,0);return q}function l(y,z,x){var r=0;var w="";var t=[];function u(){if(y.length&&z.length){if(y[0].offset!=z[0].offset){return(y[0].offset<z[0].offset)?y:z}else{return z[0].event=="start"?y:z}}else{return y.length?y:z}}function s(C){var D="<"+C.nodeName.toLowerCase();for(var A=0;A<C.attributes.length;A++){var B=C.attributes[A];D+=" "+B.nodeName.toLowerCase();if(B.nodeValue!=undefined&&B.nodeValue!=false&&B.nodeValue!=null){D+='="'+m(B.nodeValue)+'"'}}return D+">"}while(y.length||z.length){var v=u().splice(0,1)[0];w+=m(x.substr(r,v.offset-r));r=v.offset;if(v.event=="start"){w+=s(v.node);t.push(v.node)}else{if(v.event=="stop"){var q=t.length;do{q--;var p=t[q];w+=("</"+p.nodeName.toLowerCase()+">")}while(p!=v.node);t.splice(q,1);while(q<t.length){w+=s(t[q]);q++}}}}w+=x.substr(r);return w}function i(){function p(u,t,v){if(u.compiled){return}if(!v){u.bR=c(t,u.b?u.b:"\\B|\\b");if(!u.e&&!u.eW){u.e="\\B|\\b"}if(u.e){u.eR=c(t,u.e)}}if(u.i){u.iR=c(t,u.i)}if(u.r==undefined){u.r=1}if(u.k){u.lR=c(t,u.l||hljs.IR,true)}for(var s in u.k){if(!u.k.hasOwnProperty(s)){continue}if(u.k[s]instanceof Object){u.kG=u.k}else{u.kG={keyword:u.k}}break}if(!u.c){u.c=[]}u.compiled=true;for(var r=0;r<u.c.length;r++){p(u.c[r],t,false)}if(u.starts){p(u.starts,t,false)}}for(var q in d){if(!d.hasOwnProperty(q)){continue}p(d[q].dM,d[q],true)}}function e(J,D){if(!i.called){i();i.called=true}function z(r,M){for(var L=0;L<M.c.length;L++){if(M.c[L].bR.test(r)){return M.c[L]}}}function w(L,r){if(C[L].e&&C[L].eR.test(r)){return 1}if(C[L].eW){var M=w(L-1,r);return M?M+1:0}return 0}function x(r,L){return L.iR&&L.iR.test(r)}function A(O,N){var M=[];for(var L=0;L<O.c.length;L++){M.push(O.c[L].b)}var r=C.length-1;do{if(C[r].e){M.push(C[r].e)}r--}while(C[r+1].eW);if(O.i){M.push(O.i)}return c(N,"("+M.join("|")+")",true)}function s(M,L){var N=C[C.length-1];if(!N.t){N.t=A(N,H)}N.t.lastIndex=L;var r=N.t.exec(M);if(r){return[M.substr(L,r.index-L),r[0],false]}else{return[M.substr(L),"",true]}}function p(O,r){var L=H.cI?r[0].toLowerCase():r[0];for(var N in O.kG){if(!O.kG.hasOwnProperty(N)){continue}var M=O.kG[N].hasOwnProperty(L);if(M){return[N,M]}}return false}function F(M,O){if(!O.k){return m(M)}var N="";var P=0;O.lR.lastIndex=0;var L=O.lR.exec(M);while(L){N+=m(M.substr(P,L.index-P));var r=p(O,L);if(r){t+=r[1];N+='<span class="'+r[0]+'">'+m(L[0])+"</span>"}else{N+=m(L[0])}P=O.lR.lastIndex;L=O.lR.exec(M)}N+=m(M.substr(P,M.length-P));return N}function K(r,M){if(M.sL&&d[M.sL]){var L=e(M.sL,r);t+=L.keyword_count;return L.value}else{return F(r,M)}}function I(M,r){var L=M.cN?'<span class="'+M.cN+'">':"";if(M.rB){q+=L;M.buffer=""}else{if(M.eB){q+=m(r)+L;M.buffer=""}else{q+=L;M.buffer=r}}C.push(M);B+=M.r}function E(O,L,Q){var R=C[C.length-1];if(Q){q+=K(R.buffer+O,R);return false}var M=z(L,R);if(M){q+=K(R.buffer+O,R);I(M,L);return M.rB}var r=w(C.length-1,L);if(r){var N=R.cN?"</span>":"";if(R.rE){q+=K(R.buffer+O,R)+N}else{if(R.eE){q+=K(R.buffer+O,R)+N+m(L)}else{q+=K(R.buffer+O+L,R)+N}}while(r>1){N=C[C.length-2].cN?"</span>":"";q+=N;r--;C.length--}var P=C[C.length-1];C.length--;C[C.length-1].buffer="";if(P.starts){I(P.starts,"")}return R.rE}if(x(L,R)){throw"Illegal"}}var H=d[J];var C=[H.dM];var B=0;var t=0;var q="";try{var v=0;H.dM.buffer="";do{var y=s(D,v);var u=E(y[0],y[1],y[2]);v+=y[0].length;if(!u){v+=y[1].length}}while(!y[2]);if(C.length>1){throw"Illegal"}return{r:B,keyword_count:t,value:q}}catch(G){if(G=="Illegal"){return{r:0,keyword_count:0,value:m(D)}}else{throw G}}}function f(t){var r={keyword_count:0,r:0,value:m(t)};var q=r;for(var p in d){if(!d.hasOwnProperty(p)){continue}var s=e(p,t);s.language=p;if(s.keyword_count+s.r>q.keyword_count+q.r){q=s}if(s.keyword_count+s.r>r.keyword_count+r.r){q=r;r=s}}if(q.language){r.second_best=q}return r}function h(r,q,p){if(q){r=r.replace(/^((<[^>]+>|\t)+)/gm,function(t,w,v,u){return w.replace(/\t/g,q)})}if(p){r=r.replace(/\n/g,"<br>")}return r}function o(u,x,q){var y=g(u,q);var s=a(u);if(s=="no-highlight"){return}if(s){var w=e(s,y)}else{var w=f(y);s=w.language}var p=b(u);if(p.length){var r=document.createElement("pre");r.innerHTML=w.value;w.value=l(p,b(r),y)}w.value=h(w.value,x,q);var t=u.className;if(!t.match("(\\s|^)(language-)?"+s+"(\\s|$)")){t=t?(t+" "+s):s}if(/MSIE [678]/.test(navigator.userAgent)&&u.tagName=="CODE"&&u.parentNode.tagName=="PRE"){var r=u.parentNode;var v=document.createElement("div");v.innerHTML="<pre><code>"+w.value+"</code></pre>";u=v.firstChild.firstChild;v.firstChild.cN=r.cN;r.parentNode.replaceChild(v.firstChild,r)}else{u.innerHTML=w.value}u.className=t;u.result={language:s,kw:w.keyword_count,re:w.r};if(w.second_best){u.second_best={language:w.second_best.language,kw:w.second_best.keyword_count,re:w.second_best.r}}}function k(){if(k.called){return}k.called=true;var r=document.getElementsByTagName("pre");for(var p=0;p<r.length;p++){var q=j(r[p]);if(q){o(q,hljs.tabReplace)}}makeNumber()}function n(){if(window.addEventListener){window.addEventListener("DOMContentLoaded",k,false);window.addEventListener("load",k,false)}else{if(window.attachEvent){window.attachEvent("onload",k)}else{window.onload=k}}}var d={};this.LANGUAGES=d;this.highlight=e;this.highlightAuto=f;this.fixMarkup=h;this.highlightBlock=o;this.initHighlighting=k;this.initHighlightingOnLoad=n;this.IR="[a-zA-Z][a-zA-Z0-9_]*";this.UIR="[a-zA-Z_][a-zA-Z0-9_]*";this.NR="\\b\\d+(\\.\\d+)?";this.CNR="\\b(0x[A-Za-z0-9]+|\\d+(\\.\\d+)?)";this.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|\\.|-|-=|/|/=|:|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~";this.BE={b:"\\\\.",r:0};this.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[this.BE],r:0};this.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[this.BE],r:0};this.CLCM={cN:"comment",b:"//",e:"$"};this.CBLCLM={cN:"comment",b:"/\\*",e:"\\*/"};this.HCM={cN:"comment",b:"#",e:"$"};this.NM={cN:"number",b:this.NR,r:0};this.CNM={cN:"number",b:this.CNR,r:0};this.inherit=function(p,s){var r={};for(var q in p){r[q]=p[q]}if(s){for(var q in s){r[q]=s[q]}}return r}}();hljs.LANGUAGES.javascript={dM:{k:{keyword:{"in":1,"if":1,"for":1,"while":1,"finally":1,"var":1,"new":1,"function":1,"do":1,"return":1,"void":1,"else":1,"break":1,"catch":1,"instanceof":1,"with":1,"throw":1,"case":1,"default":1,"try":1,"this":1,"switch":1,"continue":1,"typeof":1,"delete":1},literal:{"true":1,"false":1,"null":1}},c:[hljs.ASM,hljs.QSM,hljs.CLCM,hljs.CBLCLM,hljs.CNM,{b:"("+hljs.RSR+"|case|return|throw)\\s*",k:{"return":1,"throw":1,"case":1},c:[hljs.CLCM,hljs.CBLCLM,{cN:"regexp",b:"/",e:"/[gim]*",c:[{b:"\\\\/"}]}],r:0},{cN:"function",b:"\\bfunction\\b",e:"{",k:{"function":1},c:[{cN:"title",b:"[A-Za-z$_][0-9A-Za-z$_]*"},{cN:"params",b:"\\(",e:"\\)",c:[hljs.ASM,hljs.QSM,hljs.CLCM,hljs.CBLCLM]}]}]}};hljs.LANGUAGES.css=function(){var a={cN:"function",b:hljs.IR+"\\(",e:"\\)",c:[{eW:true,eE:true,c:[hljs.NM,hljs.ASM,hljs.QSM]}]};return{cI:true,dM:{i:"[=/|']",c:[hljs.CBLCLM,{cN:"id",b:"\\#[A-Za-z0-9_-]+"},{cN:"class",b:"\\.[A-Za-z0-9_-]+",r:0},{cN:"attr_selector",b:"\\[",e:"\\]",i:"$"},{cN:"pseudo",b:":(:)?[a-zA-Z0-9\\_\\-\\+\\(\\)\\\"\\']+"},{cN:"at_rule",b:"@(font-face|page)",l:"[a-z-]+",k:{"font-face":1,page:1}},{cN:"at_rule",b:"@",e:"[{;]",eE:true,k:{"import":1,page:1,media:1,charset:1},c:[a,hljs.ASM,hljs.QSM,hljs.NM]},{cN:"tag",b:hljs.IR,r:0},{cN:"rules",b:"{",e:"}",i:"[^\\s]",r:0,c:[hljs.CBLCLM,{cN:"rule",b:"[^\\s]",rB:true,e:";",eW:true,c:[{cN:"attribute",b:"[A-Z\\_\\.\\-]+",e:":",eE:true,i:"[^\\s]",starts:{cN:"value",eW:true,eE:true,c:[a,hljs.NM,hljs.QSM,hljs.ASM,hljs.CBLCLM,{cN:"hexcolor",b:"\\#[0-9A-F]+"},{cN:"important",b:"!important"}]}}]}]}]}}}();hljs.LANGUAGES.xml=function(){var b="[A-Za-z0-9\\._:-]+";var a={eW:true,c:[{cN:"attribute",b:b,r:0},{b:'="',rB:true,e:'"',c:[{cN:"value",b:'"',eW:true}]},{b:"='",rB:true,e:"'",c:[{cN:"value",b:"'",eW:true}]},{b:"=",c:[{cN:"value",b:"[^\\s/>]+"}]}]};return{cI:true,dM:{c:[{cN:"pi",b:"<\\?",e:"\\?>",r:10},{cN:"doctype",b:"<!DOCTYPE",e:">",r:10,c:[{b:"\\[",e:"\\]"}]},{cN:"comment",b:"<!--",e:"-->",r:10},{cN:"cdata",b:"<\\!\\[CDATA\\[",e:"\\]\\]>",r:10},{cN:"tag",b:"<style",e:">",k:{title:{style:1}},c:[a],starts:{cN:"css",e:"</style>",rE:true,sL:"css"}},{cN:"tag",b:"<script",e:">",k:{title:{script:1}},c:[a],starts:{cN:"javascript",e:"<\/script>",rE:true,sL:"javascript"}},{cN:"vbscript",b:"<%",e:"%>",sL:"vbscript"},{cN:"tag",b:"</?",e:"/?>",c:[{cN:"title",b:"[^ />]+"},a]}]}}}();hljs.LANGUAGES.java={dM:{k:{"false":1,"synchronized":1,"int":1,"abstract":1,"float":1,"private":1,"char":1,"interface":1,"boolean":1,"static":1,"null":1,"if":1,"const":1,"for":1,"true":1,"while":1,"long":1,"throw":1,strictfp:1,"finally":1,"protected":1,"extends":1,"import":1,"native":1,"final":1,"implements":1,"return":1,"void":1,"enum":1,"else":1,"break":1,"transient":1,"new":1,"catch":1,"instanceof":1,"byte":1,"super":1,"class":1,"volatile":1,"case":1,assert:1,"short":1,"package":1,"default":1,"double":1,"public":1,"try":1,"this":1,"switch":1,"continue":1,"throws":1},c:[{cN:"javadoc",b:"/\\*\\*",e:"\\*/",c:[{cN:"javadoctag",b:"@[A-Za-z]+"}],r:10},hljs.CLCM,hljs.CBLCLM,hljs.ASM,hljs.QSM,{cN:"class",b:"(class |interface )",e:"{",k:{"class":1,"interface":1},i:":",c:[{b:"(implements|extends)",k:{"extends":1,"implements":1},r:10},{cN:"title",b:hljs.UIR}]},hljs.CNM,{cN:"annotation",b:"@[A-Za-z]+"}]}};hljs.LANGUAGES.php={cI:true,dM:{k:{and:1,include_once:1,list:1,"abstract":1,global:1,"private":1,echo:1,"interface":1,as:1,"static":1,endswitch:1,array:1,"null":1,"if":1,endwhile:1,or:1,"const":1,"for":1,endforeach:1,self:1,"var":1,"while":1,isset:1,"public":1,"protected":1,exit:1,foreach:1,"throw":1,elseif:1,"extends":1,include:1,__FILE__:1,empty:1,require_once:1,"function":1,"do":1,xor:1,"return":1,"implements":1,parent:1,clone:1,use:1,__CLASS__:1,__LINE__:1,"else":1,"break":1,print:1,"eval":1,"new":1,"catch":1,__METHOD__:1,"class":1,"case":1,exception:1,php_user_filter:1,"default":1,die:1,require:1,__FUNCTION__:1,enddeclare:1,"final":1,"try":1,"this":1,"switch":1,"continue":1,endfor:1,endif:1,declare:1,unset:1,"true":1,"false":1,namespace:1},c:[hljs.CLCM,hljs.HCM,{cN:"comment",b:"/\\*",e:"\\*/",c:[{cN:"phpdoc",b:"\\s@[A-Za-z]+",r:10}]},hljs.CNM,hljs.inherit(hljs.ASM,{i:null}),hljs.inherit(hljs.QSM,{i:null}),{cN:"variable",b:"\\$[a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*"},{cN:"preprocessor",b:"<\\?php",r:10},{cN:"preprocessor",b:"\\?>"}]}};

hljs.tabReplace = ' ';
hljs.initHighlightingOnLoad();
//]]></script>

atau untuk lebih praktisnya letakkan kode ini di atas kode </head>

<script type="text/javascript" src='https://googledrive.com/host/0B-GXzRKoPbNnMW01UElwUUNCR2s'/> 

simpan apa yang tadi sudah di kerjakan.

Untuk menggunakannya, silahkan pastekan kode di bawah ini pada tab HTML di postingan ketika membuat postingan.

<pre class="numbered" data-codetype="JavaScript"><code class="Javascript"> ... kode Javascript ... </code></pre>
<pre class="numbered" data-codetype="CSS"><code class="CSS"> ... kode CSS ... </code></pre>
<pre class="numbered" data-codetype="HTML"><code class="HTML"> ... kode HTML ... </code></pre>
<pre class="numbered" data-codetype="XML"><code class="XML"> ... kode XML ... </code></pre>
<pre class="numbered" data-codetype="JQuery Ui"><code class="JQuery Ui"> ... kode JQuery Ui ... </code></pre>
<pre class="numbered" data-codetype="JQuery"><code class="JQuery"> ... kode JQuery ... </code></pre>

sekarang tinggal lihat hasilnya, anda sudah memiliki Syntax Highlighter Language Autodetection di blog anda, sekian saja semoga bermanfaat...

Membatasi jumlah pencarian posting


Kalau sebelumnya saya membahas tentang cara bagaimana membatasi jumlah posting yang di sajikan dalam pencarian per label, kali ini saya akan membahas cara membatasi jumlah posting yang akan di tampilkan ketika user atau pengunjung menggunakan form pencarian untuk menemukan sebuah artikel atau posting bukan dari kategori label.

Bingung? coba lakukan pencarian di blog ini dan lihat adressbar maka akan terlihat seperti gambar di bawah ini


tentunya jumlah posting yang muncul juga akan sesuai dengan jumlah yang telah di tentukan.

untuk membuatnya langsung saja simak langkah berikut ini.

Pertama seperti biasa login terlebih dahulu ke dasboard blogger anda
Pilih edit HTML template
Temukan kode markup html formulir pencarian anda, seperti berikut ini

<form action='/search' class='form-wrapper-db-sc' method='get'>
<input id='a' name='q' placeholder='Cari disini...' type='text'/>
</form>

jika sudah, sekarang letakkan kode berikut ini yang berguna untuk mengatur berapa jumlah posting yang akan di tampilkan di hasil pencarian

<input name='max-results' type='hidden' value='8'/>

jika langkahnya di lakukan hasilnya akan seperti berikut

<form action='/search' class='form-wrapper-db-sc' method='get'>
<input id='a' name='q' placeholder='Cari disini...' type='text'/>
<input name='max-results' type='hidden' value='8'/>
</form>

setelah itu silahkan simpan semua perubahan yang telah anda lakukan. sebagai hasil akhirnya tes dan coba jalankan agar anda tahu hasil dari pekerjaan yang telah anda lakukan.

Silahkan ubah nilai value sesuai kebuthan anda

demikian saja, semoga berguna dan semoga sukses...

CSS widget label cloud blogger


Memperbagus tampilan widget label blogger dengan css, dengan css ini tampilan widget label akan memiliki warna background berbeda di setiap link label tergantung dari color yang kita terapkan di dalam css.

untuk menerapakannya ikuti langkah di bawah ini:

1. Masuk Dasboard Blogger
2. Pilih Template
3. Kemudain Pilih Edit HTML
4. Salin CSS berikut dan letakkan diatas kode </b:skin> atau </style>:

<!-- css ui label color by db -->
.sidebar .label-size {
position:relative;
text-transform: uppercase;
text-decoration:none;
font-size:11px;
font-family:Oswald, Arial, Sans-Serif;
color:#fff!important;
}

.sidebar .label-size a {
color:#fff!important;
font-weight:300;
padding:8px 10px;
margin:0 6px 6px 0;
float:left;
display:block;
-moz-transition: all 0.4s ;
-o-transition: all 0.4s;
-webkit-transition: all 0.4s ;
-ms-transition: all 0.4s ;
transition: all 0.4s ;
}

.sidebar .label-size-1 a {background:#1abc9c;border-bottom:3px solid #127F69;}
.sidebar .label-size-1 a:hover {background:#16a085;}
.sidebar .label-size-2 a {background:#3498db;border-bottom:3px solid #226693;}
.sidebar .label-size-2 a:hover {background:#2980b9;}
.sidebar .label-size-3 a {background:#2ecc71;border-bottom:3px solid #1F8C4C;}
.sidebar .label-size-3 a:hover {background:#27ae60}
.sidebar .label-size-4 a {background:#9b59b6;border-bottom:3px solid #74398E;}
.sidebar .label-size-4 a:hover {background:#8e44ad}
.sidebar .label-size-5 a {background:#e74c3c;border-bottom:3px solid #922C20;}
.sidebar .label-size-5 a:hover {background:#c0392b}

css di atas hanya untuk blog yang memiliki sedikit label, jika label dalam blog anda lebihg banyak silahkan gunakan css berikut

<!-- css ui label color by db -->
.cloud-label-widget-content {text-align: left;}
.label-size {background: #5498C9;display: block;float: left;margin: 0 3px 3px 0;color: #fff;font-family: Oswald, Arial, Sans-Serif;font-size: 11px;text-transform: uppercase;}
.label-size:nth-child(1) {background: #F53477;}
.label-size:nth-child(2) {background: #89C237;}
.label-size:nth-child(3) {background: #44CCF2;}
.label-size:nth-child(4) {background: #01ACE2;}
.label-size:nth-child(5) {background: #94368E;}
.label-size:nth-child(6) {background: #A51A5D;}
.label-size:nth-child(7) {background: #555;}
.label-size:nth-child(8) {background: #f2a261;}
.label-size:nth-child(9) {background: #00ff80;}
.label-size:nth-child(10) {background: #b8870b;}
.label-size:nth-child(11) {background: #99cc33;}
.label-size:nth-child(12) {background: #ffff00;}
.label-size:nth-child(13) {background: #40dece;}
.label-size:nth-child(14) {background: #ff6347;}
.label-size:nth-child(15) {background: #f0e68d;}
.label-size:nth-child(16) {background: #7fffd2;}
.label-size:nth-child(17) {background: #7a68ed;}
.label-size:nth-child(18) {background: #ff1491;}
.label-size:nth-child(19) {background: #698c23;}
.label-size:nth-child(20) {background: #00ff00;}
.label-size a, .label-size span {
display: inline-block;
color: #fff !important;
padding: 4px 10px;
font-weight: bold;
}
.label-size:hover {
background: #222;
}
.label-count {
white-space: nowrap;
padding-right: 3px;
margin-left: -3px;
background: #333;
color: #fff ;
}
.label-size:hover .label-count, .label-size:focus+.label-count {
background-color: #ff6bb5;
}

5. Jangan lupa untuk menyimpan editan template anda.

pastikan label anda di seting seperti berikut:


sekian saja share saya kali ini, jika anda ingin memiliki banyak warna dan tidak cocok dengan warna di atas bisa langsung anda sesuikan dengan keinginan anda...

jQuery Show Hide Checkboxes


Kali ini saya akan share Show Hide sederhana menggunakan jQuery Checkboxes value, prinsip kerjannya sama saja dengan jQuery show hide hanya saja berbeda di medianya. trik ini juga sebelumnya pernah saya gunakan untuk membuat show hide emoticon, konversi kode dan halaman OOT di komentar blog saya, jika mungkin anda juga berminat menggunakan jQuery ini silahkan saja untuk di simak.

Pembuatan jQuery Checkboxes value.

Pertama silahkan buat css seperti di bawah ini:

// style untuk kotak elemen box
.box{
padding: 20px;
display: none;
margin-top: 20px;
border: 1px solid #000;
}
// css perbedaan warna latar
// warna latar box class red
.red{ background: #ff0000; }
// warna latar box class green
.green{ background: #00ff00; }
// warna latar box class blue
.blue{ background: #0000ff; }

CSS di atas hanya css sederhana yang saya gunakan untuk atau sebagai gambaran saja, jika anda merang ini terlalu biasa anda bisa membuat css dengan selera anda sendiri, misal seperti ini:

// style untuk kotak elemen box
.elemen-box{
padding: 20px;
display: none;
margin-top: 20px;
border: 1px solid #900;
border-radius:3px;
color:#888;
... dst ...
}
// css perbedaan warna latar
// warna latar box class emoticon dan teks
.emoticon { background: #252525;color:#f1f1f1;... dst ... }
// warna latar box class konversi
.konversi { background: #292929;... dst ... }
// warna latar box class oot
.oot { background: #333;... dst ... }

Pastikan pada elemen utama yaitu class box berikan display: none; ini agar elemen box tidak muncul sebelum perintah di jalankan.

Sekarang untuk langkah kedua, kita buat HTML untuk elemen boxnya.

karena CSS yang saya gunakan adalah yang pertama, maka hasilnya adalah sebagai berikut:

// elemen box dengan warna latar merah
<div class="red box">
// isi elemen box merah
Anda memilih <strong>checkbox merah</strong> jadi saya muncul
</div>
// elemen box dengan warna latar hijau
<div class="green box">
// isi elemen box hijau
Anda memilih <strong>checkbox hijau</strong> jadi saya muncul
</div>
// elemen box dengan warna latar biru
<div class="blue box">
// isi elemen box biru
Anda memilih <strong>checkbox biru</strong> jadi saya muncul
</div>

Pada isi elemen box diatas, anda bisa menempatkaan elemen apa saja yang anda inginkan.

Sekarang kita buat input checkboxnya, lihat kode di bawah ini:

<div>
// input checkbox untuk box merah
<label><input type="checkbox" name="colorCheckbox" value="red"/> merah</label>
// input checkbox untuk box hijau
<label><input type="checkbox" name="colorCheckbox" value="green"/> hijau</label>
// input checkbox untuk box biru
<label><input type="checkbox" name="colorCheckbox" value="blue"/> biru</label>
</div>

input checkbox di atas bisa di bungkus dengan elemen lain jika anda ingin, misalkan seperti berikut:

<div id='check-wrapper' class='check-wrapper'>
// input checkbox untuk box merah
<label><input type="checkbox" name="colorCheckbox" value="red"/> merah</label>
// input checkbox untuk box hijau
<label><input type="checkbox" name="colorCheckbox" value="green"/> hijau</label>
// input checkbox untuk box biru
<label><input type="checkbox" name="colorCheckbox" value="blue"/> biru</label>
</div>

Perhatikan pada kode value="..." karena disilah nanti jQuery akan menjalankan perintah. jadi masing masing value harus memiliki nilai yang berbeda seperti value="red", value="green" dan value="blue".

Penggabungan seluruh input checkbox dan elemen box:

<div>
// input checkbox untuk box merah
<label><input type="checkbox" name="colorCheckbox" value="red"/> merah</label>
// input checkbox untuk box hijau
<label><input type="checkbox" name="colorCheckbox" value="green"/> hijau</label>
// input checkbox untuk box biru
<label><input type="checkbox" name="colorCheckbox" value="blue"/> biru</label>
</div>
// elemen box dengan warna latar merah
<div class="red box">
// isi elemen box merah
Anda memilih <strong>checkbox merah</strong> jadi saya muncul
</div>
// elemen box dengan warna latar hijau
<div class="green box">
// isi elemen box hijau
Anda memilih <strong>checkbox hijau</strong> jadi saya muncul
</div>
// elemen box dengan warna latar biru
<div class="blue box">
// isi elemen box biru
Anda memilih <strong>checkbox biru</strong> jadi saya muncul
</div>

Selanjutnya, berikan syntax jQuery untuk menjalankan checkbox.

$(document).ready(function(){
// Jika checkbox terdeteksi sudah dicek dengan klik
$('input[type="checkbox"]').click(function(){
// munculkan elemen manipulasi dengan kelas red
if($(this).attr("value")=="red"){// value dari input check box red
$(".red").toggle();// box red muncul dengan efek toggle
}
// munculkan elemen manipulasi dengan kelas green
if($(this).attr("value")=="green"){// value dari input check box green
$(".green").toggle();// box green muncul dengan efek toggle
}
// munculkan elemen manipulasi dengan kelas blue
if($(this).attr("value")=="blue"){// value dari input check box blue
$(".blue").toggle();// box blue muncul dengan efek toggle
}
});
});

Pada efek .toggle(); anda bisa menggantinya dengan efek lain seperti show, fadein dll.

anda bisa melihat hasilnya di bawah ini:


Penerapan sekilas untuk HTML

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide dengan Checkboxes</title>
<style type="text/css">
.box{
padding: 20px;
display: none;
margin-top: 20px;
border: 1px solid #000;
}
.red{ background: #ff0000; }
.green{ background: #00ff00; }
.blue{ background: #0000ff; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
if($(this).attr("value")=="red"){
$(".red").toggle();
}
if($(this).attr("value")=="green"){
$(".green").toggle();
}
if($(this).attr("value")=="blue"){
$(".blue").toggle();
}
});
});
</script>
</head>
<body>

<div>
<label><input type="checkbox" name="colorCheckbox" value="red"/> merah</label>
<label><input type="checkbox" name="colorCheckbox" value="green"/> hijau</label>
<label><input type="checkbox" name="colorCheckbox" value="blue"/> biru</label>
</div>
<div class="red box">Anda memilih <strong>checkbox merah</strong> jadi saya muncul</div>
<div class="green box">Anda memilih <strong>checkbox hijau</strong> jadi saya muncul</div>
<div class="blue box">Anda memilih <strong>checkbox biru</strong> jadi saya muncul</div>

</body>
</html>

Semoga bermanfaat...   

Sidebar Menu Accordion jQuery


Apa fungsi menu accordion?

Salah satu fungsi dari accordion menu selain memperingkas tampilan widget yang ada di sidebar blog, juga dapat memperbagus blog anda, sama seperti pada fungsi menu tabber atau tab view, hanya saja gaya satau stylenya yang berbeda. jadi blog Anda akan kelihatan lebih ringkas dan rapi. Tutorial ini sudah saya buat sebelumnya, sekarang saya hanya berbagi cara membuat menu accordion ini menggunakan jQuery. Anda bisa menempatkan menu accordion ini pada sidebar blog anda tentunya untuk memperingkas tatanan widget.

jika ingin melihat hasil menu accordion ini bisa di lihat di demo berikut

 
Cara menginstal menu accordion:

Login ke Blogger dengan akun Anda
Masuk ke template, Edit HTML

pastikn template anda sudah terpasang

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"/>

Kemudian masukkan kode berikut css ini dan letakkan di atas kode </style>:

/* menu accordion by dafin */
#db-tab-acor {
width:100%; /* lebar menu */
margin:10px auto;
border:2px solid #ccc;
-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
box-shadow:0px 1px 3px rgba(0,0,0,0.4);
}

#db-tab-acor h2 {
cursor:pointer;
margin:0px 0px;
padding:8px 10px;
background-color:#333;
font:bold 14px coda;
color:#e6e6e6;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
border-top:2px solid #bbb;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY9niN0qGZq-Y9xzDvpaaTY7-R6X5tbKaYBSCc8n9COBG8JEx1q-1bzQ6Cl2HYC315FC_vR-k1ESrRW7wNiVhE9iT8HEJfXmbWEuerYr22Ub0Qi1vCP5feJ4NZlWEE4EHASOcJtTyOfiY/s1600/arrow_right.gif);background-repeat: no-repeat;background-position: right center;
}

#db-tab-acor .tab-view {
background-color:#f1f1f1;
padding:10px;
color:black;
height:120px;/* sesuaikan atau bisa di ubah menjadi auto */
}

#db-tab-acor h2.show {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ07KW9SWjXBU1oFcZSr5lQWaLUXXUhWmGf_NYRd4CjD1kCm-v8RQy0mPJ2seemNH91ZWUw9FQMuOQP-9xZhLFD1ZqIt9Bctt6yaQLCy_rdRaZKz3CmhEa_tTxAgfkBuYYBnKTd48UWxg/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;
background-color:#369;
color:#ccc;
}

Sekarang cari sidebar blog anda, kurang lebih kodenya seperti berikut:

<aside id="sidebar-wrapper">
<b:section class="sidebar" id="sidebar" preferred="yes">
<b:widget id="Label1" locked="false" title="Kategori" type="Label">
</b:widget></b:section>
</aside>

tambahkan kode menunya sehingga nampak seperti berikut

<aside id="sidebar-wrapper">
<!-- start menu -->
<div id="db-tab-acor">
<h2>
MENU 1</h2>
<div class="tab-view">
... tempat widget ...
</div>
<h2>
MENU 2</h2>
<div class="tab-view">
... tempat widget ...
</div>
<h2>
MENU 3</h2>
<div class="tab-view">
... tempat widget ...
</div>
<h2>
MENU 4</h2>
<div class="tab-view">
... tempat widget ...
</div>
</div>
<!-- end menu -->
<b:section class="sidebar" id="sidebar" preferred="yes">
<b:widget id="Label1" locked="false" title="Kategori" type="Label">
</b:widget></b:section>
</aside>

Untuk cara di atas, widget anda tidak ikut masuk dalam menu jadi tidak akan masuk dalam fungsi menu accordion. jika anda ingin widget anda ada dalam menu silahkan buat seperti berikut

<aside id="sidebar-wrapper">
<!-- start menu -->
<div id="db-tab-acor">
<h2>
MENU 1</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar1" preferred="yes">
<b:widget id="Label1" locked="false" title="Kategori" type="Label">
</b:widget></b:section>
</div>
<h2>
MENU 2</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar2" preferred="yes">
<b:widget id="HTML5" locked="false" title="Kopi" type="Label">
</b:widget></b:section>
</div>
<h2>
MENU 3</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar3" preferred="yes">
<b:widget id="PopularPosts1" locked="false" title="Entri Populer" type="PopularPosts">
</b:widget></b:section>
</div>
<h2>
MENU 4</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar4" preferred="yes">
<b:widget id="HTML4" locked="false" title="Donat" type="HTML">
</b:widget></b:section>
</div>
</div>
<!-- end menu -->
</aside>

ingat di atas hanya untuk contoh saja, jadi sesuaikan dengan widget anda sendiri.

Anda bisa menambah jumlah menu accordion ini sesuai kebutuhan dengan membuat kode seperti di bawah ini

<h2>MENU 5</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar" preferred="yes">
<b:widget id="HTML8" locked="false" title="Dodol" type="HTML">
</b:widget>
</b:section>
</div>

tambahkan sampai berapa pun anda mau. untuk contoh sya buatkan saja berikut:

<!-- start menu -->
<div id="db-tab-acor">
<h2>
MENU 1</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar1" preferred="yes">
</b:section></div>
<h2>
MENU 2</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar2" preferred="yes"/>
</div>
<h2>
MENU 3</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar3" preferred="yes"/>
</div>
<h2>
MENU 4</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar4" preferred="yes"/>
</div>
<h2>
MENU 5</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar5" preferred="yes"/>
</div>
<h2>
MENU 6</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar6" preferred="yes"/>
</div>
</div>
<!-- end menu -->

Jangan lupa ubah MENU 1, 2, 3, dst sesuai judul widget anda atau judul content yang ada di menu.

Setelah selesai langkah di atas, tambahkan kode berikut di atas kode


<script type="text/javascript">
//<![CDATA[
$(function() {
$('#db-tab-acor .tab-view').hide();
$('#db-tab-acor h2:first').addClass('show').next().slideDown('slow');
$('#db-tab-acor h2').click(function() {
if($(this).next().is(':hidden')) {
$('#db-tab-acor h2').removeClass('show').next().slideUp('slow');
$(this).toggleClass('show').next().slideDown('slow');
}
});
});
//]]>
</script>

Langkah akhir silahkan simpan template anda dan lihat hasilnya.

ingin lebih menarik bisa silahkan di buka langsung editornya


Sekian saja tentang membuat menu accordion dengan jQuery semoga sukses...

Breadcrumb Microdata valid HTML5


Fungsi dari breadcrumb pada blog adalah untuk mengetahui sedang dihalaman mana sekarang pengunjung berada. Dengan breadcrumb, maka urusan navigasi link bisa lebih mudah. Selain itu, breadcrumb juga sangat baik untuk SEO blog karena memperkaya kata kunci dalam postingan. Hal ini terbukti dari beberapa postingan blog sesepuh seperti, kang ismet, kang asep sule, taufik dan masih banyak lagi yang muncul di halaman awal google, ternyata di pengaruhi juga oleh keberadaan breadcrumb ini.

lalu apa fungsi microdata?

Contoh mudahnya, jika Anda membuat suatu CSS dan ingin menjelaskan kode (syntax) pada bagian tertentu maka yang Anda lakukan adalah menambahkan <!-- komentar --> Prinsip dari Microdata ini pun, sekilas hampir sama dengan penambahan komentar pada suatu CSS, namun bedanya komentar ini ditulis pada format HTML5.

Fungsi Microdata Untuk Blog

Perlu ditegaskan, Microdata bukan untuk Optimasi atau Menaikkan Posisi Artikel atau Blog Anda di SERP, melainkan Microdata ini mempunyai Fungsi untuk Merubah Tampilan Pada Hasil Pencarian, Yang Tentunya Akan Mengundang Orang Untuk Mengklik Situs Anda.

Fungsi Microdata Untuk Search Engine

Penggunaan Microdata pada Blog Anda pun juga memberikan dampak pada Search Engine, yaitu memudahkan penempatan suatu artikel pada direktori mereka (google) tentunya pesan ini disampaikan oleh Google sendiri yang menganjurka kita untuk menggunakan Microdata (ketimbang Microformat atau RDFa).

sekarang langsung kita ke trik dan cara memasang Breadcrumb dengan Microdata valid HTML5

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

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:12px;color:#333;border-bottom:1px dotted #555;}

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

<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;'>
<!-- breadcrumb halaman static -->
<div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Beranda</span></a> &#187; <span itemprop='title'><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb halaman posting -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Beranda</span></a>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
&#187; <a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a>
</b:if>
</b:loop>
&#187; <span itemprop='title'><data:post.title/></span></div>
<b:else/>
<div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Beranda</span></a> &#187; <span itemprop='title'>Tanpa Label</span> &#187; <span itemprop='title'><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb halaman arsip -->
<div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Beranda</span></a> &#187; <span itemprop='title'>Arsip <data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<!-- breadcrumb pencarian label -->
<b:if cond='data:blog.pageName == &quot;&quot;'>
<div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Beranda</span></a> &#187; <span itemprop='title'>Penelusuran Arsip Posting</span></div>
<b:else/>
<div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Beranda</span></a> &#187; <span itemprop='title'><data:blog.pageName/></span></div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Langkah terakhir simpan template dan lihat hasilnya...

Jika tampilan breadcrumb di atas kurang menarik silahkan ubah css sesuka anda, anda juga bisa mengubah &#187; dengan simbol lain agar lebih menarik.

sekian saja semoga berguna untuk anda yang membutuhkan Breadcrumb dengan Microdata valid HTML5, terimakasih :)

Judul posting responsive

Mungkin ada dari sobat sekalian yang mencoba mengatur tampilan posting di homepage agar terlihat rapi saat responsive berjalan, dengan mengakali membuat judul posting sependek mungkin walau pun judul posting tersebut memang sedikit panjang sehingga nantinya judul tidak terlihat bertumpuk dan tidak rapi untuk template yang tidak menerapkan line-height. kali ini saya ingin berbagi bagaimana caranya judul di postingan di homepgae bisa terlihat sama dan rapi ketika responsive berjalan, coba tes di blog ini dengan mengecilkan layar browser anda atau lihat gambar di bawah ini:

untuk mengakali hal seperti di atas, dalam css3 kita bisa menggunakan deklarasi css text overflow, yang saya terapkan di blog ini sehingga judul posting yang terlalu panjang akan terpotong secara otomatis tergantung dari yang kita sesuaikan ketika responsive di jalankan.

untuk menerapkan trik ini bagi anda yang tertarik, silahkan ikuti saja langkah singkat di bawah ini

1. Seperti biasa buka Blogger
2. Pilih Template dan buka Edit HTML
3. Cari css tag judul posting di template anda, biasanya seperti ini:


.post-body h1 {

.... value disini ....

}

jika template sobat sudah di rombak, cari saja hasil rombakan anda :)

4. Tambahkan css berikut ini di dalam css tersebut

width:99%;
white-space:nowrap;
overflow:hidden;
text-overflow: ellipsis;
position:relative;

untuk yang bingung saya ambil contoh di jadi jadi seperti ini:

.post-body h1 {
width:99%;
white-space:nowrap;
overflow:hidden;
text-overflow: ellipsis;
position:relative;

.... value lainnya ....

}

5. Simpan template anad dan lihat hasilnya.

Sedikit keterangan tentang css di atas:

width:99%; digunakan untuk mengatur batas lebar judul posting, sehingga ketika judul posting melewati batas tersebut akan di lakukan pemotongan.
white-space:nowrap; digunakan untuk meneruskan tanpa menyesuaikan batas elemen.
overflow:hidden; overflow adalah untuk menyembunyikan, menampakkan, atau membuat scroll.
text-overflow:ellipsis adalah pemotongan dengan ahiran titik, jika anda hanya ingin di potong tanpa titik silah gunakan text-overflow:clip.

jika anda ingin lebih memahami silahkan mempelajari css text properti dan sekian saja semoga bermanfaat...

Alternatif posting tanpa judul

Penasaran dengan judul posting ini silahkan simak saja, sebenarnya trik ini saya gunakan untuk mengganti sebuah judul pada sebuah posting yang tidak memiliki judul. adakah posting tanpa judul? mungkin terjadi karena lupa ketika membuat posting atau sebagainya.
untuk menerepkan trik ini cukup mudah

1. Silahkan masuk ke Blogger
2. Pilih Template dan Buka Edit HTML
3. Cari kode berikut ini

 <h3 class='post-title'>
<b:if cond='data:post.title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</b:if>
</h3>

ingat, setiap template memiliki tag yang berbeda di judul postingnya bisa h1, h2 atau h4 ganti saja tag h3 dengan tag tersebut jika tidak di temukan.

jika sudah di temukan silahkan ganti dengan kode di bawah ini

<h3 class='post-title'>
<b:if cond='data:post.title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
<b:else/>
[Untitled]
</b:if>
</h3>

4. Simpan hasil editan template anda dan lihat hasilnya.

untuk menguji coba trik di atas silahkan buat sebuah postingan tanpa memberi judul pada posting tersebut.

Sedikit tambahan, [Untitled] bisa anda ganti dengan kata lain yang anda inginkan. semoga berguna...

Memasang meta viewport


Membahas responsive memang agak panjang lebar, dan perlu di pelajari satu persatu. untuk itu kali ini saya akan berbagi tentang kegunaan menggunakan meta tag viewport dalam responsive.
Dalam Responsive Meta Tag Viewport sangat penting karena meta tag ini berguna untuk menentukan tata letak tampilan Mobile. ketika blog kita di akses lewat Browser Desktop Meta Tag ini tidak memiliki fungsi, namun ketika blog kita di akses atau di buka via Mobile Browser barulah si viewport ini bekerja.
Dibawah ini merupakan meta tag viewport yang paling sering digunakan oleh para blogger.

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

Tampilan dari blog yang tidak memiliki atau memasang skala yang perlu ditentukan akan terlihat berantakan jika diakses pada versi mobile, untuk itulah meta ini berguna dan pemecahan masalahnya.
Untuk lebih jelas pada bahasan Meta Tag viewport kita bisa lihat contoh di bawah ini perbedaan menggunakan meta tag viewport dan tidaknya


berikut ini cara sederhana menerapkan meta tag viewport dan media queries.
contoh ini adalah tampilan menggunakan pengodean versi HTML5.

<!DOCTYPE html>
<HTML>
<head>

/* pemasangan meta viewport */
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

<style type='text/css'>
/* CSS Template */
body {

...nilai css page body...

}
/* CSS MEDIA QUERy */
@media screen and (max-width: 1024px){
/* CSS styles */
}
@media screen and (max-width:768px){
/* CSS styles */
}
@media screen and (max-width:600px){
/* CSS styles */
}
@media screen and (max-width:480px){
/* CSS styles */
}
@media screen and (max-width:320px){
/* CSS styles */
}
@media screen and (max-width:240px){
/* CSS styles */
}
</style>
</head>
</body>

...isi blog...

</body>
</HTML>

jika sobat ingin desain template blognya bisa tampil sempurna bisa memasang semua resolusi dalam media queries di contoh di atas, resolusi yang paling baik yang akan di tentukan dalam resolusi responsive Web Desain pada perangkat Mobile adalah pada resolusi 768px.
setiap penerapan media queries akan terlihat jelas jika anda mengecilkan ukuran browser anda ketika halaman sudah di muat untuk melihat apakah sudah sesuai atau belum.

sekian saja share dari saya semoga berguna...