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

  • 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...
  • 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...
  • 5 Reasons to Blog Anonymously (and 5 Reasons Not To)
    This guest post is by Phil (not his real name) of somehighschoolblog . It used to be impossible to run a business anonymously. Sure, some au...
  • Would Google Adsense Ever Ban You?
    Adsense publishing is such a lucrative business for so many webmasters. It is a business with a simple strategical approach; you make money ...
  • 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 ...
  • 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 ...
  • 8 Tips To Decrease Your Blog’s Bounce Rate
    Bounce rate is a term used by Google Analytics ; it refers to visitors who land on your blog and leave without going to any other page. The ...
  • Fasting (Saum)
    Every year in the month of Ramadan, all Muslims fast from first light until sundown, abstaining from food, drink, and sexual relations. Thos...
  • Hands on, Swipe finger on the Nokia N9 screen
    Nokia recently introduced the N9 at Nokia Connection 2011 event. Here it is Nokia's first smartphone with MeeGo operating system . What...
  • Expert Hard Drive Recovery After Reformatting
    Computers are equipment that also can suffer crashes from wear and tear. Over long-term use, computers can crash on their own. In fact, 44% ...

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