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

Read More

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
Windows Live Hotmail, Gmail (Google Mail), and Yahoo! Mail Plus, also Aol Mail
2. A different user interface which matches the other Windows Live "Wave 2" applications. 
3. Synchronization with Windows Live Contacts. 
4. 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. 
5. Multi-line message lists. 
6. Emoticons can be used in emails and other functions. 
7. In-line spell checking. 
8. Separate inbox folders for different POP accounts. This is not optional, so it dissatisfied many users who were used to the single inbox. 
9. 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.

Read More

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 :)

Read More

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 :)

Read More

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 :)

Read More

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

Read More

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

Download

• 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 :)

Read More

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

Read More

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

Read More

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

Read More

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT8wmkxcuIIoWa4-mwrloLzstgePzUXn9CNa_gtvY2Ma8DonzR64SBaPJiGdEpzWdoFA0kKGxiaxW1h3WARrdWWFeHMEgSnjRlOPXfNapENYeB-vv0Zq6DQzGe4xk-YyF1h2v6iJV1L8Y/s1600/background.png)}
blockquote:hover{opacity:1;
Background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT8wmkxcuIIoWa4-mwrloLzstgePzUXn9CNa_gtvY2Ma8DonzR64SBaPJiGdEpzWdoFA0kKGxiaxW1h3WARrdWWFeHMEgSnjRlOPXfNapENYeB-vv0Zq6DQzGe4xk-YyF1h2v6iJV1L8Y/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

Read More

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

Read More

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 :

Read More

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

Read More

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 :

Read More

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.

Read More

Make Link Exchange Widget Blogspot

• What Is Link Exchange ???
  a Link Exchange is The way to make a relation between you and your friend,
• How to do it??
  u only need to add your friend banner to your website and ask him/her to add your banner too

The benefits of it are :

• Increase Traffic of your website
• get new friends

allright, this is Mine :

==>> My Banner


==>> copy the code to your widget

\

\\

 \\\

\\\\\  My Friends 

/////  Banner

///

//

/

Read More

Change Blogspot Font With Custom Font

Hello There....

firstly i wanna say sorry about my English, secondly i appreciate that you've visited my blog, and this is the tutorial for Change your default font setting ,you must be bored about your own font, and this tutorial is right for you to customize your blog. 

Is that Possible to use another True Type Font????
and i will say "Yes"

Read More

10 Cara Menghasilkan Uang Dari Internet

Mau cepat kaya ????
pasti banyak yang berkeinginan seperti itu ,ada beberapa cara buat mendapatkan pengasilan dari internet, memang sih bagi pemula itu minim, untuk sejauh ini saya sudah menggunakan beberapa cara. awalnya sih buat blog cuma untuk ekspresikan diri tapi lama-kelamaan jadi hobi. yah, walaupun postnya baru sedikit tapi gak apa , mulai dari NOL dulu .
nah ini beberapa cara buat kalian para Newbie yang ingin menghasilkan uang dari hobi blogging.

Read More

Install Modem Smartfren Haier CE682 on Ubuntu 12.04 Precise Pangolin

Install Haier CE682

This is My First Modem, hehehe....
and i use the connection of Smartfren Indonesia, and of course u can use , another provider too . firstly, i wanna say about this tutorial intended for beginner.
alright, let's Prepare, The things u need :

Download here :

Read More