Cara Membuat Widget Artikel Terbaru Dengan Tooltip

Cara Membuat Widget Artikel Terbaru Dengan Tooltip - Buat sobat blogger pengguna blogspot pasti sudah tidak asing lagi dengan widget artikel terbaru ini, pada postingan saya sebelumnya saya posting cara membuat widget artikel terbaru. Widget ini biasanya diletakkan di sidebar blog untuk menampilkan artikel terbaru blog sobat. Tips blog kali ini yang akan saya share adalah memodifikasi tampilan widget artikel terbaru ini dengan memiliki efek tooltip. Seperti apa penampilanya, silahkan lihat live demo nya : DEMO

Cara Membuat Widget Artikel Terbaru Dengan Tooltip :
Untuk membuat nya sangat mudah sob, tinggal masukkan kode dibawah ini ke add gadget HTML blog sobat :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
#mini-gallery {
  width:380px; /* Tentukan lebar yang tepat sesuka hati atau buang saja deklarasi ini */
  margin:0px auto;
  font:normal 11px Verdana,Arial,Sans-Serif;
  color:#494848;
  padding:8px;
  background-color:#7E7E7E;
  -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);
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}

#mini-gallery h2 {
  font:normal 14px Impact,Arial,Sans-Serif;
  color:#1CAA01;
  text-shadow:0px 1px 0px black;
  text-transform:uppercase;
  margin:2px 2px 2px;
  padding:7px 14px;
  background-color:#292929;
}

#mini-gallery .rp-item {
  float:left;
  display:inline;
  position:relative;
  margin:2px;
  padding:0px 0px;
  background:#fff url('http://reader-download.googlecode.com/svn/trunk/images/loading-white.gif') no-repeat 50% 50%;
  width:72px;
  height:72px;
}

#mini-gallery .rp-item img {
  width:72px;
  height:72px;
  border:none !important;
  margin:0px 0px !important;
  padding:0px 0px !important;
  background:transparent !important;
  display:none;
}

#mini-gallery .rp-item .rp-child {
  position:absolute;
  top:95%;
  left:95%;
  z-index:1000;
  width:200px;
  background-color:white;
  border-top:4px solid #00C200;
  -webkit-box-shadow:0px 0px 3px rgba(0,0,0,0.7);
  -moz-box-shadow:0px 0px 3px rgba(0,0,0,0.7);
  box-shadow:0px 0px 3px rgba(0,0,0,0.7);
  padding:10px 15px;
  overflow:hidden;
  word-wrap:break-word;
  display:none;
}

#mini-gallery .rp-item .rp-child h4 {
  font-size:12px;
  margin:0px 0px 5px;
  color:#09AC0F;
}

#mini-gallery .rp-item:hover .hidden {display:block;}
</style>
<script type="text/javascript">
var rpTitle     = "Artikel Terbaru", // Tentukan judul widget
    numposts    = 20,                // Tentukan jumlah thumbnail/posting
    numchar     = 300,               // Tentukan jumlah karakter pada deskripsi tooltip
    rcFadeSpeed = 600,               // Tentukan kecepatan efek .fadeIn() saat tooltip tampil
    pBlank      = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg", // Thumbnail cadangan jika posting yang tampil tidak memiliki gambar
    blogURL     = "http://mkr-site.blogspot.com"; // Alamat blogmu
</script>
<script src="https://ivyth.googlecode.com/svn/js/rp-m-gallery-dte.js" type="text/javascript"></script>

Note :

• Ganti URL http://mkr-site.blogspot.com dengan alamat blog sobat.

• rpTitle untuk judul dari widget

• Tentukan jumlah posting yang ditampilkan (gambar mini) pada variabel numposts, tentukan juga jumlah karakter/ringkasan artikel yang akan muncul pada variabel numchar.

• Kode yang Saya beri garis bawah adalah JQuery. Jika template Anda sudah dilengkapi dengan JQuery, buang kode itu dari widget.

• Klik Simpan dan lihat hasilnya. 

Cukup sekian sob artikel Cara Membuat Widget Artikel Terbaru Dengan Tooltip.

Semoga bermanfaat.

Script : www.mkr-site.blogspot.com

Cara Membuat Social Icon Dengan CSS3

Tips blog kali ini bisa meningkatkan jumlah pelanggan social media sobat. Bukan tidak mungkin, karena tombol social icon ini penampilan nya sangat menarik yang membuat kita gatal untuk mengkliknya..hehee..Sesuai dengan judulnya Cara Membuat Social Icon Dengan CSS3, widget social ini memang menggunakan CSS3 yang membuat penampilanya menjadi sangat menarik. Untuk Live demo nya coba lihat dibawah ini :

Bagaimana sob ? keren gak ?..Kalau sobat tertarik ingin membuat nya, cara nya sangat mudah. Silahkan copy paste kode dibawah ini ke add gadget HTML blog sobat :

<style>p#OW_socialicons img {
 /* Spinning Social Icons Widget By Oto Website */
    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}

p#OW_socialicons img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

/* Spinning Social Icons Widget By Oto Website */
</style> 



<center><p id="OW_socialicons">
    <a href="http://www.facebook.com/kimzaqi/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjooYaApEjiyTYC1p7jv5RMls4FDvsVzdHBzZ_3V2teY8_YnxqHTAk6dLqwWNyKw5WtQX3_9l5Qva8TnSGIpXMi0ntlJpKqeAnX2YaVFXC_Hov33zSu-acoQ8ob7wgPTaaMdqBsTmJNiA/s1600/otowebsite.blogspot.com-facebook.png" /></a>
    <a href="http://www.twitter.com/kimzaqi/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhklwPPyJBGXmUQv9-yuNqmO4KXwyERXURiwf5dQvvGZg_Gfdi8oxBb6cyA4cpfwmnb-B6N1MhnfpZrju4bX8wM2lvG8jH8UXu7J4r-VCkd0YF4Tb9k63xVXhqN2nAlm2SlUQdYBCko9Q/s1600/otowebsite.blogspot.com-twitter.png" /></a>
    <a href="https://plus.google.com/115780777398536909642">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVtjFQ30yEWjG2Vbg2D6ggPozcIbN2dnly_wrqrHFCfFo5X60ym1gZ14M_WdHduYePK5hlzDaB5Xq1Axey9bpwoeLb_635upTVkZc6lmR83-X2hkGxof4-ANYGDfwETRV1EdzeCWf-bQ/s1600/otowebsite.blogspot.com-google_plus.png" /></a>
    <a href="http://www.feeds.feedburner.com/kimzaqi/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijon7-np0Hc4szWZeP9sJ1Wnvqm18MqndURk9YQ-vZRfY3eVcFck1F7B_dKDFpMR5hPedfZfy_qGzpzYvyfptgcE6CsisXHzJ7ED76tGBgh4XEX0mcR8X8CQMoTieZlB3HYh0FopfjOw/s1600/otowebsite.blogspot.com-rss.png" /></a>
    <a href="https://www.youtube.com/kimzaqi/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkTbHCAosdm1POcF3oaZA_ZkrChvD2ZjBxBaLB964HRzsVi3As7CoW_w3X7yeGunLzM3rScbHqLIhmlx-xmxNzb1CaJN617UYa9PwXhkFR2KKAX9RdisNlOjs7KKYK2w1Huth9om6TkQ/s1600/otowebsite.blogspot.com-youtube.png" /></a>
</p></center>

Note : Silahkan di ganti URL social media yang saya beri warna diatas, dengan milik sobat sendiri.

Cukup sekian sob. Terima kasih telah membaca artikel Cara Membuat Social Icon Dengan CSS3.

Semoga bermanfaat.




Script : www.otowebsite.blogspot.com

Radio Site..

Klik Aja Play Untuk Mendengarkan Lagunya..!!

▼ Kalau Kami Tidak Online,, Silahkan Anda Request Lagunya Ke Nomor Hp Kami ▼

 Dj - Van - 085278226505 

 Dj - Dzhull - 085211540664 

 Dj - Dharma - 087792595540

Cara Membuat Menu Di Blog - Ribbon CSS3

Selamat pagi sobat blogger tepat pukul 02:38, pada pagi kali ini sambil begadang karena belum bisa tidur, saya akan berbagi tips blog Cara Membuat Menu Di Blog - Ribbon CSS3. Pada postingan saya sebelumnya adalah Cara Membuat Menu Di blog Seperti Google. Ribbon Menu adalah Sebuah Menu navigasi yang berbentuk atau menyerupai sebuah Pita dan pembentukannya tidak menggunakan gambar  dan hanya menggunakan Kode CSS3 sehingga membuat Ribbon Menu ini sangatlah Efisien dan ringan untuk digunakan. Lebih jelasnya silahkan sobat lihat live demo nya : DEMO. 

Silahkan Simak Dibawah ini untuk Cara Membuatnya.

•     Pertama Silahkan Sobat Masuk atau Login Ke Akun Blogger.
•     Cari Kode ]]></b:skin> pada Kode HTML Tempalte Sobat.
•     Bila Sudah ketemu silahkan taruh semua kode berikut tepat diatasnya.

.ribbon {
display:inline-block;
}
.ribbon:after, .ribbon:before {
margin-top:0.5em;
content: "";
float:left;
border:1.5em solid #01978C;
}
.ribbon:after {
border-right-color:transparent;
}
.ribbon:before {
border-left-color:transparent;
}
.ribbon a:link, .ribbon a:visited {
color:#000;
text-decoration:none;
float:left;
height:3.5em;
overflow:hidden;
}
.ribbon span {
background:#01978C;
display:inline-block;
line-height:3em;
padding:0 1em;
margin-top:0.5em;
position:relative;
-webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */
-moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */
-ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */
-o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */
transition: background-color 0.2s, margin-top 0.2s;
}
.ribbon a:hover span {
background:#FFD204;
margin-top:0;
}
.ribbon span:before {
content: "";
position:absolute;
top:3em;
left:0;
border-right:0.5em solid #9B8651;
border-bottom:0.5em solid #01978C;
}
.ribbon span:after {
content: "";
position:absolute;
top:3em;
right:0;
border-left:0.5em solid #9B8651;
border-bottom:0.5em solid #01978C;
}

Selanjutnya Cari Kode <body> dan letakkan Kode Berikut Dibawahnya.

<div class='ribbon'>
<a href='#'><span>Home</span></a>
<a href='#'><span>Software</span></a>
<a href='#'><span>Game</span></a>
<a href='#'><span>Tutorial</span></a>
<a href='#' ><span>About</span></a>
<a href='#'><span>Contact</span></a>
</div>

Note : Kode ini bisa juga sobat letakkan di add gadget HTML.


Sekarang Simpan Template Sobat dan Lihat Hasilnya.

Cukup Sekian sob Tutorial Cara Membuat Menu Di Blog - Ribbon CSS3.

Semoga bermanfaat.

Script by : www.filiex.com

Cara Membuat Menu Di blog Seperti Google

Satu lagi nih sob koleksi cara membuat menu di blogspot. Kalau sebelumnya saya posting Cara Membuat Menu D tree Seperti Folder Windows, kali ini saya akan share Cara Membuat Menu Di blog Seperti Google. Menu yang satu ini tampilanya 90% mirip seperti menu mbah google, dan yang kerenya lagi sudah dilengkapi dengan efek fixed scroll.

Untuk membuat menu navigasi ala google ini, ada tiga script yang harus sobat masukan kedalam template blogger, diantaranya adalah kode Java script, kode CSS Dan kode html sebagai kontentnya. Untuk lebih jelasnya, silahkan sobat lihat live demonya : DEMO

Langsung saja, berikut langkah-langkah cara membuatnya :

Pertama : Sobat masukkan kode dibawah ini, tepat diatas </head>
 

<script src='http://cing-ss.googlecode.com/files/jquery-1.4.2.min.js' type='text/javascript'/>

<script src='http://cing-ss.googlecode.com/files/jquery.google_menu.js' type='text/javascript'/>

<script>

$('document').ready(function(){

$('.menu').fixedMenu();

});

</script>

Kedua : Masukkan kode berikut tepat diatas  ]]></b:skin>
 

.menu{

position:fixed;

top:0;

left:0;

width:100%;

font:13px/27px Arial,sans-serif;

color:#3366cc;

height:30px;

background:#2D2D2D;

}

.menu a:hover{

background-color:#676767;

color:#CCCCCC;

}

.menu a{

text-decoration:none;

padding:6px 8px 7px;

color:#CCCCCC;

outline:none;

}

.menu ul{

list-style:none;

margin:0;

padding:0 0 0 10px;

}

.menu ul li{

padding:0;

float:left;

}

.menu ul li ul li{

padding:0;

float:none;

margin:0 0 0 0px;

width:100%;

}

.menu ul li ul{

position:absolute;

border:1px solid #C3D1EC;

-webkit-box-shadow:0 1px 5px #CCCCCC;

-moz-box-shadow:0 1px 5px #CCCCCC;

box-shadow:0 1px 5px #CCCCCC;

margin-top:-1px;

display:none;

padding:0px 16px 0px 0;

}

.active ul{

display:block !important;

}

.single ul{

display:block !important;

}

.active a{

background-color:white;

border:1px solid #C3D1EC;

border-bottom:0;

-webkit-box-shadow:0 -1px 5px #CCCCCC;

-moz-box-shadow:0 -1px 5px #CCCCCC;

box-shadow:0 -1px 5px #CCCCCC;

display:block;

height:29px;

padding:0 8px 0 8px;

position:relative;

z-index:1;

color:#3366CC;

}

.current a{

background-color:#2D2D2D;

border-top:2px solid #DD4B39;/*garis warna merah diatas*/

border-bottom:0;

display:block;

height:25px;

padding:0 8px 0 8px;

position:relative;

z-index:1;

color:#FFFFFF;

font-weight:bold;

}

.active a:hover{

background-color:white;

color:#3366CC;

}

.active ul a:hover{

background-color:#e4ebf8;

}

.active ul a{

border:0 !important;

-webkit-box-shadow:0 0 0 #CCCCCC;

-moz-box-shadow:0 0 0 #CCCCCC;

box-shadow:0 0 0 #CCCCCC;

border:0;

width:100%;

}

.arrow{

border-color:#C0C0C0 transparent white;

border-style:solid dashed dashed;

margin-left:5px;

position:relative;

top:10px;

}

.mid-line{

background-color:#FFF;

border-top:1px solid #e5e5e5;

font-size:0;

}

Ketiga : Masukkan kode berikut dibawah  Tag pembukaan kode outer-wrapper 
 

<div class='menu'>

 <ul>

   <li class='single-link'><!-- Using class="single-link" for links with no dropdown -->

  <a href='http://plus.google.com' target='_blank'>+You</a>

  </li>

        <!-- Using class="current" for the link of the current page -->

      <li class='current'>

  <a href='http://www.google.co.in/' target='_blank'>Web</a>

  </li>

   <li class='single-link'><!-- Using class="single-link" for links with no dropdown -->

  <a href='http://orkut.com' target='_blank'>Orkut</a>

  </li>

   <li class='single-link'><!-- Using class="single-link" for links with no dropdown -->

  <a href='http://gmail.com' target='_blank'>Gmail</a>

  </li>

   <li class='single-link'><!-- Using class="single-link" for links with no dropdown -->

  <a href='https://www.google.com/calendar' target='_blank'>Calendar</a>

  </li>

   <li class='single-link'><!-- Using class="single-link" for links with no dropdown -->

  <a href='https://docs.google.com' target='_blank'>Documents</a>

  </li>

   <li class='single-link'><!-- Using class="single-link" for links with no dropdown -->

  <a href='http://picasaweb.google.co.in/home' target='_blank'>Photos</a>

  </li>

   <li>

  <a href='#'>More<span class='arrow'/></a>

        <!-- Drop Down menu Items -->

<ul>

   <li><a href='#'>Reader</a></li>

   <li><a href='#'>Sites</a></li>

   <li><a href='#'>Groups</a></li>

   <li><a href='http://www.youtube.com'>YouTube</a></li>

   <li>

   <div class='mid-line'>

   </div>

   </li>

   <li><a href='#'>Images</a></li>

   <li><a href='#'>Maps</a></li>

   <li><a href='http://translate.google.co.in/'>Translate</a></li>

   <li><a href='http://books.google.co.in'>Books</a></li>

   <li><a href='http://scholar.google.co.in/'>Scholar</a></li>

   <li><a href='http://blogsearch.google.co.in'>Blogs</a></li>

   <li>

   <div class='mid-line'>

   </div>

   </li>

   <li><a href='http://www.google.co.in/intl/en/options/'>even more &gt;&gt;</a></li>

   <li>

   <div class='mid-line'>

   </div>

   </li>

  </ul>

  </li>

 </ul>

</div>

Note : Silahkan sobat ganti setiap link yang ada dengan link pada blog sobat sendiri.

Cukup sekian artikel Cara Membuat Menu Di blog Seperti Google.

Semoga bermanfaat.

Source code : loefa-cebook.blogspot.com

Cara Membuat Scrolling Fixed

Tips blog kali ini saya akan share Cara Membuat Scrolling Fixed. Scrolling fixed ini salah satu efek konten yang banyak digunakan pada website dengan desain  modern, fungsinya adalah memberi efek terbawa, saat halaman ditarik kebawah.

Contoh situs yang menggunakan scrolling fixed adalah facebook dan blogger, jika sobat sering masuk ke facebook, saat sobat menarik halaman profile  kebawah, ada sebuah konten yang seolah tertarik kebawah, mengikuti layar. Begitu juga dengan blogger, blogger menggunakan efek scrolling fixed di dashboard pada bagian header, saat sobat menarik halaman dashboar blogger kebawah, maka bagian headernya seolah terangkat dan terseret kebawah. Untuk Live demonya silahkan sobat lihat disi : DEMO.

Lalu bagaimana cara membuatnya ? jika sobat tertarik untuk membuat nya silahkan ikuti langkah berikut : Untuk membuat efek scrolling fixed ini, sobat tinggal masuk ke halaman edit html blogger, dan memasukan kode javascript berikut tepat diatas penutup tag head </head>.

<script>

$(document).ready(function(){

/* loefa-cebook.blogspot.com scrolling fixed div start */

 var div = $('#header-wrapper');

    var lc = $(div).offset().top;

  

    $.event.add(window, "scroll", function() {

        var p = $(window).scrollTop();

        $(div).css('position',((p)>lc) ? 'fixed' : '');

        $(div).css('top',((p)>lc) ? '0px' : '');

  $(div).css('box-shadow',((p)>lc) ?'0px 0px 3px #222':'');

   

   

    });

  

});

</script>

Note :
Jika sobat ingin yang diberi efek ini pada menu navigasi blog bukan pada header, sobat tinggal mengganti “#header-wrapper” yang ada di kode javascript, dengan tag css menu navigasi, contoh “#menu”, jika sudah berhasil silahkan di save.

Cukup sekian tips blog kali ini, terima kasih telah membaca artikel Cara Membuat Scrolling Fixed.

Semoga bermanfaat

Source

Cara Membuat Popup Iklan dengan Tombol Close

Cara Membuat Popup Iklan dengan Tombol Close ini terinspirasi seperti youtube. Kalau sobat berkujung ke www.youtube.com, pas pertama kali masuk sobat akan disuguhi iklan popup dibawah header berukuran besar dengan tombol close, dan pastinya iklan tersebut membuat gatel jari kita untuk mengkliknya..hee..
Kalau sobat tertarik ingin membuat iklan popup seperti youtube itu, ikuti saja langkah-langkah dibawah ini, tapi hasilnya mungkin tidak 100% mirip, tergantung bagaimana sobat memodifikasinya.

Cara Membuat Popup Iklan dengan Tombol Close :

1. Sobat masukkan kode dibawah ini ke add gadget HTML, prosesnya saya balik untuk lebih meminimalisir kesalahan :

<div id="pb-box" class="mrpujiajadeh-popup">
<br /><span style="color: rgb(204, 0, 0);"></span><p align="right"><a href="#" class="close">
<br/><small><u>[x] Tutup Iklan</u></small></a></p>
<iframe vspace="0" frameborder="2" marginheight="100" marginwidth="100" readonly="true" height="400" src="http://beritamuslimsahih-ahlussunnah.blogspot.com/" hspace="10" scrolling="yes" width="100%" allowtransparency="true"></iframe>
</div>

<script type='text/javascript'>
$(document).ready(function() {
$('a.pb-window').click(function() {

//Getting the variable's value from a link
var pbBox = $(this).attr('href');

//Fade in the Popup
$(pbBox).fadeIn(300);

//Set the center alignment padding + border see css style
var popMargTop = ($(pbBox).height() + 24) / 2;
var popMargLeft = ($(pbBox).width() + 24) / 2;

$(pbBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});

// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);

return false;
});

// When clicking on the button close or the mask layer the popup closed
$('a.close, #mask').live('click', function() {
$('#mask , .mrpujiajadeh-popup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
});
</script>

Kode yang berwarna merah diatas, silahkan sobat ganti dengan kode script iklanya, bisa video,gambar dl.

2. Kemudian cari kode berikut:

    ]]></b:skin>

Jika sudah sobat temukan, tepat dibawahnya letakkan script jquery berikut:

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2' type='text/javascript'/> 

3. Setelah itu tepat diatas kode ]]></b:skin>,letakkan barisan css berikut:

#mask {
display: none;
background: #000;
position: fixed; left: 0; top: 0;
z-index: 10;
width: 100%; height: 100%;
opacity: 0.8;
z-index: 999;
}
.pb-popup{
display:none;
background: #333;
padding: 10px;
border: 2px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
box-shadow: 0px 0px 20px #999; /* CSS3 */
-moz-box-shadow: 0px 0px 20px #999; /* Firefox */
-webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */
border-radius:3px 3px 3px 3px;
-moz-border-radius: 3px; /* Firefox */
-webkit-border-radius: 3px; /* Safari, Chrome */
}
fieldset {
border:none;
}

4. Sebelum di save, sobat preview terlebih dahulu, kalau terlihat berhasil tinggal di save saja.

Bagaimana sob, keren kan iklan pop up melayang ini ?.
Sampai disini tutorial Cara Membuat Popup Iklan dengan Tombol Close.

Semoga bermanfaat.

Script by : www.pelajaran-blog.blogspot.com

Cara Membuat Menu D tree Seperti Folder Windows

Selamat pagi sobat blogger, pada postingan kali ini saya akan berbagi Cara Membuat Menu D tree Seperti Folder Windows. Menu yang satu ini adalah salah satu koleksi menu yang saya share melalui blog ini. Pada postingan sbelumnya saya share Cara Membuat Menu Blog Diatas Header. 
Menu D tree ini termasuk menu yang unik, karena tampilanya menyerupai folder pada windows explore, dan menu d tree ini cukup sulit lhoo untuk mencari panduanya di mbah google. Untuk live demonya saya tidak sediakan, tapi sobat bisa lihat tampilanya seperti gambar diatas.

Langsung saja, Cara Membuat Menu D tree :

1. Cari kode <head> 
2. Kemudian masukkan kode dibawah ini tepat dibawah kode diatas.

<link href='http://membuatgempar.net23.net/dtree.css' rel='StyleSheet' type='text/css'/>
<script src='http://membuatgempar.net23.net/dtree.js' type='text/javascript'/>

3. Save template
4. Sobat masuk ke bagian add gadget HTML, dan tambahkan kode dibawah ini pada add gadget HTML :

<div class="dtree">

<p><a href="javascript: d.openAll();"><img src="http://1.bp.blogspot.com/-RbQWnGW5bd8/UKJGKQD3f2I/AAAAAAAACmA/oLAHt0hhYUc/s200/pelajaran%2Bblog%2Bplus.gif" /><b>Buka</b></a> | <a href="javascript: d.closeAll();"><img src="http://2.bp.blogspot.com/-F6ylYYXiatg/UKJKASk86eI/AAAAAAAACnQ/XB9Ka_qHyO4/s200/pelajaran%2Bblog%2Bminus.gif" /><b>Tutup</b></a></p>
<script type="text/javascript">

<!--

d = new dTree('d');

d.add(0,-1,'Home','#');

d.add(1,0,'Menu 1')

d.add(3,1,'sub menu 1','');

d.add(10,3,'edit','#');

d.add(20,3,'edit','#');

d.add(30,3,'edit','#');

d.add(40,3,'edit','#');

d.add(50,3,'edit','#');

d.add(60,3,'edit','#');

d.add(70,3,'edit','#');

d.add(80,3,'edit','#');

d.add(90,3,'edit','#');

d.add(100,3,'edit');

d.add(110,3,'edit','#');

d.add(120,3,'edit','#');

d.add(5,1,'sub menu 2');

d.add(10,5,'edit','#');

d.add(20,5,'edit','#');

d.add(30,5,'edit','#');

d.add(40,5,'edit','#');

d.add(50,5,'edit','#');

d.add(60,5,'edit','#');

d.add(70,5,'edit','#');

d.add(80,5,'edit','#');

d.add(90,5,'edit','#');

d.add(2,0,'menu 2','','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');

d.add(10,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');

d.add(20,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');

d.add(20,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');

d.add(30,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');

d.add(40,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');

d.add(50,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');

d.add(60,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');

d.add(4,0,'menu 3','#','menu 3','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');

d.add(6,0,'menu 4','#','menu 4','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');

d.add(7,0,'menu 5','#','menu 5','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');

d.add(8,0,'menu 6','#','menu 6','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');

document.write(d);

//-->
</script>
</div>

**Keterangan:
Untuk tanda '#',sobat ganti dengan url tujuan misal http://.....
Sedang untuk kode yang saya beri nama 'edit',sobat rubah sesuai dengan keinginan,yang nantinya akan terbaca dalam menu dTree ini.

Okey, cukup sekian sob, terima kasih telah membaca artikel  Cara Membuat Menu D tree Seperti Folder Windows.

Semoga bermanfaat.

Cara Membuat Widget Artikel Terbaru

Cara Membuat Widget Artikel Terbaru ini saya dapat dari blog nya kang salman ( kucoba.com ). Menurut kang salman sih widget ini memakai JQuery dengan memiliki kelebihan-kelebihan sebagai berikut :

1.  Memiliki tampilan yang dinamis dan rapih.
2.  Memiliki Load yang cukup cepat
3.  Bisa di gunakan di Tab Menu atau New Window.
4.  Terdapat Informasi Jumlah komentar di masing-masing artikel yang di munculkan.
5.  Gambar/thumbails apik dan padat.
6.  dan masih banyak lagi deh yang jelas kang salman jamin sobat informasi maya bakal puas.

Nah buat sobat blogger yang tertarik memakai widget ini, silahkan ikuti caranya berikut ini :

Cara Membutnya :
1.  Login Ke Blogger
2.  Pilih Tata Letak / Rancangan
3.  Klik Tambah Widget/Gedget
4.  Pilih HTML/Javascript
5.  Paste-kan Kode di Bawah ini ke HTML/Javascript tadi.

<script language="JavaScript">imgr = new Array();imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";showRandomImg = true;boxwidth = 298;cellspacing = 8;borderColor = "#ffffff";bgTD = "#000000";thumbwidth = 40;thumbheight = 40;fntsize = 12;acolor = "#666";aBold = true;icon = " ";text = "comments";showPostDate = false;summaryPost = 40;summarFontsize = 10;summaryColor = "#666";icon2 = " ";numposts = 5;home_page = "http://asksalman19.blogspot.com/";</script><script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>

6. Simpan. dan lihat hasilnya.

NB : Didalam kotak kode tersebut, terdapat satu kode seperti di bawah ini :

    numposts = 5;

Yang di beri tanda merah adalah jumlah post yang akan di tampilkan. Jika sobat mengisi 5 maka widget ini akan menampilkan 5 artikel baru dst.

Okey cukup sekian tips blog kali ini  Cara Membuat Widget Artikel Terbaru.


Semoga Bermanfaat



Scrip by : www.kucoba.com

Cara Membuat Menu Blog Diatas Header

Sobat blogger, tips blog kali ini yang akan saya share adalah Cara Membuat Menu Blog Diatas Header. Pada postingan saya sebelumnya, saya share cara membuat floating menu vertikal.
Tips blog ini sengaja saya koleksi untuk keperluan saya sendiri, saya ingin membuat menu diatas header yang kemudian memiliki fixed scroll, tapi pada menu yang satu ini belum memiliki efek fixed scroll, dipostingan saya berikutnya akan saya share cara membuat efek fixed scroll nya. Siapa tahu sobat blogger tertarik untuk membuat menu diatas header, tinggal ikuti saja langkah-langkah dibawah ini.

1. Langkah pertama, Login ke blogger.com dengan akun anda
2. Pilih Edit HTML pada elemen Template anda
3. Cari kode ]]></b:skin>
4. Setelah ketemu, letakkan kode berikut ini di atasnya

#catmenucontainer{
height:33px;
width:962px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijZcGvqlmi7MHI8J1WA0btNOnWox-gFdTsxiVlQPttswoI1YyMH6yQDEu1IXtpe7iOVgA1jnM8hFarznWBhStnNCZTJ38FR7zN7mW5nczfXHBqnI6s5iQYEB9lspzbK27trzCSo8ZuUJu0/) repeat-x;
display:block;
padding:0px 0 0px 0px;
font-size:12px;
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
font-weight:normal;
border-top:1px solid #252424;
}


#catmenu{
margin: 0px;
padding: 0px;
width:962px;
background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijZcGvqlmi7MHI8J1WA0btNOnWox-gFdTsxiVlQPttswoI1YyMH6yQDEu1IXtpe7iOVgA1jnM8hFarznWBhStnNCZTJ38FR7zN7mW5nczfXHBqnI6s5iQYEB9lspzbK27trzCSo8ZuUJu0/) repeat-x;
height:33px;
}


#catmenu ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}


#catmenu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}


#catmenu li a, #catmenu li a:link, #catmenu li a:visited {
color: #fae7df;
display: block;
margin: 0px;
padding: 9px 10px 10px 10px;
}


#catmenu li a:hover, #catmenu li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbsnHHXZ5Ngt0d7uu_6t6K3-FqyKTHZ5ZErJ1asyl52r3naLx1jsywFawGvkUDUYWwIj1SG3d0EuT2hYT9qc7AkoDQlKPdNr08A9SbYaOX5zbT-EPkq9kJDiLqltGM-FX94rWKpeVeViB8/) repeat-x;
color: #b0c4de;
margin: 0px;
padding: 9px 10px 10px 10px;
text-decoration: none;
}


#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background:#ED4A05;
width: 150px;
color: #fae7df;
font-family:Tahoma,century gothic,Georgia, sans-serif;
font-weight: normal;
float: none;
margin: 0px;
padding: 9px 10px 10px 10px;
border-bottom: 1px solid #FF7800;


}


#catmenu li li a:hover, #catmenu li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbsnHHXZ5Ngt0d7uu_6t6K3-FqyKTHZ5ZErJ1asyl52r3naLx1jsywFawGvkUDUYWwIj1SG3d0EuT2hYT9qc7AkoDQlKPdNr08A9SbYaOX5zbT-EPkq9kJDiLqltGM-FX94rWKpeVeViB8/) repeat-x;
color: #fff;
padding: 9px 10px 10px 10px;
}


#catmenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}


#catmenu li li {
}


#catmenu li ul a {
width: 140px;
}


#catmenu li ul a:hover, #catmenu li ul a:active {
}


#catmenu li ul ul {
margin: -34px 0 0 170px;
}


#catmenu li:hover ul ul, #catmenu li:hover ul ul ul,
#catmenu li.sfhover ul ul, #catmenu li.sfhover ul ul ul {
left: -999em;
}


#catmenu li:hover ul, #catmenu li li:hover ul,
#catmenu li li li:hover ul, #catmenu li.sfhover ul,
#catmenu li li.sfhover ul, #catmenu li li li.sfhover ul {
left: auto;
}


#catmenu li:hover, #catmenu li.sfhover {
position: static;
}

Untuk kode yang berwarna merah, silahkan ganti sesuai dengan lebar header blog sobat.

4. Setelah itu cari kode  <div id='header-wrapper'>
5. Letakkan kode berikut ini di atasnya.

<div id='catmenucontainer'>
<div id='catmenu'> <ul>
<li><a href='http://tips-untuk-blogger.blogspot.com/'>Home</a></li>
<li><a href='http://tips-untuk-blogger.blogspot.com' title='Link-Title'>Tips Blog</a>
<ul class='children'>
<li><a href='http://tips-untuk-blogger.blogspot.com/search/label/Tips%20Blogspot' title='Tips Blogger'>Blogspot</a></li>
<li><a href='http://tips-untuk-blogger.blogspot.com/search/label/Tips%20WordPress' title='Tips WordPress'>WordPress</a></li>
<li><a href='Your-Link-Here' title='Tips Jomla'>Jomla</a></li>
<li><a href='http://tips-untuk-blogger.blogspot.com/search/label/Tips%20Google' title='Tips Google'>Google</a></li>
<li><a href='http://tips-untuk-blogger.blogspot.com/search/label/Tips%20Facebook' title='Tips Facebook'>Facebook</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-3</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3-3</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-4</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-3</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-4</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-6</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-6-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-6-2</a></li>
</ul>
</li>
<li><a href='http://tips-untuk-blogger.blogspot.com/2012/01/tukaran-link.html' title='Link-Title'>Link Exchange</a></li>
<li><a href='http://tips-untuk-blogger.blogspot.com/search/label/Informasi' title='Berisi tentang info-info'>Informasi</a></li>
</ul>

</div>
</div>

Silahkan sobat ganti kode yang berwarna Hijau (dengan Link sobat sendiri) dan kode berwarna Biru dengan judul menunya.

6. Jika sudah selesai, klik preview terlebih dahulu, kalau sudah berhasil, baru di simpan.

Sampai disini sobat sudah mempunyai menu diatas header, terkadang tidak semua template bisa cocok dengan  kode-kode seperti ini, jadi sebelum disimpan, sobat harus selalu preview terlebh dahulu, kalau sudah terlihat berhasil baru disimpan.

Terima kasih telah membaca artikel Cara Membuat Menu Blog Diatas Header. Semoga bermanfaat.


Script by : tips-untuk-blogger.blogspot.com

Cara Membuat Dropdown Menu Label

Tips Blog kali ini adalah Cara Membuat Dropdown Menu Label. Ini adalah salah satu tips yang bisa sobat gunakan untuk memodifikasi label blog sobat, di postingan saya sebelumnya adalah Cara Edit Label Blog Dengan CSS3. Dropdown menu label ini salah satu keunikanya adalah label blog sobat menjadi dropdown, sehingga dapat merampingkan tampilan label dan dapat menghemat tempat blogsobat. Contoh nya seperti gambar dibawah ini :

Cara Membuat Dropdown Menu Label : Ikuti langkah-langkah dibawah ini :

1. Sobat cari kode html label blog sobat, kode nya seperti dibawah ini :

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

2. Ganti dengan kode dibawah ini :

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<select style='width:100%' onchange='location=this.options[this.selectedIndex].value;'>
<option>Click to choose a label</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

3. Save template dan llihat hasilnya.

Note :

• Untuk menghindari eror jangan lupa backup template.
• Width 100% adalah lebar nya, silahkan sobat ubah dan disesuaikan.
• Click to choose a label, juga bisa sobat ganti dengan kata-kata sobat sendiri.

Okey cukup sekian sob tips blog kali ini,  yaitu Cara Membuat Dropdown Menu Label.

Semoga tips ini bermanfaat.

Script : www.bloggersentral.com

Cara Membuat Floating Menu Vertikal

Satu lagi tips blog untuk sobat blogger yang ingin mempercantik tampilan menu blognya, kali ini menu yang akan saya share adalah cara membuat floating menu vertikal. Floating menu ini posisinya melayang disebelah sidebar blog sobat dan akan mengikuti naik turun mouse yang sobat gerakkan.

Bagaiman cara membuat floating menu vertikal ini ? ikuti langkah-langkah dibawah ini :

Copy kode script di bawah ini dan pastekan tepat di atas kode ]]></b:skin>

#floatMenu { position:absolute; top:170px; left:65%; margin-left:290px; width:70px;} #floatMenu ul {list-style-type: none;} #floatMenu ul li a { display:block; background:-moz-linear-gradient(-90deg, #222, #2b2b2b) repeat scroll 0 0 transparent; background:-webkit-gradient(linear, left top, left bottom, from(#222), to(#2b2b2b)); border:0px solid #99; border-left:3px solid #fff; text-decoration:none; color:#fff; padding:5px 5px 5px 25px; width:80px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 15px; -moz-border-radius-topright: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; -webkit-transition: all 0.6s ease-out; box-shadow: #333 0px 0px 10px; -moz-box-shadow: #333 0px 0px 10px; -webkit-box-shadow: #333 0px 0px 10px; } #floatMenu ul li a:hover { color:#AD3D29; background-color: #000; border-right:3px solid #999; width:100px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 5px; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 0px; } #floatMenu ul.menu1 li a:hover {border-color:#bdbdbd;} #s { background:#AD3D29; color:#00ff00; width:230px; padding-left:15px; font-weight:bold; font-size:10px; padding:1px; border-bottom:1px solid #F0F0F0; border-right:1px solid #F0F0F0; border-top:1px solid #F0F0F0; border-left:0; font-family: Verdana; }

Kemudian cari lagi kode </head>. Copy kode script di bawah dan pastekan tepat di atas kode </head>

<script language='javascript' src='https://sites.google.com/site/tutorialseoblogger/file/jquery_mini.js'></script> <script language='javascript' src='https://sites.google.com/site/tutorialseoblogger/file/jquery.dimensions.js'></script> <script language='javascript'> var name = "#floatMenu"; var menuYloc = null; $(document).ready(function(){ menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px"))) $(window).scroll(function () { offset = menuYloc+$(document).scrollTop()+"px"; $(name).animate({top:offset},{duration:500,queue:false}); }); }); </script>

Setelah itu cari kode </body>.  Copy kode script di bawah dan pastekan tepat di atas kode </body>
 

<div id='floatMenu'> <ul class='menu1'> <li><a href='#' title='Link 1'> Link 1 </a></li> <li><a href='#' title='Link 2'> Link 2</a></li> <li><a href='#' title='Link 3'> Link 3 </a></li> <li><a href='#' title='Link 4'> Link 4</a></li> <li><a href='#' title='Link 5'>Link 5</a></li> <li><a href='#' onclick='MGJS.goTop();return false;'> Back to top </a></li> </ul> </div>

Kemudian save template dan lihat hasilnya.
Cukup sekian tips blog kali ini  Cara Membuat Floating Menu Vertikal . Semoga Bermanfaat