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

Cara Membuat News Ticker

Tips Blog kali ini yang ingin saya share ke sobat blogger adalah Cara Membuat News Ticker.
News Ticker adalah headline postingan terbaru blog kita, widget ini menampilkan beberapa postingan terbaru kita dalam bentuk teks berjalan. Untuk lihat demonya silahkan lihat gambar dibawah ini.

 Cara Membuat News Ticker :

1.    Login ke Blogger

2.    Pilih tab Design > Edit HTML

3.    Cari kode ]]></b:skin>

4.    Copy kode di bawah ini dan pastekan tepat di bawah kode ]]></b:skin>

<script src='http://www.google.com/jsapi?key=ABQIAAAA4qkT5i26SQ6NmgJd5KQemhRQ_a6zv5_Bim3H_GL4gaueIFZ15xRdt8jcAUk8ZHokIVo-TBZgYVbkzw'/> <script type='text/javascript'> //<![CDATA[ var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Retrieving RSS feed(s)';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e}; var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}}; //]]></script> <style type='text/css'> .titlefield{ /*CSS for RSS title link in general*/ text-decoration: none;} .labelfield{ /*CSS for label field in general*/ color:#666;font-size: 100%;} .datefield{ /*CSS for date field in general*/ color:#eee;font:normal 13px Arial;} #example1{ /*Demo 1 main container*/ width: 800px; height: 14px; border: 0px solid #aaa; padding: 0px; font:bold 13px Arial; text-transform:none; text-align:left; background-color:transparent;} code{ /*CSS for insructions*/ color: #000;} #example1 a:link, #example1 a:visited {color:#FFC932;text-decoration:none;} #example1 a:hover {color:#fff;text-decoration:none;} .newspic{background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF_Hh-S1vaBnUtSKnqhIfwCKlA5LetVRLJMfC3zL2YeOwRGfwjzD2C3UTmFs6SeB9jiF6o_H2o5wu7EVP7uqsKavCzvlfnCaxZiNtVKJNvWLXE2DSh3zO5Sv62e2G477dpznlG-tkJi98/s1600/bg_news.png) no-repeat top center;width:970px;margin:0 auto;padding:0 auto;height:26px}.news{width:970px;margin:0 auto;padding:0 auto;line-height:1.4em;text-align:left;font-family:Arial;font-size:11px;color:#ddd;overflow:hidden;clear:both}.news a:link,.news a:visited{color:#ddd;text-decoration:none}.news a:hover{color:#fff;text-decoration:underline} </style>

5.    kemudian cari kode  <div id='main-wrapper'>

6.    Copy kode di bawah ini dan pastekan tepat di atas kode <div id='main-wrapper'>

<div class='newspic'> <div class='news'> <div style='float:left;margin-left:10px;padding:5px 60px 5px 0;font:bold 14px Arial;color:#333;text-transform:none;'> News Update : </div> <div style='float:left;width:800px;padding:4px 0; position:relative; overflow:hidden;'> <script type='text/javascript'> var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;) cssfeed.addFeed(&quot;Tutorial Blog&quot;, &quot;urlblogsobat/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date cssfeed.entries_per_page(1) cssfeed.init() </script> </div></div></div>

8.     Ganti tulisan urlblogkamu dengan url yang kamu miliki

9.    Setelah selesai simpan template dan lihat hasilnya.

Selesai sudah tutorial Cara Membuat News Ticker. Selamat mencoba, semoga berhasil dan bermanfaat

Script by : www.tutorial-4u.com

Cara Menginstall Ulang Windows Xp..

Sebagian orang Cara Install Ulang Windows Xp di Komputer PC atau Laptop kita barangkali merupakan suatu perihal yang gampang,, Tetapi untuk yang lain yang baru mencoba atau mungkin yang sudah lupa Cara Install Ulang Windows Xp ini cukup menyusahkan,, Buat saya sendiri juga terkadang kelupa'an dan ada pula keliru mungkin karena saya jarang melakukan hal yang seperti ini mungkin ya.. Hehee.. ☺

Cara Install Ulang Windows Xp memang tidak semudah Cara Install Ulang Windows 7,,  Namun bisa saja jadi mudah yang penting kita teliti dalam menjalani tahapan demi tahapannya..

Berikut selengkapnya :

1. Sebelumnya jangan lupa Masukkan terlebih dahulu CD Windows Xp yang kita gunakan,, dan pastikan CD tersebut tidaklah rusak,, Sekarang Restart Komputermu saat di awal Komputer Menyala Tekan Tombol F2 untuk melakukan Setup di Menu Bios,, atau terkadang harus menekan Tombol Del,, dengan tulisan "Del To Setup"..

2. Jika sudah masuk ke Menu Bios akan ada Tampilan seperti di bawah ini mungkin akan berbeda di setiap Komputer, tapi tinggal sesuaikan saja..

3. Di Menu Boot,, Pilih Boot Device Priority,, Pada Menu First Boot pastikan terpilih dengan memakai CDROOM..

Tekan Tombol F10 untuk Menyimpan dan Exit,, Maka Komputer mu akan Merestart..

4. Setelah Restart akan muncul Tulis Pres Any Key To Boot From CD,, Silahkan kamu tekan tombol sembarang..

5. Setelah itu,, Pada tampilan berikut tekan Enter untuk lanjut pada Proses Instal atau R untuk melakukan Reparasi Windows di Recovery Consule atau F3 untuk Mengakhiri Proses Instal..

6. Pada Menu Lisencing Agreement tekan F8 untuk lanjut dan ESC untuk Batalkan Proses..

7. Pada Menu Partisi,, Pada Partisi C: Tekan D untuk Delete Partisi C:,, Kemudian Tekan L untuk menyetujui Proses Delete.. Cara ini dugunakan agar tidak ada tumpang tindih dengan Windows yang lama..

8. Pada Partisi C: yang telah terhapus Tekan Tombol C untuk Create atau membuat Partisi,, Isikan jumlah Kapasitasnya sesuai kebutuhan,, Atau biasanya sudah otomatis dengan jumlah kapasitas maksimumnya..

9. Tekan Enter pada Partisi C: untuk memulai Instal dan Pilih NTFS File System (Quick) atau FAT File System (Quick) lalu tekan Enter..

10. Jika sudah maka Proses Instalasi Windows Xp dimulai seperti gambar dibawah ini :

11. Bila Proses Setup selesai,, Komputer kamu akan Merestart,, Dan jika ada tulisan Pres Any Key To Boot From CD,, Biarkan saja sampai muncul seperti gambar di bawah ini :

12. Setelah itu akan tampil Menu berikut dan kamu Klik Tombol Next..

13. Isikan dengan Nama dan Organisasi Kamu kemudian Tekan Next..

14. Isikan Produk Key atau Serial Number dan Tekan Next..

15. Isikan Nama Komputer dan Password (ataupun dikosongkan untuk password) dan Tekan Next..

16. Set Time Zone pada Posisi (GMT+80:00) atau pilih Hanoi Bangkok,, Jakarta dan Klik Next..

17. Setelah itu akan tampil seperti di bawah ini,, Dan biarkan saja sampai Restart..

18. Berikutnya pada Menu "Welcome To Microsoft Windows" pilih Next..

19. Bagian Menu "Help Protect your PC" pilih Not Right Now..

20. Berikutnya tinggal Next dan pilih Tombol FINISH..

Dan Cara Instal Ulang Windows Xp pun selesai. Semoga dapat bermanfaat..

Cara Mengganti Background Blog Slideshow Otomatis

Jujur saja sob saya belum pernah memakai tips blog yang satu ini, yaitu Cara Mengganti Background Blog Slideshow Otomatis. Kemaren ada salah satu teman blogger yang komen dan bertanya cara mengganti background blog tapi otomatis berubah-rubah bagaimana ?. Buat sobat yang pengen mencoba tips blog ini, silahkan ikuti langkah - langkah dibawah ini :

•     Login dulu ke Blog / Website anda 
•     Masuk ke Edit HTML / CSS
•     Cari kode ini di CSS anda ( tekan CTRL+F biar lebih gampang )  body 
•     Ganti Semua Bagian Body dengan CSS ini

body{color:black;font:x-small Georgia Serif;font-size:small;text-align:center;margin:0;background:gray url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv9bBAgJ2viTOvmwRR0LOvbDpPREw_QzV43sZ7rjffp4XBQ-D4OGhF18qp2PDFUoyAsBkWO3HFIf1ONWQid06CtRLxWK67RVuy5U5qiXq6ulVjhR3xZD8TRiQiQA344B_5oC5G__Tx-Zk/s1600/backgroundfbdarksanta.jpg) repeat-x fixed top center;padding:0;margin:0;overflow-y:scroll;line-height:1.28;text-align:left;direction:ltr;unicode-bidi:embed;display:block;-moz-background-size:100%;-webkit-background-size:100%;background-size:100%;}html body .region-inner{min-width:0;max-width:100%;width:auto;}

•     Kemudian Cari Dengan CTRL+F Lagi

</body>

•     Setelah itu letak kan Script ini diatasnya

<script src='http://template-santa.googlecode.com/files/slideshowseptember.js'/>
<script type='text/javascript'>$(window).load(function(){ssBG.SlideMyBG()})</script>

•     Jika sudah Simpan Template

Demikianlah sob Cara Mengganti Background Blog Slideshow Otomatis. Semoga berhasil mempraktekanya dan jangan lupa di backup dulu template nya buat meminimalisir eror.

Script by : santa-mars.blogspot.com

Cara Mudah Membuat Privacy Policy

Buat sobat blogger yang ingin membuat Privacy Policy tapi terkendala bahasa inggris, tidak usah khawatir karena ada sebuah situs yang bisa sobat gunakan untuk membuat Privacy Policy secara online dengan cepat dan mudah.

Manfaat Privacy Policy 

Pertama : Sebenarnya tidak diharuskan suatu blog memiliki privacy policy, tapi buat sobat yang khusus memonetize  blog nya dengan google adsense, privacy policy menjadi hal wajib yang harus ada di blog sobat, karena Google adsense mewajibkan hal itu.

Kedua : Alasan supaya terlihat profesional dan menarik. Itu menurut teman-teman s
aya yang juga seorang blogger. Kalau menurut sobat bagaimana ?

Cara Mudah Membuat Privacy Policy

1. Sobat kunjungi situs ini : www.privacypolicyonline.com
2. Silahkan sobat isi data - data sesuai yang diminta di situs tersebut.
3. Setelah itu copy paste artikelnya dan copy di blog sobat. Sangat mudah, cukup copy paste saja tanpa harus regristasi.

Sampai disini sobat sudah berhasil membuat privacy policy dengan mudah.

Terima kasih telah membaca artikel Cara Mudah Membuat Privacy Policy.
Semoga Bermanfaat.

Situs Edit Foto Online Terbaru

Pada postingan kali ini yang ingin saya share adalah kumpulan Situs Edit Foto Online Terbaru. Pada postingan saya sebelumnya saya menampilkan 10 situs edit online yang bisa sobat pergunakan. Sobat bisa lihat di postingan saya sebelumnya di cara edit foto secara online. Kali ini ada 5 situs tambahan yang bisa sobat pergunakan untuk keperluan edit foto secara online, apa saja situs-situsnya ?

1. Festisite.com
Anda bermimpi mengenai wajah anda tampil dalam lembaran uang kertas suatu negara? Anda dapat mewujudkannya disini. Dengan situs ini anda dapat membaut foto anda muncul di mata uang berbagai negara. Tentu saja ini palsu dan hanya untuk bersenang-senang saja. Ada banyak mata uang yang dapat dipilih, tergantung mana yang anda sukai. Tentu saja ini dapat menjadi lelucon yang baik bagi anda. Untuk melakukannya, anda dapat mengunjungi situs itu di alamat
www.festisite.com/money

2. Pixenate.com
Situs edit foto online ini cukup disukai banyak orang. Ada banyak fitur yang tersedia dalam situs ini, mulai dari sepia, red eye, resizing, cropping atau zooming. Selain itu ada banyak efek yang menarik untuk membuat tampilan foto anda lebih menawan. Anda bisa berkunjung ke situs ini dan mencoba mengutak-atik foto anda lewat berbagai macam fitur yang ada di dalamnya. Untuk hal ini anda dapat berkunjung ke alamat www.pixenate.com

3. Loonapix.com
Situs edit foto online ini sangat menarik. Ada banyak sekali fitur yang ditawarkan untuk menyulap foto anda menjadi lebih menarik. Foto anda dapat dijadikan seolah sedang dipajang di gedung besar, ditampilkan di kap mobil atau layar kapal. Tampilan latar belakang yang beragam ini sangat menarik dan membuat kita tak henti mengutak-atik. Ada juga beberapa pilihan frame foto yang cantik. Semuanya akan membuat kita berkata, “Wow!”. Kunjungi saja www.loonapix.com

4. Photofunia.com
Situs ini bisa dibilang cukup lengkap diantara yang lain. Ada banyak sekali fitur yang disediakan. Mengolah foto di situs edit foto online ini sangat menyenangkan, banyak fitur yang dapat anda eksplorasi dan gaya yang bisa diaplikasikan pada foto anda. Anda bisa tampil sebagai prajurit ataupun cover majalah. Intinya adalah anda bisa sangat bersenang-senang di situs edit foto online ini.

5. Funphotobox.com
Situs edit ini lebih mirip dengan loonapix dan photofunia, namun tentu saja tidak sama. Memang ada beberapa kemiripan dalam hal efek dan latar belakang. Namun tentu saja ada yang tidak sama di beberapa sisi. Semua menghasilkan foto yang unik dan menarik.

Demikian sob beberapa situs edit foto online yang bisa sobat gunakan secara gratis.
Semoga Bermanfaat.

Cara Merubah Krusor Blog

Tips blog kali ini adalah bagaimana cara merubah krusor di blog. Tips ini berguna buat sobat blogger yang bosan melihat tampilan krusor blognya yang itu-itu saja, yaitu berbentuk panah. Sobat bisa merubah krusor  blog nya menggunakan icon-icon yang sangat menarik, sehinga dapat mempercantik penampilan blog sobat.

Cara Merubah Krusor Blog :

1. Login ke Blogger. Masuk ke menu Design->Edit HTML
2. Cari kode </head>
3. Letakkan kode css berikut diatasnya

<style type="text/css">
HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/thumbnails/cool1.gif"), auto;}
</style>

Keterangan:
Teks yang berwarna merah adalah alamat url kursor. Silahkan ganti dengan alamat url kursor yang ingin sobat gunakan.

4. Setelah itu, simpan template anda. Selesai

Note : Untuk mengganti icon nya sobat pergi saja ke situs www.totallyfreecursors.com. Situs tersebut menyediakan ratusan hingga ribuan icon kursor menarik yang bisa sobat pilih sesuai selera.

Okey, cukup sekian sob tips blog kali ini Cara Merubah Krusor Blog.
Semoga Bermanfaat

Cara Mengetahui Blog Dofollow

Tips blog - U Comment I Follow. Sobat pasti sering mendengar dan melihat slogan tersebut ketika melakukan blogwalking, entah itu ditulisan atau di banner. Ini adalah slogan yang digunakan pemilik blog untuk memberitahukan bahwa blog nya bersistem dofollow.Tapi terkadang walaupun sudah dipasang banner bertuliskan u comment i follow, belum tentu juga blog tersebut dofollow. Untuk itu kita perlu mencari tahu apakah benar blog tersebut dofollow. Lalu bagaimana Cara Mengetahui Blog Dofollow ?

Pengertian Dofollow
Dofollow artinya : Link yang di masukkan pada saat berkomentar pada postingan suatu blog, akan ditelusuri lebih lanjut oleh search engine, dalam artian mendapatkan backlink dari blog yang dikomentari tersebut.

Cara Melihat Blog Dofollow:

 1. Instal terlebih hahulu Add-Ons Mozilla disini : Dofollow

2. Restar Browser Mozilla

3. Buka lagi Browser Mozilla, Kunjungi Google, Cari Blog apa saja, Kunjungi Blog tersebut

4. Setelah berada pada halaman home silahkan sahabat klick kanan pada mouse dan pilih "NoDoFollow"

5. Sekarang saatnya melihat apakah Blog yang sobat kunjungi merupakan Blog Dofollow atau bukan?! Lihat warna yang ditampilkan pada setiap link yang ada didalam Blog tersebut, Kalau berwarna Merah berarti Nofollow dan yang berwarna agak biru berarti Dofollow.

Nah sekarang sobat bisa membedakan antara Blog Dofollow dan Blog Nofollow. Sekarang bagaimana cara mengetahui apakah link yang kita masukan melalui kotak komentar Dofollow apa bukan? caranya sama sobat tinggal berkomentar pada blog tersebut dengan menggunakan Name/Url, setelah itu sobat lihat Nofollow nya, kemudian lihat warna biru atau merah.

Nah itulah Cara Mengetahui Blog Dofollow Dan Nofollow Dengan Add-Ons Mozilla.
Semoga bermanfaat.

Image from : www.sundaboy.com