Thursday, November 22, 2012

Add CSS3 Round Buttons For Website

Posted by Anonymous
Tags :

CSS has become a integral part of a good looking blog.We designing is very important so as to leave a mark on your readers.A good looking site is always remembered by a reader.In order to get your readers attention their are certain tricks and tweaks by which you will be able to leave that WOW impression.There are some widgets which make use of CSS.These widgets have become very common and hence they are not that appealing.Their should be some element of surprise in your blog.Some blogs rely on external linking.Buttons are way better than the simple text links.Adding of buttons in your blog is not that difficult a task.Today I am going to show you a simple method by which you will be able to add the exciting new round cornered CSS buttons.These buttons are very easy to use.So let's go ahead and cut the cake.

  • You can view a demo of this tutorial for better understanding
    • View Demo

    CSS Code Add

  • Go to blogger dashboard → Template → Edit Template
  • Now find the following code using F3
    • ]]></b:skin>
  • Now add the following CSS code just above it
    • <link href='https://blogswidget.googlecode.com/svn/wiki/CSS3round.css' rel='stylesheet' type='text/css'/>
  • Now save
  • You are ready to put awesome CSS3 round button on your blog post or website

    • HTML Code

    <div class="roundbutton"><a class="red" href="http://www.domain.com/">BUTTON TEXT</a></div>
    <div class="roundbutton"><a class="orange" href="http://www.domain.com/">BUTTON TEXT</a></div>
    <div class="roundbutton"><a class="green" href="http://www.domain.com/">BUTTON TEXT</a></div>
    <div class="roundbutton"><a class="blue" href="http://www.domain.com/">BUTTON TEXT</a></div>
    <div class="roundbutton"><a class="gray" href="http://www.domain.com/">BUTTON TEXT</a></div>
    <div class="roundbutton"><a class="dark" href="http://www.domain.com/">BUTTON TEXT</a></div>
  • Now replace link and button text
  • Thanks for being with us. You are requested to share the tutorial if you like

    • Wednesday, August 29, 2012

    CSS3 Animated Bubble Buttons For Blogger

    Posted by Anonymous
    Tags :

    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

    Posted by Anonymous
    Tags :

    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

    Posted by Anonymous
    Tags :

    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

    Posted by Anonymous
    Tags :


    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



    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSo18XmBUwLtzJne2T3-EYv7b8IaNDqZKBwEpzYMECBp1FwlNOkQAdaamNm-nY_oNDAFHRUhiBFJidxWfeUaMcv-xrxa3oGfBHS4QHDeKrh4Dlda_Qhy1XLBdnWRdOoWGXX1OfLKem9iHP/s1600/bttp-5.png



    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsw-GWbK2FSYxwgVdRSRnTyuM7ZbNTdak2DIhj_4C1Al5JtJwCFcsT4sIz7fbWJyQNCf9QWY6WE6F-_YDKGcPSTja1TBVlCWgp2xTyExP8Eqh44_lcVlCeIHXWImVH2BnnE9nStE5Bj0CQ/s1600/bttp-4.png



    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiACMT80qbLdpiZEA9dl1BMWQinTn4xu61uGV9RIFy_ma4ctpzmIbUS_24J5xaX9yRTSxdeglRyCfo6xJhLM4XoascNBxVhxfP0ABcGQceRxI6qs2i9UTBPQ5fz51NnUDh0wVtZzkxZ76Ao/s1600/bttp-3.png



    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhSidjFbd2SCvty3Ynkjw2nazZLWWXKpEdlAS8ojB89pnSbAUFZD6ax4Bo_xn8cJ5I5RAX4BnRSpLmRnMAgn80Ul2oMiqd7hFbItJlwWPxSFAXxsYTZvatox4mHstiORgYkWKi4Br_y2XK/s400/bttp-10.png



    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ2SIELxzyNmu0btwsM781WITOqXV38eIfXMrWJ1cJKQxBNHalyu0nUDIh-745kYVGpVJIlIyd1-M92O74-tp8enixh8_VAIFzA_kFnpq2qYL07ZZFUhoYYU-ye4nLz_m2uXy374sky32p/s400/bttp-9.png



    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJi6wRPxI36LCd0tUWOfNFS49fKvuXwAh6m2kSq-Oc2x8_aa51LxqRGnC3mtuKi6Oaxaj_wpKxRFdMknIOoBpsh7IhWNqhdpA2YloWyO2sMSUpuMRKOcyrdahQc8Vz143-Jk-N7472i-6c/s400/bttp-8.png



    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFDn5Af65Dbc2vd-jfXaxezQqoHyczZghH30CWC-5EzLyZjIIND0oAD8NhMwQ6NZFk14WlJNSm5_dEc1cfRkMVJmWYMSO7KV_yfmKPlRPh2bX3Wj0OfVo7qDxBuAP3Id0-N4nOQ_UJSqGJ/



    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimkZEhdl9Q7d-Gn32nKOHEXG7t8sIJ3hLWsR_1uuOt2QgF8h6-JxJo6RUTXvA-64iiRKFtsBAOPJrKQAUi9s8T1vlRPfl1KN7nRM4yxWiC62Bm4WlkL61fQ1OyHT38ItfjP24qXcqR_Cao/s400/bttp-12.png



    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj85LsmK0sjb5-hLkz5UnI5qJb4pc50nKrMzqlicNsRsm8DbPvPbryhHCtx8IdRF53esWvuM5Cw_PsXC-pFjKNlqnTHLheNlVUA4zMfZhIYfpVzP2Z8g0zwVYqULVL1bMQgecR_kHXljH2r/s400/bttp-13.png



    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtnYzFzoo_qYGy6zxQR52Mf3vCGYel3GfeCeB9vrEkig0QvpkRANVc4CRb1ymtNdmCy4qri3c6wyCgoyWjObHkVTvRqw5D6vpy2JjrQiQqm07muJWscgBU5AmaVCbQam-88wnD6kopcLFF/s400/bttp-14.png



    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia2KpWHFGlYA9Ro_mD4jDKdfli_kxOjaLzkQT2chaGaHFYS7rr_XfHLQTkjhnSThVXxU9q7naqlfYQfoHncDluL_B0Zb9zjj29i9XQAg3mXtSrxxTs23N3cmP_QoZzLdmgdKqwIuBzR5Fe/s400/bttp-15.png



    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU8JWjIE4itG0-zDWVOUMydiWhk_Owx2EyEs5pcf_PcpOYQTAIyQHx_SbvHHaAHcrtdfDssfxtv40kCsp26jwAKMTpw5GDR8KIJUWqU9fSnuUqaQKjIBUd8Wdc3hsl2G65olUqL27jBjHB/s1600/bttp-16.png



    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRPShBt1ywIX8OBlOf0JdinBrjIwp6VynPEvHFY4L888uD9kCqrmjMsrod4snE4tIddnTp-1jFgh7wsTW8dXVD4VNGsnIe66la-yBFxRmjocKoAuMOxhDh6PzG0YvmfeGG5UdcUnn7qmVt/s400/bttp-17.png



    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVnQlqztb6yhIcWOFa4C9LyGnUW5ThoGyxaZ9jFe6_yU1SpqwkeFa1jWgwrdQUczFMudGvuXmHu5aya5oxpqZYXXGsh-IsFJwBangPTN624CEPaK-FFf4duniZIbhOtRPcUx-IMDRg48dO/s400/bttp-19.png



    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEWqujQTmEG6cHraI3f2dMBHvJIwrlGezbnORtjGBVwfBIj7ZV7HI-GNFGaoJERkTeRE6svu6YjHMHV3lDjW2UNJTuAzYuMjABoEMn-Q4WTEexBv5h2LmGfSY_7U9sppz2r5Wv0boAvWWy/s400/20.png



    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz4o_4Bt2RMOgmOUmjul5NRSEzBrCzTpTy4vu3elIRXTyVPUDs87Qqj-nSfn7sA7Hj479_lm6f1F_KZqUXWy9b5L6KPiEh6dV1cEZuZIRsyDaJNUH2yBRJmsnq2UhKbVPEd-CYQhsbBfg/s400/Back-to-top.png



    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqrpFWCPwiUQH3KGKhNMKBmArPpHcuNYzYZAEB9obk-3_h1DmJXd81iN6WwklOgDI-7iIEn9qqrOMi_WupEWJkuJVpgBo5_XXT857MR5mZc3Gn1bAvT8omRM5vdBo9I4Gxr0JPOsQzsBI/s400/Top.png




    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPhaCyd2Aj0YPGIbpFwVTQoQz8UokOxxbaS7gMkWZk1ffcCO_s1qPrbqS5MAsnLFiRhZ4-6tIHKS1UpJxKeSHmCc2kzNmtxX95-Prw6JPryi2sT8TjKKQr8KSV14HH8nxoT3FyBwByVxmP/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

    Posted by Anonymous
    Tags : ,

    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

    Posted by Anonymous
    Tags :

    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

    Subscribe to: Posts (Atom)