Simplex Vcard - template for minisite

Single page-minisite are light and very simple, but they have many uses. It's the best option for an professional online CV ,it can be use when your site is "under construction" . It's also use as a virtual business card , show your portfolio .
I made one Blogger template for minisites . With Blogger platform ,you don't need to worry about hosting and bandwidth ,and Javascript function is fully supported . I named it SimplexVcard .I was inspired by Vcard template in Themeforest and would like to make one in Blogger with some modifications and features . Hope you like this .





Live Demo Download

Install Instruction

1, Download this template

2,Open template file in a word editor like Notepad++ ,Wordpad....

3, Find this code :

<script type="text/javascript">
     $(document).ready(function(){

    $('#flickrphoto').jflickrfeed({
        limit: 8,
        qstrings: {
            id: '37304598@N02'
        },
        itemTemplate: '&lt;li&gt;&lt;a href=&quot;{{image_b}}&quot;&gt;&lt;img src=&quot;{{image_s}}&quot; alt=&quot;{{title}}&quot; /&gt;&lt;/a&gt;&lt;/li&gt;'
    });   

});

</script>

Change the Flickr Id ( where I marked in green ) to yours Flickr id . You can upload image of your projects ,your works or your artworks to Flickr and add your Flickr Id to this template ,your images will be showed in this minisite .

4,To change logo ,find this code :

#logo a {
    display:block;
    background:url(http://img199.imageshack.us/img199/3850/simplexdesign.png) no-repeat;
    text-indent:-9999px;
    height:42px;
    width: 201px;
    float:left;
    margin-left:10px;
}

and change background attribute value to your logo .The standard size for logo is 200x40px .

5, To change the information in About me section ,find the code between :

<!--about-->
<!--/About-->

and change it as you want .

6, To add more network to this minisite ,find the code between

<!--Social -->
<!-- /Social -->

And add link to your social network accounts .

7, After social network code ,you will see the code for Contact information .Add your email ,your blog ,phones ...etc

8, Save template ,and upload it to blogger . When you upload ,Blogger will ask you for keep or remove widgets ,you choose remove . Ok,you are done .
Now you have a minisite for yourself .

9, If you want ,you can change the default design of this template with your own design by modifying CSS code . For example ,if you want to change the background ,find this css code :

body {
    background: #e0e0e0 url(http://img38.imageshack.us/img38/4861/backgroundwe.jpg) repeat-x;
    margin: 0;
    font-size:100%;
    line-height:1.125em;
    font-family:'Helvetica Neue', Arial, sans-serif;
}

Change the background attribute to the background image you want .
That's all . I hope this template helpful to you .

Latest update for SimplexDesign

Several days ago ,when you access SimplexDesign blog ,you got a warning from Google for virus and malware . Thanks to Google ,I find out that Bidvertiser ads in my site is the source for virus and malware . So I decide to remove it and Sorry to you all ,if you got a virus from my site .

Today ,I think every thing goes right .So I open this site again .
Thank you all for your advices and support .

Make a vertical scroll menu

A vertical scroll menu is a good idea for sidebar ,with this menu ,you can add more links than others . Last week ,I came across to queness.com website and found an article for making this vertical scroll menu . So I take it and write it down here again for applying to Blogger .I hope it helpful to you .

Check out my Live Demo

Here is steps for making this kind of menu :
1,Go to Blogger and create an HTML/Javascript widget .In fact ,you can add the code direct to template but it will be difficult for you to edit and find errors ,so a widget is better .

2,Add this script

<script type="text/javascript" src="http://dinhquanghuy.110mb.com/scroll%20menu/jquery-1.js"></script>
<script type="text/javascript" src="http://dinhquanghuy.110mb.com/scroll%20menu/jquery.js"></script>
<script type="text/javascript" src="http://dinhquanghuy.110mb.com/scroll%20menu/jquery_002.js"></script>

This code will included Jquery framework ,Jquery Ease plugin and Jquery color animation plugin to your web .

3,The main code :
<script type="text/javascript">
$(document).ready(function() {   
    //Background color, mouseover and mouseout
    var colorOver = '#31b8da';
    var colorOut = '#1f1f1f';

    //Padding, mouseover
    var padLeft = '20px';
    var padRight = '20px';
   
    //Default Padding
    var defpadLeft = $('#menu li a').css('paddingLeft');
    var defpadRight = $('#menu li a').css('paddingRight');
       
    //Animate the LI on mouse over, mouse out
    $('#menu li').click(function () {   
        //Make LI clickable
        window.location = $(this).find('a').attr('href');
       
    }).mouseover(function (){
       
        //mouse over LI and look for A element for transition
        $(this).find('a')
        .animate( { paddingLeft: padLeft, paddingRight: padRight}, { queue:false, duration:100 } )
        .animate( { backgroundColor: colorOver }, { queue:false, duration:200 });

    }).mouseout(function () {
   
        //mouse oout LI and look for A element and discard the mouse over transition
        $(this).find('a')
        .animate( { paddingLeft: defpadLeft, paddingRight: defpadRight}, { queue:false, duration:100 } )
        .animate( { backgroundColor: colorOut }, { queue:false, duration:200 });
    });   
   
    //Scroll the menu on mouse move above the #sidebar layer
    $('#sidebar').mousemove(function(e) {

        //Sidebar Offset, Top value
        var s_top = parseInt($('#sidebar').offset().top);       
       
        //Sidebar Offset, Bottom value
        var s_bottom = parseInt($('#sidebar').height() + s_top);
   
        //Roughly calculate the height of the menu by multiply height of a single LI with the total of LIs
        var mheight = parseInt($('#menu li').height() * $('#menu li').length);
   
        //I used this coordinate and offset values for debuggin
        $('#debugging_mouse_axis').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
        $('#debugging_status').html(Math.round(((s_top - e.pageY)/100) * mheight / 2));
           
        //Calculate the top value
        //This equation is not the perfect, but it 's very close   
        var top_value = Math.round(( (s_top - e.pageY) /100) * mheight / 2);
       
        //Animate the #menu by chaging the top value
        $('#menu').animate({top: top_value}, { queue:false, duration:500});
    });

   
});
   
</script>

4,A little of CSS for our cook :

<style>
body {
padding:0;
margin:0 20px;
}

#sidebar {
height:400px;
overflow:hidden;
position:relative;
background-color:#eee;
}   

#menu {
width:100%;
list-style:none;
padding:0;
margin:0;
top:0;
position:relative;
height:100%;
width:300px;
}

#menu li {
padding:10px 0;
text-align:right;
display:block;
cursor:hand;
cursor:pointer;
}

#menu li a {
background:url() repeat #1f1f1f;

color:#ddd;
font-family:helvetica, arial, verdana;
font-size:9px;
font-weight:900;
display:inline;
padding:20px 8px 5px 20px;
text-decoration:none;
}

#menu li span {
font-family:georgia, arial;
font-size:9px;
color:#464646;
}

</style>

5,And now the HTML for menu,it's like that :
<div id="sidebar">
<ul id="menu">
<li><a href="#">MENU 1 </a></li>
<li><a href="#">MENU 2</a></li>
<li><a href="#">MENU 3</a></li>
<li><a href="#">MENU 4</a></li>
<li><a href="#">MENU 5</a></li>
<li><a href="#">MENU 6</a></li>
......
......
......
</ul>
</div>

Add more <li><a href="#">MENU ...</a></li> if you want more link in menu .

Ok,Save widget and you are done .
P/s: To make your menu look good and more professional ,you can add /edit CSS to make it as you want .

Flip image with Jquery and CSS

There are many way to make an impressive design of portfolio page . But in this post ,I want to show you one of them . Make a portfolio with images which can flip in and out to show content beyond . This effect is done with the help of Jquery Flip plugin .





Live Demo 1 | Live Demo 2 

Here is steps for making that effect .
1,Create a  HTML/Javascript widget .Paste the script from steps bellow into this widget content .

2,Here is the code for each flipping image :

<div title="Click to flip" class="sponsor">
    <div class="sponsorFlip">
        <img alt="More about google" src="img/sponsors/google.png">
    </div>

    <div class="sponsorData">
        <div class="sponsorDescription">
            The company that redefined web search.
        </div>
        <div class="sponsorURL">
            <a href="http://www.google.com/">http://www.google.com/ </a>
        </div>
    </div>
</div>

The outermost .sponsor div contains two additional div elements. The first – sponsorFlip – contains the image. The second - sponsorData - contains the caption for image and a URL . At the beginning ,sponsorData div is hidden from view ,so we see only image in sponsorFlip div .Every click on this element causes the Flip effect to be initiated, when the flipping animation is complete, the contents of sponsorData div is dynamically inserted into sponsorFlip.

3,Now we need to add some CSS to format elements :

body{

/* Setting default text color, background and a font stack */

font-size:0.825em;

color:#666;

background-color:#fff;

font-family:Arial, Helvetica, sans-serif;

}

.sponsorListHolder{

margin-bottom:30px;

}

.sponsor{

width:180px;

height:180px;

float:left;

margin:4px;

/* Giving the sponsor div a relative positioning: */

position:relative;

cursor:pointer;

}

.sponsorFlip{

/* The sponsor div will be positioned absolutely with respect

to its parent .sponsor div and fill it in entirely */

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

border:1px solid #ddd;

background:url("img/background.jpg") no-repeat center center #f9f9f9;

}

.sponsorFlip:hover{

border:1px solid #999;

/* CSS3 inset shadow: */

-moz-box-shadow:0 0 30px #999 inset;

-webkit-box-shadow:0 0 30px #999 inset;

box-shadow:0 0 30px #999 inset;

.sponsorFlip img{

/* Centering the logo image in the middle of the .sponsorFlip div */

position:absolute;

top:50%;

left:50%;

margin:-70px 0 0 -70px;

}

.sponsorData{

/* Hiding the .sponsorData div */

display:none;

}

.sponsorDescription{

font-size:11px;

padding:50px 10px 20px 20px;

font-style:italic;

}

.sponsorURL{

font-size:10px;

font-weight:bold;

padding-left:20px;

}

.clear{

/* This class clears the floats */

clear:both;

}

4,The Jquery :

This plugin need Jquery and Jquery UI framework as well .So we need to include them into our page with these code:

<script type="text/javascript" src="...../jquery-ui.js"></script>

<script type="text/javascript" src="...../jquery.js"></script>

After including two frameworks above into our page ,we add this script to trigger the effect :

<script>
$(document).ready(function(){
/* The following code is executed once the DOM is loaded */

$('.sponsorFlip').bind("click",function(){

// $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):

var elem = $(this);

// data('flipped') is a flag we set when we flip the element:

if(elem.data('flipped'))
{
// If the element has already been flipped, use the revertFlip method
// defined by the plug-in to revert to the default state automatically:

elem.revertFlip();

// Unsetting the flag:
elem.data('flipped',false)
}
else
{
// Using the flip method defined by the plugin:

elem.flip({
direction:'lr',
speed: 350,
onBefore: function(){
// Insert the contents of the .sponsorData div (hidden from view with display:none)
// into the clicked .sponsorFlip div before the flipping animation starts:

elem.html(elem.siblings('.sponsorData').html());
}
});

// Setting the flag:
elem.data('flipped',true);
}
});

});
</script>

Save the widget and you are done . To add more images and link ,just duplicate the div elements in step 2 as many as you want .

This effect is very cool and I think it will made your homepage so impressive to readers . In step 2 ,instead of write div elements manually ,you can use xml data feed or php code to read data from database .
Check out my demo for using javascript to read xml feed and show it up with flip effect .