Simplex Celebrity - My premium template for Fashion and Celebrity niche

Newer version here

Update : If slider can't work ,you can download the fixed version with the link provided in this post . if you don't want to re-install this template ,you can visit here to get the solution  

As requests from my blog readers ,here is Simplex Celebrity template - Blogger version of Fashion Pro template from Theme Junkie . I tried to make it as good as possible . It's the best for Fashion ,Celebrity and Gossip niche . If you are blogging in these areas ,I hope you like this template .




Live Demo | Download 

Do you like my template? If yes is your answer ,you can follow steps here to install

1,Download template ^^

2,Open it in any word editor you have and we start editing the code .

3, To change logo ,find this code :

.logo {
    background: url(http://img265.imageshack.us/img265/6665/simplexfashion.png) no-repeat;
and change background attribute to your logo .

4,Find this code :
label1 = "Celebs";
Title1 = "CELEBS";

label2 = "Music";
Title2 = "MUSIC";

label3 = "Movie";
Title3 = "MOVIE";

label4 = "TV";
Title4 = "TV";

label5 = "Redcarpet";
Title5 = "RED CARPET";

label6 = "weddings";
Title6 = "WEDDINGS";

label7 = "Fashion";
Title7 = "FASHION";

label8 = "Couples";
Title8 = "COUPLES";

label9 = "style";
Title9 = "STYLE";

label10 = "feature";
Title10 = "feature";

and change value (text in bold) of each label ( from label1 to label10) and title (from title1 to title10) to categories you want to show in homepage and their title .
Position of each label is in picture bellow


5 ,To change link to your social network accounts,find this code :

<h3>Subscribe</h3>
                     <div class="box">
                         <ul>
                             <li class="rss"><a href="/feeds/posts/default">Subscribe via RSS feed </a></li>
                             <li class="twitter"><a href="http://twitter.com/dinhquanghuy">Follow us on Twitter</a></li>
                         </ul>
                     </div>

And change link to your social network account ,you can add more if you want.

6,Save template and upload it to Blogger

7,Go to Blogger Dashboard  ,continue to Page element

8,To add item to top menu ,click on edit link in menu widget and add link to categories in your blog .Link to each category has structure 'http://your-blog.blogspot.com/search/label/category-name'

9,Do the same with Category widget

10,You can add link to other blogs via Blogroll widget .

11,To add video ,click on daily video widget and insert your video embed code into widget content .

12,You can add Google adsense ads or other advert code into topads,sidebar ads widget .

13,Save changes ,and you are done .

I hope you like this template . Feel free to leave me comments

Using Jquery plugin Innerfade to create news sticker bar

Have you take a look on my latest template Simplex Enews ? Do you notice in Breaking news ? What do you think about it ? In this post , I will show you a small tip for using this Jquery plugin to make a news sticker like that and more ^^

To make this news sticker ,I use InnerFade script . InnerFade is a small plugin for the jQuery-JavaScript-Library. It's designed to fade you any element inside a container in and out.
These elements could be anything you want, e.g. images, list-items, divs. It can be used to make a slideshow, advertising banners or stickers ,animation...


Live Demo

A,Make a Sticker

1,First of all ,create a HTML/Javascript widget in Blogger for script and HTML code .
2, We have a HTML code like that .

<ul id="news">  

<li>  <a href="#n1">1 Lorem ipsum dolor</a>  </li>

<li>  <a href="#n2">2 Sit amet, consectetuer</a>  </li> 

<li>  <a href="#n3">3 Sdipiscing elit,</a>  </li> 

<li>  <a href="#n4">4 sed diam nonummy nibh euismod tincidunt ut</a>  </li>  

<li>  <a href="#n5">5 Nec Lorem.</a>  </li> 

<li>  <a href="#n6">6 Et eget.</a>  </li> 

<li>  <a href="#n7">7 Leo orci pede.</a>  </li>  

<li>  <a href="#n8">8 Ratio randorus wil.</a>  </li> 

</ul>

Change the text and link to whatever you want . You can add some CSS code to make it look better .

3,Now add a little Jquery to make it work :
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script type="text/javascript" src="http://simplexportfolio.googlecode.com/files/jquery.innerfade.js"></script>
        <script type="text/javascript">
       $(document).ready(
                function(){
                    $('#news').innerfade({
                        animationtype: 'slide',
                        speed: 750,
                        timeout: 2000,
                        type: 'random',
                        containerheight: '1em'
                    });   
            });
      </script>

Ok,save it ,and we have a sticker

B,Make an advertising banner

1, We have a code like that :
<ul id="banner">                   
                    <li>
                        <a href="......"><img src="banner1.jpg"  /></a>
                    </li>       
<li>
                        <a href="......"><img src="banner2.jpg" /></a>
                    </li>   
<li>
                        <a href="......"><img src="banner3.jpg"  /></a>
                    </li>   
<li>
                        <a href="......"><img src="banner4.jpg" /></a>
                    </li>           
                </ul>

You can add or remove banner by add or remove <li>    <a href="......"><img src="banner....jpg" /></a>
                    </li>  for more or less banner.
2,The Jquery code like example A :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script type="text/javascript" src="http://simplexportfolio.googlecode.com/files/jquery.innerfade.js"></script>
        <script type="text/javascript">
       $(document).ready(
                function(){
                    $('ul#banner').innerfade({
                        speed: 1000,
                        timeout: 5000,
                        type: 'sequence',
                        containerheight: '220px'
                    });
            });
      </script>
 Ok,save it and we are done .

C,So the structure to call Innerfade 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script type="text/javascript" src="http://simplexportfolio.googlecode.com/files/jquery.innerfade.js"></script>
        <script type="text/javascript">
       $(document).ready(
                function(){
        $('ID or class of the element containing the fading objects').innerfade({ 

           animationtype: Type of animation 'fade' or 'slide' (Default: 'fade'),

           speed: Fadingspeed in milliseconds or keywords (slow, normal or fast)(Default: 'normal'),

           timeout: Time between the fades in milliseconds (Default:'2000'),                 type: Type of slideshow: 'sequence', 'random' or 'random_start' (Default: 'sequence'), 

           containerheight: Height of the containing element in any css-height-value (Default: 'auto'),

           runningclass: CSS-Class which the container get’s applied (Default: 'innerfade') }); 

    });
      </script>
 That's all for Innerfade Jquery plugin . Although simple but I think this plugin is very useful .If you need a light-weight , fast Jquery plugin for making a news sticker or rotating banner ,it's the plugin for you .

Simplex Enews - Another magazine template

The latest version of Simplex Enews -click here

Update : If your slider can't work ,you can download the fixed version with download link provided in this post . You can see here for solution  if you don't want to re-install this template

Update 1: find this code 

.pagenavi {

background:none repeat scroll 0 0 #F7F7F7;

border-bottom:1px solid #ECEDE8;

border-top:1px solid #ECEDE8;

color:#777777;

height:30px;

margin:0;

text-align:center;

width:100%;

} 

and change it to 

.pagenavi {

background:none repeat scroll 0 0 #F7F7F7;

border-bottom:1px solid #ECEDE8;

border-top:1px solid #ECEDE8;

clear:both;

color:#777777;

height:30px;

margin:0;

text-align:center;

width:100%;

}

Update 2:I made a F.A.Q for this template .The F.A.Q covered some troubles we met in using this template .You could take a look on it .I hope it will help you in using this template . Click here

I was inspired by two Joomla template : Worldnews (from Gavick) and Teline (joomlart) ,so I design this template . It's named Simplex Enews . It's clean and simple , widget and ads slot ready for you .
You can take a look on screenshot bellow



Live Demo | Download




Do you like it ? if you answer 'yes' and wanna install this template ,here is my instruction :


1,Download template file .


2,Open template in any word editor you have


3, To change logo ,find this code :

#image-logo a { background:url(http://img828.imageshack.us/img828/6954/simplexenews.png) no-repeat left -5px; width:300px; height:100px; text-indent:-5555em; overflow:hidden; }

and change the url of background image to your logo url


4, To change social network link ,find this code :
<ul class="topnav top-social">
<li><a class="top-rss" href="http://feeds.feedburner.com/simplex">RSS</a></li>
<li><a class="top-email" href="http://feedburner.google.com/fb/a/mailverify?uri=simplex&amp;loc=en_US">Email</a></li>
<li><a class="top-twitter" href="http://twitter.com/dinhquanghuy">Twitter</a></li>
<li><a class="top-facebook" href="http://www.facebook.com/contact.dinhquanghuy">Facebook</a></li>
</ul>


Change the links in href attribute to your social network account .
5,To show categories in homepage ,find this code


label1 = &quot;world&quot;;
Title1 = &quot;WORLD&quot;;


label2 = &quot;US&quot;;
Title2 = &quot;US&quot;;


label3 = &quot;entertainment&quot;;
Title3 = &quot;Entertainment&quot;;


label4 = &quot;business&quot;;
Title4 = &quot;Business&quot;;


label5 = &quot;Sports&quot;;
Title5 = &quot;Sports&quot;;


label6 = &quot;tech&quot;;
Title6 = &quot;Technology&quot;;


label7 = &quot;Feature&quot;;
Title7 = &quot;Feature&quot;;


label8 = &quot;Topnews&quot;;
Title8 = &quot;Latest News&quot;;


label9 = &quot;headline&quot;;
Title9 = &quot;Headline&quot;;


label10 = &quot;editor&quot;;
Title10 = &quot;Editor's picks&quot;;


label11 = &quot;story&quot;;
Title11 = &quot;Top Stories&quot;;
position of each label showed in picture bellow



You can change the value of each label from label1 to label11 to the category you want to show in homepage .For example ,you want to show the category 'world' in possition of label1 ,change the value of label1 to 'world' .
Or if you want to show category ' xyz ' to slider in homepage ( position of label7) ,just change the value of label7 to 'xyz' .
Title is the text that showed as title of category in homepage .Change it to what you want .


6, To add photos from your Flickr to blog ,just find this code :
<script type="text/javascript">
                              $(document).ready(function(){
                              $('#photoflickr').jflickrfeed({
                              limit: 9,
                              qstrings: {
                              id: '37304598@N02'
                              },
                              itemTemplate: '&lt;div class=&quot;flickr_badge_image&quot;&gt;&lt;a href=&quot;{{image_b}}&quot;&gt;&lt;img width=&quot;75&quot; height=&quot;75&quot; src=&quot;{{image_s}}&quot; alt=&quot;{{title}}&quot;&gt;&lt;/a&gt;&lt;/div&gt;'
                              });   
                              });
                          </script>


and change the value of id from '37304598@N02' to your flickr account id .


7,To change the bio of writer ,find this code :


<div class="clear" id="entry-author">
                                         <div id="author-avatar">
                                             <img width="60" height="60" src="http://0.gravatar.com/avatar/4c2ed72c6be86742f05e9750110d5731?s=60&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&amp;r=G" alt=""/>       
                                         </div> <!--end .author-avatar-->
                                         <div id="author-description">
                                             <h3>About author</h3>
                                             Curabitur at est vel odio aliquam fermentum in vel tortor. Aliquam eget laoreet metus. Quisque auctor dolor fermentum nisi imperdiet vel placerat purus convallis.       
                                         </div> <!--end .author-description-->
                                     </div> <!--end .entry-author-->


and change as you want . That's all for editing ,save template and upload it to Blogger .


8,Go to Blogger Dashboard,continue to Page element .


9,To show category in navigation bar ,click on edit button on menu widget and add link to your category . Link to a category in Blogger has structure : "http://your blog. blogspot.com/search/label/your_category"
Do the same for category bar in footer and sidebar .


10,To add video ,click on video wiget ,and paste the embed code of video ,the size for video is 280x250 ,so you need to adjust your embed code for showing video at this size .


11,There are many ads widgets ,you can click on edit link in each widget for adding your ads code .


12,Save template and you are done .


Ps: many of my templates using fluid width ,so elements will be mess up if they have no content . I can use fixed size for making an element stick in a specific position ,but they won't show yours content enough if it longger than element size or size of browser windows are different .
So if you see your blog messed up after install ,pls make some content ,and it will show up .For example ,if your blog has only 6 post ,to see template in well condition ,pls add the same label to 6 posts ,and change value of all label variables (from label1 to label11) in step 5 to this label ,you will see elements in its position .
This way applied to all of my template if you see it messed up .


Note : if you don't see page navigation bar in bottom of category page (Newer posts,older posts,home) ... You can :
-Open template in word editor ,find '.pagenavi' and it will lead you to CSS code of page navigation bar ,add these attribute : text-align:center;clear:both;
-Find <div class='pagenavi' id='blog-pager'> and delete id='blog-pager' to <div class='pagenavi'>
I also change download link to fixed version .  

Adding counter to sequential list using Jquery

In my design work ,I have to create sequential lists ,for example ,a list of blog comments ,lists of users ... adding counter to these lists will make it look better but sometime it's hard to do manually . I find out a solution from webdesignerwall.com ,using jquery to add numbers to the list .





Live Demo 
Here is detail instruction :
1,First,we need CSS code to decorating numbers 

/* number style */
#commentlist {
 margin: 10px 0 40px;
 padding: 0;
}
#commentlist li {
 padding: 10px 0 20px;
 list-style: none;
 border-top: solid 1px #ccc;
 position: relative;
}
#commentlist cite {
 font: bold 140%/110% Arial, Helvetica, sans-serif;
 color: #666;
}
#commentlist .time {
 color: #ccc;
 margin: 0 0 10px;
}
#commentlist .commentnumber {
 position: absolute;
 right: 0;
 top: 8px;
 font: normal 200%/100% Georgia, "Times New Roman", Times, serif;
 color: #ccc;

2,Add this Jquery code anywhere in template or HTML file :
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){

  $("#commentlist li").each(function (i) {
    i = i+1;
    $(this).prepend('<span class="commentnumber"> #' i '</span>');
   });

});
</script>
This code will find all <li> elements covered under element which has  id="commentlist" , and insert <span class="commentnumber"> #' i '</span> into each <li>.......</li>
so we get the result after adding code:
here is original HTML code 
<ol id="commentlist">

    <li>
        ............
    </li>
    <li>
        ...................
    </li>
    <li>
        .................
    </li>
</ol>
and here is the code after adding numbers
<ol id="commentlist">

    <li>
<span class="commentnumber"> #1</span>
        ............
    </li>
    <li>
<span class="commentnumber"> #2</span>
        ...................
    </li>
    <li>
<span class="commentnumber"> #3</span>
        .................
    </li>
................
</ol>
That's all . Thanks for reading and I hope you find it useful

Simplex Timeline - template for tech blog

In this post , I want to show you my latest template named : Simplex Timeline . I think this template is the best for tech blog ,but you can use it in other niches (of course ^^ ) .



Live Demo Download

Install instruction

1,Download template file .

2,Open template in any word editor you have ,the best is notepad++ ( MS Word is not recommended because it auto generate tags in template file after editing )

3,To change the logo ,find this code :

#head-content {
    background: transparent;
    background-image: url(http://img266.imageshack.us/img266/9598/simplextimeline.png);
    background-position: 0px 0px;
    background-repeat: no-repeat;
    }

and change the link in bold to your logo URL.

4,  This is the code of Subscribe form :

<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=simplex', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify">
                                     <input type="hidden" name="uri" value="simplex"/>
                                     <input type="hidden" value="en_US" name="loc"/>
                                     <p class="email-form">
                                          <input type="text" name="email" class="sub"/>
                                         <input type="image" alt="submit" class="subbutton" src="http://img517.imageshack.us/img517/3158/blankdb.gif"/>
                                     </p>
                                     <div style="clear: both;"><small>Privacy guaranteed. We'll never share your info.</small></div>
                                 </form>

change the text in bold to your feedburner account .

5, This is the code for social network :

<div class="sub-icons">
                                     <a href="/feeds/posts/default" title="Subscribe via RSS Feed"><img align="top" alt="Subscribe via RSS Feed" src="http://img535.imageshack.us/img535/950/rss2t.png" class="rss-sub"/></a>
                                     <a href="http://www.twitter.com/dinhquanghuy" title="Follow me on Twitter" rel="external" target="_blank"><img align="top" alt="Follow me on Twitter" src="http://img340.imageshack.us/img340/8055/twitter2e.png" class="twitter-sub"/></a>
                                     <a href="http://www.facebook.com/contact.dinhquanghuy" rel="external" title="Connect with me on Facebook" target="_blank"><img align="top" alt="Connect with me on Facebook" src="http://img96.imageshack.us/img96/3849/facebook2q.png" class="facebook-sub"/></a>
                                     <a href="http://www.linkedin.com/in/dinhquanghuy" rel="external" title="Connect with me on LinkedIn" target="_blank"><img align="top" alt="Connect with me on LinkedIn" src="http://img340.imageshack.us/img340/2030/linkedin2.png" class="linkedin-sub"/></a>
                                 </div>

again ,change the text in bold to your accounts ^^

6,This is the code for Flickr gallery :

<script type="text/javascript">
             $(document).ready(function(){
                  $('#flickrphoto').jflickrfeed({
                limit: 9,
                qstrings: {
                id: '37304598@N02'
                },
                itemTemplate: '&lt;a href=&quot;{{image_b}}&quot;&gt;&lt;img src=&quot;{{image_s}}&quot; alt=&quot;{{title}}&quot; /&gt;&lt;/a&gt;'
                });   
                });
          </script>

change the value 37304598@N02 to your Flickr ID

7,Ok ,save template and upload to Blogger .

8,Go to Dashboard ,continue to Page element

9,To add advert in top ,click on edit button in topads widget and paste your ads code into widget content (Adsense code ,for example ) . Do the same for midads ,ads,ads3 and ads4 widgets .

10,To add item to menu ,click on edit button and add link to each category in your blog . Link to each category has structure : http://{blog url}/search/label/{category} . Do the same for category and blogroll .

11,to add video ,click on video widget and paste the embed code of your video ,size for video is 286x210

12,you can add anything you want in text widget .

Ok,Save changes and you are done .
if you want to show a post in slider ,just add a label 'feature' to your post .There are maximum 4 posts in content slider .
That's all for installing this template . I hope this template helpful to you .