SimplexNewsportal - renewed version

Here is the renewed version of my template SimplexNewsportal . It's a good template for magazine and newsportal . I tried my best to make it easier to install and use .
There are two file for this template ,one with Disqus comment system and the other not .I added images folder to template package ,so if you want ,you can host images yourself




Live Demo | Download template with Disqus comment system | Download template with Blogger comment system

Here are steps for installing this template

1,Download template file .

2,If you want to use Disqus comment system
Open this template in a word editor and change the text in bold in this code
 <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>

and this code

<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>
to your Disqus shortname .This step is required . If you choose template file without Disqus ,you can skip this step .

3,Upload template to Blogger

4,To add logo

click on edit link in logo widget

add logo into widget content like this

5,To add  link to your social network

click on Subscribe widget

add link to your social network accounts.

6,To add items to menu

click on edit link in menu widget

add link to your categories

Link to category in blogspot has structure http://yourblog.blogspot.com/search/label/category name

7,To show content in headline widget

click on edit link in headline widget

add the name of category you want to show in this widget

8,To show content in feature content slider

click on edit link in feature content slider

add name of category you want to show in slider into widget content

9,Do the same for content left ,content right widgets .Just add a category name into widget content ,and recent posts in this category will be shown in widget's position in homepage .

10,Top ads,ads1 ,ads2 are widgets for advertisment . To add your ads

click on edit link

add your ad code into widget content .

11,You can add your own widgets if you want

12, To add a forum ,create a page (Go to Dashboard-Posting tab ->Edit Pages,click on new page) , name it "forum" and then paste the forum embeded code into page content (in Edit HTML mode)

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

and replace it with link to 'forum' page you've just created .There are 3 places need to change in total .
1st place

1st

2nd

2nd

3rd

3rd

After that ,save the changes .

13,To increase/decrease the number of post in each category ,go to Design ->edit HTML -> checked Expand widget templates ,and find these variables in template file :
numposts = 3;
numposts1 = 4;
numposts2 = 6;

try to change these values to what you need .
That's all for this template . I hope you like this re-newed version .

Auto apply lightbox effect to all images

In my blog ,DJ Remix Town asked me for how to auto applied Lightbox effect to all images uploaded ,do not need to edit HTML and add rel="lightbox" manually. And now I have the answer for this question :

How to do this ?

First ,you need to read this post and follow all my instruction for install jquery lightbox to blog .

The magic is on the second step ,find and replace this code
<script type="text/javascript">
$(function() {
$('a[rel*=lightbox]').lightBox();
});
</script>

with this

<script type="text/javascript">
$(function() {
$('a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)').lightBox();
});
</script>

The difference between them is this line $('a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)').lightBox(); 
This line mean Lightbox effect will be applied to all <a ...> tag which has an <img> tag inside ,and the href attribute of a tag is a link to image file (with the extension : gif,bmp,jpeg,png,jpg)

From now ,you can upload and insert images to your post using uploader in post editor window and don't care for the rest . Lightbox effect will be applied to all images .

Using Jquery to make an one-time subscription pop-up

A new update for this post ,you can see here

Many of bloggers said that a subscription pop-up very helpful in increasing the number of subsriber . Some bloggers such as Johnchow use subscription pop-up to show his new books and ask for subscription from readers .As you can see ,the number of subscriber in Johnchow website is very impressive .
Pop-up good or bad ? I do not mentioned here ^^


In this post ,I've just want to show you how to make a subscription pop-up for your blog . This pop-up will appear in the first-time you visit and it only appear again after several days .

Live Demo

Here are steps for making a pop-up in Blogspot

1,Open template file by go to Blogspot Dashboard ->Design ->Edit HTML . Check the box "Expand widget templates"

2,Add this CSS code right before ]]></b:skin>
#popupContactClose{
cursor: pointer;
text-decoration:none;
}
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}

3,Add this HTML code right before </body>
<div id="popupContact">
         <a id="popupContactClose">x</a>
         <h1>Pop-up title goes here</h1>         
         <p id="contactArea">
             your pop-up content and subscription form ... goes here
         </p>
     </div>
     <div id="backgroundPopup"></div>

This is HTML code of your subscription pop-up .
Replace the text in bold with title of pop-up and pop-up content .
To make this popup becomes a subscription pop-up ,you can add Feedburner subscription code into pop-up content . Like this

<div id="popupContact">
         <a id="popupContactClose">x</a>
         <h1>Subscription to SimplexDesign</h1>         
         <p id="contactArea">
             <form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Simplex', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
                 <p>Enter your email address:</p>
                 <p><input type="text" style="width:140px" name="email"/></p>
                 <input type="hidden" value="Simplex" name="uri"/>
                 <input type="hidden" name="loc" value="en_US"/>
                 <input type="submit" value="Subscribe" />
             </form>
         </p>
     </div>
     <div id="backgroundPopup"></div>

The text in bold is the code of Feedburner subscription form .

You might ask me : how to get Feedburner subscription form ?
It's very easy .If you are using Feedburner ,login to your feedburner account -> click on your blog feed ->click on Publicize tab -> Click on Email Subscriptions -> Active this service -> code of subscription form is in text box .

If you do not use Feedburner ,you can add other code to pop-up content ....

4, Now it's time to add Jquery code . This code will make the pop-up work .
Add this code right before </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>   
<script src="http://dinhquanghuy.110mb.com/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
     var popupStatus = 0;
//this code will load popup with jQuery magic!
function loadPopup(){
    //loads popup only if it is disabled
    if(popupStatus==0){
        $("#backgroundPopup").css({
            "opacity": "0.7"
        });
        $("#backgroundPopup").fadeIn("slow");
        $("#popupContact").fadeIn("slow");
        popupStatus = 1;
    }
}

//This code will disable popup when click on x!
function disablePopup(){
    //disables popup only if it is enabled
    if(popupStatus==1){
        $("#backgroundPopup").fadeOut("slow");
        $("#popupContact").fadeOut("slow");
        popupStatus = 0;
    }
}

//this code will center popup
function centerPopup(){
    //request data for centering
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $("#popupContact").height();
    var popupWidth = $("#popupContact").width();
    //centering
    $("#popupContact").css({
        "position": "absolute",
        "top": windowHeight/2-popupHeight/2,
        "left": windowWidth/2-popupWidth/2
    });
    //only need force for IE6   
    $("#backgroundPopup").css({
        "height": windowHeight
    });
   
}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
    if ($.cookie("anewsletter") != 1) {   
        //centering with css
        centerPopup();
        //load popup
        loadPopup();   
    }       
    //CLOSING POPUP
    //Click the x event!
    $("#popupContactClose").click(function(){
        disablePopup();
        $.cookie("anewsletter", "1", { expires: 7 });
    });
    //Click out event!
    $("#backgroundPopup").click(function(){
        disablePopup();
        $.cookie("anewsletter", "1", { expires: 7 });
    });
    //Press Escape event!
    $(document).keypress(function(e){
        if(e.keyCode==27 && popupStatus==1){
            disablePopup();
            $.cookie("anewsletter", "1", { expires: 7 });
        }
    });
});
</script>

The pop-up will show if you are first-time visitor to the blog and will not displayed again  for 7 days .
With this feature ,reader will not be annoyed by pop-up each time they visit your blog . After 7 days ,the pop-up will show again to remind visitor to subscribing your blog . You can set the number of days pop-up will be appeared again by set the value of expires: 7 to other value ,for example ,expires: 6 ^^

Note : If error occured when uploading template ,you must encode the script in step 4 by copying the code ,and go to this page ,paste the code in textbox and click on encode . After that copy the result and paste it back to template file .


That's all for subscription pop-up .
You can save template and back to your blog to see the changes.
I hope this post will be helpful

Update : How to move images in Simplex's templates from ImageShack to another host

Many of you complaint me for trouble with imageshack.us today . Early today ,all images which hosted in Imageshack.us has been changed to ugly Frogs .
I wrote a post on how to register your domain with imageshack .But this way ,you have to wait for them to approve your site .
In this post ,I will show you the way to download all images in a Simplex's template to your PC and then upload it to another host .

Here are steps

1,First ,go to imageshack.us and register an account if you don't have one .
If you have an account existed , please login to your account .

With the new Imageshack policy ,we can only see images and download them if we are registered members . So it's the reason why we need to login to our accounts in imageshack.us .

Keep the imageshack browser window open .Do not close it .

2,Open another browser tab. Go to Blogger Dashboard ->Design ->Edit HTML,checked in Expand widget templates .
Press Ctr+F for search function and type the term "imageshack.us" into searchbox ,then enter



It will show you all link of images which were hosted in imageshack.us like picture above .

3, Copy one image link ( in the bracket ) .

Open another browser tab and paste the link into address bar .
Click enter ,it will show you the image .Right click on image and choose " save picture as " . Save this image on your hard disk.



4,Find another hosting that support image , for example , in this post ,I use Imgplace.com ( this hosting is just an example and you can use another hosting providers,paid or free ,it's up to you ) . I open imgplace.com website in another tab of browser window , choose the file and click Upload


When finish uploading ,copy the direct link



5,Back to the browser tab which template file are opening . Paste the image's direct link we got from the hosting to template file .Like this (see the arrow,new link in Imgplace.com replaced old one in Imageshack.us )



When you finish this step ,you are succesfull in moving one image from Imageshack.us to Imgplace.com hosting .

6, Do the same with other images which were hosted in Imageshack.us

All steps can do very fast , you can move an image from Imageshack to another host in less than 30 seconds .Because each template has some images ,so it only take you less than 10 minutes for all images .
Save template file and shutdown browser window .

You just finish moving all images in a Simplex's template from Imageshack.us to another hosting .
I hope this post helpful .

Update : Imageshack error unregister domain - how to fix ?

Today ,not only in SimplexDesign blog and templates,the image of "IceFrog" with text like “Your country can only view this image by logging into ImageShack” or “Unregistered domain. Go to http://imageshack.us to register” appeared everywhere . This problem was happening to all images which were linked directly to ImageShack .




If you had uploaded an image to ImageShack and posted it on your website, blog, or any other applications then the ImageShack Icefrog picture would show up.
Codes provided by Image Shack are working such as the embed link to image. We can only see the images when we login imageshack.us .If not ,we can see the icefrog .All images are locked .

The solution here is very simple , you have to register your domain to imageshack.us by visiting this page and fill all the information needed: http://stream.imageshack.us/content.php?page=email&q=reg_domain

Note that this must be done by the site owner that is being affected in order for them to verify the ownership.
When you finish submiting your site ,just wait .They will aprove your site shortly and images will be displayed as before .
With the new policy ,I think imageshack.us is not a good choice for us from now . What happen if one day ,they lock all images and ask for money .

I will try another solution and provide you images to help you host them yourself as soon as possible .
If you can't wait , you can register an account in Imageshack.us ,and login . After that open template file (xml file) and search for "imageshack.us" , it will show you link of all images that hosted in Imageshack.us . Copy all these links to download manager program (such as Internet Download Manager ,Orbit,Flashget ...) and this program will download all images for you . This is the best way for you to get all images . Remember you can do this when you have an imageshack account and you loged in .

SimplexBuzz - one more premium template

This is my latest template SimplexBuzz . This template has a eye-catching feature slider ,and I think it's good for travel/art/photography blog .

Live Demo | Download

Here are steps to install this template

1,Download template file

2,Open template file in any word editor you have .

3,To change the credit box at the end of each post

find this code

<div id="authorbox">

<h3>About Author</h3>

<img width="60" height="60" class="avatar avatar-60 photo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil4WuM8VNbUjLfBk2X2jq2Xqk09xT39RO-Z5PHYW59m3B_DuYurJvZ_71oVdJHX0DGrsHZerhGP_5Ysr8rcBUnEHS8RF5_FAnbwQiU4BejYJLHHSA6SuGzu4La-tGtW00UTYGFpo_RZdO1/s220/normal_HNH_9244-sapa0207.jpg" alt=""/>

<div class="authortext">

<h4>

<a href="">Nhamnganhanh</a>

</h4>

<p>This is template SimplexBuzz .

</p>

</div>

</div>

Change the text in bold to what you want (you can write some description about you and your blog ...)

4, To add your feedburner account to email subscription form

find this code
<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">
                                  <fieldset>
                                     <input type="hidden" name="uri" value="simplex"/>
                                     <input type="hidden" value="en_US" name="loc"/>
                                     <input type="text" name="email" class="sub"/>
                                     <button type="submit">Submit</button>
                                 </fieldset>
                             </form>
change the text in bold 'simplex' to your feed burner account .

5,To add your social network accounts

find this code
<ul class="social">
                                 <li><a class="twitter" href="http://twitter.com/dinhquanghuy">Twitter</a></li>
                                 <li><a class="facebook" href="http://facebook.com/simplexdesignblog">Facebook</a></li>
                                 <li><a class="flickr" href="http://flickr.com/photos/">Flickr</a></li>
                                 <li class="rss"><a class="rss" href="/feeds/posts/default">RSS</a></li>
                             </ul>
change the links (marked in bold) to your social network accounts.

6,After that ,upload template to Blogger .

7,To add your logo

click on logo widget

then add your logo into widget content as I did in picture below

Click Save

8,To add items to top menu navigation

click edit link in category widget

then add link to your category into widget content like this

Link to category in blogspot has structure : http://yourblogspot.blogspot.com/search/label/your category

9,To add content to feature slider

Click on edit link in 'feature content slider' widget
Then add the name category which you want to show recent posts in feature content slider in widget content
for example ,I want to show recent posts under 'travel' category into feature content slider ,I click edit link in 'feature content slider' widget

then fill the widget content with name of category 'travel'

Save changes . From now ,4 latest posts in category 'travel' will be showed in feature slider

10,To show post in feature content section below slider

click on edit link in feature content widget

add name of category you want to show into widget content

Then save changes . Recent posts in this category will be showed in feature content section .

11,In this template , when you enter a single post ,the first image in this post will be showed as background in header automatically .
But when you enter a page ,there's no image displayed in header .
To add image in the header of pages

click on edit link in 'background for page' widget

and add the image into widget content .

From now ,the image you added will be showed as header's background each time you enter a page .

12,To add the text in alert box

click on edit link in 'alert' widget

and enter the text you want to show .

You can use HTML tags to make text in alert box display as you want .

13,To add your ad,click on edit link in banner widget

and add your ad code into widget content .


14, That's all for default widgets .You can add more widget or remove existed as you want .

Save all changes ,and you are done .I hope you all like this template and keep supporting me .
Feel free to use my template but please keep the credit at footer .Thanks in advance .

Update : As question from YUSUF left in my blog related to problems on long post titles and width of post in home page ,here is the solution

Find this

div.post h2.storyTitle {
color: #000000;
float: none;
font-size: 2.6em;
font-weight: bold;
line-height: 120%;
margin-bottom: 5px;
width: 585px;
}and delete width: 585px;
Then find

div.post div.storyContent {
float: none;
margin-bottom: 20px;
width: 585px;
}delete width: 585px;
To fix the problem with recent posts/comments tab when post title is long :
First ,find this

div#sidebar div.tabsContainer ul.panes ul li h4 {
left: 70px;
position: absolute;
top: 15px;
}and delete all of them
Second ,find this

div#sidebar div.tabsContainer ul.panes ul li p.meta {
bottom: 0;
color: #85837E;
font-size: 0.9em;
left: 70px;
line-height: 120%;
overflow: hidden;
position: absolute;
}Then change it to

div#sidebar div.tabsContainer ul.panes ul li p.meta {
color: #85837E;
font-size: 0.9em;
line-height: 120%;
margin-left: 60px;
}

the last step : Find this

div#sidebar div.tabsContainer ul.panes ul.comments li h4 {left:35px; width:250px;}
And replace it with

div#sidebar div.tabsContainer ul.panes ul.comments li h4 {
margin-left: 20px;
}