baca in

Kode HTML Warna di Blog

Cara membuat / memasang navigasi breadcrumb di Blogspot

Hallo sobat blogger semuanya, pada artikel kali ini saya akan membahas Cara membuat / memasang navigasi breadcrumb di Blogspot. Navigasi breadcrumb ini wajib dipasang pada blog-blog sobat yang baru karena bisa meningkatkan SEO di blog sobat.

Pengertian navigasi breadcrumb sendiri adalah sebuah penunjuk halaman yang fungsinya untuk membantu memberikan infomasi kepada pengunjung tentang di

Show hide searchbox blogger

Membuat tampilan blog menjadi unik memang tidak ada habisnya dan kali ini saya coba untuk berbagi cara membuat kotak pencarian yang bisa di munculkan dan di sembunyikan pada blogger.

lihat contoh berikut

selain untuk menambah unik tampilan, trik kotak pencarian seperti ini juga bisa di gunakan untuk menghemat ruang dan kolom. bagaimana caranya, ikuti langkah berikut ini.

Silahkan login terlebih dahulu di editor template blogger anda.
setelah itu letakkan kode HTML kotak pencarian berikut ini di elemen yang anda inginkan, misalnya di header, di menu, atau di sidebar blog anda.
berikut ini adalah kode HTML kotak pencariannya:

<form class="search-form" action="/search" method="get">
    <div class="input-wrapper">
        <input type="text" name="q" placeholder="cari...">
        <a title="Search" class="sc" href="/"></a>
    </div>
</form>

setelah itu, letakkan kode CSS berikut ini di dalam kelompok dimana CSS blog anda di simpan:

.input-wrapper {
  border:1px solid #333;
  width:26px;
  height:26px;
  background-color:#eee;
  -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.2);
  -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.2);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.2);
  -webkit-border-radius:0px;
  -moz-border-radius:0px;
  border-radius:0px;
  overflow:hidden;
  position:relative;
}

.input-wrapper input,
.input-wrapper input:focus {
  border:none;
  background:none;
  margin:0 0;
  padding:0 16px;
  display:block;
  width:200px;
  height:26px;
  font:italic bold 12px/26px Arial,Sans-Serif;
  color:#333;
  outline:none;
}

.input-wrapper.focus {
  background-color:#eee;
  border-color:#000;
}

.input-wrapper .sc {
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background:white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGOSURBVDhPrZJPSwJRFMXPokD6BkFQyzaRQUGrKII21a5Vu9oHLVq07hNUSFSYWqOmwjSGY0aRQqsCXUQJlaXSaEZamI2mTnV7WguNMUR6cHiX98793fv+AP8+9gvd2P9cYuKZdPDQYH01/NSMPcWCYyIcVMjL4r13AT7S/A1yFZzM+J3sUZYZbByisojDEuCD4C4GGKRJHbIjj+DoxyjI2iqTmGuHq/AIt0JwFgdqAF4dcOUJvDynanDK8xCLBCHjrQF48WE3S9h+61A18C/97DiEnXRaHWBPiuDTBHtqQtXgSE1BkAm2pF8dYHuYheOJYE3kVQ3WRACOVGl/uvZLmOMxWO4JW9IFzLExcNFWcNIouNgJrGzdHCup+oKraJzUBlM4DovE7iJB5YqlmbsjbEYfsBXJwp5k8U1v7S6MEQ2MoRnob5/L3RhvMzCEFrDmb4H+ugebkSI2Qp8w3HTV9zt/u0yhIQbMwRjOw3De1xhkNTiM9eAHTFHC2mVnYxDdqRb6KwUrZ5ONASqyvgCU5N7E8iBBBAAAAABJRU5ErkJggg==') no-repeat 50% 50%;
  -webkit-border-radius:0px;
  -moz-border-radius:0px;
  border-radius:0px;
}

sekarang tambahkan kode jQuery berikut agar fungsi berjalan dengan baik:

$(function() {
    $('.search-form .sc').on("click", function() {
        $(this).hide()
            .parent().addClass('focus')
                .stop().animate({width:200}, 120, "swing")
                    .find('input').trigger("focus")
                        .on("focusout", function() {
            $(this).next().show()
                .parent().removeClass('focus')
                    .stop().animate({width:26}, 120, "swing");
        });
        return false;
    });
});

Perlu anda sesuaikan: ubah lebar sesuai dengan tampilan di blog anda, dengan mengatur kode berikut .stop().animate({width:200}, 120, "swing"

setelah itu simpan dan lihat hasilnya, demikan saja semoga berguna...

Syntax Highlighter sederhana

Apa itu Syntax Highlighter? para blogger seringkali berbagi script atau potongan kode untuk pembaca atau siapapun yang membutuhkannya untuk pengembangan dan tampilan web atau blog. Kebanyakan menggunakan blockquote sebagai "bidang pembungkus" dari script atau potongan kode tersebut dan menandai dengan beberapa warna khusus sebagai indikator atau petunjuk. pada Syntax Highlighter merupakan upaya untuk mempresentasikan script atau kode tersebut dengan cara dan tampilan yang lebih baik berdasarkan jenis kode, misalnya Javascript, CSS, HTML, Phyton, PHP, dan masih banyak lagi yang telah di golongkan dan di tandai dengan warna berbeda sesuai jenis.

kali ini, saya akan berbagi cara mudah untuk memasang Syntax Highlighter yang terbilang mudah ringan dan baik. untuk mengikuti pemasangan pada blog anda silahkan simak di bawah ini langkahnya:

1. Masuk Blogger
2. Pilih template dan Edit HTML
3. Masukan kode CSS dibawah ini diatas kode </style>

body {
  background-color:#E7E5DC;
  padding:50px;
}

pre {
  background-color:#eee;
  color:#069;
  padding:0.5em 1em;
  overflow:auto;
  white-space:pre;
  word-wrap:normal;
  font:bold 12px/1.5em "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
  position:relative;
  margin:0 0 1em;
}

pre .the-num {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  padding:0.5em 0.5em 0.5em 1em;
  color:#555;
  background-color:#ccc;
  border-right:2px solid #444;
}

pre .bracket   {color:darkblue;}
pre .tag,
pre .tag .keyword,
pre .tag .attribute {color:blue;}
pre .selector  {color:blue;}
pre .attribute,
pre .regexp    {color:darkorange;}
pre .str       {color:green;}
pre .tag .str  {color:brown;}
pre .keyword   {color:darkred;}
pre .comment   {font-style:italic;color:#999;}
pre .num,
pre .hex       {color:darkviolet;}
pre .name,
pre .important,
pre .array     {color:red;}
pre .important {background-color:yellow;}
pre .doctype   {color:magenta;}

4. Letakkan kode berikut di atas kode </body>

<script type='text/javascript'>
// JQuery Syntax Highlighter
$(window).load(function() {
    $('pre').each(function() {
        var list = "(true|false|null|main|in|endif|if|endfor|for|while|finally|var|new|function|do|return|void|else|break|catch|instanceof|with|throw|case|default|try|this|switch|continue|typeof|delete)",
            repli1 = new RegExp(list + " ", "ig"),
            repli2 = new RegExp(list + "( ?)<span", "ig"),
            $this = $(this);
        $this.html($this.html()
        .replace(/(<br>|\n)$/ig, "")
        .replace(/(\t)/ig, "    ")
        .replace(/&quot;/ig, "\"")
        .replace(/&#39;|&apos;/ig, "\'")
        .replace(/(.?)'(.*?)'/g, "$1<span class='str'>\'$2\'</span>")
        .replace(/(.?)"(.*?)"/g, "$1<span class='str'>\"$2\"</span>")
        .replace(/(.?)(""|'')/g, "$1<span class='value'>$2</span>")
        .replace(/(#[A-F0-9]{3,6})/ig, "<span class='hex'>$1</span>")
        .replace(/(\d+(?!(.*&lt;)))/g, "<span class='num'>$1</span>")
        .replace(/((#|\.)[\-_A-Z0-9]+)/ig, "<span class='selector'>$1</span>")
        .replace(/(\{|\}|\(|\)|\[|\])/g, "<span class='bracket'>$1</span>")
        .replace(/&lt;(.*?)&gt;/g, "<span class='tag'>&lt;$1&gt;</span>")
        .replace(/&lt;!--([\s\S]*?)--&gt;/gm, "<span class='comment'>&lt;!--$1--&gt;</span>")
        .replace(/\/\*([\s\S]*?)\*\//gm, "<span class='comment'>/*$1*/</span>")
        .replace(/[^\:]\/\/(.*)/g, "<span class='comment'>//$1</span>")
        .replace(/<\/span>\/(.*)\/([gim]+),( ?)<span class='str'>/g, "</span><span class='regexp'>/$1/$2</span>, <span class='str'>")
        .replace(repli1, "<span class='keyword'>$1</span> ")
        .replace(repli2, "<span class='keyword'>$1</span>$2<span")
        .replace(/function<\/span> (.[^<]*)<span/g, "function</span> <span class='name'>$1</span><span")
        .replace(/([\-_A-Z]+)(?=(\s+|)):(.(?!\{)*)/ig, "<span class='attribute'>$1</span>:$2$3")
        .replace(/h<span class='num'>([1-6])<\/span>/ig, "h$1")
        .replace(/!important/ig, "<mark class='important'>!important</mark>")
        .replace(/&lt;!(doctype)(.*)&gt;/ig, "<span class='doctype'>&lt;!$1$2&gt;</span>")
        .replace(/@<span class='attribute'>(import|page|media|charset|keyframes|font-face)<\/span>/ig, "@$1")
        .replace(/(@(import|page|media|charset|keyframes|font-face))/ig, "<span class='keyword'>$1</span>")
        .replace(/<span class='bracket'>\[<\/span>(.*)<span class='bracket'>\]<\/span>/ig, "<span class='array'>[$1]</span>")
        ).find('.str span, .regexp span, .comment span, .doctype span, .hex span, .array span, .url span').contents().unwrap();
        $this.append('<div class="the-num"></div>');

        // Insert the line number
        var num = $this.html().split(/\n|<br>/).length,
            count = 0;
        for (var i = 0; i < num; i++) {
            count = count + 1;
            $this.find('.the-num').append(count + '.<br/>');
        }
        $this.css('padding-left', $this.find('.the-num').outerWidth()+14);

    });
});
</script>

5. Simpan perubahan
6. Untuk memanggil di dalam posting, gunakan cara penulisan seperi berikut

<pre> ...kode disini... </pre>

jika langkah anda benar, maka hasilnya akan terlihat seperti di bawah ini:

semoga sukses dan bermanfaat...

Menu vertikal accordion dengan CSS3

Ini adalah posting pembaharuan dari posting Menu vertikal accordion dengan CSS3 sebelumnya yang sudah usang.

Dalam tutorial ini kita akan belajar tentang membuat Menu Accordion menggunakan CSS3. Ada banyak tutorial CSS3 akordeon yang bisa sobat temukan, namun dalam versi ini kita akan menggunakan css :target pseudo-class dan menu ini akan bekerja pada browser yang mendukung properti CSS3. cara dan langkajnya silahkan disimak dibawah ini:

CSS

@import url(http://fonts.googleapis.com/css?family=Nunito);
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);

* {margin: 0; padding: 0;}

body {
 background: #4EB889;
 font-family: Nunito, arial, verdana;
}
#accordian {
 background: #004050;
 width: 250px;
 margin: 100px auto 0 auto;
 color: white;
 box-shadow: 
  0 5px 15px 1px rgba(0, 0, 0, 0.6), 
  0 0 200px 1px rgba(255, 255, 255, 0.5);
}
#accordian h3 {
 font-size: 12px;
 line-height: 34px;
 padding: 0 10px;
 cursor: pointer;
 background: #003040; 
 background: linear-gradient(#003040, #002535);
}

#accordian h3:hover {
 text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}
#accordian h3 span {
 font-size: 16px;
 margin-right: 10px;
}

#accordian li {
 list-style-type: none;
}
#accordian ul ul li a {
 color: white;
 text-decoration: none;
 font-size: 11px;
 line-height: 27px;
 display: block;
 padding: 0 15px;
 transition: all 0.15s;
}
#accordian ul ul li a:hover {
 background: #003545;
 border-left: 5px solid lightgreen;
}

#accordian ul ul {
 display: none;
}
#accordian li.active ul {
 display: block;
}

HTML

<div id="accordian">
 <ul>
  <li>
   <h3><span class="fa fa-tachometer"></span>Dashboard</h3>
   <ul>
    <li><a href="#">Reports</a></li>
    <li><a href="#">Search</a></li>
    <li><a href="#">Graphs</a></li>
    <li><a href="#">Settings</a></li>
   </ul>
  </li>
  <!-- we will keep this LI open by default -->
  <li class="active">
   <h3><span class="fa fa-tasks"></span>Tasks</h3>
   <ul>
    <li><a href="#">Today's tasks</a></li>
    <li><a href="#">Urgent</a></li>
    <li><a href="#">Overdues</a></li>
    <li><a href="#">Recurring</a></li>
    <li><a href="#">Settings</a></li>
   </ul>
  </li>
  <li>
   <h3><span class="fa fa-calendar"></span>Calendar</h3>
   <ul>
    <li><a href="#">Current Month</a></li>
    <li><a href="#">Current Week</a></li>
    <li><a href="#">Previous Month</a></li>
    <li><a href="#">Previous Week</a></li>
    <li><a href="#">Next Month</a></li>
    <li><a href="#">Next Week</a></li>
    <li><a href="#">Team Calendar</a></li>
    <li><a href="#">Private Calendar</a></li>
    <li><a href="#">Settings</a></li>
   </ul>
  </li>
  <li>
   <h3><span class="fa fa-heart"></span>Favourites</h3>
   <ul>
    <li><a href="#">Global favs</a></li>
    <li><a href="#">My favs</a></li>
    <li><a href="#">Team favs</a></li>
    <li><a href="#">Settings</a></li>
   </ul>
  </li>
 </ul>
</div>

jQuery

/*jQuery time*/
$(document).ready(function(){
 $("#accordian h3").click(function(){
  //slide up all the link lists
  $("#accordian ul ul").slideUp();
  //slide down the link list below the h3 clicked - only if its closed
  if(!$(this).next().is(":visible"))
  {
   $(this).next().slideDown();
  }
 })
})

DEMO

Demo jsfiddle Demo codeplayer

Javascript random banner

Memasang banner atau iklan dengan gambar bukan hal baru yang sudah banyak di ketahui oleh semua sobat blogger, namun bagaimana cara agar sekumpulan banner atau banner yang lebih dari satu bisa di tampilkan secara berbeda - beda hanya di satu halaman bagi sobat yang belum tahu inilah triknya. sehingga banner sobat tidak bertumpuk dan berderet di dalam sebuah halaman yang mengganggu pengunjung blog anda. buat sobat yang tertarik dan ingin menerapkan di blognya yang memiliki banyak banner silahkan di pasang script pendek ini.

pertama silahkan edit terlebih dahulu bagian script berikut ini sesuai dengan ukuran banner, lalu silahkan letakkan di widget blogger milik blog anda.

<script  type='text/javascript">
<!-- db script random banner start
var jumlah_iklan = 4;
var jangka_waktu = new Date()
var tempo = jangka_waktu.getSeconds()
var banner_iklan = tempo % jumlah_iklan;
banner_iklan +=1;
if (banner_iklan==1) {
txt="Judul iklan";
url="Alamat URL";
alt="Alamat URL";
banner="Alamat URL Gambar";
width="300";
height="250";
}
if (banner_iklan==2) {
txt="Judul iklan";
url="Alamat URL";
alt="Alamat URL";
banner="Alamat URL Gambar";
width="300";
height="250";
}
if (banner_iklan==3) {
txt="Judul iklan";
url="Alamat URL";
alt="Alamat URL";
banner="Alamat URL Gambar";
width="300";
height="250";
}
if (banner_iklan==4) {
txt="Judul iklan";
url="Alamat URL";
alt="Alamat URL";
banner="Alamat URL Gambar";
width="300";
height="250";
}
document.write('<center>');
document.write('<a href=\"' + url + '\" target=\"_blank\">');
document.write('<img src=\"' + banner + '\" width=')
document.write(width + ' height=' + height + ' ');
document.write('alt=\"' + alt + '\" border=0><br>');
document.write('<small>' + txt + '</small></a>');
document.write('</center>');
// db script random banner End -->
</script>

silahkan ubah keterangan di bawah ini

var jumlah_iklan = 4; :: bisa anda tambahkan sesuai kebutuhan, hingga yang di perlukan.
txt="Judul iklan"; :: isi dengan judul iklan anda.
url="Alamat URL"; :: url yang akan di tuju dari banner yang anda pasang di dalam script.
alt="Alamat URL"; :: isi sama untuk alt ini dengan url.
banner="Alamat URL Gambar"; :: alamat di mana anda menyimpan banner/gambar iklan yang di pasang.
width="300"; :: ukuran lebar banner iklan.
height="250"; :: ukuran tinggi banner/gambar iklan.
if (banner_iklan==4) { txt="Judul iklan"; url="Alamat URL"; alt="Alamat URL"; banner="Alamat URL Gambar"; width="300"; height="250"; }: di tambahkan untuk menambah jumlah banner yang ingin di tampilkan, jangan lupa merubah nilai if (banner_iklan==4) dengan urutannya 5, 6, 7 dst.

sekian saja, cukup mudah untuk di terapkan. semoga bermanfaat...

CSS widget popular post Blogger

Pada kali ini Saya mencoba modifikasi popular post menjadi keren dan warna - warni dengan memanfaatkan CSS Pseudo Element dan nth-child sehingga tampilannya menjadi lebih menarik.

Silakan masuk pada akun blogger Anda
Kemudian Tambahkan Gadget dan pilih Entri Populer, lalu atur agar popular post hanya menampilkan judul saja.

langkah di atas dilakukan untuk anda yang belum memasang widget ini di blog.

Kemudian tambahkan CSS dibawah ini pada template Anda, simpan diatas kode ]]></b:skin> atau </style> dan Simpan

.PopularPosts ul{list-style-type:none; padding:5px} 
.PopularPosts {color:#fff; line-height:1.6; font-size:100%; border-radius:5px 5px 0 0; padding} 
.PopularPosts {line-height:1.6; font-size:100%; border-radius:0; color:#fff} 
.PopularPosts a{color:#fff} 
.PopularPosts a:hover{color:#fff} 
.PopularPosts ul{list-style:none; margin:0; margin-left:-18px; padding:0; counter-reset:popcount} 
.PopularPosts ul li:before{list-style-type:none; margin-right:15px; margin-left:5px; padding:0.3em 0.6em; counter-increment:popcount; content:counter(popcount); font-size:16px; color:#fff; position:relative; float:left; border:1px solid #fff; border-radius:100%} 
.PopularPosts li{text-transform:uppercase; background:none; margin:0; padding:10px 18px; display:block; clear:both; overflow:hidden; list-style:none; font:13.5px/140%; border-bottom:none} 
.PopularPosts li:hover{background:#0FB9BB} 
.PopularPosts li a{text-decoration:none} 
.PopularPosts ul li{padding:3px 20px; border:none} 
.PopularPosts ul li:nth-child(1){background-color:#F48067; margin-right:0} 
.PopularPosts ul li:nth-child(2){background-color:#2ba6e1; margin-right:0} 
.PopularPosts ul li:nth-child(3){background-color:#718397; margin-right:0} 
.PopularPosts ul li:nth-child(4){background-color:#11b7b5; margin-right:0} 
.PopularPosts ul li:nth-child(5){background-color:#d9ba71; margin-right:0} 
.PopularPosts ul li:nth-child(6){background-color:#F48067; margin-right:0} 
.PopularPosts ul li:nth-child(7){background-color:#2ba6e1; margin-right:0} 
.PopularPosts ul li:nth-child(8){background-color:#718397; margin-right:0} 
.PopularPosts ul li:nth-child(9){background-color:#11b7b5; margin-right:0} 
.PopularPosts ul li:nth-child(10){background-color:#d9ba71; margin-right:0}

ingat, judul widget tidak akan tampil seperti di gambar. untuk seperti itu silahkan edit sendiri ya.

Semoga berguna dan bermanfaat...