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

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




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 .

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 .


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

Click on logo widget

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

click on edit link in "feature slider" widget

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



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 ^^

Simplex Transcript - renewed version

Simplex Transcript is a good template for an online portal or magazine . There's a lot of people download this template from Simplexdesign and use this template for their website . There are some bugs has been reported . Thanks you all for this.
In this post ,I want to introduce renewed version of Simplex Transcript template  which is easier for you to install and customize ,fixed some bugs ,reduce loading time ,supported lightbox effect ,and a full-width page .


Live Demo | Download template file with Disqus | Download template file without Disqus

Here is steps to install this template

1,Download this template

2,Open template file

3,To make your main menu navigation

find this code
<div id='navcats'>
             <ul>
                 <li>
                     <a href='http://simplextranscript.blogspot.com'>Home</a>
                 </li>
                 <li>
                     <a href='/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='/search/label/sports'>Sports</a></li>
                 <li><a href='/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='/search/label/entertainment'>Entertainment</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='/search/label/business'>Business</a></li>                    
             </ul>         
         </div>
and edit the text in bold to the name and url of your categories . Link to each category has structure
http://your blog.blogspot.com/search/label/category-name

4,This is the code of credit box at the end of each post
<div id='entryMeta'>
                                         <img alt='' class='avatar avatar-39 photo' height='39' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_w9ZMjmKxUxxc7qXnsR0x8aKuG2OKpnML0Z0_51L0n9p1jUb-mFV94P_C_5HVm6WYC6XfuK2rEG8rg_fs50SmoRVgqnZC6B8AzwPdce2c-Rg6vBqnZo15TgLL7g6VkfU4zGsWcTz8PRFl/s45/normal_HNH_9244-sapa0207.jpg' width='39'/>       
                                         Posted by <data:post.author/>
                                         on <data:post.timestamp/>. Filed under
                                         <b:loop values='data:post.labels' var='label'>
                                             <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
                                         </b:loop>.
                                         You can follow any responses to this entry through the <a href='/feeds/posts/default/'>RSS 2.0</a>.
                                         Feel free to leave a response
                                         <div class='clear'/>   
                                     </div>       



Edit the text in bold to the text you want (you can change it ,add link to your profile ,translate it to your language )

5,If you choose the template file with Disqus comment system
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 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>

then change the text in bold "simplexblognews" to your Disqus shortname . This step is required because if you don't change this text ,it mean you are using my Disqus account ,so I can delete your comment (hehe ^^)

Now save template .Upload it to Blogger

6,To add logo to this template

click on edit link in logo widget


and add link to your logo in widget content


7,To add your social network account


click on 'edit' link in Stay Connected widget


and add link to your social network accounts .


8,'top ads','Top sidebar ads' ,'primarybottom sidebar','home sidebar ads' are widgets for advertising . You can click on 'edit' link of these widgets

and add the ad code into widget content . Like this


9,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 .

10,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 'Politic' in the position of widget 'top mid col'

First ,I click on 'edit' link in 'top mid col'

a dialog appeared .
then ,I add the category name 'politic' into widget content ,and add the title I want to show 'POLITIC' into widget title .

After that ,click Save .

If the category 'politic' existed in my blog ,and there is at least one post under category 'politic' ,it will be displayed in the position of 'top mid col'

11,Do the same with the tab bar

For example ,I want to show posts under category 'cycling' in the position of tab number 1 in the tab bar
First ,I click on 'edit' link in 'priBotTab1'


a dialog appeared .



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

After that ,click Save .

The posts under "cycling" category will be shown in tab1 of the tab bar .

12,In Page Element ,we can also setup widgets which will be shown in single page (post page)
this is a single page


and this is widgets for a single page in page element



In the single page ,post will be shown in the left-hand ,a narrow sidebar in the middle and a wide sidebar in the right .
Narrow sidebar contain widgets : Blog Archive,Label ,and Custom script .
Wide Sidebar contain widgets : Custom script ,Recent comment widesidebar ,recent post widesidebar,and Popular post 

You can't add more widget to these sidebars . But you can remove widget existed .

If you want to add any script to single page (like ad script,counter script ...) add them into Custom script widget content .
Click edit link in Custom script widget
Add script into widget content .



13,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://simplextranscript.blogspot.com/p/forum.html'

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

Here are places need to change 'http://simplextranscript.blogspot.com/p/forum.html' with the link to your forum page :

1st place :


2nd place


3rd place


4th place


5th place


6th place


7th place


8th place


That's all .Save template and you will see a full-width forum page .

14,Lightbox effect has been integrated in this 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 it helpful to you