.png "My Twitter")
.png "RSS Feed")
let me Introduce the most popular Widget for menu, i thought it was popular huh, alright, here is the Accordion menu, See The Demo Below :
Showing posts with label Code. Show all posts
Showing posts with label Code. Show all posts
Saturday, August 18, 2012
Create Accordion Menu
let me Introduce the most popular Widget for menu, i thought it was popular huh, alright, here is the Accordion menu, See The Demo Below :
Tuesday, July 3, 2012
How To Add Jquery Effect On Drop down Menu
in this Post, i want to guide you, HOW TO APPLY JQUERY EFFECT on your Dropdown menu.
First Open your Template Editor and Expand template widget, then search your Dropdown menu section,
How to find it????
Just look at the word of your menu and search with that word
Example, my menu has "link Exchange" , i will use that word for search the section
Alright, see the Contact that's <li> and Google+ , facebook , are on the <ul>
This is the source code of my dropdown menu section
This is the source code of my dropdown menu section
ok, the blue colored word , add them to your code, do exactly what i do with my code, you only need to add that code inside your code. after That search <head> and Paste the code below after it.<div style='clear:both;'/><div class='span-24'><div class='zmh-dropdown-container'><ul class='menus zmh-dropdown'><li><a href='zulkhamsyahmh.blogspot.com'>Home</a></li><li class='dropdown1'><a href='#' rel='nofollow'>Contact</a><ul class='sub_navigation1' style='display: none; '><li><a href='https://plus.google.com/u/0/102366695907680083909' rel='nofollow'>Google+</a></li><li><a href='https://www.facebook.com/zulkhamsyah' rel='nofollow'>Facebook</a></li><li><a href='https://twitter.com/ZulkhamsyahMH' rel='nofollow'>Twitter</a></li><li><a href='http://www.linkedin.com/pub/muhammad-h-zulkhamsyah/49/a62/197' rel='nofollow' target='_blank'>LinkedIn</a></li><li><a href='http://pinterest.com/zulkhamsyah/' rel='nofollow' target='_blank'>Pinterest</a></li></ul></li><li><a href='http://zulkhamsyahmh.blogspot.com/2012/05/link-exchange.html' target='_blank'>Link Exchange</a></li><li><a href='http://zulkhamsyahmh.blogspot.com/p/thank-you-for-donation.html' target='_blank'>Donate Us</a></li><li><a href='https://plus.google.com/102366695907680083909/about' rel='nofollow'>About Me</a></li></ul></div></div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>Alright, that's all, easy , right??
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
<script type="text/javascript">
// Wait for the page and all the DOM to be fully loaded
// Add the 'hover' event listener to our drop down class
$('.dropdown1').hover(function() {
// When the event is triggered, grab the current element 'this' and
// find it's children '.sub_navigation1' and display/hide them
$(this).find('.sub_navigation1').slideToggle();
});
</script>
Next Post, I will write about CSS3 Transition
Please kindly to Comment if you get some problem and Subscribe :)
Thursday, June 28, 2012
Pure CSS3 And Jquery Dropdown Menu
Two days ago , i surfed web and i saw something beauty ,Dropdown menu that uses pure CSS3 Dropdown and of course there is no image on it , the most important benefit of using CSS3 is making your site load faster. Here Is The Demo Video :
So???
What are you waiting for???
Let's Grab this
File Size no more than 2KB (compressed)
How To Edit the Code ???
- Find " Main_link" And "Main_descripition" and replace it
- and for the child menu , just search "Child_Description" and "child_link" and replace with your own setting
How To Add the Code ???
Go to Blogger.com >> Pageelements >> Add new gadget >> Add HTML// Java Script
then, paste the code
then, paste the code
Please Ask me if you havesome problem with this
And Subscribe to get the latest post from my blog :)
Tuesday, June 26, 2012
Costumize Blogspot Popular Post With CSS3
See the picture .....
we will make Your popular post like that, actually isn't always like that, depends on your template settings, my template uses red for the link color.
This Trick uses CSS3 Transition Effect, it makes more beutifull
This trick doesn't use javascript.
!!Important: Make Sure you've backed up your template before do this
So, How To Edit The Popular post??
- Open blogger.com then Open your pageelement and edit your popular post
- set it like the picture above
- Next, go to your template >> Edit you template editor, and search the code like this
this code depends on your template
.PopularPosts
.PopularPosts .widget-content ul li{
- Replace with My Code
.PopularPosts .item-title{font-weight:bold;padding-bottom:0.2em;text-shadow:0px 1px 0px #fff;}
.PopularPosts .widget-content ul li{padding:0.7em 0;background: url(http://3.bp.blogspot.com/-5T_xlsI0aIc/T-lcR7ChM9I/AAAAAAAAAUc/G8Y7AbJ_3lQ/s1600/BI+logo.png) no-repeat 5px 10px;list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #dddddd;
border-radius:5px;
-moz-border-radius:10px;
-ms-transition: all 0.26s ease-out; /* IE10? */
-moz-transition-duration: 1s; -moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out
}
.PopularPosts .widget-content ul li:hover{
border:1px solid #6BB5FF;
color: #0CF;
text-transform: none;
float: none;
margin:0 0 5px 0px;
border-radius:15px;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000; z-index:999999; font-weight:bold; -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.31);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.31);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.31);
-moz-transition: all 0.26s ease-out; /* FF4+ */
-o-transition: all 0.26s ease-out; /* Opera 10.5+ */
-webkit-transition: all 0.26s ease-out; /* Saf3.2+, Chrome */
-ms-transition: all 0.26s ease-out; /* IE10? */
-moz-transition-duration: 1s; -moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
text-shadow:1px 1px 3px #D2BCB0, -1px 1px 3px #D2BCB0, -1px -1px 3px #D2BCB0, 1px -1px 3px #D2BCB0;
}
If You Can't find any code above , we will try another method
- Search
]]></b:skin>
Next, paste my code above it - Then Save it, and see it on your blog, move your mouse over it and see the effect.
If You want to edit the color of the border , just search #6BB5FF, use to find the code you want.
Please Comment or Share this If you like my Post
Saturday, June 23, 2012
Monday, June 18, 2012
Add Floating Subscribe Button Using Click
Blogwalking is the one of my hobbies, and i was lucky because i found something special yesterday on someone blog.He uses wordpress, so i adopted it, it looks great and doesn't need some spaces on your page. This is awesome....
Wednesday, June 6, 2012
How To Make Paypal Donate Us Button On Blogspot
Nowdays, many blogger and website founder use Paypal on their monetize problem. Paypal serves some services like :
Sunday, June 3, 2012
Adobe Dreamweaver CS6 Classroom in a Book : Release Date
The Sixth Generation of Creative suite has released, many fans of adobe was so happy about this .then , let's Take a look for the Dreamweaver version. This software was very necessary for Webmasters.Many New Big Features Has reviewed, you can find it on Search Engine if you want to find the Article about Dreamweaver CS6.
Adobe Dreamweaver CS6 Classroom in a Book : Release Date, That's the title and of course we will talk about this Book .This Book Will Release on June 22, 2012 (Estimated) ,it means 19 days left until the publication.
Overview Adobe Dreamweaver CS6 Classroom in a BookThis Book is very Essential for the one who want to learn about HTML5 CSS query, and Dreamweaver CS6 is a Powerfull Software tool to build Website, And I Heard Adobe CS6 Support Wordpress And Dropal joomla and etc, I haven't Purchased it .
Creative professionals seeking the fastest, easiest, most comprehensive way to learn Adobe Dreamweaver CS6 choose Adobe Dreamweaver CS6: Classroom in a Book from the Adobe Creative Team. The 15 project-based lessons in this book show you step by step everything you need to know to work in Dreamweaver CS6. You’ll learn to create a professional website without having to write code by hand.
This completely revised CS6 edition also covers HTML5, CSS3, and media queries for responsive web design. The book also shows how to create HTML-based headings, paragraphs, lists, and tables; insert graphics and Photoshop Smart Objects; add links to text and images; apply cascading styles sheets; and customize the Dreamweaver workspace. You’ll also learn to add interactive elements to your sites, such as HTML5-compatible video and animation, get guidance for working with code, and finally publish a finished site to the Web.
The companion DVD includes all lesson files so you can work along with the book, as well as, two hours of free video tutorials from Adobe Dreamweaver CS6 Learn by Video.
Upgrading to Dreamweaver CS6 also gives you the chance to catch up on all of the great features added in Dreamweaver CS5. These include:
• Dynamically Related Files. The Dynamically Related Files feature helps you access files and update pages faster, as well as simplify management tasks for complex sites. With a single click,you can direct Dreamweaver to discover the external files and scripts necessary to assemble yourpage and display their filenames in the Related Files toolbar.
• Enhanced CSS introspection tools. With enhanced CSS tools and Live view, Dreamweavergives you more control without leaving your editing environment. You can also view the state ofany link on your page and change text size—tasks that previously required a browser.
• Integration with Adobe BrowserLab. Dreamweaver integrates with Adobe BrowserLab*, which provides a fast and accurate solution for cross-browser compatibility testing. Whether you are new to web design or a seasoned professional, you can use Adobe BrowserLab to preview web pages and local content with multiple viewing and comparison tools, customizing sets of browsers to meet your project’s requirements.
• Site-specific code hinting. Site-specific code hints within Dreamweaver help you to moreefficiently handle PHP coding tasks on a site-by-site basis. Theme files for blogs and other custom PHP files and directories can be included (or excluded) to customize the coding environment of Dreamweaver when working with third-party PHP libraries and CMS frameworks such as WordPress, Drupal, Joomla!, and others.
REMEMBER, BUY IT , DO NOT CRACK or PATCH IT, Use Genuine Version Only :)• Enhanced CSS starter layouts. Jump-start your standards-based website design with updatedand simplified CSS starter layouts. Based on user feedback and constantly evolving CSS bestpractices, the CSS starter layouts have been completely rewritten. For example, complexdescendent selectors have been removed in favor of simplified, easy-to-understand classes, and the overall structure of the documents has been revamped.
Let's Buy it!!!!
Price Adobe Dreamweaver CS6
- Software Tech = $360.00
- Software Tech store= $382.00
- CDW = $388.99
- SoftwareMedia.com = $392.44
- Adobe Dreamweaver CS6 Classroom = £36.99"Delivered FREE in the UK"
Sunday, May 20, 2012
Phone Code
Country Codes, Phone Codes, Dialing Codes, Telephone Codes, ISO Country Codes
The calling chart below will help you find the dialing codes you need to make long distance phone calls to friends, family, and business partners around the globe.
How to use, Just add the Country Code to the front of the number that you want to call Indonesia international country codes & city calling code | ||||||||||||||||||||||||||||||||||||||||||||||||||||
Indonesia country code: 62
|
