Wednesday, August 29, 2012

CSS3 Animated Bubble Buttons For Blogger


This Tutorial is about animated CSS3 bubble buttons for blogger. Actually these animated bubble buttons were designed by tutorialzine.com. All buttons are made with pure CSS3 and on mouse hover the bubbles start shaking, that is a worth seeing effect on buttons. This buttons are available in four color themes and four sizes. So you can use any size of button according to your blog style. You also can add buttons in WordPress but you have to embed CSS codes in your WordPress site. These buttons are actually used as Demo, Download and many other buttons in blog post
Animated Bubble Button For Blogger

When i was searching for these bubble buttons for my blog, i found nothing. Bloggers posted on it but their CSS3 codes were not working. Finally i found a script and edited the code and finally it worked. Here is a demo of CSS3 animated bubble button

View Demo

CSS3 Code Add

  • Go to Blogger Dashboard → Design → Edit HTML



  • Now find the following code using F3



  • <head>
  • Now add the following CSS code just after <head>



  • <link rel="stylesheet" type="text/css" href="https://blogswidget.googlecode.com/svn/tags/bubble.css" />

    Actually above CSS code really too much huge at the same time you have to keep your template clean, so i kept the CSS3 code short

    HTML Codes

  • Now you have to paste HTML code in your blogger post. There are Big, Medium, Small and Round shaped button. Use them as your choice.



  • Big Buttons

    <a href="#" class="button big blue">Big Button</a>
    <a href="#" class="button big green">Big Button</a>
    <a href="#" class="button big orange">Big Button</a>
    <a href="#" class="button big gray">Big Button</a>

    Medium Buttons

    <a href="#" class="button blue medium">Medium Button</a>
    <a href="#" class="button green medium">Medium Button</a>
    <a href="#" class="button orange medium">Medium Button</a>
    <a href="#" class="button gray medium">Medium Button</a>

    Small Buttons

    <a href="#" class="button small blue">Small Button</a>
    <a href="#" class="button small green">Small Button</a>
    <a href="#" class="button small orange">Small Button</a>
    <a href="#" class="button small gray">Small Button</a>

    Round Shaped Buttons

    <a href="#" class="button small green rounded">Rounded</a>
    <a href="#" class="button small blue rounded">Rounded</a>

    If you want to show the bubble in middle position then use this html tag <center>YOUR BUTTON CODE</center>


    Now all you have to do is to place your link and link text. That's all folks. I made the article with much difficulties. If you liked the article you are warmly requested to share. Only your appreciations can encourage us to continue

    Show HTML, CSS, JavaScript Codes in Colored Background In Blogger


    We often write tutorial which relating to source codes such as HTML, CSS, JavaScript Codes. In my previous post i showed how to show HTML and JavaScript code in blogger post But this time i am giving tutorial on how you can show HTML,CSS codes in colored background. Many bloggers also follow this technique. This really nice to represent source code or HTML or JavaScript code in colorful background

    Colored Source Code

  • Log in to Blogger → Dashboard


  • Go to Design Tab → Edit HTML


  • Search for the following code


  • ]]></b:skin>
  • Now paste the following CSS code just above ]]></b:skin>


  • .rafi { font-size: 15px;font-family: Courier;font-weight: normal;font-style:italic; background-color: #000000; color: #ffffff; width: 90%; margin: 5px 10px; padding: 20px 20px 20px 20px; border: 2px dotted lightgrey; transition: background-color .777s; -webkit-transition: background-color .777s; -moz-transition: background-color .777s; -o-transition: background-color .777s; -ms-transition: background-color .777s; } .rafi:hover { background-color: #0c991a ; color: #fff; box-shadow: -1px -1px 12px 2px gainsboro; border-radius: 10px; } .rafi:active { background-color: CornflowerBlue ; color: #000; }
  • Now save your template


  • You can change the font size as highlighted red


  • Implement In Post

  • when you write a HTML or JavaScript or CSS code just follow this as mentioned below


  • <div class="rafi">YOUR PARSED HTML CODE</div>

    Host CSS, JavaScript And Html Files On Google Project Hosting


    JavaScript, CSS Documents can be hosted on Google Project Hosting. Hosting source codes, JavaScript, CSS codes on Google Project Hosting is much safer rather than your personal hosting or other free hosting service. Google gives you unlimited hosting and your files , codes or documents will be safe for unlimited time while other free hosting services may shut down at any time. Google Project Hosting is a blessing for web developers. In many projects, we can just simply upload JavaScript files and hotlink to it. But this same trick does not work when hot linking to CSS, Image files and HTML pages or files. This is because, by default when we upload any file to Google Code, it is served as text-plain mime-type. This works with JavaScript files but not with CSS, Image files or HTML pages. For example i have hosted a HTML file on Google Project Hosting CLICK HERE So, we are going to discuss in detail how to host any file using Google Code and Sub Version Client. I am serving the procedures part by part.

    Sign Up For Google Project Hosting

  • First of all sign up for Google Project Hosting

  • Now Click Create New Project

  • Now fill up your project name and other information


  • You Must select "Subversion" as Version Control system.


  • Now Click on the Create Project button

  • When the project is created navigate to the "Source" tab from the project page

  • Note down the special URL like yourprojetname.googlecode.com/svn/trunk and then click on the googlecode.com password


  • After Getting password save it elsewhere


  • Download And Configuration TortoiseSVN

    TortoiseSVN is a shell control client will be used as Subversion client to upload our static files with proper mime-type. The software was named Tortoise as it is as slow as Tortoise.
    Download Tortoisesvn
  • After download install it

  • Now right click on desktop like refresh and navigate to Tortoise SVN → Settings


  • A pop up settings page will appear. Now click on the "Edit" button


  • This will open up a notepad with a text document

  • This document holds all the records for the mime-type of the files to be uploaded. We need to add a list of mime-type according to extension on this file

  • Just after the end of the text document, add the following texts .

  • Click Here For The Code


  • Now save the text document

  • Now press OK on all the open SVN windows.

  • All technical process are done. Now let's see how to upload HTML pages or CSS, JavaScripts Codes

  • How To Host HTML, CSS, Javascript

  • Now Right Click and navigate to TortoiseSVN → Repo Browser.


  • Enter the URL and press ok


  • A dialogue box will prompt for your username and Password. Enter the your Gmail and the googlecode.com password that you have stored. Press ok

  • Now the repository browser will open.

  • First Drag and drop the HTML, CSS, JavaScript files in the box you want to upload. Wait some moments for uploading file.


  • After download you will get the link of your uploaded file.

  • If you have configured TortoiseSVN properly then it will upload with proper mime-type and the file is ready for hot linking. You have got the URL to hot link

  • It is a detail discussion on hot linking files using Google Project Hosting. Actually this method is special for hosting HTML pages though you also can host CSS, JavaScript codes too< The whole precess is complex. Any fault during configuration may spoil your all attempt Feel free to ask any question. If you like the article , you can share with your friends

    How To Add Scrolling Back To Top Button In Blogger



    I got many questions about if is it possible to add scrolling "back To Top" button in blogger.We see many WordPress sites using "Back To Top" button using plugin.But how to do in blogger ? Yes, finally you can now add "Back to Top Button" in blogger.Its very simple like drinking a glass of water. Back to top button has been made with JavaScript and some beautiful back to top image button here








    Go To Blogger → Design

    Choose HTML/JavaScript widget

    Paste the following code inside it



    Click Here For The Code

    You have to put IMAGE LINK in the code.Here Few image links are given.Choose as your wish of your choices



    http://3.bp.blogspot.com/_JwD5r652h00/SvDAnTlDfDI/AAAAAAAAAQY/y-NAytkDXjI/s1600/bttp-5.png



    http://2.bp.blogspot.com/_JwD5r652h00/SvDAnGbH7qI/AAAAAAAAAQQ/qKtrVmPCBXY/s1600/bttp-4.png



    http://1.bp.blogspot.com/_JwD5r652h00/SvDAmyqvA9I/AAAAAAAAAQI/hACE99TswzU/s1600/bttp-3.png



    http://2.bp.blogspot.com/_JwD5r652h00/SvDBCN6PpfI/AAAAAAAAARA/oEpqkKnL0Jw/s400/bttp-10.png



    http://2.bp.blogspot.com/_JwD5r652h00/SvDBBw_U6MI/AAAAAAAAAQ4/KDKaH8OTDO4/s400/bttp-9.png



    http://1.bp.blogspot.com/_JwD5r652h00/SvDBBzoz4II/AAAAAAAAAQw/n9hIomKpQxY/s400/bttp-8.png



    http://3.bp.blogspot.com/_JwD5r652h00/SvDBBlYeFHI/AAAAAAAAAQo/lzY3WpZpwPA/s40



    http://4.bp.blogspot.com/_JwD5r652h00/SvDBWmm_WTI/AAAAAAAAARQ/xfyALfcAbZ4/s400/bttp-12.png



    http://3.bp.blogspot.com/_JwD5r652h00/SvDBW6QlhXI/AAAAAAAAARY/6ZxECjTlMxM/s400/bttp-13.png



    http://3.bp.blogspot.com/_JwD5r652h00/SvDBW-al_pI/AAAAAAAAARg/Aoxlzmp3Kw0/s400/bttp-14.png



    http://1.bp.blogspot.com/_JwD5r652h00/SvDBXF2WGRI/AAAAAAAAARo/FIPZOwsTTBc/s400/bttp-15.png



    http://3.bp.blogspot.com/_JwD5r652h00/SvDBloI2NZI/AAAAAAAAARw/VI-Li7cPUvM/s1600/bttp-16.png



    http://1.bp.blogspot.com/_JwD5r652h00/SvDBl9PLQ7I/AAAAAAAAAR4/5fV05DNfZ9o/s400/bttp-17.png



    http://3.bp.blogspot.com/_JwD5r652h00/SvDBl0UhsvI/AAAAAAAAASA/ge0GmH0HkyE/s400/bttp-19.png



    http://2.bp.blogspot.com/_JwD5r652h00/SvDBmIGbP3I/AAAAAAAAASI/cL5okLpz_C8/s400/20.png



    http://3.bp.blogspot.com/-b1hw2cqey60/TfzE0oLSFkI/AAAAAAAAD3w/FpMh-mdf7rA/s400/Back-to-top.png



    http://2.bp.blogspot.com/-ePqbjiLEGEI/TivrqfGbPvI/AAAAAAAAEZE/cFdcqMze9Bw/s400/Top.png




    http://1.bp.blogspot.com/-riphNAyS6tg/TkOM1Nr3ZMI/AAAAAAAAAC4/nKUWh2Qwvpw/s320/backtotop.jpg


    http://3.bp.blogspot.com/-bbYVaCr5BOQ/UCPmHvbvBMI/AAAAAAAAAnE/UTZkfl218a4/s1600/back%2Btotop.gif


    Now save the Gadget and see a nice smooth scrolling "Back To Top" button


    Please share and Comment here if you like.I need your appreciation to continue

    Monday, August 20, 2012

    CSS Nudge Effect To Blogger Links


    Nudge effect is a effect, when you place your mouse on a link, it will nudge. This effect developed with CSS3. Here is a demo of CSS3 nudge effect on blogger links. This effect looks nice on links. You can add this effect all the link or some selected links on blogger

    View Demo

    Nudge Effect To All Links

  • Blogger Dashboard → Design → Edit HTML
  • Now find the following code using F3
  • ]]></b:skin>
  • Now Paste the following CSS code just above ]]></b:skin>
  • a:link {
    -moz-transition: all 0.1s ease-in 0s ;
    -webkit-transition: all 0.1s ease-in 0s ;
    -o-transition: all 0.1s ease-in 0s ;
    }
    a:hover {
    margin-left: 12px;
  • Now save the template
  • Adding Nudge Effect To Selected Links

  • Blogger Dashboard → Design → Edit HTML
  • Now find the following code using F3
  • ]]></b:skin>
  • Now Paste the following CSS code just above ]]></b:skin>
  • .nudg {
    -moz-transition: all 0.1s ease-in 0s ;
    -webkit-transition: all 0.1s ease-in 0s ;
    -o-transition: all 0.1s ease-in 0s ;
    }
    .nudg:hover {
    margin-left: 12px;
    }
  • Now save the template
  • Nudge Effect On Selected Links
  • Follow the below HTML code format
  • <a class="nudg" href="http://edutechnology.net/">Blogging Tips</a>

    Please like our Facebook Page or Follow us on Twitter or Subscribe

    If you like the article, please spend only 5 second to share with your friends

    How To Make All Links Open In A New Window In Blogger


    To open links in a new window, web developers use target="_blank" HTML tag. For an example <a href="http://edutechnology.net"target="_blank">Blogger Widget</a>. When writing blog post you have to use target="_blank" on each HTML links which you want to open in a new tab. There is great impact to open external or internal links in a new window because you can hold your readers much surfing your blog and eventually more money you can make.

    Make All Links Open In A New Window

  • Log in Blogger → Design → Edit HTML
  • Now find the following code using F3
  • </head>
  • Now place the following tiny code just above </head>
  • <base target='_blank' />
  • Now save the template
  • After this all links of blogger whatever external or internal even your blog title will open in a new tab of your browser.

    Please like our Facebook Page or Follow us on Twitter or Subscribe

    If you like the article, please spend only 5 second to share with your friends

    Stylish CSS3 Ad Widget For Blogger Like SpiceUpyourBlog


    This article deals with Stylish AD Widget with CSS3 effect. Who don't want make money with blogging but the sad fact that the chance of earning opportunity is getting harder gradually for huge quality blogs coming day by day. BuySellAds is dream of bloggers. Also difficult to get Ads from them after being approved. We are going to discuss to stylify BuySellAds Ad widget with cool CSS effect so that it makes all the advertisers think that this blog is well designed and enhanced and get cool advertisers.

    Add CSS

  • Log in Blogger → Design Tab → Edit HTML


  • Now search for the following code using F3


  • ]]></b:skin>
  • Now paste the following CSS code above the code just mentioned above


  • Click Here For The Code

  • Now save the template


  • HTML Codes Of Ad Widget

  • After implementing CSS code you need to place Ad widget on your blog. You can place 125x125, 468x60, 728x90, 336x280,


  • Go Page Element → Add A Widget


  • 125x125 Ad Widget
    <center>
    <div id="bsap_125" class="bsap_125 bsap">
    <a href="http://AddURL" class="ad1" title="Ad Title" id="bsa_1451626" target="_blank"> <img src = "http://Imageurl "alt =" CODE "height =" 125 "width =" 125 "/> </ a>
    <a href="http://AdURL" class="ad2 even" title="Ad Title" target="_blank"> <img src = "http://AdURL"alt =" AdName "height =" 125 "width =" 125 "/> </ a>
    <a href="http://AdURL" class="ad3" title="AdTitle" target="_blank"> <img src = "http://Ad Image URL "alt =" AdName "height =" 125 "width =" 125 "/> </ a>
    <a href="Ad URL" title="Advertise Here" class="adhere ad4" target="_blank"> Advertise Here </ a>
    </ Div>
    </ Center>
    468x60 Ad Widget
    <div id="bsap_468" class="bsap_468 bsap">
    <span class="bsap_468 bsap"> <a href="AdURL" title="Advertise Here" class="adhere ad4" target="_blank"> Advertise Here </ a> </ span>
    </ Div>
    728x90 Ad Widget
    <div id="bsap_728" class="bsap_728 bsap">
    <span class="bsap_728 bsap"> <a href="ADURL" title="Advertise Here" class="adhere ad1" target="_blank"> Advertise Here </ a> </ span>
    </ Div>
    336x280 Ad Widget
    <div id="bsap_336" class="bsap_336 bsap">
    <span class="bsap_336 bsap"> <a href="ADURL" title="Advertise Here" class="adhere ad1" target="_blank"> Advertise Here </ a> </ span>
    </ Div>

    Effect On Images
    < img src="ImageURL" alt="AD Name" <img height="125" width="125" />
    Now replace with your Advertiser URL and Advertiser Image URL You may customize CSS and HTML codes if you want to stylify Ad widget.

    Please comment here if any ask. Please take 5 seconds to share the writing with your friends if you like