Minggu, 30 September 2012

Cara Membuat Menu Horizontal CSS 3D Button Blogger/Blogspot



Horizontal Menu: Pure CSS 3D Button Effect for Blogger

Menu/navigasi horizontal Blogger/Blogspot ini juga dibuat dengan HTML dan CSS murni tanpa sentuhan javascript maupun jquery., sama seperti menu/navigasi horizontal sebelumnya. Cara membuat dan memasangnya pun sangat sederhana dan tanpa mengedit template HTML, karena aturan CSS saya buat menyatu dengan HTML nya.

Cara membuat/memasang widget horizontal menu/mavigation 3d button Blogger/Blogspot:
1.  Copy dan edit kode di bawah ini:
Kode: 

<style> #navcontainer { background: #369; border-top: 1px solid #9CC; margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; } #navlist { list-style: none outside none; margin: 0; padding: 0; } @media all { #navlist { text-align: center } } #navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0; position: relative; } html>body #navlist li { background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; } #navlist a, #navlist a:link, #navlist a:visited { background: #900; border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px; text-decoration: none; } #navlist a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; } #navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px; } #navlist li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative; } html>body #navlist li#active { background: #000; margin: 0 4px 0 4px; } #navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover { background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; } </style>
<div id="navcontainer">
<ul id="navlist">
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
</ul>
</div>

- Ganti  # dengan url yang ingin anda pasang di menu, misalnya url homepage, daftar isi, label, dan lain-lain.
- Ganti Link 1, Link 2, Link 3, dan seterusnya dengan nama menu/anchor text sesuai dengan yang anda inginkan, misalnya Home, Daftar Isi, Tips, dan seterusnya.
- Jika ingin menambah/menghapus daftar menu, tambahkan/hapus baris: 
<li><a href="#"><span>Link</span></a></li> sebelum </ul>.

2. Masuk ke dashboard > Design/Rancangan > Klik Add a Gadget

3. Setelah pop up window muncul, pilih opsi HTML/Javascript

4. Kemudian masukkan Kode yang sudah diedit tersebut ke kolom configure HTML/Javascript.
 

7. Klik save.
8. Drag/geser widget menu horizontal tersebut ke bawah/atas header (letakkan pada slot gadget).
9. Save lagi.
10. Done! menu/navigasi horizontal Blog Blogger anda siap digunakan.

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com
Cara Membuat Menu Horizontal CSS 3D Button Blogger/Blogspot
Written by: Ahmad Khoirul Azmi

  • Rating: 4.8 Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan code ini atau share dengan Facebook like diatas/sharing tool di bawah. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.








<a href="http://wahyucoy3">Cara Membuat Menu Horizontal CSS 3D Button Blogger/Blogspot</a>

Membuat Menu TabView Tanpa Edit Template

1. Login ke akun blogger kamu
2. klik menu Element Laman
3. klik Tambah Gadget
4. pilih HTML/JavaScript
5. masukkan kode berikut didalamnya
<style type="text/css">  /* begin css tabview */
div.TabView div.Tabs {widht:100%;
padding-top: 0px;
height: 24px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 98px; /* ukuran lebar menu */
text-align: center;
height: 30px; /* ukuran tinggi menu */
padding-top: 7px;
margin-right:4px; /* jarak antarmenu */
vertical-align: middle;
border: 1px solid #2C2C2C; /* warna border menu */
border-bottom-width: 0;
margin:0px;
padding: 5px 0;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold; /* besar hurup menu */
background-color: #252525; /* warna latar menu */
color: #F0F8FF; /* warna hurup menu */
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
}
div.TabView div.Tabs a.Active {
background-color: #DD0A0A; /* warna background menu aktif */
color: #252525;
}
div.TabView div.Tabs a:hover {
background-color: #DD0A0A; /* warna background menu hover */
color: #F0F8FF;
font-weight: bold;
}
/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #252525; /* warna border kotak utama */
overflow: hidden;
background:#252525; /* background kotak utama */
}
div.TabView div.Pages div.Page {
height: 100%;
padding: 7px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad {
padding: 5px 0px;
font-size: 12px; /* besar hurup kotak utama */
}
</style>
<script src="http://naughtyric.googlecode.com/files/tabview.js" type="text/javascript"></script>
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Judul Tab 1</a>
<a>Judul Tab 2</a>
<a>Judul Tab 3</a>
</div>
<div class="Pages" style="width: 300px; height: 250px;">
<div class="Page">
<div class="Pad">

ISI Tab View 1

</div>
</div>
<div class="Page">
<div class="Pad">

ISI Tab View 2

</div>
</div>
<div class="Page">
<div class="Pad">

ISI Tab View 3

</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script><span style="font-size: xx-small;"><span style="color: #fff;">by </span><a href="http://naughtyric.blogspot.com/2011/06/cara-membuat-menu-tabview.html" style="color: #A52020;">Naughtyric Blog</a></span>
Nah sobat tinggal merubah kode yang diwarnai saja, saya rasa tidak perlu dijelaskan lagi karena sudah ada semua di posting sebelumnya.

Sedikit tambahan memang untuk pengeditan atau mengisi menu tabview seperti ini butuh ketelitian, tapi ndak apa itung" belajar lah, itu juga buat kita sendiri :D

Kalo mo lebih praktis lagi tunggu.. tongkrongin saja blog ini,hehe...
Selamat Membuat Menu TabView Tanpa Edit Template
Semoga Bermanfaat ;)

Cara Memasang Emoticon di Komentar Blog

Apa kabar sobat semua? Sudah pada makan belum? Sudah, selamat ya..
Lanjut, Belajar Internet kali ini akan membahas tentang Cara Memasang Emoticon di Komentar Blog. Emoticon ini mirip dengan emoticon di Yahoo!, pada tahu kan? Baiklah, kali ini emoticon di Yahoo! tersebut akan kita pasang di komentar blog sobat. Caranya? Sangat mudah dan sekedar contoh emoticon yang ingin kita buat adalah seperti gambar di bawah ini.


Cara Memasang Emoticon di Komentar Blog


Lansung saja kita ke TKP. Check it Out....
1. Masuk ke akun blogger Anda
2. Masuk pada bagian template
3. Klik Edit HTML
4. Seperti biasa, jangan lupa centang Expand Template Widget
5. Cari kode </body> untuk lebih mudah lansung saja tekan CTRL+F
6. Letakkan kode berikut tepat di atas kode </body> tadi
  <script src='http://tutorialblogger.googlecode.com/files/smiley.js' type='text/javascript'/>
7. Kemudian, kita cari lagi kode <b:include data='post' name='comment-form'/> dan untuk memudahkan pencarian tekan CTRL+F
8. Letakkan kode berikut tepat di atas kode no.7 tadi

<b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>
:))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>
:)]
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>
;))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>
;;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>
:D
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>
;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>
:p
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>
:((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>
:)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>
:(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>
:X
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>
=((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>
:-o
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>
:-/
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>
:-*
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>
:|
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>
8-}
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>
~x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>
:-t
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>
b-(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>
:-L
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>
x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>
=))</b>
<center><blink><a href="http://wahyucoy3.blogspot.com/2012/09/cara-memasang-emoticon-di-komentar-blog.html" target="_blank">Pasang Emoticon Anda!</a></blink></center>

9. Klik Simpan Template

Sekarang, pada komentar sobat telah diletakkan emoticon yang pastinya unyu-unyu banget. Untuk lihat hasilnya silahkan coba komentar disini atau bisa di komentar blog Anda masing-masing. Selamat Mencoba

بِسْمِ اللّهِ الرَّحْمَنِ الرَّحِيْمِ

huuuhhhh capek'e rek ru maen" ma tmen"..... hehehehe (malah curhat).....

Tapi kalau buat posting saya masih tetep semangat kok,, hehehehe

ok deh langsung saja pada pokok pembahasan yaitu Cara Membuat Pesan Pembuka dan Penutup Pada Blog.



Langkah-langkahnya membuat pesan pembuka :

1. login blog
2. klik Rancangan --> EDIT HTML
3. cari kode <head>
4. taruh kode dibawah ini tepat dibawah kode <head>

<script type='text/javascript'>
alert("welcome to http://wahyucoy7.blogspot.com")
</script>

NB : ganti kata welcome to http://wahyucoy7.blogspot.com dengan kata" sesuka sobat.

kalau sobat pengen tambah dengan pesan penutup. dibawah ini ada juga langkah"nya.

Langkah-langkahnya membuat pesan penutup :

<script type="text/javascript">
// goodbye alert
function goodbye(){
alert(&#39;Thankz for your visit.... good bye&#39;);
}
parent.window.onunload=goodbye;
</script>

NB : ganti kata Thankz for your visit.... good bye dengan kata" sesuka sobat.

5. simpan templates..

good luck sob.... ^_^

Sabtu, 29 September 2012

cara membuat close 2x pada blogspot cra nya masukan kode di bwah ini

Kamis, 27 September 2012

Makanan apa itu menu dropdown
?bagaimana cara membuatnya? Dan apa kegunaan dari menu dropdown? Kode untuk membuat menu dropdown.


Menu dropdown ialah
menu pull-down yang berupa kumpulan teks dan link dalam 1 menu ringkas.
kegunaan menu dropdown
ialah untuk meringkas teks dan link, biasanya menu dropdown ini digunakan untuk wadah dari daftar
blogroll
(tukar link), bisa di gunakan untuk menu arsip juga.

Berikut cara pembuatan menu dropdown

Menu dropdown model biasa

<select onchange="document.location.href=this.options[this.selectedIndex].value;"> <option selected="selected" value="0">
judul dropdown
</option>
<option value="
http://alamat-link1.com
">dropdown link1</option>
<option value="
http://alamat-link2.com
">dropdown link2</option>
<option value="
http://alamat-link3.com
">dropdown link3</option>
<option value="
http://alamat-link4.com
">dropdown link4</option> </select>


Hasil dari kode menu dropdown diatas==>>


Menu dropdown model tombol

<form name="jump">
<select name="menu">
<option selected="selected" value="0">
Judul dropdown
</option>
<option value="
http://alamat-link1.com
">dropdown link1</option>
<option value="
http://alamat-link2.com
">dropdown link2</option>
<option value="
http://alamat-link3.com
">dropdown link3</option>
<option value="
http://alamat-link4.com
">dropdown link4</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
</form>


Hasil dari kode diatas berikut==>>



NB: kode yang berwarna merah bisa diganti sesuai keinginan anda.OK
kata kunci yang bisa menemukan posting ini-

cara membuat menu dropdown, membuat menu dropdown, cara pembuatan menu dropdown, menu dropdown, kode untuk membuat menu dropdown, kegunaan menu dropdown, apa itu menu dropdown, dropdown menu, cara mudah membuat menu dropdown, menu dropdown adalah, membuat menu dropdow, menu dropdon.

Membuat Widget melayang pada Blog


cara membuat widget melayang,cara membuat iklan melayang,cara membuat banner melayang
Cara membuat widget melayang pada blog. Terutama yg akan blogtegal bahas yakni membuat widget melayang pada pengguna blogspot, manfaat dari widget melayang itu sendiri banyak, biasanya di gunakan untuk ditempati iklan berbasis PPC atau iklan yg begitu penting yg sangat terbatas waktu promosinya yang di maksudkan agar pengunjung tahu bahwa ada bisnis yang penting sekarang ini.
Widget melayang ini bisa kita atur tata letaknya entah mau d letakan sebelah kiri, kanan, atas maupun bawah pada posisi blog, nanti akan awak terangkan di bawah, hokey :d
Untuk tampilan besar kecilnya ukuran widget melayang ini tergantung pada isi yang akan kita tempatkan.
Jika widget melayang ini kita tempati iklan berbasis PPC, maka ukuran-y akan menyesuaikan dg ukuran iklan, untuk contohnya bisa di lihat pada pojok kanan atas di blogtegal.com ini.
Bagaimana apakah kamu tertarik untuk membuatnya? Jika ya mari kita lakukan penelitiannya hehehehe. . . . . .
Silahkan copi paste script di bawah ini pada widget HTML/Javascript.
Jika bingung apa itu widget HTML/Javascript silahkan ikuti petunjuknya:

  • masuk ke dasboard blog kamu.
  • pilih Rancangan
  • pada elemen halaman klik ''Tambah widget''
  • Dan pilih Widget HTML/Javascript
  • kemudian paste-kan script di bawah ini.
  • dan Simpan
<style type="text/css"> #gb{ position:fixed; top:10px; z-index:+1000; } * html #gb{position:relative;} .gbcontent{ float:left;margin-left:220px; border:2px solid #bb0000; background:#eeeeee; padding:10px; } </style> <script type="text/javascript"> function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; gb.style.top = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script> <div id="gb"> <div class="gbtab" onclick="showHideGB()"> </div> <div class="gbcontent"> <div style="text-align:right"> <a href="javascript:showHideGB()"> .:[Close][Klik 2x]:. </a> </div> <center> silahkan tempatkan kode iklan atau banner atau teks atau apalah terserah kamu disini yah</center> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.center = (30-gb.offsetWidth).toString() + "px"; </script></div></div>
Perhatikan pada tulisan yang berwarna ungu pada script di atas, di situ berisi tentang pengaturan tentang posisi, background,border widget melayang tersebut. Atur sesuai dg keinginan kamu apakah ingin di tempatkan di bagian kiri atau kanan. Oh ya, jika kamu ingin menempatkan widget melayang tersebut pada halaman yg ingin kamu tentukan baca artikel blogtegal tentang menampilkan widget pada halaman tertentu yg kita inginkan
Bagaimana apakah sudah bisa membuat widget melayang atau membuat iklan melayang? Semoga bermanfaat.

Cara Membuat Iklan Melayang dengan Tombol Close 2X

Sebelumnya saya pernah membahas tentang memasang iklan melayang dengan tombol close 1x
memasang iklan melayang dengan tombol close 1x

Read more : http://info-adit.blogspot.com/2011/11/mau-buat-iklan-melayang.html
Under Common Share Alike Atribution
Mungkin rekan blogger pernah melihat tutorial ini, memang setau saya ada yang lebih rumit menggunakan banyak kode, tapi disini saya coba memberikan tips yang lebih mudah dan sangat simple bahkan bagi anda blogger yang baru mengenal pengkodean pas
ti bisa melakukannya.
  1. Login Ke Blogger.com dengan Akun anda masing-masing Pastinya
  2. Masuk ke Tab Tata Letak
  3. Pilih Elemen Halaman
  4. Tambah Gadget Pilih HTML / JAVASCRIPT
  5. Dan Copy kode di bawah ini kedalamnya yah
<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}


.gbcontent{
float:right;
border:2px solid #A5BD51;
background:#ffffff;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<div style="text-align:right">
<a href="javascript:showHideGB()">
.:[Close][Klik 2x]:.
</a>
</div>
<center>

Masukan Kode iklan atau Gambar yang anda inginkan di sini

</center>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></center></div></div>

6. Simpan

sekian Cara Membuat Iklan Melayang dengan Tombol Close 2X, SEMOGA BERMANFAAT...

Cara Membuat Menu Navigasi Horizontal Yang Keren Di Blog

Menu Horizontal pada umumnya diletakkan di bagian atas blog post dan sidebar, lebih tepatnya di bawah header blog. Menu Horizontal yang dipasang di blog memiliki mamfaat yang sangat banyak untuk blog di antaranya :
  1. Dengan memasang Menu Horizontal di blog dapat memperindah blog atau mempercantik blog
  2. Dengan memasang Menu Horizontal di blog dapat memudahkan pengunjung di dalam melakukan navigasi konten blog kita.
menu horizontal,menu navigasi,navigation menu,Cool CSS3,horizontal,menu lurus

Menu Horizontal yang saya berikan pada tutorial blogspot kali ini memiliki tampilan yang sangat Keren yaitu berwarna hitam yang dibuat dengan menggunakan kode CSS. Menu Horizontal ini cocok untuk semua warna background blog. Ada satu kemudahan yang sobat blogger dapatkan dari memasang Menu Horizontal yang keren ini. Apa kelebihannya? Sobat blogger tidak perlu Edit Template untuk memasang Menu Horizontal ini.

Cara Membuat Menu Horizontal Di Blog

  • Sign In di blogger.com
  • Pada menu drop down, pilih Layout
  • Klik Add a gadget dan pilih HTML/JavaScript
  • Copy Paste kode di bawah ini pada kolom yang tersedia
<style>
/*------ CSS3 Drop Down Menu By TutorialBlogspot (www.tutorialblogspot.com)---------*/
#TutorialBlogspot-menu, #TutorialBlogspot-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#TutorialBlogspot-menu {
width: 100%;
margin: 60px auto;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#TutorialBlogspot-menu:before,
#TutorialBlogspot-menu:after {
content: "";
display: table;
}
#TutorialBlogspot-menu:after {
clear: both;
}
#TutorialBlogspot-menu {
zoom:1;
}
#TutorialBlogspot-menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#TutorialBlogspot-menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#TutorialBlogspot-menu li:hover > a {
color: #fafafa;
}
*html #TutorialBlogspot-menu li a:hover { /* IE6 only */
color: #fafafa;
}
#TutorialBlogspot-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#TutorialBlogspot-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#TutorialBlogspot-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#TutorialBlogspot-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#TutorialBlogspot-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#TutorialBlogspot-menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#TutorialBlogspot-menu ul a:hover {
background-color: #0186ba;
background-image: -moz-linear-gradient(#04acec, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background-image: -webkit-linear-gradient(#04acec, #0186ba);
background-image: -o-linear-gradient(#04acec, #0186ba);
background-image: -ms-linear-gradient(#04acec, #0186ba);
background-image: linear-gradient(#04acec, #0186ba);
}
#TutorialBlogspot-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#TutorialBlogspot-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#TutorialBlogspot-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#TutorialBlogspot-menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#TutorialBlogspot-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#TutorialBlogspot-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}

</style>

<ul id="TutorialBlogspot-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Web design</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
  • Simpan Menu Navigasi Horizontal sobat blogger

Tambahan
Ganti Yang warna merah dengan URL blog sobat dan warna biru sesuai dengan label yang diinginkan

Tidak Bisa Klik Kanan pada Blog

Rasa sakit hati dan rasa kecewa sering timbul ketika postingan atau artikel yang kita publikasikan di copy paste oleh orang lain. Ya... Masih lah ada toleransi kalau blog kita sebagai sumber postingan di cantumkan. Ini malah sebaliknya, sumber postingan tidak di cantumkan terus di hasil penelusuran Google, postingan kita yang di copy paste oleh mereka yang menempati urutan pertama.

Disable Right Click,mouse,crusor,click

Salah satu cara yang bisa kita lakukan untuk menjaga postingan kita dari tangan orang-orang yang melakuan copy paste adalah dengan cara menonaktifkan fitur klik kanan atau Disable Right Click. Untuk men-disable klik kanan pada blog sobat, sobat blogger tidak perlu melakukan Editing template. Bagaiman caranya? Ikuti langkah mematikan klik kanan pada blog di bawah ini:

Cara Disable Right Click pada Blogger Blog

  • Sign In di blogger.com
  • Pada Menu Drop Down, pilih Layout
  • Kemudian klik Add a gadget ---> HTML/JavaScript
  • Copy Paste kode berikut pada kolom yang tersedia:
<script language=JavaScript>
<!--

//edit by unwanted


var message="Melakuan Copy Paste karya orang lain, melanggar Undang-undang Nomor 6 Tahun 1982 tentang Hak Cipta";

///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")

// -->
</script>
  • Simpan Widget Sobat.
Sobat pasti pernah melihat diberbagai blog sahabat yang apabila link tersebut tersentuh kursor maka link tersebut akan bergerak.. Nah....!!!sekarang ini, saya akan memandu anda bagaimana cara membuat nya....gampang ko sob,,,,,

Cara ini menggunakan jquery, jadi penggunaan nya sangatlah mudah. so, kita langsung aja ke TKP...........

1. Login ke Blog anda
2. Klik Tab Rancangan/Setting
3. Kemudian, klik Edit HTML
4. Jagan lupa untuk mendownload template anda terlebih dulu sebelum terlalu jauh.
5. Ok,, sekarang sobat cari kode ini </head>
6. Copy kode berikut, dan letakkan diatas kode </head>






<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;a&#39;).hover(function() { //mouse in
$(this).animate({ marginLeft: &#39;12px&#39; }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});</script>

Membuat Efek Bubble (Gelembung) Pada Cursor

Membuat Efek Bubble (Gelembung) Pada Cursor
Selamat malam, salam Blogger.. :D Bagaimana tampilan blogmu? Sudah oke? Kali ini Belajar Ngeblog di BLOG menyajikan salah satu cara membuat blogmu terlihat berbeda. Kalau dulu pernah kita membuat efek bintangsekarang ganti membuat efek bubble (gelembung) yang akan mengikuti cursor. Sama seperti mainan anak-anak kecil yang bola yang bergelembung-gelembung dari sabun itu loh,, tapi di terjadi di blog dan cursornya adalah penghasil bubble (gelembung-gelembung) itu.

Saya pernah mencoba, dan lucu. Gelembung itu dari berasal daricursor kecil lalu lama-lama besar dan naik ke atas. Ibarat sebuah halaman atau toko, kadang blog juga perlu kejutan atau tampilan yang berbeda dari biasanya. Efek bubble (gelembung) ini bisa menjadi pilihan ketika ingin membuat berbeda itu. Dan melepas (menghapusnya) ketika sudah mulai bosan. ;)

Cara Membuat Efek Bubble (Gelembung) Pada Cursor
1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan salah satu kode HTML sesuai warna yang kita inginkan berikut ini:

<noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">

    // <![CDATA[

    var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // colours for top, right, bottom and left borders and background of bubbles

    var bubbles=100; // maximum number of bubbles on screen

    var x=ox=400;

    var y=oy=300;

    var swide=800;

    var shigh=600;

    var sleft=sdown=0;

    var bubb=new Array();

    var bubbx=new Array();

    var bubby=new Array();

    var bubbs=new Array();

    window.onload=function() { if (document.getElementById) {

    var rats, div;

    for (var i=0; i<bubbles; i++) {

    rats=createDiv("3px", "3px");

    rats.style.visibility="hidden";

    div=createDiv("auto", "auto");

    rats.appendChild(div);

    div=div.style;

    div.top="1px";

    div.left="0px";

    div.bottom="1px";

    div.right="0px";

    div.borderLeft="1px solid "+colours[3];

    div.borderRight="1px solid "+colours[1];

    div=createDiv("auto", "auto");

    rats.appendChild(div);

    div=div.style;

    div.top="0px";

    div.left="1px";

    div.right="1px";

    div.bottom="0px"

    div.borderTop="1px solid "+colours[0];

    div.borderBottom="1px solid "+colours[2];

    div=createDiv("auto", "auto");

    rats.appendChild(div);

    div=div.style;

    div.left="1px";

    div.right="1px";

    div.bottom="1px";

    div.top="1px";

    div.backgroundColor=colours[4];

    div.opacity=0.5;

    if (document.all) div.filter="alpha(opacity=50)";

    document.body.appendChild(rats);

    bubb[i]=rats.style;

    }

    set_scroll();

    set_width();

    bubble();

    }}

    function bubble() {

    var c;

    if (x!=ox || y!=oy) {

    ox=x;

    oy=y;

    for (c=0; c<bubbles; c++) if (!bubby[c]) {

    bubb[c].left=(bubbx[c]=x)+"px";

    bubb[c].top=(bubby[c]=y)+"px";

    bubb[c].width="3px";

    bubb[c].height="3px"

    bubb[c].visibility="visible";

    bubbs[c]=3;

    break;

    }

    }

    for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);

    setTimeout("bubble()", 40);

    }

    function update_bubb(i) {

    if (bubby[i]) {

    bubby[i]-=bubbs[i]/2+i%2;

    bubbx[i]+=(i%5-2)/5;

    if (bubby[i]>sdown && bubbx[i]>0) {

    if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {

    bubb[i].width=bubbs[i]+"px";

    bubb[i].height=bubbs[i]+"px";

    }

    bubb[i].top=bubby[i]+"px";

    bubb[i].left=bubbx[i]+"px";

    }

    else {

    bubb[i].visibility="hidden";

    bubby[i]=0;

    return;

    }

    }

    }

    document.onmousemove=mouse;

    function mouse(e) {

    set_scroll();

    y=(e)?e.pageY:event.y+sleft;

    x=(e)?e.pageX:event.x+sdown; }

    window.onresize=set_width;

    function set_width() {

    if (document.documentElement && document.documentElement.clientWidth) {

    swide=document.documentElement.clientWidth;

    shigh=document.documentElement.clientHeight;

    }

    else if (typeof(self.innerHeight)=="number") {

    swide=self.innerWidth;

    shigh=self.innerHeight;

    }

    else if (document.body.clientWidth) {

    swide=document.body.clientWidth;

    shigh=document.body.clientHeight;

    }

    else {

    swide=800;

    shigh=600;

    }

    }

    window.onscroll=set_scroll;

    function set_scroll() {

    if (typeof(self.pageYOffset)=="number") {

    sdown=self.pageYOffset;

    sleft=self.pageXOffset;

    }

    else if (document.body.scrollTop || document.body.scrollLeft) {

    sdown=document.body.scrollTop;

    sleft=document.body.scrollLeft;

    }

    else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

    sleft=document.documentElement.scrollLeft;

    sdown=document.documentElement.scrollTop;

    }

    else {

    sdown=0;

    sleft=0;

    }

    }

    function createDiv(height, width) {

    var div=document.createElement("div");

    div.style.position="absolute";

    div.style.height=height;

    div.style.width=width;

    div.style.overflow="hidden";

    return (div);

    }

    // ]]>

    </script>

5. Kode warna pink adalah kode warna dari bubble (gelembung) itu, kamu bisa mengubah dengan kode warna yang lain.
6. Simpan jika sudah selesai.
_______________________________________________________________________________________

Membuat Blog Tidak Bisa Dicopy Paste

Copy paste (copas) adalah musuh para blogger, setuju gak? Apalagi jika tidak menyantumkan sumber linknya. Rasanya sakit hati atau marah bisa terjadi karena tulisan yang kita posting dicopas oleh blogger lain dan juga diposting di blognya. Pastinya akan kesal ketika karya kita dicopy paste tanpa izin.

Blogger sangat dekat dengan tulisan. Ide itu tertuang dalam kumpulan kalimat. Lalu setelah diposting di blognya akan menjadi konsumsi orang banyak. Memang semua zaman sekarang ini setiap orang bisa membuat konten. Tapi pengakuan terhadap hasil karya orang masih begitu rendah. Masih banyak pelaku copy paste.

Tulisan hasil copy paste yang sama persis sebenarnya akan merugikan blognya sendiri. Blog yang berisi postingan-postingan copas akan membuat blognya tidak bersahabat dengan google search engine. Selain itu juga akan mendapat predikat yang tidak baik dari blogger lain.

Dulu di Belajar Ngeblog di Blog pernah dibahas salah satu cara mencegah copy paste, yaitu dengan membuat klik kanan tidak berfungsi. Tetapi masih saja bisa, karena tulisan masih bisa diblock dan dicopy dengan Ctrl+C. Nah, sekarang akan kita buat lebih tidak bisa melakukan copy paste (copas) yaitu dengan men-disable text selection. Disable tet selection adalah membuat pengunjung blog kita tidak memblock tulisan, akhirnya tidak bisa meng-copy.

Cara Membuat Blog Tidak Bisa Dicopy Paste
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Taruh kode berikut di atas kode </head>

<script type="text/javascript"> function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
    target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
    target.style.MozUserSelect="none"
else //All other route (ie: Opera)
    target.onmousedown=function(){return false}
target.style.cursor = "default"
}
</script>

6. Lalu taruh kode berikut di bawah kode </head>

<script type="text/javascript"> disableSelection(document.body) //disable text selection on entire body of page </script>

7. Simpan Template jika sudah selesai.

Saya tidak menerapkan dua cara itu, yaitu tidak bisa klik kanan dan tidak bisa memblock tulisan di blog ini. Karena kalau saya gunakan jadi nggak bisa dipraktekan (diambil) scriptnya. Kalau benar-benar niat membuat blogmu tidak bisa dicopas, gunakan saja semuanya ;)
_________________________________________________________________________________

Menambahkan Jam dan Kalender Pada Blog

Blog kita anggapkan saja sebagai rumah kita, yaitu tempat kita berteduh dari panasnya siang dan dinginnya malam. Blog tempat kita tinggal berada dalam suatu lingkungan yang cukup luas yang setiap orang bebas untuk datang ke rumah kita(blog). Adakalanya kita juga perlu unutk menghias rumah kita agar kelihatan lebih indah dan rapi.

Salah satu pernak-pernik yang biasanya ada di rumah (blog) adalah jam dan kalender, hidup ini terbatas oleh waktu, dan setiap rumah pasti punya jam atau kalender, walau jaman sekarang ada saja hal-hal yang mempermudah manusia, misalnya saja di HP  sudah ada jam  dan kalendernya.
Jam adalah sebuah unit waktu. Lama sebuah jam adalah 1/24 (satu perduapuluh empat) hari. Satu jam bisa dibagi menjadi unit waktu yang lebih kecil lagi. Satu jam terdiri dari: 60 menit atau 3600 detik
Cara Menambahkan Jam dan Kalender Pada Blog
  1. Login ke blogger
  2. Pilih Tata Letak kemudian Tambah Gadget
  3. Pilih HTML/JavaScript
  4. Masukan kode-kode berikut ini
<script src="http://www.clocklink.com/embed.js"></script><script language="JavaScript" type="text/javascript">obj=new Object;obj.clockfile="5015-green.swf";obj.TimeZone="GMT0700";obj.width=160;obj.height=40;obj.wmode="transparent";showClock(obj);</script>

Hasilnya kan seperti ini



Dan atau yang satu ini

<center><iframe src="http://www.free-blog-content.com/Calendars/calendar0054.htm" width="120" height="150"
marginwidth="0" marginheight="0" frameborder="no" scrolling=no allowtransparency="true"></iframe></center>

Hasilnya akan seperti ini




Sebuah kalender adalah sebuah sistem untuk memberi nama pada sebuah periode waktu (seperti hari sebagai contohnya). Nama-nama ini dikenal sebagai tanggal kalender. Tanggal ini bisa didasakan dari gerakan-gerakan benda angkasa seperti matahari dan bulan.

Dengan pernak-pernik hiasan rumah (blog) mungkin akan bisa meperindah blog kita, sehingga orang-orang akan semakin betah bertamu ke blog kita. Untuk lebih banyak pilihan jam kita bisa ambil dari sini, dan untuk lebih banayak pilihan kalender kita bisa ambil dari sini
__________________________________________________________________________

Membuat Tulisan Berjalan dan Aplikasinya

Jangan hanya diam, itu mungkin dapat mengambarkan sebuah makna yang banyak, artinya apa? kita harus berbuat untuk sesuatu yang bermanfaat. Jangan hanya diam berarti harus bergerak, oleh sebab itu kita akan membuat tulisan yang gak hanya diam, tapi juga bergerak. Memang suatu yang bergerak bisa menjadi daya tarik atau menarik perhatian orang.

Kita akan membuat tulisan berjalan, yang berjalan ke samping, dari kanan ke kiri. Dan juga tulisan yang berjalan dari bawah ke atas, yaitu dengan menggunakan kode marquee sehingga nantinya kita dapat menarik perhatian pembaca dengan tulisan yang berjalan itu, mungkin tulisan itu berisi sesuatu yang penting yang pembaca harus tahu.

Cara Membuat Tulisan Berjalan
Berikut ini adalah kode untuk tulisan berjalan ke samping
<marquee direction="left"><b>Selamat Datang di Belajar Ngeblog di BLOG </b></marquee>


Selamat Datang di Belajar Ngeblog di BLOG

Kita dapat menggati tulisan yang selamat datang itu dengan tulisan yang lain sesuai dengan keinginan kita.

Berikut ini adalah kode untuk tulisan berjalan ke atas

<marquee direction="up" onmouseout="this.start()" onmouseover="this.stop()"><b>Selamat Datang di Belajar Ngeblog di BLOG</b> </marquee>


Selamat Datang di Belajar Ngeblog di BLOG

Selain tulisan, untuk kode yang berjalan ke atas juga dapat kita aplikasikan menjadi blogroll, contoh kode htmalnya menjadi sebagai berikut:

<marquee direction="up" onmouseout="this.start()" onmouseover="this.stop()">
<a href="http://Belajar-Ngeblog-Di- Blog.blogger.com/">LINK 1</a>
<a href="http://Belajar-Ngeblog-Di- Blog.blogger.com/">LINK 2</a>
<a href="http://Belajar-Ngeblog-Di- Blog.blogger.com/">LINK 3</a>
</marquee>

Bisa juga kita gunakan untuk aplikasi newsflash. Kode HTMLnya sebagai berikut

<marquee direction="up" onmouseout="this.start()" onmouseover="this.stop()">
<script src="http://www.geocities.com/uddin_81/recent-post.js">
</script> <script>
var numposts = 20; var showpostdate = false; var showpostsummary = false; var numchars = 100;
</script> <script src="http://Belajar-Ngeblog-Di- Blog.blogger.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
 </script>
</marquee>

Jangan lupa mengganti Belajar-Ngeblog-Di- Blog.blogger.com  dengan URL kamu sendiri, sebagai recent post.
____________________________________________________________________

Cara Membuat Judul Blog Berjalan

Membuat tulisan berjalan sudah pernah kita pelajari bersama, yaitu dengan menambahkan sedikit menambahkan kode html, mungkin untuk lebih jelanya kamu dapat baca di sini. Sekarang kita juga akan belajar untuk membuat blog kita lebih menarik lagi dengan hal yang sama, tetapi yang berjalan kali ini dalah judul blog kita.

Mungkin belum tahu yang mana judul blog itu? kalo judul blog saya ini adalah Belajar Ngeblog di BLOG, Oh ya,,,, ada sedikit tips yang berkenaan dengan judul blog kita, yaitu kita dapat mengganti judul blog kita dengan judul postingan kita agar blog kita lebih ramah dengan SEO.

Cara Membuat Judul Blog Berjalan 
1. Pilih tata letak kemudian edit html
2. Jangan lupa beri tanda centang pada Expand Template Widget
3. Cari kode berikut <title><data:blog.pageTitle/></title>
4. Jika sudah ketemu, ganti kode tersebut dengan kode berikut ini

<b:include data='blog' name='all-head-content'/>

<script language='JavaScript'>
var txt="<data:blog.pageTitle/>";
var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
</script>

5. Lihat apakah berhasil dengan (PRATINJAU) jika berhasil SIMPAN______________________________________________________________

Membuat Chat Room Di Blog Kita

Banyak sekali alasan orang pergi ke warnet, karena saat iniperkembangan di dunia ini sangat pesat. Ada yang berselanjar di dunia maya untukmengupdate blog, friendster, atau situs jejaring sosial yang sekarang ini semakin marak. Yang sekarang naik daun mungkin face book dan masih ada lagi my space. Itu salah satu tujuan orang berselanjar di dunia maya, mengupdate ada lagi yaitu untukchatting.

Nah, sekarang bagaimana agar blog kita juga dapat menyediakan ruang untuk chatting ( chat room ) agar orang menjadi betah di blog kita. Ada penyedia jasa bagi kita untuk berkreasi membuatchat room, kita tinggal datang ke Meebo disana kita dapat membuat chat room secara gratis.

Semakin banyak yang mengunakan ( menambahkan ke blog mereka ) maka akan semakin ramai yang chatting di chat room kita. Saya sudah membuat chat room di Meebo yang kamu bisa lihat di MUSIK-RADIO dan ONLINE-MAJALAH. Jika kamu tertarik untuk menambahkan ke blog kamu, silahkan copy-paste kode html berikut ini.



"width:300px" dan width="300"
angka 300 dapat kamu ubah sesuai lebar yang kamu inginkan
height="350" dan height="350"
angka 350 dapat kamu ubah sesuai tinggi yang kamu inginkan
______________________________________________________________

Membuat Tulisan Berkedip-kedip

Blog kita akan terlihat lebih baik dan bagus jika didukung oleh tampilan yang yang baik juga, artinya selain konten (isi) blog kita baik atau bermutu setidaknya juga ditunjang tampilan blog kita yang juga harus indah dan bagus. Salah satu hal yang bisa kita lakukan untuk memperindah blog kita adalah dengan membuat tulisan atau teks yang ada di blog kita tak hanya diam, artinya berjalan dan bergerak-gerak 

Setelah kita belajar membuat tulisan berjalan, yang dulu pernah kita pelajari bersama disini. Kita sekarang beralih, cara membuat tulisan berkedip-kedip. Mungkin kita juga bisa kasih julukan dengan tulisan genit  Karena dengan tulisan berkedip-kedip ini akan menjadi daya tarik orang untuk melihatnya. Bayangkan saja jika ada cewek di dekat kita yang mengedip-ngedipkan matanya. 

SELAMAT DATANG DI BELAJAR NGEBLOG DI BLOG

Itu contoh atau hasil dari pelajaran kita hari ini, yaitu membuat tulisan berkedip, lalu apa saja hasil dari modifikasi atau manfaat apa yang bisa kita peroleh dari kode html tulisan berkedip ini? Kita juga dapat membuat link dari tulisan berkedip itu, hasilnya akan seperti ini :


Cara Membuat Tulisan Berkedip-kedip 
1. Login ke blogger
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode-kode berikut ini

<blink><b>SELAMAT DATANG</b></blink>

5. Sedang untuk yang kita sisipkan link kodenya seperti ini
_______________________________________________________

Menambahkan Playlist Mp3 Indonesia Hits

Ada yang tidak suka dengan musik barat, ada yang lebih suka dengan musik dalam negeri sendiri. Kalu dulu say pernah menulis tentang menambahkan Playlist Mp3 Hits Western/Barat, tentu juga ada yang meninginkan Playlist Mp3 Indo. Apa bedanya antara Playlist Mp3 Hits Western/Barat dan Playlist Mp3 Indo?

Kalau Playlist Mp3 Indo, yang diputar di blog kita adalah lagu-lagu anak negeri yang masih hot dan hits, sedangkan Playlist Mp3 Hits Western/Barat, yang diputar adalah lagu-lagu asing yang juga lagi hot dan hits serta fresh. [  pintar ya saya ]

Langsung saja, kita bahas cara menambahkan Playlist Mp3 Indo, mungkin kalau kamu yang sudah baca sebelumnya ( menambahkan Playlist Mp3 Hits barat ), sama dengan hal tersebut, masih sama juga, gadget ini dikembangkan oleh musik-live.

Cara Menambahkan Playlist Mp3 Indo adalah sebagai berikut
1. Login ke blogger.com
2. Pilih Tata Letak --&gt; Tambah Gadget
3. Selanjutnya pilih HTML/JavaScript
4. Masukan (copy paste) kode di bawah ini
<br/><a href='http://kurniasepta.blogspot.com/2009/01/ada-yang-tidak-suka-dengan-musik-barat.html' target='_blank'><img border='0' src='http://img401.imageshack.us/img401/7652/eqizqu6.gif' width='250' height='50'></a><br/><embed src='http://kodelagu.net/codeplayer.swf' width='250' height='200' allowscriptaccess='always' allowfullscreen='true' flashvars='height=200&width=250&file=http://kodelagu.net/generator3.xml&config=http://kodelagu.net/randomp3.swf&searchbar=false' /><br>

5. Simpan Kalau sudah beres
_________________________________________________

Membuat Cursor Bertaburan Bintang

Membuat Cursor Bertaburan Bintang
Ada banyak sekali untuk meodifikasi atau membuat pernak-pernaik tentang cursor, yang sudah kita bahas saja ada mengubah cursor dengan gambar,membuat teks yang berputar mengelilingi cursor. Dan kali ini belajar membuat cursor yang bertaburan bintang. jadi saat cursor kita bergerak akan turun bintang-bintang dari cursor. Ada beberapa warna bintang yang bisa kita pilih untuk ditampilkan di blog kita.

Cara Membuat Cursor Bertaburan Bintang
1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan salah satu kode HTML sesuai warna yang kita inginkan berikut ini:

<script src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-biru.js" type="text/javascript"></script>

5. Kita warnan biru dengan, hijau, merah, ungu, silver, kuning, hitam
6. Simpan jika sudah selesai.
_________________________________________________

Membuat Banner dan Tukeran Link Banner

Jika kita punya suatu produk, pasti kita ingin juga membuat sebuah logo dari produk kita tersebut, misalnya kita punya toko, tentu kita juga akan memberi nama toko kita itu, dengan nama yang bagus, yang mempunyai arti dan tentu saja mudah diingat, itu sama artinya saat kita punya blog, tentu kita akan menamainya dengan sesuatu nama atau brand dengan nama yang bagus dan mudah diingat.

Sebagai contohnya adalah blogger, yang sudah banyak dikenal orang, mungkin kenapa blogger juga banyak dikenal orang karenaLogo Banner juga. Kita yang punya blog juga mengikuti atau setidaknya berusaha memperkanalkan blog kita pada khalayak umum dengan  salah satu caranya dengan membuat Banner.

Salah satu pernak-pernik blog yang banyak digunakan dan tentunya akan berdampak positif dengan blog kita adalah Banner dan Tukeran Link Banner. Dengan pernak-pernik tersebut akan membawa manfaat terciptanya pertemanan derngan blogger yang lain, karena saling bertukeran link, yang akhirnya berimbas padatraffic blog kita.

Cara Membuat Banner dan Tukeran Link Banner
1. Login ke blogger
2. Pilih Tata Letak -> Tambah Gadget
3. Pilih HTML/JavaScript 
4. Masukan kode HTML berikut ini

<a href="http://kurniasepta.blogspot.com" target="_blank">
<img border="0" width="123" title="KLIK!" src="http://images.cooltext.com/531532.gif" height="34"/></a>
<!------------------------------------------------------------>
<textarea rows="3" cols="16"><a href="http://kurniasepta.blogspot.com" target="_blank">
<img border="0" width="123" title="KLIK!" src="http://images.cooltext.com/531532.gif" height="34"/></a></textarea>

5. Sebelum disimpan, berikut ini hal-hal yang perlu kita ubah.
  • Diatas kode <!-----> adalah bannernya dan di bawahnya adalah textarea, kotak berisi kode banner.
  • http://kurniasepta.blogspot.com adalah URL yang dituju, kita ganti dengan URL kita sendiri.
  • http://images.cooltext.com/531532.gif adalah URL gambar atau logo banner.
  • Kita juga dapat mengatur lebar dan tinggi banner dengan mengubah angka-angka pada width dan height. dan kotak (textarea) dengan mengubah angka pada rows dan cols.Kalaupuan tidak diubah juga tidak akan jadi masalah
 Mungkin diantara kita masih, masih belum bisa membuat logo banner sendiri, jangan khawatir, karena kita juga bisa membuat logo banner secara online dengan mudah dan cepat. Kita bisa membuatnya di cooltext.com disana kita tinngal memilih modelnya, menganti judul, tulisan, dan warna, setelah itu sedikit registrasi dan kita akan mendapatkan kode HTMLnya. Ambil saja URL gambar atau logonya saja.

Setelah kita pasang atau tambahkan ke blog kita nanti hasilnya akan seperti di atas, ada yang mau tukeran link banner dengan saya? atau ada yang ingin mengoleksi banner? Silahkan :D
__________________________________________

Membuat Hujan Salju Pada Blog




Membuat efek salju di blog, kenapa harus nulis ini saya? Sekedar hanya ingin berbagi kepada blogger yang lain khususnya yang mempunyaitemplate dengan background atau warna dasar hitam seperti punya saya ini. Akan kelihatan lebih menarik lagi tentunya jika diseimbangkan dengan warna putih, dan warna putih itu berasal dariefek hujan salju. Dingin :)


Walau lagi musim salju atau tidak. Kita tetap bisa kan membuat hujan salju di blog kita. Memang di sini tidak ada hujan salju, masih tetap juga kita bisa buat hujan salju di blog kita. Bagaimana caranya membuat hujan salju di blog kita? Mudah kok :)


Cara Mengubah Cursor Blog dengan Gambar
1. Login ke blogger
2. Pilih Tata Letak -> Tambah Gadget
3. Pilih HTML/JavaScript 
4. Masukan kode HTML berikut ini

KODENYA===

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script src='http://blogergadgets.googlecode.com/files/snowfall.min.jquery.js' type='text/javascript'></script> <script type="text/javascript"> $(document).snowfall({flakeCount:199}); </script>

5. Simpan jika sudah selesai