Saturday, August 18, 2012

Create Accordion Menu


Hey What's Up :)
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 :

Wednesday, August 1, 2012

How To Add Related Post On Blog

Related Post is the way to increase your page Impressions, On internet many websites provide the plugin for the related post. infact, if you use that plugin it will increase you page load,alright directly to the point

Thursday, July 26, 2012

How To Detect Virus Manually On Windows


Nowadays, viruses becomes a big fear for all over brainware.Not only on windows , the Viruses also attack Mac and Linux too, and of course you know, linux only get small of the effect if it has infected by virus. even thought , you must concern what's the effect for you PC . virus can spread in many method just like spreading from Internet, Regularly  uses flashdrive to copy the file from computer to another computer, or you execute the virus itself.
in this time, i want to share to you how to detect and disable the virus in simple way without using expensive anti virus.

Sunday, July 15, 2012

Do Everything using Windows Live Essential


Windows live Essential Comes with A great Software on it . Today i want to Show how it works. But , i just want to tell you only about Windows Live Mail, Windows Live Writer, Windows Live Movie Maker And Windows Live Photo Gallery. I only use those software for now but for further i want to use Massenger and use Family Safety, since my Little Brother can access internet now. and that's my responsible to take care of him from the bad site.
Get It For Windows 7

Alright then, let's take a look for the first
  • Windows Live Movie Maker And Windows Live Photo Gallery
Photo Gallery is a Photo managment software , you can detect someone face on there and tag it and you can edit your Photo with minimal editing such as Exposure, Color, Noise Reduction.



After that, you can directly upload it to the Youtube, Facebook,  Flickr, Skydrive, Windows Live Groups. that is the online benefit for us. Microsoft  also provide some plugins to make your photo gallery ore usefull, you can search on Photo Gallery Plugins

Live Movie Maker is a minimal Video editing and Creating Video,  It is intended to replace Windows Movie Maker that is currently included in Windows Vista , on windows seven you need to download it first. in windows Live Movie maker , you can create title intro and joint the videos then add the transitions on your video, record from the webcam and Upload directly to Skydrive, Facebook and Youtube.
Get Movie Maker Plugins
See the demo Below


  • Windows Live Mail

Windows live Mail is an Aplication that allow you to Check your mail directly without visiting mail server page. easy To use you only need to set up your Mail setting. 
Windows Live Mail has all of the features of Windows Mail. It also adds the following new features:
  1. Support for Web-based email accounts including
  2. Windows Live Hotmail, Gmail (Google Mail), and Yahoo! Mail Plus, also Aol Mail
  3. A different user interface which matches the other Windows Live "Wave 2" applications. 
  4. Synchronization with Windows Live Contacts
  5. Support for RSS feeds. Notable features include the ability to reply directly via email to the author of an item that appears in an RSS feed, and the ability to aggregate multiple feeds into a single folder. The RSS functionality requires Internet Explorer 7or newer. 
  6. Multi-line message lists. 
  7. Emoticons can be used in emails and other functions. 
  8. In-line spell checking. 
  9. Separate inbox folders for different POP accounts. This is not optional, so it dissatisfied many users who were used to the single inbox. 
  10. Support for sending picture files in emails through the Photo email feature, which uploads pictures to a web-based service and sends the URL and thumbnails in the mail. It can also perform basic photo correction and apply different border effects to pictures. 
  • Windows Live Writer
Windows Live Writer is a desktop blog-publishing application . it has some features such as photo-publishing and map-publishing functionality, and is currently compatible with Windows Live Spaces, SharePoint blogs, Blogger, LiveJournal, TypePad, WordPress, Telligent Community, PBlogs.gr, JournalHome, the MetaWeblog API, the Movable Type API, Blogengine, Squarespace, and all blogs that support RSD (Really Simple Discoverability).
Windows Live Writer introduces the Provider Customization API that enables both rich customization of Windows Live Writer's behavior as well as the opportunity to add new functionality to the product. Currently Windows Live Spaces, WordPress, and TypePad have all taken advantage of this API to expose additional service-specific features within Windows Live Writer.

Wednesday, July 4, 2012

How To Change Blog Owner

A few weeks ago, i felt little confuse with my blog, i have two blogs, http://zulkhams....blogspot.com and http://habibmhz....spot.com. i want to merge the admin of my old crappy blog .I'm Newbie in Blogging world last year till now .
all right here is the method :
first, go to you Blogger Dashboard>> setting>> Basic

then click add Authors
type The Email that you want to set as admin
After that,log out from your blogger , Go to your Email Account and Confirm
Log Out again, use your old account and Change The Option from Authors to be "admin" on your new mail account.
It should be like This
Then, Delete your old Account
Easy Enough :)


Tuesday, July 3, 2012

How To Add Jquery Effect On Drop down Menu

Since every blogger Enchance their blog appeal, CSS3 and JQuery have been trend on them.As we can see , many site have used CSS3 and Jquery for Transition effect , slide effect and many more.
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

 i will explain the basic of dropdown menu
Alright, see the Contact that's <li> and Google+ , facebook , are on the <ul>
This is the source code of my dropdown menu section
<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>
 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.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<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>
Alright, that's all, easy , right??
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

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

Floating Footer using mixed CSS3 And Jquery Effect


After a little Experiments, and finally it works......
this Widget uses Jquery and CSS3 code for the transitions, see video Below for Demo


Click The Button Below to Download The Code




  • Please Subscribe First
  • Fill your Email To Subscribe and hit Enter or Click Submit


  • The password is zulkhamsyahmh
How To Edit The Code.
Open The Source code and Find Some Code Below
For The LEFT menu

Find "YOUR_LINK" and "YOUR_LINK_DESCRIPTIONS"
and Replace With Your Own Link and Your Description


And Next UP for The Child Menu
Find "YOUR_CHILD_LINK" and "YOUR_CHILD_LINK_DESCRIPTIONS"
and Replace With Your Own Link and Your Description

For The Subscribe
Find "YOUR_FEED_BURNER_NAME" and Replace With You Own Feedburner
If you Have a problem With Feedburner, Please Kindly To See How to Setup feedburner on blogspot 

For The Right Menu (Like and G+ Button)
Like Button
Example :
My Facebook Fan Page Address : https://www.facebook.com/pages/Blog-Indonesia/300488916670626
The Green Colored Is MY-FACEBOOK-FANPAGE
And The red Colored Is My ID
So, find "YOUR-FACEBOOK-FANPAGE" and " YOUR-FACEBOOK-FANPAGE _ID" on my Code, Change it With Your Own . Easy Right
G+ Button
find "YOUR_SITE_ADDRESS" on my Code, Change it With Your Site Address, Change it Twice

How To Add To Your Blog???
Simply, Open Your Blogger Dashboard >> PageElements >> Add New Gadget >> Add HTML / Javascript , Then Paste the code that you've edited

If You Get Some Problem, Feel Free to Ask Me :)

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

Saturday, June 16, 2012

Download Splatter Brush Photoshop




Want To be a Great Photoshop Designer???
To be a Great Photoshop Designer, you must be need great support from the software.
YES, We talk about Photoshop now. Photoshop is the best choice i think for image editing, and in this post , i want to share  some Splatter Brush

Friday, June 15, 2012

Add Smooth Transform Effect to The picture


Move your mouse over image above, you will see the effect, that's the effect that we want to make, many bloggers must be want to make their blog more beutifull, more attractive. So, i make this code for my post today.

  • first, Find the First <Style> and paste the code below it
.Trans  {opacity: 0.5;margin-left: 50px;-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;-moz-transform: rotate(7deg);-o-transform: rotate(7deg);-webkit-transform: rotate(7deg);-ms-transform:rotate(7deg);transform: rotate(7deg);filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');zoom: 1;}
.trans:hover  {opacity: 1;zoom: 1;-moz-transform: rotate(0deg);-o-transform: rotate(0deg);-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);-moz-box-shadow: 1px 1px 4px #000;-webkit-box-shadow: 1px 1px 4px #000;box-shadow: 1px 1px 4px #000;} 

  • Next , when you want to Publish your post and make the effect to image, after you have finshed write your post, Don't Publish it. Click On HTML and find your image code like :
<div class="separator Trans" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-5eVhghv8RA/T9rx2_oiUUI/AAAAAAAAASo/5t_xSHPB6Ng/s1600/CSS.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-5eVhghv8RA/T9rx2_oiUUI/AAAAAAAAASo/5t_xSHPB6Ng/s1600/CSS.png" /></a></div>

  •  Add Trans on <div class="
That's for the post, and what about the image outside the post. Simply, you just need to find the picture code on your Template setting, and follow the instruction above.
See The Video Below to know some Steps


    Thursday, June 14, 2012

    customize Blockquote on blog



    Did you dissapoint with your blockqoute style??
    , this tutorial will show you some trick how to customize your simple blockquote, and make it good looking.

    first,open your blogger dashboard and Edit your HTML , next find
    .blockquote{ 
    , it usually on <style> section,
    it will show like his
    blockquote{margin:bla-bla;color:bla-bla;font-style:blablabla;xxx....}

    next replace it with my code

    blockquote{
    margin:20px;
    color:#666;
    font-style:italic;
    border-radius:10px;
    opacity:0.5;
    Background: url(http://4.bp.blogspot.com/-Koxtm3hF3-g/TsXQ6VHwfTI/AAAAAAAAAd8/qNR_Q-COx6s/s1600/background.png)}
    blockquote:hover{opacity:1;
    Background: url(http://4.bp.blogspot.com/-Koxtm3hF3-g/TsXQ6VHwfTI/AAAAAAAAAd8/qNR_Q-COx6s/s1600/background.png)}


    you can edit my code above
    little explaination
    blockquote:hover ,this style will active when your mouse over the blockquote area

    Just let me know if you have a problem
    Comment Please

    Next Post Will Be :

    How To Add Smooth Transform Effect

    Wednesday, June 13, 2012

    Create Back To Top Button Widget Blogspot

    In this tutorial , i'll show you how to make Back To Top or Up Button using Jquery, The benefit of this button is making reader navigate easy to Upwardof your page without scrolling, and make your blog more beutiful,
    allright,
    Open your template editor, and Click expand template Widget

    Find </head> and paste the code Below just above it
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
    <script type='text/javascript'>

    Tuesday, June 12, 2012

    How To Make 3D Image In Photoshop

     






    Looking for Photoshop tutorial???
    this is my second tutorial about editing Image. OK, Let's look on the picture, i've done some picture above, Not so Good, you can do better than me, yoou only need som imagination to do that.
    i've used photoshop CS5 , here it is the tutorial :
    i've prepared one picture for this tutorial
    Next, use Edit>>Transform>>Skew  then transform it, add some degree to the image, just like this :
    after that, Layer>>Layer Style>>Blending Options , and choose bevel and emboss :
    lt Set as you wish, use your imagination to make it better. And the last , Hold Down the Ctrl and Alt Key on keyboard then drag and drop the image to make so 3D effect, You can watch this for the Demo :



    Friday, June 8, 2012

    How To Set Transparent Image Using PhotoShop

    This Is my first Tutorial about Photoshop, Little Nervous here :)
    ok, Now , i'll show you how to make it Transparent, Let's Compare with two images i have
    Transparent
    No Transparent














    Click the Image above To Compare, and you will see waht's the difference. the common filetypes that you can use to set transparent are PNG , TIFF, GIF. But i use PNG. is this  Necessary??
    No, This is not necessary, but if you use the Transparent Image , it looks better than no tranparent  baceuse it has white color.


    #1
    • Firstly, Open Up your file then select with Quick Selection tool (W) and select area that you want to keep,
      Look At Picture #1
    • Then choose  Layer>New>Layer Via Cut
    • After that, you will have two layers, choose the layer that you want to set Transparent
    • Now Delete the Layer and save as PNG image
      Or the other way .
    • Select the layer to Set Transparent, Layer>Layer Style>Blending Options
    • Set The Opacity as you wish
    • Then Save as PNG
    Allright, you are finish, easy step
    i prefer use the image that have transparency , it looks better on my blog ,Please Comment If u like My Post

    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 Book

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


    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, Dreamweaver
    gives you more control without leaving your editing environment. You can also view the state of
    any 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 more
    efficiently 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
    • Enhanced CSS starter layouts. Jump-start your standards-based website design with updated
    and simplified CSS starter layouts. Based on user feedback and constantly evolving CSS best
    practices, the CSS starter layouts have been completely rewritten. For example, complex
    descendent selectors have been removed in favor of simplified, easy-to-understand classes, and the overall structure of the documents has been revamped. 
    REMEMBER, BUY IT , DO NOT CRACK or PATCH IT, Use Genuine Version Only :)
    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"







    Tuesday, May 29, 2012

    How to Use FeedBurner On Blogspot



    Many Bloggers want their blog have much traffic, Before i start to explain how to make it, we must now what is feedBurner...

    What are Feeds?? XML RSS and ATOM...
    feeds is the way to deliver or distribute website content to audience or reader, feeds permit subscription and it will delivered via e-mail or etc.

    Sunday, May 27, 2012

    Link Exchange





    Or Copy the code below , if your template has a dark Background



    How To Create Link Exchange Widget

    Friend.s Banner

    Odong-OdongTips Trik, Info Unik, dan Tutorial hacking
    Photobucket Anda Tahu?Best Of Site unik,musik,islami,lucu,SEO,nokia E63

    Friend's Link
    Khant' Berxco Sundanese™