F For Fauzie

Postingan ini tentang bagaimana cara membuat menu drop down pada navigasi. Perhatikan image di samping. Sebelumnya saya minta maaf kepada paman Helman, karena baru sempet posting, akhir-akhir ini saya disibukkan oleh aktifitas saya di dunia nyata ^^. Kembali ke topik, pada navigasi di atas saya menggunakan CSS dan HTML. Dikarenakan menggunakan kode CSS maka kodenya pun lumayan ribet, kurang lebih seperti ini.

Trik Membuat Menu Drop Down Pada Navigasi

Baca Selengkapnya →

Kemarin seorang sahabat blogger menanyakan bagaimana membuat daftar isi otomatis secara sederhana. Saya sempat berpikir bentuk daftar isi otomatis yang sederhana itu bagaimana? dan fungsinya apa saja, akhirnya saya pikir buat aja yang sederhana dan gak ribet. Dan hasilnya lumayan juga heheheee....ok ini nih scriptnya

1. Log in ke blog anda
2. Klik Rancangan
3. Klik Tambah Gadget
4. Pilih HTML/JavaScript
5. Masukkan kode berikut ke dalamnya dan simpan template

<div style="width: 100%; height: 300px; overflow: auto;">
<script style="text/javascript" src="http://bloekoetoek-blogonol.googlecode.com/files/blogonol-daftarisi.js"></script>
<script src="http://www.fauziewisudawan.co.cc/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>

height: 300px adalah tinggi tampilan widget. ganti angka 300px dengan keinginan anda
http://www.fauziewisudawan.co.cc/ ganti dengan alamat blog atau web anda.
Selesai dan lihat hasilnya
Ok gan selamat mencoba dan sukses selalu.

sumber : blogonol.blogspot.com

Tips Memasang Daftar Isi Otomatis Sederhana

Baca Selengkapnya →

Kali Ini Kita akan membuat label cloud tanpa edit html.

langsung saja silahkan baca tutorial dibawah ini

Seperti Biasa :
1. login ke akun Blogger anda
2. Masuk Ke Rancangan Elemen Laman
3. Kemudian Tambah Gadget
4. Pilih HTML/Javascript
5. Kemudian copy code dibawah ini

Ket :

Ganti Kode : http://www.arjermania.co.cc/search/label/Artikel dengan link tujuan kamu
Lalu ganti “Top Artikel” dengan judul yang ingin ditampilkan.

Untuk Menambahkan Link tujuan Lainnya tinggal di Copy aja kode <a href='http://www.arjermania.co.cc/search/label/Artikel'style='12'>Top Artikel</a> dibawahnya.

6. Save dan lihat blog anda

sumber : arjermania.co.cc

Tips Membuat Label Cloud Tanpa Edit HTML

Baca Selengkapnya →

Kali ini sharing tentang cara memberikan sound efek atau efek suara pada blog, tentunya ini akan memberi ciri khas tersendiri pada blog kita. untuk masalah loading anda jangan takut.menurut saya ini tidak berpangaruh besar pada blog kita.

Untuk memberi efek suara di blog caranya cukup mudah ikuti langkah-langkah di bawah ini

Login dulu ke blogger
Klik tata letak
Klik Tambah gadget
Kemudian pilih HTML/JavaScript
Kemudian copy paste kode di bawah ini kedalamnya

Setelah itu simpan
Selesai

Untuk tulisan yang dicetak tebal anda bisa mengganti dengan suara lain. anda bisa ganti dengan kode dibawah ini

suara musik = http://www.swfcabin.com/swf-files/1252840473.swf
Suara hantu = http://www.swfcabin.com/swf-files/1254889895.swf

Atau anda bisa cari sendiri di http://www.swfcabin.com/search.php. selamat mencoba.

sumber: arjermania.co.cc

Tips /Cara Memberi Efek Suara di Blog

Baca Selengkapnya →

Menu tab view adalah salah satu gadget yang dapat mengirit tempat di sidebar. Fungsinya tergantung anda, namun yang paling utama adalah sebagai tempat untuk sebuah daftar isi blog. atau mungkin sebagai temopat banner iklan anda.

Untuk membuat menu tab view tanpa edit html silahkan baca tutorial dibawah:
1. login ke akun Blogger anda
2. Masuk Ke Rancangan Elemen Laman
3. Kemudian Tambah Gadget
4. Pilih HTML/Javascript
5. Kemudian copy code dibawah ini

<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 98px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight:bold; color:#000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #E6E6E6; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#E6E6E6; /* Warna background Kotak Utama */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i   = 0;
do
{
    if (Tab.tagName == "A")
    {
      i++;
      Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
      Tab.className = (i == id) ? "Active" : "";
      Tab.blur();
    }
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i    = 0;
do
{
    if (Page.className == 'Page')
    {
      i++;
      if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
      Page.style.overflow = "auto";
      Page.style.display = (i == id) ? 'block' : 'none';
    }
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>Judul 1</a>
<a>Judul 2</a>
<a>Judul 3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
Isi menu tab view 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab view 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab view 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Ket : Ganti Huruf yang dicetak tebal tersebut Sesuai Keinginan anda

Jangan Lupa Save dan lihat hasilnya.......

sumber : arjermania.co.cc

Tips Cara Membuat Menu Tab View Tanpa Edit HTML

Baca Selengkapnya →

Postingan kali ini akan membahas bagaimana membuat tulisan pesan dibawah sebuah postingan. Pesan tersebut sangat berguna bagi kita agar kita dapat membuat sebuah info kepada orang lain yang membaca artikel kita aaupun yang ingin copas. Langsung saja menuju cara membuatnya :

1. Login Blogger

2. Rancangan >> Edit html

3. Centang pada "Expand template widget"

4. Cari kode seperti ini <data:post.body/>

5. Lalu Copy kode dibawah ini dan taruh tepat dibawah kode <data:post.body/>

<hr/><b>Isi pesan yang akan muncul di bawah postingan</b><hr/>

6. Ganti tulisan yang dicetak miring tersebut dengan pesan anda

7. Kemudian save template anda

Keterangan:
<hr/> adalah tag HTML untuk garis
<b>...</b> adalah tag HTML untuk hurup tebal (bold)

Cara di atas adalah cara yang umum digunakan dalam proses menambahkan pesan di bawah posting blog. untuk mempercantik tampilan pesan kita nantinya, kita juga bisa menambahkan tag HTML lain, seperti <center>...</center> (agar teks menjadi rata tengah), <i>...</i> (untuk tulisan miring), <blink>...</blink> (untuk tulisan berkedip).

sumber : arjermania.co.cc

Tips / Cara Membuat Tulisan Dibawah Postingan Blog

Baca Selengkapnya →

F For Fauzie

Trik Membuat Menu Drop Down Pada Navigasi

Tips Memasang Daftar Isi Otomatis Sederhana

Tips Membuat Label Cloud Tanpa Edit HTML

Tips /Cara Memberi Efek Suara di Blog

Tips Cara Membuat Menu Tab View Tanpa Edit HTML

Tips / Cara Membuat Tulisan Dibawah Postingan Blog

Top Artikel

Genre Berita

Blog Archive

About