Visiting card Blogger template

Rodney | 13:29 | 28 commentaires










This mini blog with only 3 pages is the perfect  personnal blog for those who are really active on social media sites and blog less (or don't blog). It can only be used by those who want to a mini blog outside their current ones with not much content on it, just simple presentation of their works.



1. Create a New blog for your visiting card
2. Create two posts, one for your "About" page and the other for your "Contact" page. In the "Contact" just put a word, what ever, it'll not appaer when you'll install the visiting card blogger template.

3. Show your blog in the browser and copy the link location of the two posts.

4. After that, go to edit the posts and delete titles then publish again.

5. Template installation

Extract Blogger Template - visitingcard.zip
After login, goto Layout > Edit HTML > Browse > choose Blogger Template - visiting-card-blogger-template.xml > Upload > Save Template

6. Posts pages

After login, goto Layout > Edit HTML > and check "expand widget"

Find this line :

<b:if cond='data:blog.url == &quot;http://yourblog.blogpost.com/about.html&quot;'>

Put your about page link instead of http://yourblog.blogpost.com/about.html

Find this line :

<b:if cond='data:blog.url == &quot;http://yourblog.blogpost.com/contact.html&quot;'>

Put your contact page link instead of http://yourblog.blogpost.com/contact.html

Save your template.


7. Menu links

Find these code :

<li><a href='http://yourblog.blogpost.com/about.html'>About</a></li>
<li><a href='http://yourblog.blogpost.com/contact.html'>Contact</a></li>

Replace the two links with yours (those you have copy in the step 3)

8. Picture or avatar

 <img alt='VisitingCardBlogger' src='http://4.bp.blogspot.com/_hrhg1n2KA3Y/S1cKtQx3IcI/AAAAAAAAC0w/wDvGlqilXN0/s1600/person.png'/>
       
Put your Picture or avatar link to replace http://4.bp.blogspot.com/_hrhg1n2KA3Y/S1cKtQx3IcI/AAAAAAAAC0w/wDvGlqilXN0/s1600/person.png

Your picture must have 59px with and 60px height.

9. Title and description

Find these codes :

<h1>My visiting card</h1>
<p>A short description of your person</p>

10. Networks links

Find these codes and add your links between '' after href=

<li><a href=''><img src='http://3.bp.blogspot.com/_hrhg1n2KA3Y/S1cJ1P1CAbI/AAAAAAAAC0k/oncblNUTnjU/s1600/i_twitter.png'/> <strong>Twitter</strong>twitter.com</a></li>
           
            <li><a href=' '><img src='http://2.bp.blogspot.com/_hrhg1n2KA3Y/S1cG49qPkbI/AAAAAAAAC0E/cRJCajcofK0/s1600/i_facebook.png'/><strong>Face Book</strong>facebook.com</a></li>
           
            <li><a href=''><img src='http://2.bp.blogspot.com/_hrhg1n2KA3Y/S1cJoivorHI/AAAAAAAAC0g/lqjKkW9724Q/s1600/i_stumbleupon.png'/> <strong>Stumbleupon</strong>stumbleupon</a></li>
           
            <li><a href=' '><img src='http://1.bp.blogspot.com/_hrhg1n2KA3Y/S1cFjp1MGHI/AAAAAAAACz0/G5ZMG-Cc-CY/s1600/i_delicious.png'/> <strong>Delicious</strong>delicious.com</a></li>
           <li><a href=''><img src='http://2.bp.blogspot.com/_hrhg1n2KA3Y/S1cGJg-GmoI/AAAAAAAACz8/6CnnFCaogs4/s1600/i_digg.png'/> <strong>Digg</strong>digg.com</a></li>
        
            <li><a href=''><img src='http://4.bp.blogspot.com/_hrhg1n2KA3Y/S1cH0YoNPrI/AAAAAAAAC0I/oTomBZMJW28/s1600/i_flickr.png'/> <strong>Flickr</strong>flickr.com</a></li>
            <li><a href=''><img src='http://2.bp.blogspot.com/_hrhg1n2KA3Y/S1cIALnrYLI/AAAAAAAAC0M/rZxCss-b77g/s1600/i_lastfm.png'/> <strong>Last.fm</strong>last.fm</a></li>
         
            <li><a href=''><img src='http://4.bp.blogspot.com/_hrhg1n2KA3Y/S1cI162218I/AAAAAAAAC0U/5ND7ykx0pCg/s1600/i_myspace.png'/><strong>My Space</strong>myspace.com</a></li>
           
            <li><a href=''><img src='http://2.bp.blogspot.com/_hrhg1n2KA3Y/S1cJMETBFeI/AAAAAAAAC0c/HYkIEcQT8kw/s1600/i_reddit.png'/> <strong>Reddit</strong>reddit.com</a></li>

To add a new network link, just put this code after those one and fill it with correct informations.

            <li><a href='Your profil link in the social site'><img src='http://network-image-link.com/network.png'/> <strong>Social site name</strong>Socialsitelink.com</a></li>

Your network picture must be 30x30px.


11. Contact content

Find these codes and put your informations

<div class='row'><span class='field_l i_company'>Company:</span><span class='field_r'>Your Company Name</span></div>
        
          <div class='row'><span class='field_l i_location'>Location:</span><span class='field_r'>You Location (Town, Country)</span></div>
        
          <div class='row'><span class='field_l i_web'>Website:</span><span class='field_r'><a href='http://yourblogurl.blogspot.com'>Blog or website name</span></div>
        
          <div class='row'><span class='field_l i_mail'>E-Mail:</span><span class='field_r'>youremail@host.com</span></div>
         
          <div class='row'><span class='field_l i_mail'>IM :</span><span class='field_r'>YourIM</span></div>
       
          <div class='row'><span class='field_l i_mail'>Skype:</span><span class='field_r'>yourskype</span></div>

Save your template and Enjoy!
         

Categorie(s): , ,






About Blogger Mastering:
Blogger Mastering is a blog to help you master blogging with Google blogging plateform. You can get also free templates.



28 commentaires:

  1. Thanks For This Instruction . . Very Helpfull

    RépondreSupprimer
  2. @ Se7enTime : I'm very happy that you enjoy it!

    RépondreSupprimer
  3. There is a new project templates for blogger.com is http://10bloggertemplates.com

    RépondreSupprimer
  4. navigation..cannot open new window.
    target_blank not working
    pls guide..

    RépondreSupprimer
  5. @ ISMAIL AHMAD : There's no "target_blank" code in the template. Where have download your's ?

    RépondreSupprimer
  6. Cool templates I really liked them. You can make template for optical websites. I didn't any blogger themes on optical frames.

    RépondreSupprimer
  7. @ Arnab : Leave me a link to an optical websites theme that you really love and I'll see if I can make it for Blogger.

    RépondreSupprimer
  8. Hi Rodney. I really love this. I'd love to use this as a layout on the fansite I plan on making. I'm wondering if you have the plain xhtml template rather than the xml blogger?

    RépondreSupprimer
  9. @Irish Pixie : There's a wordpress version (the original version) that you can found at templatic

    RépondreSupprimer
  10. hey friend.. can you help me to fix this one . where’s the error

    - preview
    http://dondonz.webs.com/blog.JPG

    - the source code for visiting card template
    http://dondonz.webs.com/visiting-card-blogger-template.txt

    i use this template for this blog http://dee.dondonz.co.cc
    Please tell me, where’s the error part

    Thanks

    RépondreSupprimer
  11. @ Don Donz : Just download the copy here caus the code of the template is not in a txt file but in a xml file. You must also follow instruction to have it work well.

    RépondreSupprimer
  12. Sorry for being a bother again. I need advice on blogger. =/

    My scrapbook blog (http://pixiescrapbook.blogspot.com) looks weird in IE. The sidebar doesn't align on top but it works fine in Firefox. I've tried putting vertical-align on everything but still didn't work. =/ Any idea why?

    RépondreSupprimer
  13. Dear Admin, I try to use this templete but i can't do the link for my facebook, twitter and other social network as well. Anyone can guide or solve this problem for me?.

    Thanks,

    Frankie John,
    frankiejohn4u@hotmail.com

    RépondreSupprimer
  14. i used in my blog.and no probs found.small works left.i'll give you my url.thank you

    RépondreSupprimer
  15. This type of lace wig looks very realistic and is made from sophisticated lace material having the original look. Not just full lace wigs,lace front wigs,full lace wigs gives a natural character but lace wigs and lace front wigs also render a fashionable look to the face. The lace wigs in this wig usually appears as if it is growing out of the scalp and equally distributed. Some manufacturers now are trying to make their lace front human hair wigs inexpensive so that ladies who really need it can afford to buy it.

    RépondreSupprimer
  16. Perfect........
    Create another perfect template again........

    RépondreSupprimer
  17. visiting-card-blogger-template are unique tool for operating, I have been install them a before a couple weak. These have unique and perfect templates.
    Plastic Card
    plastic business cards

    RépondreSupprimer
  18. Thanks 4 share,, i need this template.. nice design..
    happy blogging

    RépondreSupprimer
  19. Nice tutorial and nice idea
    great dan cool...
    i'll try it first...
    thanks

    RépondreSupprimer
  20. Cards plays important role in order to get image on clients and for this plastic business cards are more effective....

    RépondreSupprimer
  21. I didn't understand item number 4

    4. After that, go to edit the posts and delete titles then publish again.

    Any tip?

    RépondreSupprimer
  22. Sweet idea! I've never heard of/seen this done! Very cool.plastic business cards

    RépondreSupprimer
  23. Business cards are very much important for the owners of businesses. It is one of the solid ways of promoting a business. But it does not mean that people take and have a look at the business card always.

    RépondreSupprimer
  24. I have created it at http://proweblabs-ajans-visiting-card.blogspot.com/ . Also I created 2 pages in Pages at admin as "Hakkımızda = About" and "İletişim = Contact" in Turkish. But not show my page in blog. What must I do?

    RépondreSupprimer

Sections ...

Total Pageviews (01/03/2012)

Templates Blogs - Blog Catalog Blog Directory

Followers

Fourni par Blogger.
Etes-vous exceptionnel? Selon la légende, seules les personnes exceptionnelles vont aimer et partager cet article!
Visiting card Blogger template