baca in: Widget

Tampilkan postingan dengan label Widget. Tampilkan semua postingan

Cara Mendaftar dan Memasang Widget Cbox di Blog

Cara Mendaftar dan Memasang Widget Cbox di Blog. Sebagai seorang blogger adakalanya kita melakukan blog walking untuk mampir-mampir ke sesama blogger. Biasanya kita meninggalkan jejak disana lewat komentar blog ataupun buku tamu yang disediakan si empunya blog. Apabila sobat tertarik memiliki buku tamu tersebut di blog sobat, Oplosanblog rekomendasikan untuk memasang widget Cbox ini. Cara

Menu Tab dengan jQuery

Untuk menghemat tempat, tab view menu sangat efisien untuk solusinya karena Ukuran yang relatif kecil tapi bisa memuat space yang lumayan. kali ini saya akan membagikan cara membuat tab menu, silahkan simak jika anda sedang mencari cara membuatnya.

Jika setelah jadi nanti lebar atau tinggi menu tab ini tidak sesuai, silahkan anda sesuaikan sendiri dengan ukuran widtget isi atau elemen dari menu yang anda buat ini.

Copy dan letakkan kode berikut di atas kode ]]></b:skin> atau </style>

ul.tabs {
  width: 300px;
  height: 80px;
  margin: 0 auto;
  list-style: none;
  overflow: hidden;
  padding: 0;
}
ul.tabs li {
  float: left;
  width: 100px;
}
ul.tabs li a {
  position: relative;
  display: block;
  height: 30px;
  margin-top: 40px;
  padding: 10px 0 0 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  background: #369;
  -webkit-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
  -moz-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
  box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
  border: 0px solid #000000;
  -webkit-transition: padding 0.2s ease, margin 0.2s ease;
  -moz-transition: padding 0.2s ease, margin 0.2s ease;
  -o-transition: padding 0.2s ease, margin 0.2s ease;
  -ms-transition: padding 0.2s ease, margin 0.2s ease;
  transition: padding 0.2s ease, margin 0.2s ease;
}
.tabs li:first-child a {
  z-index: 3;
}
.tabs li:nth-child(2) a { z-index: 2; }
.tabs li:last-child a {
  z-index: 1;
  -webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  -moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
}
ul.tabs li a:hover {
  margin: 35px 0 0 0;
  padding: 10px 0 5px 0;
}
ul.tabs li a.active {
  margin: 30px 0 0 0;
  padding: 10px 0 10px 0;
  background: #2c3e50;
  color: #D3FEF5;
  /*color: #ff6831;*/
  z-index: 4;
  outline: none;
}
.group:before,
.group:after {
  content: " ";
  display: table; 
}
.group:after { clear: both; }
#panels {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  background: #2c3e50;
  -webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  -moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
}
#panels p {
  font-family: 'Open Sans', sans-serif;
  padding: 30px 40px;
  color: #ffffff;
  line-height: 16px;
  font-size: 12px;
  margin: 0;
}
#one { }
#two { display: none; }
#three { display: none; }

Letakkan kode HTML di bawah ini di sidebar atau elemen lain yang anda inginkan.

<ul class="tabs group">
  <li><a class="active" href="#/one">Tab 1</a></li>
  <li><a href="#/two">Tab 2</a></li>
  <li><a href="#/three">Tab 3</a></li>
</ul>
<div id="panels">
  <p id="one">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut hendrerit aliquam mauris, a mattis lectus varius id. Ut dolor tortor, hendrerit et porttitor in, gravida sed felis. Donec vehicula ex nec venenatis pulvinar. Donec vel sodales neque.</p>
  <p id="two">Donec tincidunt tortor ut magna mollis sagittis. Mauris eu nibh non purus gravida hendrerit. Donec enim nisi, pretium eu libero sit amet, bibendum sagittis velit. Pellentesque non dapibus leo. Suspendisse ante tellus, volutpat ac leo eget, venenatis rhoncus sem.</p>
  <p id="three"> Aenean dapibus eleifend venenatis. Integer et suscipit dui. Nam tellus diam, mattis in ultrices et, feugiat ac libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
</div>

Letakkan jQuery berikut di atas kode </head> atau </body> namun saya recomendasikan di atas kode yang terakhir.

<script type='text/javascript'>
//<![CDATA[ 
(function($) {
    var tabs =  $(".tabs li a");
    tabs.click(function() {
 var panels = this.hash.replace('/','');
 tabs.removeClass("active");
 $(this).addClass("active");
    $("#panels").find('p').hide();
    $(panels).fadeIn(200);
 });
})(jQuery);
//]]>
</script>

Demo Tab 300px

Jika anda ingin tampilan menu tab dengan warna yang berbeda dan lebih lebar anda bisa menggunakan css di bawah ini.

ul.tabs {
  width: 600px;
  height: 80px;
  margin: 0 auto;
  list-style: none;
  overflow: hidden;
  padding: 0;
}
ul.tabs li {
  float: left;
  width: 200px;
}
ul.tabs li a {
  position: relative;
  display: block;
  height: 30px;
  margin-top: 40px;
  padding: 10px 0 0 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  background: #1abc9c;
  -webkit-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
  -moz-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
  box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
  border: 0px solid #000000;
  -webkit-transition: padding 0.2s ease, margin 0.2s ease;
  -moz-transition: padding 0.2s ease, margin 0.2s ease;
  -o-transition: padding 0.2s ease, margin 0.2s ease;
  -ms-transition: padding 0.2s ease, margin 0.2s ease;
  transition: padding 0.2s ease, margin 0.2s ease;
}
.tabs li:first-child a {
  z-index: 3;
  -webkit-border-top-left-radius: 8px;
  -moz-border-radius-topleft: 8px;
  border-top-left-radius: 8px;
}
.tabs li:nth-child(2) a { z-index: 2; }
.tabs li:last-child a {
  z-index: 1;
  -webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  -moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  -webkit-border-top-right-radius: 8px;
  -moz-border-radius-topright: 8px;
  border-top-right-radius: 8px;
}
ul.tabs li a:hover {
  margin: 35px 0 0 0;
  padding: 10px 0 5px 0;
}
ul.tabs li a.active {
  margin: 30px 0 0 0;
  padding: 10px 0 10px 0;
  background: #2c3e50;
  color: #D3FEF5;
  /*color: #ff6831;*/
  z-index: 4;
  outline: none;
}
.group:before,
.group:after {
  content: " "; 
  display: table;
}
.group:after { clear: both; }
#panels {
  width: 600px;
  height: 300px;
  margin: 0 auto;
  background: #2c3e50;
  -webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  -moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  -webkit-border-bottom-right-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius-bottomright: 8px;
  -moz-border-radius-bottomleft: 8px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}
#panels p {
  font-family: 'Open Sans', sans-serif;
  padding: 30px 40px;
  color: #ffffff;
  line-height: 26px;
  font-size: 18px;
  margin: 0;
}
#one { }
#two { display: none; }
#three { display: none; }

Demo Tab 600px

pastikan di template anda sudah ada jQuery <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script> agar menu tab ini bisa berjalan atau berfungsi.

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>

Coba Disini

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.

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

kodenya

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

kodenya

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

kodenya

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

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.

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

Coba sendiri

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

Cara Membuat Widget Parse HTML di Blogspot

Dalam dunia blogging pasti akan dibutuhkan yang namanya koding. Misal untuk memasang iklan, atau mengubah tampilan template blognya. Kadang kala kode HTML yang ingin dipasangkan akan menjadikan template error/tidak terbaca, supaya kode-kodenya bisa klop dan terbaca maka perlu di parsekan lewat widget yang akan kita buat ini. Untuk tampilannya setelah jadi akan seperti ini nanti :

Cara

Cara Mendaftar dan Memasang Widget Histats di Blog

Cara Mendaftar dan Memasang Widget Histats di Blog - Setelah sebelumnya saya share tentang cara memasang widget Alexa Rank, maka untuk kali ini akan coba saya bagikan cara daftar dan pasang widget Histats. Seperti sobat ketahui, untuk melihat data akurat tentang pengunjung yang mampir ke suatu blog, biasanya si admin memakai widget satu ini. Tampilannya beraneka macam (bisa sobat pilih nanti

Cara Memasang Widget Alexa Rank di Blog

Cara Memasang Widget Alexa Rank di Blog - Setelah sebelumnya saya share tutorial tentang cara pasang widget contact form dan jam di Blog, kali ini saya ingin share tentang tutorial cara pasang widget Alexa Rank. Bagi yang belum tahu apa itu Alexa Rank, akan saya jelaskan sedikit saja.

Alexa Rank adalah fasilitas yang berfungsi untuk memonitor dan menunjukkan ranking dari blog sobat

Cara Memasang Widget Jam di Blog

Cara Memasang Widget Jam di Blog - Sobat blogger, untuk kali ini Oplosanblog akan memberikan tutorial mengenai Cara Memasang Widget Jam di Blog. Caranya simpel dan mudah kok, gak perlu ribet untuk memasangnya. Hehe,.. Penasaran gak sobat blogger cara memasangnya bagaimana?? Kalau iya, sobat bisa ikutin tutorial saya di bawah ini :

Cara Memasang Widget Jam di Blog :

1. Sobat coba kunjungi

Membuat javascript random teks

Random teks adalah sebuah tulisan atau kutipan tertentu yang di tampilkan secara acara acak ketika halaman telah sepenuhnya di muat, trik random teks ini cocok untuk membuat sebuah kutikan atau tulisan tertentu yang ingin anda tampilkan secara berbeda dan saya menerapkan trik ini pada tips di blog ini. untuk lebih jelasnya silahkan anda klik link tips pada menu navigasi di atas header blog ini dan ketika anda memuat kembali halaman di blog ini maka teksnya pun akan berganti secara acak.

pastikan template anda sudah terpasang

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

cara membuat random teks ini tidak sulit, kita hanya perlu menggunakan sedikit javascript yang juga tidak memberatkan load atau waktu muat halaman dan scriptnya adalah sebagai berikut:

<script type='text/javascript'>
//javascript quote in arrays db
quote = new Array(5);
quote[0] = "<b>tulisan disini</b>";
quote[1] = "<b>tulisan disini</b>";
quote[2] = "<b>tulisan disini</b>";
quote[3] = "<b>tulisan disini</b>";
quote[4] = "<b>tulisan disini</b>";
//menentukan random index
index = Math.floor(Math.random() * quote.length);
//menampilkan quote
document.write("\n");
document.write(quote[index]);
//db end arrays
</script>

cara untuk menempatkan tulisan atau kutipan yang ingin anda tampilkan silahkan lihat pengaturan di bawah ini:

quote = new Array(5); :: Kalau ingin menambah 10 atau 100 tips rubah saja script kodenya quote = new Array(10); atau quote = new Array(100); dan buat daftar quote[0] = "tulisan disini"; sampai dengan quote[100] = "tulisan disini";
quote :: bisa anda ubah dengan kata misalnya bijak, puisi, tips kutipan dll.
tag :: pada tag ini bisa juga di gantikan dengan class atau id tertentu.
Penting :: Selain kode di atas, anda tidak perlu merubah kode lainnya.

silahkan menempatkannya di widget sobat dalam kotak javacsript atau html dan lihat hasilnya.

untuk menerapkannya dalam bentuk lain, silahkan saja sobat coba bereksperimen sendiri, semoga berguna...

Cara Memasang Widget Contact Form di Laman Blogger

Belum lama ini blogger menambahkan fitur Contact Form di widget bagian sidebar. Sayangnya hanya bisa dipasang di bagian sidebar. Padahal kan bagusnya Contact Form itu di halaman statis atau laman blog. Nah untuk itu kali ini saya akan share Cara Memasang Widget Contact Form di Laman Blogger yang saya dapat dari blog mas-sugeng.com.

Bagi yang penasaran pengen coba bikin, bisa ikutin tutorial

Modifikasi widget link list dengan css di blogger

Selamat pagi sobat blogger semua, kembali muncul share tentang css ni buat widget link list blogger agar tampil lebih menarik sekalian juga bernomor seperti widget popular post. widget link list di gunakan untuk menempatkan beberapa link yang di anggap penting atau untuk mengarahkan pengunjung blog pada sebuah halaman. bisa juga untuk memajang link blogger sahabat lain yang di anggap favorite atau lainnya, untuk itu agar tampilannya lebih menarik dan tidak terlalu biasa saja saya mencoba berbagi cssnya di bawah ini silahkan di baca... berikut contoh widget link list

untuk menggunakan secara otomatis pada widget, simpan css di bawah ini dalam template blog sobat bersama css lainnya

#LinkList { width: 310px; border:3px solid #DCDCDC;margin-top:20px; }
#LinkList h2 {color:#fff;font-weight:bold;border-bottom:3px solid #DCDCDC;margin-top:0px;font-size:20px;padding-left:10px;padding-right:10px;padding-top:10px;padding-bottom:15px;background:#FFD700;margin-bottom:-10px;}
#LinkList ul li a:hover{color:#4169E1;text-decoration:none} 
#LinkList ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-size: 20px; font-style: normal; font-variant: normal; font-weight: bold; letter-spacing: normal; line-height: 18px; margin: 0px 30px 0px 0px; min-height: 20px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;} 
#LinkList ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px} 
#LinkList ul li:first-child:after, 
#LinkList ul li:first-child + li:after, 
#LinkList ul li:first-child + li + li:after, 
#LinkList ul li:first-child + li + li + li:after, 
#LinkList ul li:first-child + li + li + li + li:after, 
#LinkList ul li:first-child + li + li + li + li + li:after, 
#LinkList ul li:first-child + li + li + li + li + li + li:after, 
#LinkList ul li:first-child + li + li + li + li + li + li + li:after, 
#LinkList ul li:first-child + li + li + li + li + li + li + li + li:after, 
#LinkList ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:7px;right:5px;width:30px;height:30px;font-weight:bold;line-height:1em;text-align:center;font-size:28px;color:#808080} 
#LinkList ul li:first-child + li + li + li + li + li + li + li {background:#E6E6FA;width:290px;} 
#LinkList ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} 
#LinkList ul li:first-child + li + li + li + li + li + li + li +li{background:#E6E6FA;width:290px;} 
#LinkList ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} 
#LinkList ul li:first-child + li + li + li + li + li + li + li +li +li{background:#E6E6FA;width:290px;}
#LinkList ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} 
#LinkList ul li:first-child + li + li + li + li +li{background:#E6E6FA;width:290px;} 
#LinkList ul li:first-child + li + li + li + li + li:after{content:"6"} 
#LinkList ul li:first-child + li + li + li + li + li +li{background:#E6E6FA;width:290px;} 
#LinkList ul li:first-child + li + li + li + li + li + li:after{content:"7"} 
#LinkList ul li:first-child + li + li + li + li{background:#E6E6FA;width:290px;} 
#LinkList ul li:first-child + li + li + li + li:after{content:"5"} 
#LinkList ul li:first-child + li + li + li{background:#E6E6FA;width:290px;} 
#LinkList ul li:first-child + li + li + li:after{content:"4"} 
#LinkList ul li:first-child + li + li{background:#E6E6FA;width:290px;} 
#LinkList ul li:first-child + li + li:after{content:"3"} 
#LinkList ul li:first-child + li{background:#E6E6FA; width:290px;} 
#LinkList ul li:first-child + li:after{content:"2"} 
#LinkList ul li:first-child{background:#E6E6FA;width:290px;} 
#LinkList ul li:first-child:after{content:"1"} 
#LinkList ul{margin:0;padding:0px 0;list-style-type:none} 
#LinkList ul li{position:relative;border-bottom:1px solid #DCDCDC;padding:10px}

setelah itu buka tata letak dan tambahkan widget link list yang sobat butuhkan.

jika sobat sudah pernah memasang widget link list silahkan di cek ID nya pada urutan berapa, misalkan jika belum pernah memasang ID nya akan seperti LinkList dan jika pernah memasang lebih dari satu maka seterusnya mulai LinkList1 atau LinkList2.

jika sobat ingin memasang secara manual pada widget HTML/Javascript salin kode di bawah ini

<style>
#LinkList { width: 310px; border:3px solid #DCDCDC;margin-top:20px; }
#LinkList h2 {color:#fff;font-weight:bold;border-bottom:3px solid #DCDCDC;margin-top:0px;font-size:20px;padding-left:10px;padding-right:10px;padding-top:10px;padding-bottom:15px;background:#FFD700;margin-bottom:-10px;}
#LinkList ul li a:hover{color:#4169E1;text-decoration:none} 
#LinkList ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-size: 20px; font-style: normal; font-variant: normal; font-weight: bold; letter-spacing: normal; line-height: 18px; margin: 0px 30px 0px 0px; min-height: 20px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;} 
#LinkList ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px} 
#LinkList ul li:first-child:after, 
#LinkList ul li:first-child + li:after, 
#LinkList ul li:first-child + li + li:after, 
#LinkList ul li:first-child + li + li + li:after, 
#LinkList ul li:first-child + li + li + li + li:after, 
#LinkList ul li:first-child + li + li + li + li + li:after, 
#LinkList ul li:first-child + li + li + li + li + li + li:after, 
#LinkList ul li:first-child + li + li + li + li + li + li + li:after, 
#LinkList ul li:first-child + li + li + li + li + li + li + li + li:after, 
#LinkList ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:7px;right:5px;width:30px;height:30px;font-weight:bold;line-height:1em;text-align:center;font-size:28px;color:#808080} 
#LinkList ul li:first-child + li + li + li + li + li + li + li {background:#E6E6FA;width:290px;} 
#LinkList ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} 
#LinkList ul li:first-child + li + li + li + li + li + li + li +li{background:#E6E6FA;width:290px;} 
#LinkList ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} 
#LinkList ul li:first-child + li + li + li + li + li + li + li +li +li{background:#E6E6FA;width:290px;}
#LinkList ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} 
#LinkList ul li:first-child + li + li + li + li +li{background:#E6E6FA;width:290px;} 
#LinkList ul li:first-child + li + li + li + li + li:after{content:"6"} 
#LinkList ul li:first-child + li + li + li + li + li +li{background:#E6E6FA;width:290px;} 
#LinkList ul li:first-child + li + li + li + li + li + li:after{content:"7"} 
#LinkList ul li:first-child + li + li + li + li{background:#E6E6FA;width:290px;} 
#LinkList ul li:first-child + li + li + li + li:after{content:"5"} 
#LinkList ul li:first-child + li + li + li{background:#E6E6FA;width:290px;} 
#LinkList ul li:first-child + li + li + li:after{content:"4"} 
#LinkList ul li:first-child + li + li{background:#E6E6FA;width:290px;} 
#LinkList ul li:first-child + li + li:after{content:"3"} 
#LinkList ul li:first-child + li{background:#E6E6FA; width:290px;} 
#LinkList ul li:first-child + li:after{content:"2"} 
#LinkList ul li:first-child{background:#E6E6FA;width:290px;} 
#LinkList ul li:first-child:after{content:"1"} 
#LinkList ul{margin:0;padding:0px 0;list-style-type:none} 
#LinkList ul li{position:relative;border-bottom:1px solid #DCDCDC;padding:10px}
</style>
<div id='LinkList'>
 <ul>
  <li><a href='/'>Contoh saja buat demo</a></li>
  <li><a href='/'>Contoh saja buat demo</a></li>
  <li><a href='/'>Contoh saja buat demo</a></li>
  <li><a href='/'>Contoh saja buat demo</a></li>
  <li><a href='/'>Contoh saja buat demo</a></li>
  <li><a href='/'>Contoh saja buat demo</a></li>
  <li><a href='/'>Contoh saja buat demo</a></li>
  <li><a href='/'>Contoh saja buat demo</a></li>
  <li><a href='/'>Contoh saja buat demo</a></li>
  <li><a href='/'>Contoh saja buat demo</a></li>
 </ul>
</div>

Contoh untuk demonya seperti di bawah ini nanti hasilnya

Contoh bro

buat sobat yang tertarik silahkan di gunakan dan di sesuaikan dengan tampilan template agar serasi dan terlihat bagus dengan mengubah nilai warna latar, lebar dan yang sobat inginkan.

demikian saja semoga berguna...

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...

4 Style CSS widget Label Blogger

Berikut ini beberapa modifikasi label default blogger. Anda hanya mendownload kode CSS yang diberikan berikut dan terapkan pada editing template Anda sebelum ]]></b:skin> atau </style>

1. Label Blog Style One

.label-size {
  float:left;
  margin:0 0 7px 20px;
  position:relative;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:0.75em;
  font-weight:bold;
  text-decoration:none;
  color:#996633;
  text-shadow:0 1px 0 rgba(255,255,255,.4);
  padding:0.417em 0.417em 0.417em 0.917em;
  border-top:1px solid #d99d38;
  border-right:1px solid #d99d38;
  border-bottom:1px solid #d99d38;
  -webkit-border-radius:0 0.25em 0.25em 0;
  -moz-border-radius:0 0.25em 0.25em 0;
  border-radius:0 0.25em 0.25em 0;
  background-image:-webkit-linear-gradient(top,rgb(254,218,113),rgb(254,186,71));
  background-image:-moz-linear-gradient(top,rgb(254,218,113),rgb(254,186,71));
  background-image:-o-linear-gradient(top,rgb(254,218,113),rgb(254,186,71));
  background-image:-ms-linear-gradient(top,rgb(254,218,113),rgb(254,186,71));
  background-image:linear-gradient(top,rgb(254,218,113),rgb(254,186,71));
  filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71',EndColorStr='#feba47');
  -webkit-box-shadow:inset 0 1px 0 #faeaba,0 1px 1px rgba(0,0,0,.1);
  -moz-box-shadow:inset 0 1px 0 #faeaba,0 1px 1px rgba(0,0,0,.1);
  box-shadow:inset 0 1px 0 #faeaba,0 1px 1px rgba(0,0,0,.1);
  z-index:100;
}

2. Label Blog Style Two

 .label-size {
  display:inline-block;
  padding:0 10px;
  height:29px;
  line-height:29px;
  border-radius:5px;
  font-weight:normal;
  font-size:10px;
  text-decoration:none;
}

.label-size {
  border:1px solid #769e42;
  box-shadow:inset 0 1px 0 #c5e59c ;
  background-color:#9ed35a;
  text-shadow:0 1px 1px #6ea23b;
  color:#fff;
  background-image:linear-gradient(bottom,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
  background-image:-o-linear-gradient(bottom,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
  background-image:-moz-linear-gradient(bottom,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
  background-image:-webkit-linear-gradient(bottom,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
  background-image:-ms-linear-gradient(bottom,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
}

.label-size:hover {
  background-color:#b7fa66;
  background-image:linear-gradient(top,#b7fa66 0%,#7ec940 100%);
  background-image:-o-linear-gradient(top,#b7fa66 0%,#7ec940 100%);
  background-image:-moz-linear-gradient(top,#b7fa66 0%,#7ec940 100%);
  background-image:-webkit-linear-gradient(top,#b7fa66 0%,#7ec940 100%);
  background-image:-ms-linear-gradient(top,#b7fa66 0%,#7ec940 100%);
}

.label-size:active {
  background-image:linear-gradient(top,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
  background-image:-o-linear-gradient(top,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
  background-image:-moz-linear-gradient(top,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
  background-image:-webkit-linear-gradient(top,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
  background-image:-ms-linear-gradient(top,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
}

.label-size {
  display:inline-block;
  border-radius:5px 0 0 5px;
  border-right-width:0;
  position:relative;
  z-index:5;
  margin-right:20px;
  margin-bottom:10px;
}

.label-size:after {
  content:" ";
  width:22px;
  height:22px;
  line-height:18px;
  font-size:25px;
  border-top:1px solid #769e42;
  border-right:1px solid #769e42;
  box-shadow:inset 0 1px 0 #c5e59c ;
  background-color:#9ed35a;
  text-shadow:0 1px 1px #7eac46;
  border-radius:3px 7px 3px 0;
  color:#fff;
  background-image:linear-gradient(135deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
  background-image:-o-linear-gradient(135deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
  background-image:-moz-linear-gradient(135deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
  background-image:-webkit-linear-gradient(135deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
  background-image:-ms-linear-gradient(135deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
  position:absolute;
  top:3px;
  right:-12px;
  z-index:-3;
  -webkit-transform:rotate(45deg); /* Saf3.1+,Chrome */
-moz-transform:rotate(45deg); /* FF3.5+ */
-ms-transform:rotate(45deg); /* IE9 */
-o-transform:rotate(45deg); /* Opera 10.5 */
transform:rotate(45deg);
  filter:progid:DXImageTransform.Microsoft.Matrix(/* IE6&#8211;
  IE9 */
M11=0.7071067811865476,M12=-0.7071067811865475,M21=0.7071067811865475,M22=0.7071067811865476,sizingMethod='auto expand');
  zoom:1;
}

.label-size:hover:after {
  background-color:#b7fa66;
  background-image:linear-gradient(-45deg,#b7fa66 0%,#7ec940 100%);
  background-image:-o-linear-gradient(-45deg,#b7fa66 0%,#7ec940 100%);
  background-image:-moz-linear-gradient(-45deg,#b7fa66 0%,#7ec940 100%);
  background-image:-webkit-linear-gradient(-45deg,#b7fa66 0%,#7ec940 100%);
  background-image:-ms-linear-gradient(-45deg,#b7fa66 0%,#7ec940 100%);
}

.label-size:active:after {
  background-image:linear-gradient(-45deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
  background-image:-o-linear-gradient(-45deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
  background-image:-moz-linear-gradient(-45deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
  background-image:-webkit-linear-gradient(-45deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
  background-image:-ms-linear-gradient(-45deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
}

.label-size:before {
  content:" ";
  height:5px;
  width:5px;
  display:block;
  position:absolute;
  right:-3px;
  top:11px;
  background-color:#fcfdf5;
  border:1px solid #83ab52;
  border-radius:5px;
  box-shadow:0 1px 0 #b2ddd83;
}

.label-size span {
  padding:2px 5px;
  border:1px solid #9e5c26;
  border-radius:5px;
  box-shadow:inset 0 1px 0 #f5bf8c;
  background-color:#ed943f;
  text-shadow:0 1px 1px #000;
  margin-left:10px;
  background-image:linear-gradient(bottom,rgb(211,95,32) 0%,rgb(223,131,45) 100%);
  background-image:-o-linear-gradient(bottom,rgb(211,95,32) 0%,rgb(223,131,45) 100%);
  background-image:-moz-linear-gradient(bottom,rgb(211,95,32) 0%,rgb(223,131,45) 100%);
  background-image:-webkit-linear-gradient(bottom,rgb(211,95,32) 0%,rgb(223,131,45) 100%);
  background-image:-ms-linear-gradient(bottom,rgb(211,95,32) 0%,rgb(223,131,45) 100%);
}

3. Label Blog Style Three

.label-size {
  margin:0;
  padding:0;
  position:relative;
}

.label-size a {
  float:left;
  height:24px;
  line-height:24px;
  position:relative;
  font-size:12px;
  margin-bottom:9px;
  margin-left:20px;
  padding:0 10px 0 12px;
  background:#0089e0;
  color:#fff;
  text-decoration:none;
  -moz-border-radius-bottomright:4px;
  -webkit-border-bottom-right-radius:4px;
  border-bottom-right-radius:4px;
  -moz-border-radius-topright:4px;
  -webkit-border-top-right-radius:4px;
  border-top-right-radius:4px;
}

.label-size a:before {
  content:"";
  float:left;
  position:absolute;
  top:0;
  left:-12px;
  width:0;
  height:0;
  border-color:transparent #0089e0 transparent transparent;
  border-style:solid;
  border-width:12px 12px 12px 0;
}

.label-size a:after {
  content:"";
  position:absolute;
  top:10px;
  left:0;
  float:left;
  width:4px;
  height:4px;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  border-radius:2px;
  background:#fff;
  -moz-box-shadow:-1px -1px 2px #004977;
  -webkit-box-shadow:-1px -1px 2px #004977;
  box-shadow:-1px -1px 2px #004977;
}

.label-size a:hover {
  background:#555;
}

.label-size a:hover:before {
  border-color:transparent #555 transparent transparent;
}

4. Label Blog Style Four

.label-size a {
  display:inline-block;
  text-decoration:none;
  text-shadow:0 1px 0 rgba(255,255,255,0.4);
  padding:4px 7px;
  font-family:'Helvetica Neue',helvetica,sans-serif;
  font-size:12px;
  line-height:14px;
  height:14px;
  vertical-align:middle;
  margin-bottom:6px;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
  -webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.2),inset 0 1px 0 0 rgba(255,255,255,0.4);
  -moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.2),inset 0 1px 0 0 rgba(255,255,255,0.4);
  box-shadow:0 1px 1px 0 rgba(0,0,0,0.2),inset 0 1px 0 0 rgba(255,255,255,0.4);
}

.label-size a {
  color:#996633;
  border:1px solid #DDA13C;
  background:rgb(238,177,75);
  background:url(data:image/svg+xml;
  base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlYjE0YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjYzkxMmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background:-moz-linear-gradient(top,rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
  background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(238,177,75,1)),color-stop(100%,rgba(204,145,45,1)));
  background:-webkit-linear-gradient(top,rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
  background:-o-linear-gradient(top,rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
  background:-ms-linear-gradient(top,rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
  background:linear-gradient(top,rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
  filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeb14b',endColorstr='#cc912d',GradientType=0 );
}

.label-size a:before {
  content:'\2022';
  color:#FFFFFF;
  margin-right:4px;
  font-size:15px;
  line-height:13px;
  height:13px;
  vertical-align:text-top;
  text-shadow:0 -1px -1px rgba(0,0,0,0.2);
}

.label-size a:hover {
  text-decoration:none;
  background:rgb(240,183,86);
  background:url(data:image/svg+xml;
  base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjc1NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmEwNDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background:-moz-linear-gradient(top,rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
  background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(240,183,86,1)),color-stop(100%,rgba(214,160,68,1)));
  background:-webkit-linear-gradient(top,rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
  background:-o-linear-gradient(top,rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
  background:-ms-linear-gradient(top,rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
  background:linear-gradient(top,rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
  filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b756',endColorstr='#d6a044',GradientType=0 );
}

silahkan pilih mana yang anda sukai, semoga berguna...

Widget Recent Post Dengan Thumbnail Tooltips

Jika blog Anda memiliki posting yang banyak dan Anda ingin membantu pengunjung Anda untuk menemukan posting terbaru Anda dengan cepat maka recent post sangat membantu. Seperti yang telah Anda lihat di beberapa blog milik blogger lain. biasanya widget ini ditempatkan dalam sidebar blog. Widget recents post ini dapat menampilkan posting terbaru dengan Thumbnail dan garis sebagai tooltip dengan gaya moueover pada thumbnail dengan efek memudar. langsung saja berikut ini cara memasangnya.

Demo Widget

Ikuti langkah-langkah yang sangat sederhana ini untuk menambahkan "Widget Recent Post Dengan Thumbnail Tooltips Untuk Blogger" di blog Anda.

Langkah 1: Login ke Blogger> tata letak> Elemen Halaman
Langkah 2: Klik "Tambah Gadget"
Langkah 3: Dari jendela pop-up, pilih HTML / JavaScript
Langkah 4: Copy dan paste kode di bawah ini

<style type="text/css">
#post-gallery {
  width:300px;
  margin:0px auto;
  font:normal 11px Arial,Sans-Serif;
  color:##000000
;
  padding:8px;
  background-color:#1BA1E2
;
  -webkit-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  -moz-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}
#post-gallery h2 {
  font:20px Arial,Sans-Serif;
  color:white;
  text-shadow:0px 3px 2px black;
  text-transform:uppercase;
  margin:2px 2px 2px;
  padding:7px 14px;
  background-color:#000000;
  text-align: center;
}
#post-gallery .rp-item {
  float:left;
  display:inline;
  position:relative;
  margin:2px;
  padding:0px 0px;
  background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuki2h4oDPdwHlvsCi8LnHotI29M1W2nxL3cyzZU3vaPm0Ni7XYjIVwjZWg4v4arHEeXzw-FidiNWm1AFvC1LeUQCUY37AKldbgib8sIUOg8yYAYrk5U66AS7oBJa3b9dXsw6JjslwTv6a/s48/Bloggerheroe.comloading.gif') no-repeat 50% 50%;
  width:72px;
  height:72px;
}
#post-gallery .rp-item img {
  width:72px;
  height:72px;
  border:none !important;
  margin:0px 0px !important;
  padding:0px 0px !important;
  background:transparent !important;
  display:none;
}
#post-gallery .rp-item .rp-child {
  position:relative;
  top:10%!important;
  left:10%!important;
  z-index:1000;
  width:200px;
  background-color:white;
  border-top:5px solid #1BA1E2;
  -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  padding:10px 15px;
  overflow:hidden;
  word-wrap:break-word;
  display:none;
  opacity: 0.9;
}
#post-gallery .rp-item .rp-child h4 {
  font-size:12px;
  margin:0px 0px 5px;
  color:#1BA1E2;
}
#post-gallery .rp-item:hover .hidden {display:block;}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var rpTitle     = "Latest Post",       // Widget Title
    numposts    = 20,      // jumlah post yang tampil
    numchar     = 200,      // karakter deskripsi dalam tooltip
    rcFadeSpeed = 600,      // kecepatan efek pudar
    pBlank      = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr3GxoG_AfxDedNwWSdVuQs_i5SjDixHyyD4dERwQEfxXCX5TVHkn9jk_pl32t2W_jISiU73L0TlVdxBMWnYzLB8jdXlSWphAno5p_7oQqJbucr8Sno6F6PU57bt5TXr1wZxrY7Gb6BOoD/s100/no-img.png",      // gambar untuk posting tanpa gambar
    blogURL     = "http://defandaky.blogspot.com/";       // alamat blog
</script>
<script src="http://dl.dropbox.com/u/81212926/Recent%20Post%20Thumbnail-blogger-heroe.js" type="text/javascript"></script>

kustomisasi

Ganti http://defandaky.blogspot.com/ dengan url blog Anda.
numposts adalah jumlah thumbnail / posting yang ingin ditampilkan.
numchar adalah jumlah karakter dalam tooltip deskripsi.
rcFadeSpeed adalah kecepatan efek memudar.

Sekarang simpan widget dan periksa blog Anda. Jika Anda menghadapi masalah atau kesulitan memasang widget ini, kirimkan kesulitan Anda dalam komentar.

Sosial Subscribe Wordpress Untuk Blogger

Hari ini saya berbagi untuk Anda Widget Berlangganan Sosial Sederhana Gaya Wordpress Untuk Blogger. Saya yakin bahwa ini akan menggoda para pembaca Anda untuk melihat Anda di fb page atau twitter land mark. Ini merupakan Gaya Widget Berlangganan Sosial WordPress + Fan page. Widget ini juga akan menanamkan Google mark up penulis di blog Anda sehingga Google gambar profil akan ditampilkan di Google ketika orang mencari situs Anda. Ikuti langkah-langkah di bawah ini untuk menambahkan widget ini ke blog Anda.

Bagaimana menambahkan Widget Berlangganan Sosial

Langkah 1-Pergi ke Blogger Dashboard
Langkah 2-Tata Letak-> Tambah elemen-> Html / java Script.
Langkah 3-Paste kode di bawah ini ke bagian isi

<br />
<style type="text/css">.btnt-chronicl-social {  width: 320px;  margin: -10px;  } .btnt-chronicl-social ul {  margin: 0;  padding: 0;  } .btnt-chronicl-social ul li {  list-style:none;   padding: 0; text-transform: none; } .btnt-chronicl-social ul li a {   color: #fff;   display:block;  } .btnt-chronicl-social ul li a:hover {  color: #c9c9c9;  background-color: #333;   } .btnt-chronicl-social ul li .rss { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12; background-size: 20px; padding: 17.5px 45px; } .btnt-chronicl-social ul li .twitter { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE; background-size: 20px; padding: 17.5px 45px;} .btnt-chronicl-social ul li .facebook { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998; background-size: 20px; padding: 17.5px 45px; } .btnt-chronicl-social ul li .google { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937; background-size: 20px; padding: 17.5px 45px; } .btnt-chronicl-social ul li .linkedin { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png") no-repeat scroll 10px center #3692C3; background-size: 20px; padding: 17.5px 45px; } </style>
<div class="btnt-chronicl-social">
<ul>
<li><a class="rss" href="http://feeds.feedburner.com/url feed anda">Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://url twitter anda">Follow me on Twitter</a></li>
<li><a class="facebook" href="https://url facebook anda">Find me on Facebook</a></li>
<li><a class="google" href="https://url google anda">Join me on Google+</a></li>
<li><a class="linkedin" href="http://url linkein anda">Connect with me on LinkedIn</a></li>
</ul>
</div>
<p>

Langkah 4-Save Html / java script.

Itu saja ... Pergi ke halaman blog Anda dan lihat apakah muncul atau tidak .... Jangan lupa untuk menggunakan kotak komentar untuk menyampaikan pikiran Anda yang berharga ...

Widget tabview dengan jQuery dan CSS

Tab view adalah salah satu widget yang cukup berguna terutama untuk menghemat halaman blog anda, Widget ini sifatnya seperti menyembunyikan widget yang kemudian bisa tampil kembali jika kita mengkliknya. jika blog anda memiliki banyak gadget sebaiknya gunakan menu tabview ini untuk sedikit mengurangi tempat pada halaman blog anda yang terpakai. langsung saja berikut ini cara membuat menu tabview dengan jQuery dan CSS

1. Masuk Dashboard Blogger klik > Tata letak > Elemen Halaman.

2. Klik "Tambah Widget" lalu pilih "HTML / Javascript".

3. Paste seluruh kode berikut dalam widget.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

(Catatan: Jika Anda sudah menggunakan script jQuery pada template Anda, hapus saja kode seperti diatas.)

<style>
#tabbed_box_1 {margin: 0px auto 0px auto;width:300px;}
.tabbed_box h4 {font-family:Arial, Helvetica, sans-serif;font-size:23px;color:#ffffff;letter-spacing:-1px;margin-bottom:10px;}
.tabbed_box h4 small {color:#e3e9ec;font-weight:normal;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;text-transform:uppercase;position:relative;top:-4px;left:6px;letter-spacing:0px;}
.tabbed_area {border:1px solid #494e52;background-color:#636d76;padding:8px;}
ul.tabs {margin:0px; padding:0px;margin-top:5px;margin-bottom:6px;}
ul.tabs li {list-style:none;display:inline;}
ul.tabs li a {background-color:#464c54;color:#ffebb5;padding:8px 14px 8px 14px;text-decoration:none;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;text-transform:uppercase;border:1px solid #464c54;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho11nmi4IARjKTuTFuyJkjHzWPyFf9C6ei7ghim414oiavO3Zix4R8xbxWcgKp6fdPIdnF0XpaHGhKKjMwYihtB-AGSqwkcOzoM3x6EHAd1ls-usmH_mN3cr3WVGsNldcADaIn3PGgPpc/s1600/tab_off.jpg); background-repeat:repeat-x;background-position:bottom;}
ul.tabs li a:hover {background-color:#2f343a;border-color:#2f343a;}
ul.tabs li a.active {background-color:#ffffff;color:#282e32;border:1px solid #464c54;border-bottom: 1px solid #ffffff;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgboDZIY0vkSpWlsfDsY1CNQuH58cHi2CsfR9s26SjtukFW59cgbuUaCelMpBy4h4phTKHKyf6IhfNPdf3QcMMWwqzQlam-B6nkX2KTughq_WYuK_vDt6rFTleQoWlmsxMWBrajx__WI8M/s1600/tab_on.jpg);background-repeat:repeat-x;background-position:top; }
.content {background-color:#ffffff;padding:10px;border:1px solid #464c54;font-family:Arial, Helvetica, sans-serif; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2y5cP-eeCZz7ueanVUElMjYGgyVtEDSgY87pluLfaP6wVylVE6oTzSU4qIbaaaSUZK-cMsQIKRLUIKsdVAWfwjiaSKdHE6n46DT1nqsBsgmuFjgjWrWWLdSmACKyP7MvJXjBOVMZaODQ/s1600/content_bottom.jpg);background-repeat:repeat-x;background-position:bottom;}
#content_2, #content_3 { display:none; }
.content ul {margin:0px;padding:0px 20px 0px 20px;}
.content ul li {list-style:none;border-bottom:1px solid #d6dde0;padding-top:15px;padding-bottom:15px;font-size:13px;}
.content ul li:last-child { border-bottom:none;}
.content ul li a {text-decoration:none;color:#3e4346;}
.content ul li a small {color:#8b959c;font-size:9px;text-transform:uppercase;font-family:Verdana, Arial, Helvetica, sans-serif;position:relative;left:4px;top:0px;}
.content ul li a:hover {color:#a59c83;}
.content ul li a:hover small {color:#baae8e;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script><script>
// When the document loads do everything inside here ...
$(document).ready(function(){
// When a link is clicked
$("a.tab").click(function () {
// switch all tabs off
$(".active").removeClass("active");
// switch this tab on
$(this).addClass("active");
// slide all content up
$(".content").slideUp();
// slide this content up
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
</script>
<div id="tabbed_box_1" class="tabbed_box">
<div class="tabbed_area">
<ul class="tabs">
<li><a href="javascript:void(0);" title="content_1" class="tab active">Tab 1</a></li>
<li><a href="javascript:void(0);" title="content_2" class="tab">Tab 2</a></li>
<li><a href="javascript:void(0);" title="content_3" class="tab">Tab 3</a></li>
</ul>
<div id="content_1" class="content">

...isi tab view yang anda inginkan...

</div>
<div id="content_2" class="content">

...isi tab view yang anda inginkan...
 
</div>
<div id="content_3" class="content">

...isi tab view yang anda inginkan...

</div>
<span style="color:#ddd; font-weight:bold; font-family:arial; font-size:11px;">Widget by: <a style="color:#f7f7f7; font-weight:bold" href="http://defandaky.blogspot.com/">Dafiin Blog</a></span>
</div>

4. Ganti Tab 1, Tab 2, Tab dan 3 dengan teks Anda sendiri.

5. Ganti ...isi tab view yang anda inginkan... dengan konten Anda sendiri.

6. Simpan widget Anda.

Jika Anda mencari tiga widget Recent Posts, Random Posts juga Popular Posts widget menjadi satu bersama-sama seperti yang ditunjukkan pada screenshot di bawah ini, silahkan gunakan kode berikut:

<style>
/* Tabbed Menu CSS by defandaky.com */
 #tabbed_box_1 {margin: 0px auto 0px auto;width:300px;}
.tabbed_box h4 {font-family:Arial, Helvetica, sans-serif;font-size:23px;color:#ffffff;letter-spacing:-1px;margin-bottom:10px;}
.tabbed_box h4 small {color:#e3e9ec;font-weight:normal;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;text-transform:uppercase;position:relative;top:-4px;left:6px;letter-spacing:0px;}
.tabbed_area {border:1px solid #494e52;background-color:#636d76;padding:8px;}
ul.tabs {margin:0px; padding:0px;margin-top:5px;margin-bottom:6px;}
ul.tabs li {list-style:none;display:inline;}
ul.tabs li a {background-color:#464c54;color:#ffebb5;padding:8px 14px 8px 14px;text-decoration:none;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;text-transform:uppercase;border:1px solid #464c54;background-image:url(http://nettuts.s3.amazonaws.com/001_Tabbed/site/images/tab_off.jpg); background-repeat:repeat-x;background-position:bottom;}
ul.tabs li a:hover {background-color:#2f343a;border-color:#2f343a;}
ul.tabs li a.active {background-color:#ffffff;color:#282e32;border:1px solid #464c54;border-bottom: 1px solid #ffffff;background-image:url(http://nettuts.s3.amazonaws.com/001_Tabbed/site/images/tab_on.jpg);background-repeat:repeat-x;background-position:top; }
.content {background-color:#ffffff;padding:10px;border:1px solid #464c54;font-family:Arial, Helvetica, sans-serif; background-image:url(http://nettuts.s3.amazonaws.com/001_Tabbed/site/images/content_bottom.jpg);background-repeat:repeat-x;background-position:bottom;}
#content_2, #content_3 { display:none; }
.content ul {margin:0px;padding:0px 20px 0px 20px;}
.content ul li {list-style:none;border-bottom:1px solid #d6dde0;padding-top:15px;padding-bottom:15px;font-size:13px;}
.content ul li:last-child { border-bottom:none;}
.content ul li a {text-decoration:none;color:#3e4346;}
.content ul li a small {color:#8b959c;font-size:9px;text-transform:uppercase;font-family:Verdana, Arial, Helvetica, sans-serif;position:relative;left:4px;top:0px;}
.content ul li a:hover {color:#a59c83;}
.content ul li a:hover small {color:#baae8e;}

/* Recent, Random & Popular Posts CSS by defandaky.com */
#featured { color:#000;  margin: 1px 5px; line-height:1.5em;  font-size:13px}
#featured ol{ margin:0 15px; padding:0}
#featured li{border-bottom: 1px dashed rgba(0, 0, 0, 0.1);font-family: "Droid Sans",arial,sans-serif;font-weight:normal;font-size: 12px;line-height: 1.2em; margin:0 5px; padding:0 0 0.25em 0px}
#featured ol li a{color:#333; text-decoration:none}
#featured ol li a:hover{color:#dc0771; text-decoration:none}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
// When the document loads do everything inside here ...
$(document).ready(function(){
// When a link is clicked
$("a.tab").click(function () {
// switch all tabs off
$(".active").removeClass("active");
// switch this tab on
$(this).addClass("active");
// slide all content up
$(".content").slideUp();
// slide this content up
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
</script>
<div id="tabbed_box_1" class="tabbed_box">
<div class="tabbed_area">
<ul class="tabs">
<li><a href="javascript:void(0);" title="terbaru" class="tab active">Recent</a></li>
<li><a href="javascript:void(0);" title="pilihan" class="tab">Random</a></li>
<li><a href="javascript:void(0);" title="populer" class="tab">Popular</a></li>
</ul>
<div id="content_1" class="content">
<script type="text/javascript">
function showrecentposts(json) {

  for (var i = 0; i < numposts; i++) {
    var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }
    posttitle = posttitle.link(posturl);
    var readmorelink = "(more)";
    readmorelink = readmorelink.link(posturl);
    var postdate = entry.published.$t;
    var cdyear = postdate.substring(0,4);
    var cdmonth = postdate.substring(5,7);
    var cdday = postdate.substring(8,10);
    var monthnames = new Array();
    monthnames[1] = "Jan";
    monthnames[2] = "Feb";
    monthnames[3] = "Mar";
    monthnames[4] = "Apr";
    monthnames[5] = "May";
    monthnames[6] = "Jun";
    monthnames[7] = "Jul";
    monthnames[8] = "Aug";
    monthnames[9] = "Sep";
    monthnames[10] = "Oct";
    monthnames[11] = "Nov";
    monthnames[12] = "Dec";
    if ("content" in entry) {
      var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
      var postcontent = entry.summary.$t;}
    else var postcontent = "";
    var re = /<\S[^>]*>/g; 
    postcontent = postcontent.replace(re, "");

    document.write(""+posttitle+"");
    if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);

    if (showpostsummary == true) {

      if (postcontent.length < numchars) {
          document.write('');
         document.write(postcontent);
          document.write('');}
      else {
          document.write('');
         postcontent = postcontent.substring(0, numchars);
         var quoteEnd = postcontent.lastIndexOf(" ");
         postcontent = postcontent.substring(0,quoteEnd);
         document.write(postcontent + '...' + readmorelink);
          document.write('');}
}
}
}
</script>
<script style='text/javascript'>var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;</script>
<div id="featured">
<script src='http://defandakyw8.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts'></script>
<span id=rcw-cr><a href="http://defandaky.blogspot.com/search/label/Widget?max-results=10">Lihat Widget</a></span><style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:9px;padding-top:7px;display:block;} </style>
</div>
</div>
<div id="content_2" class="content">

<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=10;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ol>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ol>');}
</script>
<div id="featured">
<script src="http://defandakyw8.blogspot.com/feeds/posts/default?orderby=updated&alt=json-in-script&start-index=1&max-results=500&callback=randomposts" type="text/javascript"></script>
<span id=rcw-cr><a href="http://defandaky.blogspot.com/search/label/Widget?max-results=10">Lihat Widget</a></span><style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:9px;padding-top:7px;display:block;} </style>
</div>
 
</div>
<div id="content_3" class="content">
<script language='JavaScript'>
aBold = true;
numposts=200;
maxshowresult=5;
home_page = "http://defandakyw8.blogspot.com";
</script>
<script type="text/javascript">
/*
 * Popular post or most comment for blogger
*/

var postTitlear=new Array();var postUrlar=new Array();var postCommentar=new Array();var totalpost;document.write("<ul>");function showrecentposts(j){var a=j.feed.entry.length;totalpost=a;for(var f=0;f<a;f++){var h=j.feed.entry[f];var c=h.title.$t;var b;var g;if(f==j.feed.entry.length){break}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];break}}c=(aBold)?"<b>"+c+"</b>":c;postTitlear.push(c);postUrlar.push(g);postCommentar.push(b)}sortPosts();for(var f=0;f<maxshowresult;f++){var e='<li><a href="'+postUrlar[f]+'" class="recent-link">'+postTitlear[f]+" ("+postCommentar[f]+" comments)</a>";document.write(e)}}function sortPosts(){function c(d,f){var e=postTitlear[d];postTitlear[d]=postTitlear[f];postTitlear[f]=e;var e=postUrlar[d];postUrlar[d]=postUrlar[f];postUrlar[f]=e;var e=postCommentar[d];postCommentar[d]=postCommentar[f];postCommentar[f]=e}for(var b=0;b<postTitlear.length-1;b++){for(var a=b+1;a<postTitlear.length;a++){if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');document.write('<br/><span id=rcw-cr><a href="http://defandaky.blogspot.com/">Dafiin Blog</a></span><style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:9px;padding-top:7px;display:block;} </style>');
</script>
</div>
<span style="color:#ddd; font-weight:bold; font-family:arial; font-size:11px;">Widget by: <a style="color:#f7f7f7; font-weight:bold" href="http://defandaky.blogspot.com/">Dafiin Blog</a></span>
</div></div>

Membuat perubahan setiap tab.

Recent Posts : Jika Anda ingin menampilkan tanggal, ringkasan pos dan jumlah posting silahkan mengubah nilai-nilai seperti yang ditunjukkan dalam warna merah untuk tab recent post.

Random Posts : Ubah numofpost = 10; menjadi sesuai kebutuhan anda berapa banyak random post yang ingin ditampilkan.

Popular Posts : Tampilkan posting populer kemudian mengubah maxshowresult = 5 sebagai acara dalam warna ungu untuk setiap tab untuk populer posting.

Ubah semua url http://defandaky.blogspot.com dengan link blog anda.

Semoga berguna dan bermanfaat