Harapan Putra

Delivery to you the hottest news from harapanputra.com 2013 everyday with no delay

Home » Archives for June 2010

Menu Tab View

blog tutorial No comments:


Mempersingkat satu elemen halaman menjadi 3 bagian atau lebih yang masih-masing berisi wigget berbeda...

silahkan loggin ke tata letak >> edit html >> chek expand widget template dan cari kode ]]></b:skin>

Pastekan kode CSS berikut di atasnya

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px;
text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000000;
border-bottom-width: 0;
text-decoration: none;
font-family: "Arial", Times New Roman, Serif;
font-weight: 900;
color: #000080;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #BDBDBD;
}
div.TabView div.Pages
{
clear: both;
background-color: #FFFFFF;
border: 1px solid #000000;
overflow: hidden;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}


Lalu cari kode </head> dan pastekan javascript berikut di atasnya :

<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>

Simpan template anda dan selesai di sesi ini, kemudian kita masuk ke elemen halaman, kemudian tentukan di mana anda akan meletakan tabview anda sendiri (Mungkin di sidebar kanan/kiri/bawah/atas), klik add gadget atau tambah gadget, pilih javascript/Html lalu pastekan kode di bawah ini :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Judul Tab 1</a>
<a>Judul Tab 2</a>
<a>Judul Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">
<div class="Page">
<div class="Pad">
Isi tab 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Setelah selesai, klik aja simpan/save dan lihat hasilnya. Tab view milik anda sendiri telah selesai di buat.
Keterangan :
Warna merah pada CSS adalah padding, width dan height serta warna dasar dari ini tab view yang harus anda sesuaikan dengan blog anda, maka dari itu coba dulu di blog percobaan yah.....
Warna kuning adalah warna judul dari masing2 tab misal di blog saya (Hot News | Note's | Tutorial)
Warna Hijau adalah isi dari masing2 tab....pko'e yang berupa script misal script iklan, recent post atau yang lainya, terserah yang ingin anda masukan di situ apa......
Semoga sukses membuat tab view, oh ya di sini hanya di berikan contoh membuat tab view dalam 3 bagian saja, sebenernya bisa di buat menjadi 4 atau 5 bahkan lebih....untuk itu silahkan utak2 bagian CSS nya sendiri...saya yakin pasti bisa asal berusaha, ya ndak hehe.......
Selengkapnya → Menu Tab View

Spoiler Code HTML

blog tutorial No comments:
silahkan copy code di bawah ini..

<div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;"><b>Spoiler</b> for <i>jangan bugil di depan kamera</i>: <input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"> </div> <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;"> <div style="display: none;"> <img src="http://i1028.photobucket.com/albums/y341/ratnasyid/pelajar%20ml/jangan-bugil-depan-kamera.jpg" alt="" border="0" /> </div> </div> </div>

hasilnya seperti ini..
Spoiler for jangan bugil di depan kamera:

contoh :
Spoiler for DAFTAR ISI BLOG:
artikel saya tulis
komentar masuk








Selengkapnya → Spoiler Code HTML

Iklan Melayang

blog tutorial No comments:
cara membuat iklan melayang
1. login ke blogger > Tata Letak > Elemen Halaman > Tambah Gadget > HTML/Javascript.. dan gadgetnya biarkan saja tanpa nama/judul...
2. Lalu CoPas Kode IKLAN MELAYANG dibawah ini ke dalam Gadget HTML/Javascript tadi...

<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>

PASTE KODE IKLAN MELAYANGNYA DISINI YA

</center>

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


3. Lalu klik simpan .. dan lihat hasilnya dengan Refresh Blog kamu
Selengkapnya → Iklan Melayang

yahoo messenger emoticons

blog tutorial No comments:

Buat kawan-kawan yang ingin menghiasi posting-annya dengan berbagai ekspresi dari yahoo, saya berikan source codenya, biar anda bebas ngakak atau cemberut selagi posting. Silahkan copy source code berikut, sisipkan pada kata yang sesuai dengan postingan anda, kalo lagi sedih jangan di pasang yang lagi ngakak, trus kalo lagi patah hati ya nyengir aja ya...





happy:)happy



<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif" width=18 height=18 border=0>





sad:(sad


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif" width=18 height=18 border=0>





winking;)winking


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif" width=18 height=18 border=0>




big grin:Dbig grin


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif" width=18 height=18 border=0>




batting eyelashes;;)batting eyelashes


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif" width=18 height=18 border=0>





big hug>:D<big hug


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/6.gif" width=42 height=18 border=0>




confused:-/confused


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif" width=20 height=18 border=0>




love struck:xlove struck


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif" width=18 height=18 border=0>




blushing:">blushing


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/9.gif" width=18 height=18 border=0>





tongue:Ptongue


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif" width=18 height=18 border=0>




kiss:-*kiss


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif" width=18 height=18 border=0>




broken heart=((broken heart


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif" width=18 height=18 border=0>




surprise:-Osurprise


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif" width=18 height=18 border=0>




angryX(angry


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif" width=34 height=18 border=0>





smug:>smug


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif" width=18 height=18 border=0>




coolB-)cool


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif" width=18 height=18 border=0>




worried:-Sworried


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif" width=18 height=18 border=0>




whew!#:-Swhew!


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif" width=34 height=18 border=0>




devil>:)devil


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/19.gif" width=18 height=18 border=0>




crying:((crying


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif" width=22 height=18 border=0>




laughing:))laughing


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif" width=18 height=18 border=0>




straight face:straight face


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif" width=18 height=18 border=0>




raised eyebrow/:)raised eyebrow


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/23.gif" width=18 height=18 border=0>




rolling on the floor=))rolling on the floor


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif" width=30 height=18 border=0>




angelO:-)angel


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/25.gif" width=30 height=18 border=0>




nerd:-Bnerd


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif" width=24 height=18 border=0>





talk to the hand=;talk to the hand


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/27.gif" width=18 height=18 border=0>





Yahoo hidden emoticons





puppy dog eyes - New!:o3puppy dog eyes - New!



<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/108.gif" width=31 height=18 border=0>





I don't know:-??I don't know


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/106.gif" width=40 height=18 border=0>




not listening%-(not listening


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/107.gif" width=52 height=18 border=0>




pig:@)pig


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/49.gif" width=18 height=18 border=0>




cow3:-Ocow


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/50.gif" width=18 height=18 border=0>




monkey:()monkey


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/51.gif" width=21 height=18 border=0>





chicken~:>chicken


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/52.gif" width=18 height=18 border=0>




rose@};-rose


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/53.gif" width=18 height=18 border=0>




good luck%%-good luck


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/54.gif" width=18 height=18 border=0>




flag**==flag


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/55.gif" width=25 height=18 border=0>




pumpkin(~~)pumpkin


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/56.gif" width=17 height=18 border=0>




coffee~O)coffee


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/57.gif" width=18 height=18 border=0>




idea*-:)idea


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/58.gif" width=30 height=18 border=0>





skull8-Xskull


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/59.gif" width=18 height=18 border=0>





bug=:)bug


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/60.gif" width=20 height=18 border=0>




alien>-)alien


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/61.gif" width=18 height=18 border=0>




frustrated:-Lfrustrated


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif" width=18 height=18 border=0>




praying[-O<praying


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/63.gif" width=18 height=18 border=0>




money eyes$-)money eyes


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/64.gif" width=18 height=18 border=0>




whistling:-"whistling


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/65.gif" width=22 height=18 border=0>





feeling beat upb-(feeling beat up


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif" width=18 height=18 border=0>




peace sign:)>-peace sign


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/67.gif" width=22 height=18 border=0>




shame on you[-Xshame on you


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/68.gif" width=22 height=18 border=0>




dancing\:D/dancing


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/69.gif" width=26 height=18 border=0>




bring it on>:/bring it on


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/70.gif" width=23 height=18 border=0>




hee hee;))hee hee


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif" width=18 height=18 border=0>




chatterbox:-@chatterbox


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/76.gif" width=36 height=18 border=0>




not worthy^:)^not worthy


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/77.gif" width=32 height=18 border=0>




oh go on:-joh go on


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/78.gif" width=26 height=18 border=0>




star(*)star


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/79.gif" width=18 height=18 border=0>




hiroo->hiro


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/72.gif" width=18 height=18 border=0>




billyo=>billy


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/73.gif" width=18 height=18 border=0>




aprilo-+april


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/74.gif" width=18 height=18 border=0>





yin yang(%)yin yang


<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/75.gif" width=18 height=18 border=0>







Selamat mempercantik postingan nya...



Selengkapnya → yahoo messenger emoticons
Subscribe to: Posts (Atom)

Daftar Isi Blog

Blog Archive

  • ►  2017 (4)
    • ►  February (1)
    • ►  January (3)
  • ►  2016 (10)
    • ►  December (10)
  • ►  2014 (23)
    • ►  November (1)
    • ►  October (2)
    • ►  August (2)
    • ►  May (13)
    • ►  February (4)
    • ►  January (1)
  • ►  2013 (63)
    • ►  December (1)
    • ►  November (8)
    • ►  October (7)
    • ►  September (47)
  • ►  2012 (72)
    • ►  November (3)
    • ►  August (7)
    • ►  July (7)
    • ►  June (4)
    • ►  May (3)
    • ►  April (20)
    • ►  February (19)
    • ►  January (9)
  • ►  2011 (358)
    • ►  December (15)
    • ►  November (24)
    • ►  October (33)
    • ►  September (51)
    • ►  August (27)
    • ►  July (3)
    • ►  June (28)
    • ►  May (51)
    • ►  April (48)
    • ►  March (38)
    • ►  February (22)
    • ►  January (18)
  • ▼  2010 (440)
    • ►  December (98)
    • ►  November (59)
    • ►  October (123)
    • ►  September (33)
    • ►  August (44)
    • ►  July (47)
    • ▼  June (29)
      • Menu Tab View
      • Spoiler Code HTML
      • Iklan Melayang
      • yahoo messenger emoticons
      • Cara membuat buku tamu
      • Cara Pasang jam
      • title bar bergerak
      • Cara membuat efek Refresh / Redirect
      • Cara membuat marquee (text berjalan)
      • pasang emoticon di editor blogger
      • Membuat Text Area
      • 100 Greatest Thrash Metal Songs
      • Facebook Phonebook Is Not A Security Threat
      • Has Lady Gaga gotten your attention yet?
      • 12 Most Creative Calendar Systems
      • Victoria's Secret Pool Party
      • Sexy Pictures World Cup 2010
      • Hot Fifa World Cup Soccer Fans
      • Cara Pasang Meta Tag
      • New Mini-Battle Emerges Between Twitter And Facebook
      • Facebook Dan Skype Menjadi Lebih Terpadu
      • Contact Us
      • Cara berlangganan artikel via email
      • Pasca Melahirkan, Suami Malah Depresi? (Bagian 2)
      • Pasca Melahirkan, Suami Malah Depresi? (Bagian 1)
      • Variasi Seks
      • Merubah Read More Dengan Icon Image
      • Membuat Read More
      • Jennifer Aniston Threatened By Angelina Jolie Agai...
    • ►  May (1)
    • ►  April (4)
    • ►  March (2)

Entri Populer

  • Bude Yayuk [Kisah Nyata]
    Beliau adalah kakak kandung dari istri kedua pamanku. Selisih umur dengan adiknya sekitar 3 tahun, mendekati 50 tahun. Sehari-hari mengajar...
  • Janda Bahenol Penjual Nasi Kuning
    Bu Sarmin gak kpikiran bakal ngalamin nasib tragis hari itu, dia pikir dgn karakternya yg keras hati bisa naklukin segalanya, termasuk gue. ...
  • Kisah Nyata Antara Aku, Mama dan Kakak Erni
    Tak terasa sudah hampir setahun lebih aku menjalani hari – hari menyenangkan bersama mama. Saat itu usiaku sudah mau 17 tahun, sudah naik k...
  • Awal Liarnya Istriku
    “Lihat nih, bini aku sexy kan?” kataku bangga. Rendy melotot dan berdecak kagum, “Ck..ck…sexy sekali ya?” “Yuli (nama istri Rendy) pernah d...
  • Merawat Mama
    Liburan semester, Musa tak bisa kemana-mana, karena harus merawat mama-nya. Mamanya mendapat kecelakaan lalu lintas, hingga betisnya mengala...
  • Tidur Dengan Kakak Ipar
    Ketika aku menikah dua tahun yang lalu, rasanya dunia ini hanya milikku seorang. Betapa tidak, aku mendapatkan seorang pria yang menjadi im...
  • Smartphone Nokia Ram 3 GB Monster Keyboard QWERTY
    Nokia Express Music vs BlackBerry Priv: Dua Smartphone Dengan Keyboard QWERTY Seirin dengan Nokia yang menegaskan kebangkitannya kemb...
  • Dilema (Mama)
    Namaku Rio umur 16 th,anak tunggal dan masih sekolah SMK otomotif kelas 2 di Yogyakarta. Aku pendiam dan tak pandai dalam hal pergaulan, ta...
  • Serial number, patch, crack IDM 6.05 BUILD 8 Full Version
    UPDATE - Mei 24 2011 : Bagi anda penggemar Internet Download Manajer (IDM) pada tanggal 25 April idm telah mengeluarkan update terbarunya ya...
  • Salahkah Aku Menikmati Saat Ku Di Perkosa?
    Cerita ini merupakan cerita yang terjadi antara diriku dengan seorang lelaki yang telah tega memperkosaku meskipun aku akhir nya menikmati ...
Copyright © Harapan Putra All Right Reserved
Template by SEO Template