Techie Blogger » javascript http://www.techieblogger.com The Ultimate Design Resource Portal Thu, 09 Feb 2012 08:56:35 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Build Your Own Online Store In Blogger Blogs http://www.techieblogger.com/2009/12/build-your-own-online-store-in-blogger-blogs.html http://www.techieblogger.com/2009/12/build-your-own-online-store-in-blogger-blogs.html#comments Wed, 30 Dec 2009 13:33:44 +0000 Robin http://www.techieblogger.com/?p=3184
  • Add yahoo Smileys on Blogger Posts – Blogger hack
  • Add paypal donation button to blogger and wordpress blogs
  • Related Posts Widget For Blogger – Bugs fixed
    • ]]>     As everyone knows that the Blogger is an online service provided by Google to publish the web-pages free of any cost. Blogger blogs are used to provide online journals, Web Portals, Web Gallery and online magazine.etc. These blogs are not only used for these tasks but also to make money online using different programs like

    • Google Adsense
    • Chitika
    • Kontera
    • Commission Junction
    • Click Bank
    • Affiliates Program
    • Private Ads

    So making money  online had a wide space in the blogosphere nowadays. So apart from these task another best feature which the blogs has are the ability to sell your own goods online using some javascripts and paypal intergrated in your blog. Till last week there was a tought time to sell the online goods at blogger.com because the lack of proper shopping cart etc.. But today we had come up with an solution for selling your own goods online using blogger blogs.

    I believe Blogspot is a easy and powerful platform . It can do whatever other platform can do . In WordPress ,with plugins ,you can make a shop online . And now ,in Blogspot ,you can do the same . You can make a small online shop for selling good . It’s not a perfect solution ,in fact, it’s not good at processing and security .But anyway ,it’s still the solution you should consider if you want to stick with Blogspot .

    Build Your Own Online Store In Blogger Blogs

    Live Demo

    Yesterday ,I found the script called SimpleCart . This script is based on Ajax for making a complete shopping cart ,using two payment method Google checkout and Paypal for check out .
    You can find out more information on SimpleCart at This page

    To make a shop like this ,you can follow some step bellow :
    1, Login to your blogger account ,go to Layout tab ,continue to Page elements . Create a HTML/Javascript widget .
    2,Download this file and paste it content to HTML/Javascript widget content .
    Download file here
    3,Save template . And see the widget in action .

    How to customize this code

    1,Take a look on this code :

    <script type=”text/javascript”>
    simpleCart.email = “brett@wojodesign.com”;
    simpleCart.checkoutTo = PayPal;
    simpleCart.cartHeaders = [ "name", "thumb_image" , "Quantity_input" , "increment", "decrement", "Total" ];
    </script>

    simpleCart.checkoutTo = PayPal; mean the payment method is paypal
    simpleCart.email = “brett@wojodesign.com”; is the Paypal email for making payment to .Change it to your own .

    2,Here is the code of one item in my live demo shop :

    <div>
    <!–Notice the class names of each tag begin with item_ –>
    <img src=”http://i604.photobucket.com/albums/tt130/metalner/simplexshop/attack-release.png” alt=”product 1″ title=”product 1″/>
    <h5>Sample DVD</h5>
    <p>
    To create a shelf item, you create a div with a class of simpleCart_shelfItem
    </p>
    <span>$14.99</span>
    <a id=”s1″ href=”javascript:;”>Add to Cart</a>
    <span class=”item_thumb”>http://i604.photobucket.com/albums/tt130/metalner/simplexshop/attack-release.png</span>
    </div>

    To create a shelf item, you create a div with a class of “simpleCart_shelfItem” ,like this <div>
    …………………
    </div>

    this structure : <img src=”item_image” alt=”product 1″ title=”product 1″/>
    is for image of item . Image of item must contain class=”item_image” attribute .

    This structure <h5>your_item_name</h5> is name of item . It must included class=”item_name” .

    Description of item must included like this
    <p>
    your description
    </p>

    To set the price ,use this structure :
    <span>$00.00</span>

    To make ” add to cart link” ,add this line
    <a href=”javascript:;”>Add to Cart</a>

    To add thumbnail image for item ( thumbnail image will be showed in shopping cart ) ,use this structure :
    <span>your_thumbnail</span>

    Here is the code of cart :

    <div id=”cartTotal”>
    <strong>Total: </strong><span></span>
    </div>
    <!–Add a div with the class of simpleCart_items to display what is in the user’s cart–>
    <div></div>
    <!–use a class of simpleCart_empty to empty the cart and simpleCart_checkout to checkout –>
    <a href=”javascript:;”>Empty Cart</a>
    <a href=”javascript:;”>Checkout</a>

    to show the total ,use this statement :
    <span></span>

    to show shopping cart ,use this statement
    <div></div>

    To show “empty cart” and “checkout” button ,use this statement :
    <a href=”javascript:;”>Empty Cart</a>
    <a href=”javascript:;”>Checkout</a>

    In this post ,I explained some important points of using Simplecart and make it a widget to add to Blogspot . If you want to customize the appearance of the shop ,you can modify the CSS section of widget .
    If you want to know more about Simple Cart script and its other options such as tax rate ,shipping fee … or option for showing the quantity ,the final cost …
    You can go to SimpleCart Documentation page

    Related posts:

    1. Add yahoo Smileys on Blogger Posts – Blogger hack
    2. Add paypal donation button to blogger and wordpress blogs
    3. Related Posts Widget For Blogger – Bugs fixed

    ]]>     http://www.techieblogger.com/2009/12/build-your-own-online-store-in-blogger-blogs.html/feed 29     Redirect Users From Old Domain To New Domain – Blogger Hack http://www.techieblogger.com/2008/08/redirect-users-to-new-blog-domain.html http://www.techieblogger.com/2008/08/redirect-users-to-new-blog-domain.html#comments Fri, 08 Aug 2008 14:12:00 +0000 Michael http://www.test.smashingtips.com/techieblogger/?p=30
  • Show only specific Number of posts in Labels Page – Blogger Hack
  • Image re-sizer CSS Hack for blogger and wordpress users
  • Add Yahoo Smileys to Blogger Posts – Firefox Hack
    • ]]>     Hi Guys , Today I have come with the most Wanted hack named ” Redirect Users From Old Domain To New Domain ” . This Hack is very useful for Blogger Users , because in Blogger Bx-Errors may cause your Blogger Blog unavailable for longtime. As you all know my Blog is also met with an BX-error which made my Blog unavailable for 2 months. After waiting such a longtime I decided to create a new Blog with same Domain (rias-techno-wizard.blogspot.com ). But now guys I have found a simple Script through which we can redirect Old Blog users to Our New Blog. In this Post I will tell you How to Implement This Blogger Hack ” Redirect Users to New Blog “.

    Redirect users from Old Domain To New Domain

    by Blogger Accessories

    Is this Hack Useful ?

    Of course ” Redirect users to New Blog Domain ” hack is very useful for those who have changed their domains.

    for example : I have a domain named rias-techno-wizard.blogspot.com . I wanted to change my domain to bloggeraccessories.blogspot.com or other domains related to my Blog content. But I am afraid ,will I get my old Blog users ( rias-techno-wizard.blogspot.com ) to my new Domain. So I decided to carry on with this Domain.
    But Now my Domain has got Google Page Rank 3 sengihnampakgigi .

    But Now I have a simple Javascript which redirects our Old Blog Users to Our New Blog.

    How to Set-up this Hack ?

    It’s very Simple , just follow the steps below.

    Login to your Blogger account and Go to Layout section of your Old Blog . Then navigate to EDIT HTML sub tab and search this text </head> .

    Now Copy and paste the following Code Below or Above that line .

    <script>
    //<![CDATA[
    alert('Sorry For the trouble guys , I have moved my Blog to http://rias-techno-wizard.blogspot.com . So you will be redirected to my New Blog in few seconds');

    window.location.href = 'http://rias-techno-wizard.blogspot.com';
    //]]>
    </script>

    The text in Green will appear in the Alert Box ( Edit it to your Wish ).

    The Text in Red is the destination Url . ( place your new Blog Url )

    You can Also place the above code , by adding a new HTML/JAVASCRIPT page Element .

    Now When users go to your old Blog they Will get this Alert Message as shown below ,

    Redirect users from Old Domain To New Domain

    and they will be redirected to your New Domain in a few seconds.

    I hope you will like this Hack. if you Have any Problem let me know. I am here to help you .

    thanks for reading , see you soon with a new hack.

    Related posts:

    1. Show only specific Number of posts in Labels Page – Blogger Hack
    2. Image re-sizer CSS Hack for blogger and wordpress users
    3. Add Yahoo Smileys to Blogger Posts – Firefox Hack

    ]]>     http://www.techieblogger.com/2008/08/redirect-users-to-new-blog-domain.html/feed 19