SBSEdition

  • Subscribe to our RSS feed.
  • Twitter
  • StumbleUpon
  • Reddit
  • Facebook
  • Digg

Friday, October 23, 2009

Smooth Navigational Menu Vertical dan Horizon

Posted on 1:55 AM by Unknown
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
Posted in Navigation | No comments

Thursday, October 15, 2009

jQuery Image Magnify

Posted on 11:53 PM by Unknown
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
Posted in Tips, Trick | No comments

Tuesday, October 6, 2009

Hidden Image atau popupBox

Posted on 12:15 AM by Unknown
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
Posted in Tips, Trick | No comments
Newer Posts Older Posts Home
Subscribe to: Posts (Atom)

Popular Posts

  • New blog
    I don't blog often, but when I do it's now at http://blog.semeosis.com. Here I've written about some of the things I've look...
  • Apple Releases New iPhone OS
    Today, around 1:00PM, Apple released its new operating system for the iPhone. After negotiations with IBM, iPhone OS 4.0 will be officially...
  • Spiderman Shattered Dimensions - RELOADED
    Spiderman Shattered Dimensions - RELOADED | 8.17 Gb Genre: Action Game Type : ISO Release Date: Q4 2010 Here we have a new action,adventu...
  • Password Recovery Bundle 2011 1.70
    Password Recovery Bundle 2011 1.70 | 1.46 Mb Password Recovery Bundle 2011 is a handy toolkit to recover all your lost or forgotten passwo...
  • How and Why verify your site?
    Privacy is important to Google, which is why Google Webmaster Tools asks you to prove you own a site before showing you stats and data abou...
  • TiVo App for Android and iPhone Coming Soon
    It has been a long time coming but it appears that TiVo might finally be ready to roll out software for the iPhone and Android. While TiVo h...
  • Free download TeamViewer Manager 5.1.904
    TeamViewer Manager 5.1.904 | 17 MB An optional database tool that stores your partner details in a database that can also be shared over ...
  • Free Hosting under Google and free failed
    Do you want to host your external java script files in unlimited bandwidth? If you host your files on google code you can do for free. This ...
  • Drop down menu button untuk Blog Anda
    Hallo Saya ada tips setelah jalan-jalan yang sangat melelahkan, kita langsung praktek aja. 1-Log in ke account blogger anda. 2-Click Layout-...
  • The Pleasures of Paradise in Brief
    God has said in the Quran: “And give good news (O Muhammad) to those who believe and do good deeds, that they will have gardens (Paradise) i...

Categories

  • .Net
  • .NET 3.5
  • .Net Tools
  • About Adsense
  • Agile
  • ALT.NET
  • Anti-Virus
  • Article
  • ASP.NET MVC
  • C# 3
  • Cara Pasang
  • CI Factory
  • Computer
  • Continuous Integration
  • Courseware
  • DI/IOC
  • Download Games
  • Download Karaoke
  • Download software
  • Download template
  • Download Template
  • Exchange Link
  • Google
  • Hadits Nabi
  • Hiring
  • IEEE
  • IIS 7
  • Info electronic
  • Lambda
  • Lean
  • Linux
  • MbUnit
  • Messages
  • MS Exchange 2003
  • Mutiara
  • Navigation
  • News
  • NHibernate
  • NxtGenUG
  • Other
  • Practices and Patterns
  • Qurdist
  • Resharper
  • Scrum
  • Security
  • Seo
  • Small Business Server
  • SQL Server 2008
  • Testing
  • TFS
  • Tips
  • Trick
  • Tutor
  • Ubuntu
  • UML
  • Verifying
  • Virtual Instrument
  • Virtual PC
  • Virtual Server
  • Visual Studio 2010
  • wcf
  • Web
  • Windsor

Blog Archive

  • ►  2012 (1)
    • ►  August (1)
  • ►  2011 (71)
    • ►  July (1)
    • ►  June (43)
    • ►  May (20)
    • ►  April (5)
    • ►  March (2)
  • ►  2010 (113)
    • ►  December (22)
    • ►  November (4)
    • ►  September (8)
    • ►  July (7)
    • ►  May (3)
    • ►  April (11)
    • ►  March (35)
    • ►  February (5)
    • ►  January (18)
  • ▼  2009 (143)
    • ►  December (3)
    • ▼  October (3)
      • Smooth Navigational Menu Vertical dan Horizon
      • jQuery Image Magnify
      • Hidden Image atau popupBox
    • ►  September (12)
    • ►  August (14)
    • ►  July (23)
    • ►  June (1)
    • ►  May (18)
    • ►  April (23)
    • ►  March (36)
    • ►  February (5)
    • ►  January (5)
  • ►  2008 (30)
    • ►  December (1)
    • ►  November (4)
    • ►  October (2)
    • ►  September (5)
    • ►  August (5)
    • ►  July (3)
    • ►  June (6)
    • ►  May (2)
    • ►  April (1)
    • ►  March (1)
Powered by Blogger.

About Me

Unknown
View my complete profile