Membuat Link Navigasi Menu

Kita dapat membuat link navigasi menu seperti contoh berikut:



Caranya dengan klik LAYOUT, klik TEMPLATE -> EDIT HTML, sisipkan script ini dibawah /*Header*/

/* Header */

#newnavbar ul li{

font-size:100%;

list-style-type: none;

display:inline;

padding:0px;

margin:10px;

border:0px solid;

}

Kemudian cari baris script berikut:

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>

Jika angka pada MAXWIDGETS='1', maka ubah menjadi '3'. Dan jika SHOWADDELEMENTS='NO' maka
ubah menjadi 'YES'.
Setelah itu klik SAVE THE TEMPLATE.
Kemudian kita buat urutan navigasinya. Klik TEMPLATE -> PAGE ELEMENTS, dan klik ADD PAGE ELEMENT
di bagian HEADER dan pilih HTML/JAVASCRIPT, kemudian tambahkan script ini:

<div id='newnavbar'>

<ul>

<li><a href="URL Home page">Home</a></li>

<li><a href="URL Music page">Music</a></li>

<li><a href="URL Books page">Books</a></li>

<li><a href="URL Links page">Hot Links</a></li>

<li><a href="URL Profile page">About Me</a></li>

<li><a href="mailto:EMAIL ADDRESS KAMU">Contact</a></li>

</ul></div>

Untuk membuat link menu menggunakan gambar caranya sama seperti diatas tapi scriptnya seperti
ini:

/* Header */

#newnavbar ul li{

list-style-type: none;

display:inline;

margin:0px;

padding:30px;

border:0px solid;

}

Kemudian ADD PAGE ELEMENTS pilih HTML/JAVASCRIPT dan masukkan script berikut:

<div id='newnavbar'>

<ul>

<li><a href="URL Home page"><img src="URL Home image"></a></li>

<li><a href="URL Music page"><img src="URL Music image"></a></li>

<li><a href="URL Books page"><img src="URL Books image"></a></li>

<li><a href="URL Links page"><img src="URL Links image"></a></li>

<li><a href="URL Profile page"><img src="URL Profile image"></a></li>

<li><a href="mailto:EMAIL ADDRESS KAMU"><img src="URL Email image"></a></li>

</ul></div>

Hasilnya akan seperti ini:

Menambahkan Tombol Digg Pada Postingan Blog

Berikut ini akan saya jelaskan bagaimana cara untuk menampilkan tombol DIGG di setiap postingan
blog kamu.
Sebelum kamu memulainya ada hal yang harus kamu lakukan:
***Blog kamu harus diset untuk menyimpan Post Pages dengan cara, login ke DASHBOARD, klik
SETTING -> ARCHIVING, set "ENABLE POST PAGES?" ke "YES" dan save seting***
Setelah itu, masuk ke TEMPLATE, klik EDIT HTML, untuk berjaga-jaga back up template terlebih dahulu.
setelah itu centang "EXPAND WIDGET TEMPLATES"





kemudian cari baris yang terdapat script

<p><data:post.body/></p>

Jika kamu ingin menempatkan tombol DIGG di pojok kanan atas postinganmu maka letakkan script
ini DIATAS baris script tadi:

<div style='float:right; margin-left:10px;'> <script type='text/javascript'> digg_url=&quot;<data:post.url/>&quot;; </script> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div> <p><data:post.body/></p>

ini contohnya:





jika kamu ingin tombol DIGG berada di akhir postinganmu maka taruh script ini DIBAWAH script
yang tadi:

<p><data:post.body/></p> <div style='float:right; margin-left:10px;'> <script type='text/javascript'> digg_url=&quot;<data:post.url/>&quot;; </script> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div>

maka hasilnya akan seperti ini:





jika kamu ingin tombol DIGG berada di pojok kiri atas postinganmu, maka kamu tinggal mengganti
scriptnya seperti ini:

<div style='float:left; margin-right:10px;'> <script type='text/javascript'> digg_url=&quot;<data:post.url/>&quot;; </script> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div> <p><data:post.body/></p>

hasilnya akan seperti ini :





DIGG juga mempunyai tombol yang lebih praktis/kecil lagi dengan cara menambahkan script ini:

<div style='float:right; margin-left:10px;'> <script type='text/javascript'> digg_url=&quot;<data:post.url/>&quot;; digg_skin=&quot;compact&quot;; </script> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div> <p><data:post.body/></p>

kamu akan melihat hasilnya seperti ini:





kamu juga dapat mengganti warna tombol DIGG tersebut dengan menggunakan kode warna hexadesimal
seperti ini:

<div style='float:right; margin-left:10px;'> <script type='text/javascript'> digg_url=&quot;<data:post.url/>&quot;; digg_bgcolor=&quot;#BDEDFF&quot;; digg_skin=&quot;compact&quot;; </script> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div> <p><data:post.body/></p>

dan hasilnya seperti ini:

Menambahkan Page Elements Pada Blogger

Disini saya akan menjelaskan bagaimana caranya menambahkan PAGE ELEMENTS di blog kamu agar
kamu bisa menambahkan ELEMENTS di bagian header atau di blog post.
Cara menambah Page Elements di Header dan Blog Post adalah sebagai berikut.
Klik TEMPLATE, kemudian EDIT HTML, centang EXPAND WIDGET TEMPLATES, kemudian cari baris ini:

<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Ganti script tersebut dengan ini:

<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>

Ini akan menambahkan 2 Page Elements di Header blog kamu, kamu juga bisa menambah jumlahnya
dengan mengganti angka pada script maxwidgets='3'

Setelah itu cari baris script ini:

<div id='main-wrapper'> <b:section class='main' id='main' showaddelement='no'>

Kemudian ganti menjadi seperti ini:

<div id='main-wrapper'> <b:section class='main' id='main' showaddelement='yes'>

sekarang kamu bisa menambahkan Page Elements setelah atau sebelum postingan blog kamu.



Ada juga cara untuk menambah Page Elements diantara Header dan Blog Post.
Caranya adalah, kamu cari baris script berikut ini kemudian ganti tulisan "NO" menjadi "YES".

<div id='content-wrapper'> <div id='crosscol-wrapper' style='text-align:center'> <b:section class='crosscol' id='crosscol' showaddelement='yes'/> </div>

Kemudian hasilnya akan seperti ini:



Setelah semua selesai jangan lupa untuk menyimpan setinganmu dengan cara klik SAVE SETTING.

Cara Memunculkan Alert Box

Berikut ini saya akan memberitahu cara memunculkan message box di Blog kamu dengan menggunakan
javascript. Message box ini akan muncul sebagai pop up box sebelum visitor dapat melihat Blog kita.

Ada beberapa cara menampilkan message box di Blog kamu.

1. Pop up box dengan tombol OK
Kita akan membuat pop up box dengan contoh seperti berikut.



Untuk membuat message box tersebut, log in ke account Blogger kamu, klik TEMPLATE-> PAGE ELEMENTS
-> ADD A PAGE ELEMENT, kemudian pilih HTML/JavaScript. Paste kode dibawah ini:

<script type="text/javascript"> alert('Tulis text kamu disini!!!!!!!!!') </script> <noscript>Enable javascript in your browser to view an important message.</noscript>

2. Pop up box dengan tombol konfirmasi
Message box ini akan menampilakan pop up box dengan tombol "OK" dan "CANCEL".
Jika visitor mengklik tombol "OK" maka mereka akan masuk ke Blog kita, tapi jika mereka
mengklik "CANCEL" maka mereka akan diarahkan ke situs lain.



Untuk menampilkan message box tersebut klik TEMPLATE-> PAGE ELEMENTS
-> ADD A PAGE ELEMENT, kemudian pilih HTML/JavaScript. Paste kode dibawah ini:

<script type="text/javascript"> confirm('Apakah kamu yakin mau masuk situs ini?????'); if (confirm('Apakah kamu yakin mau masuk situs ini???????')) { window.location = "URL ALAMAT SITUS KAMU"; } else { window.location = "URL ALAMAT SITUS JIKA MENGKLIK CANCEL"; } </script>

3. Message box dengan kotak isian.
Pop up box ini dapat digunakan untuk memasukkan username, nama visitor atau isian lainnya yang kalian mau.
Contoh yang ini akan membuat visitor memasukkan nama mereka sebelum masuk ke Blog kita.
Klik TEMPLATE-> PAGE ELEMENTS
-> ADD A PAGE ELEMENT, kemudian pilih HTML/JavaScript. Paste kode dibawah ini:

<script type="text/javascript"> var yourName = prompt("Masukkan nama anda terlebih dahulu!!!!", "Reader"); </script>

Maka akan muncul pop up box seperti ini:



Kemudian tambahkan Page Element->HTML/JavaScript lagi di Post Body dan masukkan kode ini:

Welcome back <script type="text/javascript">document.write(yourName)</script>! Feel free to look around. If you like what you read, mention us in your post or link to this site. Hope to see you again <script type="text/javascript">document.write(yourName)</script>

Maka akan muncul pesan selamat datang seperti ini:



Kamu dapat mengganti text tersebut sesuai keinginan kamu.