Smooth Navigational Menu Vertical dan Horizon

Hallo sobat saya menawarkan lagi model navigasi yang sekaligus Vertical dan Horizon agar sobat tidak perlu mencari-cari itu kalau cocok kalo gak cocok sobat comment aja, siapa tahu dapat wangsit lagi he..he..he.Tapi sebelumnya sobat click dulu demonya kalau cocok ya ambil kalo tidak skip aza.
1-Login ke blog anda
2-Layout
3-Edit
4-Letakkan code dibawah ini sebelum </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="ddsmoothmenu.js">

/***********************************************************************************************************************
* Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.mutiaramail.blogspot.com/ for full source code
************************************************************************************************************************/

</script>

<script type="text/javascript">

ddsmoothmenu.init({
mainmenuid: "smoothmenu1", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: ["#1c5a80", "#18374a"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

ddsmoothmenu.init({
mainmenuid: "smoothmenu2", //Menu DIV id
orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
//customtheme: ["#804000", "#482400"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

</script>

Download

Horizon Navigation
5.1 Letakkan code dibawah ini sebelum ]]></b:skin>
.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*background of menu bar (default state)*/
width: 100%;
}

.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #414141; /*background of menu items (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}

.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black;
color: white;
}

.ddsmoothmenu ul li a:hover{
background: black; /*background of menu items during onmouseover (hover state)*/
color: white;
}

/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/


/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

/* ######### CSS for shadow added to sub menus ######### */

.ddshadow{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}

.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
opacity: 0.8;
}
5.2 Letakkan code dibawah ini pada HTML
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Item 1</a></li>
<li><a href="#">Folder 0</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>
Vertical Navigation
6.1 Letakkan code dibawah ini sebelum ]]></b:skin>
.ddsmoothmenu-v ul{
margin: 0;
padding: 0;
width: 170px; /* Main Menu Item widths */
list-style-type: none;
font: bold 12px Verdana;

border-bottom: 1px solid #ccc;
}

.ddsmoothmenu-v ul li{
position: relative;
}

/* Top level menu links style */
.ddsmoothmenu-v ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}

.ddsmoothmenu-v ul li a:link, .ddsmoothmenu-v ul li a:visited, .ddsmoothmenu-v ul li a:active{
background: #414141; /*background of menu items (default state)*/
color: white;
}


.ddsmoothmenu-v ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black;
color: white;
}

.ddsmoothmenu-v ul li a:hover{
background: black; /*background of menu items during onmouseover (hover state)*/
color: white;
}

/*Sub level menu items */
.ddsmoothmenu-v ul li ul{
position: absolute;
width: 170px; /*Sub Menu Items width */
top: 0;
font-weight: normal;
visibility: hidden;
}


/* Holly Hack for IE \*/
* html .ddsmoothmenu-v ul li { float: left; height: 1%; }
* html .ddsmoothmenu-v ul li a { height: 1%; }
/* End */
6.2 Letakkan code dibawah ini pada HTML
<div id="smoothmenu2" class="ddsmoothmenu-v">
<ul>
<li><a href="http://www.dynamicdrive.com">Item 1</a></li>
<li><a href="#">Folder 0</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>
Selamat mencoba dan semoga mimpi indah

Read More

jQuery Image Magnify

Hallo sobat yang budiman,saya ada trick atau tips buat sobat, yaa siapa tahu dibutuhkan, bukankah kita saling berkunjung dan saling memberi informasi? Tidak tertutup kemungkinan bila sobat ada ide bisa sharing, yaa agar Blogar Indonesia tambah caeem.Ok tidak banyak basa basi, saya mulai dengan contohnya.

1-Login ke account blogger anda.
2-Click Layout--->
3-Click Edit
4-Letakkan code dibawah ini sebelum </head>;
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='jquery.magnifier.js' type='text/javascript'>
/***********************************************************************************
* jQuery Image Magnify http://www.mutiaramail.blogspot.com
***********************************************************************************/
</script>

Download

5-Letakkan kode dibawah ini sebelum kode ini ]]></b:skin>
dsettings: {
magnifyby: 3, //default increase factor of enlarged image
duration: 500, //default duration of animation, in millisec
mgopacity: 0.2 //opacify of original image when enlarged image overlays it
},
cursorcss: 'url(magnify.cur), -moz-zoom-in', //Value for CSS's 'cursor' attribute, added to original image

6-Lalu postingkan code dibawah ini di content sobat:
<img src="http://i721.photobucket.com/albums/ww218/sugwi/Grape.jpg" class="magnify" style="width: 250px; height: 75px;" />
7-Selesei, selamat mencoba dan semoga mimpi bidadari he..he..he..

Note:
-Ganti code yang berwarna Biru
-Rubahlah code yang berwarna merah sesuai kebutuhan sobat.

Read More

Hidden Image atau popupBox

Hallo sobat yang budiman saya ada tips sekaligus trick he..he..Hal ini saya posting sebab kelihatannya sobat membutuhkan kelebihannya adalah : Mengirit postingan anda yaa terlihat ringakas gitu dech.Ok kita mulai aja ya .....Contohnya seperti dibawah ini:
Click demo Mutiaramail

1-Login ke account blogger anda.
2-Click Layout--->
3-Click Edit
4-Kemudian copy code dibawah ini letakkan sebelum </head>
<script src='popupBox.js' type='text/javascript'/>

Download

5-Postingkan code dibawah ini pada postingan sobat atau letakkan pada gadget anda :
<a href="http://www.mutiaramail.blogspot.com" onclick="return show_hide_box(this,800,600,'2px dotted')"><blink>Click demo Mutiaramail</blink></a><div align="center"></div>
Note:
Gantilah code yang berwarna biru

6-Pekerjaan anda selesai. Selamat mencoba dan semoga mimpi indah.

Read More

Cara membuat Pop-Up Window

Teman-teman pernah mendengar bahkan mungkin familiar dengan pop-up window. Ok begini saya ada tips buat anda. Cara sangat mudah yaitu
1-Login ke account blogger anda.
2-Click Layout--->
3-Add a gadget
4-Kemudian copy code dibawah ini, sebelumnya .... ganti dulu code yang berwarna biru :
<FORM METHOD="post">

<INPUT TYPE="button" VALUE="Click me!"

OnClick = "hint_wnd = window.open(
'', 'hint_wnd', 'width=50, height=60, resizable=no, scrollbars=no' );

hint_wnd.document.write( 'Tulis text anda disini' );
return true;">

</FORM>
Semoga berhasil dan mimipi indah

Read More

Cara memasang Text Kedap kedip-rainbow.js

Bagaimanakah cara memasang text berkedap-kedip ?.Ingin tahu caranya ?Kalo ingin contoh sudah banyak rekan-rekan yang pakai trick ini bahkan saya juga memakainya
caranya gampang yaitu :
1-Login ke account blogger anda.
2-Backup Template anda--->click--><span style="font-weight: bold; color: rgb(255, 204, 0);">Download Full Template</span>
3-Click Layout--->
4-Click Edit HTML--->
5-Download kode dibawah ini dan upload ke hosting anda :
6-Ganti code dibawah ini yang berwana biru dengan code JS yang sudah anda upload di hosting:

Download

<script src='rainbow.js'/>
7-Kemudian copy pasta pada HTML anda sesudah </head> lalu simpan atau anda bisa pakai script saya yang sudah saya upload pada hosting saya, code telah tersedia dibawah ini :
<script src='http://sites.google.com/site/sugwijays/sugwi.js'/>
Semoga anda menyukainya.

Read More

Highlight untuk Text Area

Ada variasi lain dari membuat text area ini, yakni text area dengan menggunakan tombol highlight. dengan adanya tombol highlight ini akan memudahkan bagi para pengunjung untuk mengcopy seluruh text ataupun kode-kode yang di berikan, karena dengan hanya sekali tekan saja pada tombol highlight tadi, maka seluruh text ataupun kode-kode yang ada di dalamnya akan di highlight dan tinggal di copy saja. Fasilitas ini sangat berguna tatkala text ataupun kode-kode yang di berikan dalan jumlah yang sangat banyak dan ini akan mengurangi resiko tertinggalnya suatu text ataupun kode-kode untuk di copy. Untuk membuat text area dengan menggunakan highlight ini silahkan anda copy kode HTML di bawah :
<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55"><a href="http://www.mutiaramail.blogspot.com" target="_blank">Mutiaramail</a></textarea></p></div></form>
Hasilnya seperti dibawah ini :

<a href="http://www.mutiaramail.blogspot.com" target="_blank">Mutiaramail</a><br />

Selamat mencoba semoga berhasil.

Read More

Cara Menampilkan warna background dengan postingan yang berbeda

Dalam membuat background ada dua alternatif yaitu membuat background dengan warna dan membuat background dengan bantuan gambar, khusus untuk background dengan gambar terbagi lagi ke dalam beberapa teknik yaitu background gambar dengan teknik repeat (ada repeat, repeat-x, repeat-y) dan background gambar dengan teknik no-repeat (gambar backgroundnya memang ukuran besar). Untuk teknik-teknik ini mungkin lain kali saja deh, kangrohman nya sedikit bad mood nih, mending sekarang yang singkat aja deh.
Membuat background dengan warna
Agar warna background postingan bisa berbeda-beda setiap postingan, anda perlu melakukan :
Ketika anda akan memulai untuk membuat postingan, pilih tab Edit HTML jangan pilih Compose. Awali postingan anda dengan kode seperti ini :
<div style="background:#FFECB3; text-align:justify;font-size:120%"></div>
Ganti tulisan kode_warna_disini dengan kode warna yang anda inginkan. Sedikit tips yang masih bingung dengan kode warna,klick disini
Contoh seperti dibawah ini :

<div style="background:#FFECB3; text-align:justify; font-size:120%">
This is an enjoyable movie and rightly billed as Rocky for a new generation. I must say the music, and cinematography people will instantly recognise the Rocky references, even without being told that this is being billed as Rocky for a new generation.
It stars Channing Tatum(Step up to the streets) as a former college wrestler Shawn McArthur struggling hard to make ends meet in New York after having an altercation with his father/coach of the wrestling team. We meet him as he is struggling to offload a series of books he has no idea are counterfeit, one of the hapless buyers happens to be the gorgeous Zulay Valez (Zulay Henao, S. Darko something about her just reminds me of a cat), from the altercation that occurs with Harvey Boarden(Terrence Howard, Iron man) and some of his associates, Harvey gets the impression Shawn may indeed be just what he is looking for, for an underground fighting campaign, the rates of pay of course are several times more than either of them could make struggling to survive on the unforgiving metropolis that is New York.
Although billed as Rocky for the next generation, there are some testing questions the original Rocky would not have crossed his mind to contemplate, and of course there is the familiar territory of the arch nemesis of a protagonist, the talented wrestler Evan Hailey (Brian J. White The Shield) who happens to have been the catalyst for the original fallout with Shawn's father, as equally Harvey as Shawn's unofficial manager has to face some of the taunts from his comrades who are rolling in the money, notably Martinez (Luiz Guzman, Traffic) Jack Dancing (Roger Guenver Smith, He got game).
You are left wondering if Shawn is going to make it as a underground fighter, and if there is any romantic hope for him and the lovely Zulay equally struggling herself to raise a child on her own, and her troubling grandmother.
</div>
Menjadi seperti ini :

This is an enjoyable movie and rightly billed as Rocky for a new generation. I must say the music, and cinematography people will instantly recognise the Rocky references, even without being told that this is being billed as Rocky for a new generation.
It stars Channing Tatum(Step up to the streets) as a former college wrestler Shawn McArthur struggling hard to make ends meet in New York after having an altercation with his father/coach of the wrestling team. We meet him as he is struggling to offload a series of books he has no idea are counterfeit, one of the hapless buyers happens to be the gorgeous Zulay Valez (Zulay Henao, S. Darko something about her just reminds me of a cat), from the altercation that occurs with Harvey Boarden(Terrence Howard, Iron man) and some of his associates, Harvey gets the impression Shawn may indeed be just what he is looking for, for an underground fighting campaign, the rates of pay of course are several times more than either of them could make struggling to survive on the unforgiving metropolis that is New York.
Although billed as Rocky for the next generation, there are some testing questions the original Rocky would not have crossed his mind to contemplate, and of course there is the familiar territory of the arch nemesis of a protagonist, the talented wrestler Evan Hailey (Brian J. White The Shield) who happens to have been the catalyst for the original fallout with Shawn's father, as equally Harvey as Shawn's unofficial manager has to face some of the taunts from his comrades who are rolling in the money, notably Martinez (Luiz Guzman, Traffic) Jack Dancing (Roger Guenver Smith, He got game).
You are left wondering if Shawn is going to make it as a underground fighter, and if there is any romantic hope for him and the lovely Zulay equally struggling herself to raise a child on her own, and her troubling grandmother.

Read More