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