Tips Membuat gambar Berjatuhan ini memiliki kelebihan dimana kita dapat mengubah gambar untuk falling effect-nya sesuai yang kita inginkan. Kita juga dapat mengatur tingkat kecepatan dan banyaknya gambar yang jatuh (falling snow) sesuai yang kita mau
ika sobat blogger tertarik untuk membuat falling snow ini, kamu bisa mengikuti langkah-langkah berikut:
* Login ke akun blogger kamu.
* Dari halaman Dashboard, pilih Tata Letak lalu pilih Edit HTML.
* Kopikan script di bawah ini dan letakkan (paste) di bawah kode <head> (yang letaknya di awal-awal script template blog).
<script language='JavaScript'>
var no = 7;
var speed = 5;
var snowflake = "http://i634.photobucket.com/albums/uu66/oktri_2009/kampret.gif";
</script>
<script language='JavaScript' src='http://sites.google.com/site/ruangsc/enes/fallinsnow.js'/>
* Kamu bisa mengganti gambar yang jatuh (var snowflake) dengan gambar yang kamu inginkan. Kamu juga bisa mengatur banyaknya gambar (var no) dan tingkat kecepatan (var speed) sesuai keinginan kamu.
* Lakukan Pratinjau (Preview) sebelum menyimpan template kamu.
* Jika sudah OK. Save template kamu dan ucapkan Alhamdulillah...
Nah, mudah sekali kan? , selamat mencoba...
Membuat Judul bergerak
kali ini saya akan berbagai tips buat temen yang belum tahu bagaimana untuk membuat judu blog bergerak atau pun ber animasi katanya ci...
mungkn tips ini sudah tidak lagi asing bagi blogger profesional....!!
oya ni scrictnya di bawah ini :
<script language="JavaScript">
<!--
//
//Scrolling Status Bar
putmsg="==welcome==";
letchar2="+==o0o==+";
letchar1="+==o0o==+";ultimo1=letchar1.length-1;
ultimo2=letchar2.length-1;
ultimo2=letchar2.length-1;
tiempo=setTimeout("stat_scroll()",.1);
function stat_scroll()
{
aux1=letchar1.charAt(ultimo1-1);
letchar1=aux1+letchar1.substring(0,ultimo1-1);
aux2=letchar2.charAt(0);
letchar2=letchar2.substring(1,ultimo2+1)+aux2;
window.status="(" + letchar2 + putmsg + letchar1 + ")";
tiempo=setTimeout("stat_scroll()",.1);
return true;
}
// -->
</script>
<script language="JavaScript">
<!--
//
putmsg="[Blog Oktri]";
letchar2="+==o0o==+";
letchar1="+==o0o==+";
ultimo2=letchar2.length-4;
ultimo2=letchar2.length-4;
tiempo=setTimeout("tit_scroll()",.1);
function tit_scroll()
{
aux1=letchar1.charAt(ultimo1-1);
letchar1=aux1+letchar1.substring(0,ultimo1-1);
aux2=letchar2.charAt(0);
letchar2=letchar2.substring(1,ultimo2+1)+aux2;
document.title="" + letchar2 + putmsg + letchar1 + "";
tiempo=setTimeout("tit_scroll()",.1);
return true;
}
// -->
</script>
untuk memasangnya semuanya lakukan sebagaiberikut :
* Masuk BLOGGER Anda
* Dashboard/dabor
* Layout/tata letak
* Tambah Gaget
* Pilih HTML/JAVASCRIPT.
* Paste script diatas lalu edit sesuai keinginan anda
* kemudian simpan
*
*Selamat Mencoba ya......* :)
*Dan Semoga Bermanfaat YA!!!* :d
Menu Tab view
Mungkin kamu telah banyak membaca postingan trik blogger seperti ini, tapi tidak ada salahnya kita bersama-sama mereview kembali.
Trik ini saya dapatkan setelah beberapa kali mencoba memasang tab view dari beberapa blog narasumber namun ngga kelar-kelar (maklum otak lagi bebal) Kemudian olah sana dan sini, alhamdulillah akhirnya tab view telah rampung dan di pasang di Blog yang tidak seberapa ini.
Beginilah cara untuk membuat menu tab view tersebut
1. Login ke blogger trus pilih menu "Layout --> Edit HTML"
2. Kemudian cari kode ini ]]></b:skin>
3. Kemudian masukkan kode berikut ini sebelum kode]]></b:skin> atau kedalam tag CSS.
div.TabView div.Tabs4. Perhatikan text-text yang berwarna merah, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll.
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* 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: 3px 5px;
}
5. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode </head>
<script type='text/javascript'>
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>
6. Kemudian "Di save"
7. Lalu pergi ke menu "Page Elements"
8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan km letakkan Manu Tab View ini.
9. Inilah script yg harus kamu pasang :
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">
<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
<div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://www.oktri.co.cc/2010/02/cara-membuat-menu-tab-view.html" target="_blank" title="Tabview Widget">Widget by Oktri Darmadi</a></div>
Keterangan :
- Angka2 atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna merah adalah isi dari tabvie tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berkedip2. tambahkan menu tersebut dibawahnya.
