VIEW ALL GALLERY LIGHTS

Saturday, January 29, 2011

SimplexCelebrity renewed version

In this post ,I want to show you renewed version of my template Simplex Celebrity ,which is more easy to install ,bugs fixed ,loading faster ,a forum wide-page and SEO friendly .
There are two template files for this version ,one with Disqus comment system and the other without .


Live Demo | Download SimplexCelebrity with Disqus | Download SimplexCelebrity without Disqus

Here is steps for installing this template


1, Download template file from links above .Choose template file with Disqus comment system if you want to use Disqus ,or choose the other if not .

2,If you choose template file with Disqus comment system ,open template file in a word editor such as Notepad ++ and find this block code :

<div id='disqus_thread'/>
<script type='text/javascript'>
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = &#39;simplexcelebs&#39;; // required: replace example with your forum shortname

    // The following are highly recommended additional parameters. Remove the slashes in front to use.
    // var disqus_identifier = &#39;unique_dynamic_id_1234&#39;;
    // var disqus_url = &#39;http://example.com/permalink-to-page.html&#39;;

    /* * * DON&#39;T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement(&#39;script&#39;); dsq.type = &#39;text/javascript&#39;; dsq.async = true;
        dsq.src = &#39;http://&#39; + disqus_shortname + &#39;.disqus.com/embed.js&#39;;
        (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(dsq);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href='http://disqus.com/?ref_noscript'>comments powered by Disqus.</a></noscript>

and this block

<script type='text/javascript'>
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = &#39;simplexcelebs&#39;; // required: replace example with your forum shortname

    /* * * DON&#39;T EDIT BELOW THIS LINE * * */
    (function () {
        var s = document.createElement(&#39;script&#39;); s.async = true;
        s.type = &#39;text/javascript&#39;;
        s.src = &#39;http://&#39; + disqus_shortname + &#39;.disqus.com/count.js&#39;;
        (document.getElementsByTagName(&#39;HEAD&#39;)[0] || document.getElementsByTagName(&#39;BODY&#39;)[0]).appendChild(s);
    }());
</script>

change the text in bold "simplexcelebs" to your Disqus shortname .
Save template ,and upload it to Blogger .

3,Go to Blogger Dashboard ->Design->Page Element .In this page ,you will see many widgets .

4,To add logo to your blog
simplexcelebrity add logo
Click on logo widget
simplexceblebrity add logo
and fill widget content with link to logo as what I did in image below


5,To add items to menu bar


click on edit link in menu bar widget

and add link to categories in your blog as I did in the image


Link to each category has structure : http://yourblog.blogspot.com/search/label/your category

6,'top ads','sidebarads' are widgets for advertising . You can click on 'edit' link of these widgets and add the ad code into widget content . Like this





7,To add content to slider
simplexcelebrity slider
click on edit link in "feature slider" widget
simplexcelebrity slider
write the title you want to show in widget title
and write the name of category which you want to show in slider in widget content
for example ,in the picture below ,I want to show content of category "feature" in slider ,so I add title "feature slider" into widget title and add category name "feature" into widget content . And recent posts from "feature" category will be shown in slider .


8,Do the same with other widgets . Click on 'edit' link in a widget ,add category name into widget content and add the title you want to show in widget title . Recent posts in this category will be shown in where the widget you choose is .
for example ,I want to show posts in "music" in the position of widget "category box 2"

First ,I click on edit link in "category box 2" widget

a dialog appeared . I add category name "music" into widget content ,and add "MUSIC" in the widget title

after that ,click Save .
Here is what we have after editing :


9,To add a forum to blog,create a new page ,name it 'forum' and paste the forum embeded code into page content (in Edit HTML mode)



then go to Dashboard -> Go to Design -> Edit HTML ,search for the text
'http://simplexcelebs.blogspot.com/p/forum.html'
you will find out these block code  :

 <b:if cond='data:blog.url != &quot;http://simplexcelebs.blogspot.com/p/forum.html&quot;'>
         <b:section id='sidebar' class="widget1" showaddelement='yes'>
             <b:widget id='HTML14' locked='false' title='Subscribe' type='HTML'>
   


and

     <b:if cond='data:blog.url != data:blog.homepageUrl'>
                         <b:if cond='data:blog.url == &quot;http://simplexcelebs.blogspot.com/p/forum.html&quot;'>
                             <div id="fullcontent">
                                 <b:loop values='data:posts' var='post'>

Change "http://simplexcelebs.blogspot.com/p/forum.html" to your forum page's url .

10,Lightbox effect has been integrated in this template

lightbox effect in Simplex Celebrity template

To use Lightbox effect in your post ,when editing post ,click on Edit HTML .

To add lightbox effect for one image , use rel="lightbox" title="Your image Caption" as picture above
To add lightbox effect for multiple images , use rel="lightbox[albumname]" title="Your Image Caption"
if you want to add another image to this album,upload the second image and use rel="lightbox[albumname]" title="Caption for Second image of albumname" 
in this case , lightbox will work like a gallery with next and previous links  and you can use keyboard to navigate through the album

That's all for this template .I hope you enjoy this version ^^

Thursday, January 27, 2011

Jquery Lightbox - another Solution for Lightbox effect in Blogger

In previous post on Lightbox effect (Lightbox really working script) , I wrote about a script for Lightbox effect based on Scriptaculous (a Javascript framework) that work well in Blogger .
But if your blog is using Jquery framework ,this Lightbox effect can't work because there's a conflict between Jquery and Scriptaculous .
So here we have another solution that can be used in Blogger ,and of course ,it can be applied for all Simplex templates (included Simplex Celebrity ,Simplex Enews ...etc) .It's Jquery Lightbox

lightbox effect in Simplex Celebrity template


Demo in Simplex Celebrity template

How to install this script ?


1,Go to Blogger Dashboard ,Continue to Design tab ,then Edit HTML tab .

2,Add this code right before <body> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<style type="text/css">
    /* jQuery lightBox plugin - Gallery style */
    #gallery {
        background-color: #444;
        padding: 10px;
        width: 520px;
    }
    #gallery ul { list-style: none; }
    #gallery ul li { display: inline; }
    #gallery ul img {
        border: 5px solid #3e3e3e;
        border-width: 5px 5px 20px;
    }
    #gallery ul a:hover img {
        border: 5px solid #fff;
        border-width: 5px 5px 20px;
        color: #fff;
    }
    #gallery ul a:hover { color: #fff; }
    </style>


<script src="http://dinhquanghuy.110mb.com/lightbox/jquery.lightbox-0.5.js" type="text/javascript"/>
<link href="http://dinhquanghuy.110mb.com/lightbox/jquery.lightbox-0.5.css" media="screen" rel="stylesheet" type="text/css"/>

<script type="text/javascript">
$(function() {
$('a[rel*=lightbox]').lightBox();
});
</script>

Save changes . You are done .

How to use ?

To use Lightbox effect in your post ,when editing post ,click on Edit HTML .

To add lightbox effect for one image , use rel="lightbox" title="Your image Caption" as picture above
To add lightbox effect for multiple images , use rel="lightbox[albumname]" title="Your Image Caption"
if you want to add another image to this album,upload the second image and use rel="lightbox[albumname]" title="Caption for Second image of albumname" 
in this case , lightbox will work like a gallery with next and previous links  and you can use keyboard to navigate through the album

That's all for Jquery Lightbox effect .
This post is for all of you ,who want to use Lightbox effect in Blogger , and specially for naxoz-report and DJ Remix Town ,who commented in my blog asked for Lightbox effect in Simplex Celebrity template .

Monday, January 24, 2011

Simplex Blognews - latest version - easy to install

Many people comment in my blog for reporting errors when installing and using template Simplex Blognews . Thanks you all for this . Without your error reporting and support ,I can't continue this work .
In this post ,I want to introduce to you latest version of Blognews template which is easier to use and fixed some bugs .


Download Simplex Blognews with Disqus comment system | Download Simplex Blognews with Blogger comment system

How to install this template

1,Download this template from one of two links above .If you want to use Disqus ,choose template file included Disqus and if you don't ,choose the file with Blogger default comment system

2,Open template file in any word editor you have such as notepad ++

3,Here is code of main menu bar in template file :
    <ul>
                 <li>
                     <a href='http://simplexblognews.blogspot.com'>Home</a>
                 </li>
                 <li>
                     <a href='http://simplexblognews.blogspot.com/search/label/world'>World News</a>
                     <ul class='children'>
                         <li><a href='#'>Category</a></li>
                         <li><a href='#'>Category</a></li>
                         <li><a href='#'>Category</a></li>
                     </ul>
                 </li>

                 <li><a href='http://simplexblognews.blogspot.com/search/label/travel'>Travel</a></li>
                 <li><a href='http://simplexblognews.blogspot.com/search/label/sports'>Sports</a></li>

                 <li><a href='http://simplexblognews.blogspot.com/search/label/finance'>Finance</a>
                     <ul class='children'>
                         <li><a href='#'>Category</a></li>
                         <li><a href='#'>Category</a></li>
                         <li><a href='#'>Category</a></li>
                     </ul>
                 </li>
                
                 <li><a href='http://simplexblognews.blogspot.com/search/label/entertainment'>Entertainment</a></li>
                 <li><a href='http://simplexblognews.blogspot.com/search/label/business'>Business</a></li>                    
             </ul>
       

Change the text in bold to your category link . Follow this structure :
 <li><a href='category link '>category name</a></li>

4,If you download Simplex blognews comes with Disqus comment system ,to activate Disqus comment system ,find this code :

 <b:includable id='comments' var='post'>
                             <div id='disqus_thread'/>
<script type='text/javascript'>
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = &#39;simplexblognews&#39;; // required: replace example with your forum shortname

    // The following are highly recommended additional parameters. Remove the slashes in front to use.
    // var disqus_identifier = &#39;unique_dynamic_id_1234&#39;;
    // var disqus_url = &#39;http://example.com/permalink-to-page.html&#39;;

    /* * * DON&#39;T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement(&#39;script&#39;); dsq.type = &#39;text/javascript&#39;; dsq.async = true;
        dsq.src = &#39;http://&#39; + disqus_shortname + &#39;.disqus.com/embed.js&#39;;
        (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(dsq);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href='http://disqus.com/?ref_noscript'>comments powered by Disqus.</a></noscript>

                         </b:includable>

and this code :

<script type='text/javascript'>
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = &#39;simplexblognews&#39;; // required: replace example with your forum shortname

/* * * DON&#39;T EDIT BELOW THIS LINE * * */
(function () {
var s = document.createElement(&#39;script&#39;); s.async = true;
s.type = &#39;text/javascript&#39;;
s.src = &#39;http://&#39; + disqus_shortname + &#39;.disqus.com/count.js&#39;;
(document.getElementsByTagName(&#39;HEAD&#39;)[0] || document.getElementsByTagName(&#39;BODY&#39;)[0]).appendChild(s);
}());
</script>

Change the text 'Simplexblognews' in bold to your Disqus shortname .
If you don't plan to use Disqus ,skip this step .

5,Save template and upload it to Blogger .

6,In Blogger Dashboard ,go to Page elements . In this page ,you will see many widgets .

7,To add your social network account



click on 'edit' link in Stay Connected widget



and add link to your social network accounts .


8,To add your logo ,click on 'edit' link in logo widget


and add link to your logo into widget content



9,'top ads','below feature ads' ,'primary top col ads','sidebarads','secondary ads right' ,and 'footerads' are widgets for advertising . You can click on 'edit' link of these widgets and add the ad code into widget content . Like this





10,To show posts under a category in the slider:

click on 'edit' link in 'feature content slider' widget


add the title you want to show into widget title ,and add the name of category into widget content .



In these pictures above ,I want to show posts in 'feature' category into slider ,so I add category name 'feature' into widget content and add the title 'feature' into widget title .

11,Do the same with other widgets . Click on 'edit' link in a widget ,add a category name into widget content and add the title you want to show in widget title . Recent posts in this category will be shown in where the widget you choose is .

For example ,I want to show posts under category 'Asia' in the position of widget 'below featured left'

First ,I click on 'edit' link in 'below featured left'



a dialog appeared .



then ,I add the category name 'asia' into widget content ,and add the title I want to show 'Asia' into widget title .

After that ,click Save .

If the category 'asia' existed in my blog ,and there is at least one post under category 'asia' ,it will be displayed in the position of 'below featured left'



12,To add images into Flickr widget
click edit link on flickr widget



and add your FlickR id into widget content



13,To add video to Daily video section
Click on Daily Vid widget



then add video embed code into widget content



14,To add a forum to blog,create a new page ,name it 'forum' and paste the forum embeded code into page content (in Edit HTML mode)



then go to Dashboard -> Go to Design -> Edit HTML ,search for the text 'http://simplexblognews.blogspot.com/p/forum.html'



and replace it with link to 'forum' page you've just created .There are 4 places need to change in total . After that ,save the changes .

15,If you want to increase/decrease the number of post in each category in homepage ,you can find go to Blogger Dashboard -> Design tab -> Edit HTML ,and then checked on Expand Widget templates . Find this code :

numposts = 4;
numposts1 = 1;
numposts2 = 9;
numposts3 = 4;
numposts4 = 4;
numposts5 = 2;
numposts6 = 1;
numposts7 = 10;
numposts8 = 7;

Try to increase each value to get the number of post you want .

Save template when you finish editing . You can drag and drop widgets ,change widget positions ,add or remove widgets ...

That's all for this template . With this version , you don't need to worry much about the code as old Blognews versions .
I hope you like it

Tuesday, January 18, 2011

Simplex Blognews - renewed version

Latest version of Simplex Blognews -Click here

Simplex Blognews has some changes in code . I added Disqus comment system into this template ,remove some CSS tags ,optimize the code and re-solve the problem with showing Google adsense ads .

Live Demo | Download | Download Blognews template with forum page


To install this template ,you can see to my post on how to install Simplex Blognews


To activate Disqus comment system : find this code


<b:includable id='comments' var='post'>
<div id='disqus_thread'/>
<script type='text/javascript'>
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = &#39;simplexblognews&#39;; // required: replace example with your forum shortname

// The following are highly recommended additional parameters. Remove the slashes in front to use.
// var disqus_identifier = &#39;unique_dynamic_id_1234&#39;;
// var disqus_url = &#39;http://example.com/permalink-to-page.html&#39;;

/* * * DON&#39;T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement(&#39;script&#39;); dsq.type = &#39;text/javascript&#39;; dsq.async = true;
dsq.src = &#39;http://&#39; + disqus_shortname + &#39;.disqus.com/embed.js&#39;;
(document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href='http://disqus.com/?ref_noscript'>comments powered by Disqus.</a></noscript>


</b:includable>


and replace 'simplexblognews' ( marked in bold ) to your Disqus shortname .


then find this code :
<script type='text/javascript'>
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = &#39;simplexblognews&#39;; // required: replace example with your forum shortname

/* * * DON&#39;T EDIT BELOW THIS LINE * * */
(function () {
var s = document.createElement(&#39;script&#39;); s.async = true;
s.type = &#39;text/javascript&#39;;
s.src = &#39;http://&#39; + disqus_shortname + &#39;.disqus.com/count.js&#39;;
(document.getElementsByTagName(&#39;HEAD&#39;)[0] || document.getElementsByTagName(&#39;BODY&#39;)[0]).appendChild(s);
}());
</script>


and replace 'simplexblognews' (marked in bold) to your Disqus shortname .


if you plan to use a Blognews template with a wide page for a forum ,you can download version with forum page .
After installed ,create a page with name 'forum' ,then click on Edit HTML mode in editor window,and paste script of embeded forum (for example Vanilaforum)  into page content 


That's all for Simplex Blognews .Have fun !!!

Wednesday, January 12, 2011

Floating bar with jquery and CSS

One friend commented in my blog asking how to implement a floating bar to website . Do you know what is a floating bar in website and how it look like ? See my live demo please .Some other good examples of floating bars can be found at Meebo and Wibiya , I think many of you know Wibiya .With a floating bar ,we can :
  1. Make a menu navigation
  2. Social information
  3. Advertising
  4. Highlight important information (promos, etc.)
  5. Contact information
  6. Polls / feedback 

floating bar

Live demo


Here is steps for making a floating bar


1,In this post ,I will make a floating menubar ,but you can replace the code (in bold) with code of advertisements ,social networks ,contact information or anything you like .

<div id="navi">
<div id="menu" class="default">
<!--code of floating bar goes here-->
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Freebies</a></li>
<li><a href="#">Inspiration</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">WordPress</a></li>
</ul>
</div><!-- close menu -->
</div><!-- close navi -->

if you are using Blogger ,go to Dashboard ->Design - >Edit HTML, and add this code right after <body> in template xml .

2,We need some CSS for menu bar .
Here is the CSS code :
<style>

#navi {
    height: 50px;
    margin-top: 50px;
}

#menu {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #426d9c), color-stop(40%, #0f67a1), color-stop(100%, #1384d1));
    background: -moz-linear-gradient(top, #426d9c, #0f67a1, #1384d1);
   
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
   
    line-height: 50px;
    text-align: center;
    margin: 0 auto;
    padding: 0;
}



#navi ul {
    padding: 0;
}

#navi ul li {
    list-style-type: none;
    display: inline;
    margin-right: 15px;
}

#navi ul li a {
    color: #fff;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000;
    padding: 3px 7px;
   
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
   
    -webkit-transition-property: color, background;
    -webkit-transition-duration: 0.5s, 0.5s;
}

#navi ul li a:hover {
    background: #01458e;
    color: #ff0;

    -webkit-transition-property: color, background;
    -webkit-transition-duration: 0.5s, 0.5s;
}

.default {
    width: 850px;
    height: 50px;
   
    box-shadow: 0 5px 20px #888;
    -webkit-box-shadow: 0 5px 20px #888;
    -moz-box-shadow: 0 5px 20px #888;
}

.fixed {
    position: fixed;
    top: -5px;
    left: 0;
    width: 100%;
   
    box-shadow: 0 0 40px #222;
    -webkit-box-shadow: 0 0 40px #222;
    -moz-box-shadow: 0 0 40px #222;
}
</style>

if you are using Blogger ,add this code right before </head> .You can edit CSS to make menubar display as you want (change color ,font ,shadow,round corner...)

3,Finally , the most important part  : Javascript
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
   
    var menu = $('#menu'),
        pos = menu.offset();
       
        $(window).scroll(function(){
            if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
                menu.fadeOut('fast', function(){
                    $(this).removeClass('default').addClass('fixed').fadeIn('fast');
                });
            }
            else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
                menu.fadeOut('fast', function(){
                    $(this).removeClass('fixed').addClass('default').fadeIn('fast');
                });
            }
        });

});
</script>

you can add this code right before </body>  .

Now save template file and you will see a menubar floating in your site .

How it works ?

At first ,we don't scroll the page , "menu" element has a class "default" .When we scroll the page ,
javascript code will : Hide the menu -> replace class "default" with class "fixed" -> then show the menu again .
What makes the magic is in classes "default" and "fixed" , in CSS code , we define "default" class with attributes for a static menubar and "fixed" class with attributes for a floating menubar .
 So when we scroll the page ,"default" class will be replaced with "fixed" class ,and this will make menubar float over other elements .

When we scroll back to top ,"fixed" class will be replaced with "default" class ,and floating menu becomes static menu .
That's all for a floating bar .To customize this floating bar ,just need some changes in CSS. I hope this will be helpful to you .

Monday, January 10, 2011

Simplex Tube - renewed version

One of my templates SimplexTube has been re-newed . I made a new layout for this template ,a better slider and this template now support more Video hosting services (Youtube,Vimeo ,Metacafe ,DailyMotion,Liveleak ) .

Live Demo | Download

To install this template ,you can follow these steps :

1,Download template file .

2,To change the logo ,find this code :
<div class="logo rounded">
                     <a expr:href='data:blog.homepageURL'>
                         <img src="http://img691.imageshack.us/img691/8568/simplextube.jpg"/>
                     </a>
                 </div>
and change the url of logo (marked in bold) to your logo url .

3,To add your social networks ,find this code :
<ul id="menuSocial">
                     <li><a href="/feeds/posts/default/"><img width="16" height="16" alt="Subscribe to RSS" src="http://img441.imageshack.us/img441/3599/rssu.png"/>Subscribe</a></li>
                     <li><a href="http://twitter.com/dinhquanghuy"><img width="16" height="16" alt="" src="http://img88.imageshack.us/img88/7361/twittere.png"/>Follow us</a></li>   
                     <li><a href="http://facebook.com/simplexdesignblog"><img width="16" height="16" alt="" src="http://img232.imageshack.us/img232/2014/facebookxx.png"/>Become our fan</a></li>  
                 </ul>
and change the text in bold to your social network accounts .

4,To add the ads code into header ,find this code :
<div id="bannerHead">
                     <!--ads go here -->
                 </div>
and add your ad code to where I noted "ads go here"

5, This is the code of main menu navigation :
<ul id="nav">
                         <li><a href="http://simplextube.blogspot.com">Home</a></li>
                         <li><a href="http://simplextube.blogspot.com/search/label/video">Video</a></li>
                         <li><a href="http://simplextube.blogspot.com/search/label/performance">Performance</a></li>
                         <li><a href="http://simplextube.blogspot.com/search/label/guitar%20review">Guitar Reviews</a></li>
                         <li><a href="http://simplextube.blogspot.com/search/label/guitar%20tips">Guitar Tips</a></li>
                         <li><a href="http://simplextube.blogspot.com/search/label/history">History</a></li>
                     </ul>
find this code and replace links in bold to your categories

6,When finish editing template , you can upload file to Blogger .

7,In page Elements ,you can add or remove widgets as you want .

To use this template :


Like SimplexTube ,there are two display modes in this template : display as video post and display as a normal blog post .

To post in video display mode , your post need to follow this structure :

video-link-endofvid
[starttext]
text description goes here
[endtext]

then label your post with label "video" .

For example ,I want to create a video post with youtube video at this address : http://www.youtube.com/watch?v=e5wfYPXAjl8 ,here is what I do :

Go to Dashboard - > Posting ->New Post
and enter post content like this
http://www.youtube.com/watch?v=e5wfYPXAjl8endofvid
[starttext]
Textdescription .....blah blah blah ...
[endtext]
add the label 'video' in Labels field .
 Click Publish Post . Ok ,we finish posting a new video to blog . You can see this post in homepage.

-Link from Vimeo has structure http://www.vimeo.com/video-id ,for example http://vimeo.com/18539129 ,it's what you see in the address bar of browser .To post this video to blogger ,you will make a post like this :
http://vimeo.com/18539129

[starttext]
Textdescription .....blah blah blah ...
[endtext]


-Link from Liveleak has structure http://www.liveleak.com/view?i=video-id ,for example http://www.liveleak.com/view?i=b7a_1294580726 ,it's what you see in the address bar of browser .To post this video to blogger ,you will make a post like this :
 http://www.liveleak.com/view?i=b7a_1294580726

[starttext]
Textdescription .....blah blah blah ...
[endtext]


-Link from Metacafe has structure http://www.metacafe.com/watch/video-id/video-name/ ,for example http://www.metacafe.com/watch/5743958/tom_and_jerry_tales_volume_6_movie_trailer/ ,it's what you see in the address bar of browser .To post this video to blogger ,you will make a post like this :
http://www.metacafe.com/watch/5743958/tom_and_jerry_tales_volume_6_movie_trailer/
[starttext]
Textdescription .....blah blah blah ...
[endtext]


-Link from dailymotion has structure http://www.dailymotion.com/video/video-id_video-name-video-category ,for example http://www.dailymotion.com/video/xgfzpx_homeless-guy-with-an-amazing-voice-gets-discovered_news ,it's what you see in the address bar of browser .To post this video to blogger ,you will make a post like this :
 http://www.dailymotion.com/video/xgfzpx_homeless-guy-with-an-amazing-voice-gets-discovered_news

[starttext]
Textdescription .....blah blah blah ...
[endtext]

To post a normal article : go to Posting ->New Post and write your content as normal . But remember to add label 'blog' at Labels field . This label will mark the post a normal blog post and it will show your post in Blog Post style ( Not Video Post style ).

To show your post in slider at the top of homepage,add one more label 'feature' to the post .

That's all for this template .I hope you like it .
You can use this template for free ,but keep the credit please .

Sunday, January 2, 2011

Simplex Enews template - renew version

The latest version of Simplex Enews -click here

If you take a look on my Simplex Enews live demo ,you will see this template has some new features .It included :
- Disqus comment systemt ,a recent comment tab from Disqus
- Widgets in the footer
- A page for embeded forum ( sidebar is hidden when you enter this page )
- Lightbox effect
- Reduce loading time
- Number of post in each category is different .
And in this post ,I want to show you template SimplexEnews which is renewed .

Live Demo | Download


1, For installing this template ,you can see my previous post on how to install Simplex Enews template .


2,To activate Disqus comment system ,open template in a word editor and search for these code :
<script type='text/javascript'>
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = &#39;simplexenews&#39;; // required: replace example with your forum shortname

/* * * DON&#39;T EDIT BELOW THIS LINE * * */
(function () {
var s = document.createElement(&#39;script&#39;); s.async = true;
s.type = &#39;text/javascript&#39;;
s.src = &#39;http://&#39; + disqus_shortname + &#39;.disqus.com/count.js&#39;;
(document.getElementsByTagName(&#39;HEAD&#39;)[0] || document.getElementsByTagName(&#39;BODY&#39;)[0]).appendChild(s);
}());
</script>


replace the text 'simplexenews' marked in bold to your disqus short name .


find this code
<script type='text/javascript'>
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = &#39;simplexenews&#39;; // required: replace example with your forum shortname

// The following are highly recommended additional parameters. Remove the slashes in front to use.
// var disqus_identifier = &#39;unique_dynamic_id_1234&#39;;
// var disqus_url = &#39;http://example.com/permalink-to-page.html&#39;;

/* * * DON&#39;T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement(&#39;script&#39;); dsq.type = &#39;text/javascript&#39;; dsq.async = true;
dsq.src = &#39;http://&#39; + disqus_shortname + &#39;.disqus.com/embed.js&#39;;
(document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(dsq);
})();
</script>


replace simplexenews marked in bold to your disqus shortname .


find this
<div class='dsq-widget' id='recentcomments'>&lt;script type=&quot;text/javascript&quot; src=&quot;http://simplexenews.disqus.com/recent_comments_widget.js?num_items=5&amp;hide_avatars=0&amp;avatar_size=32&amp;excerpt_length=200&quot;&gt;&lt;/script&gt;</div>


and replace simplexenews to your disqus shortname  .


There are three code blocks in total .


3,After uploading template to blogger ,you can add widgets to the footer as you want .


4,If you want to add a forum to your blogger blog ,you can see my post on Vanilla forum to create one . To hide sidebar and other widget when enter the forum like my live demo ,you can search the whole template file for link ' http://simplexenews1.blogspot.com/p/forum.html ' and replace it with link to the page which embeded Vanilla forum .


5,To use lightbox , when you insert an image in post editor ,click on edit HTML edit it with following structure
<a href="link to original image" rel="lightbox"><img src="link to thumbnail/resized image" /></a>


6,To set the number of post showed in each category in the homepage ,you can modify the value of these variables as you want :
numposts  = 6;
numposts1 = 3;
numposts2 = 6;
numposts3 = 4;
numposts5 = 5;
numposts6 = 10; 


That's all for re-new version ,I also optimized the code for reducing loading time .
I hope you like these features .