Simplex Newsportal - Template for news portal and magazine

There's a newer version of this template here

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

I want to introduce to you all my latest template . It's named Simplex News portal . I think it's a good template for magazine and news portal ,a nice and clean template .




Live Demo | Download

here is steps to install this template :

1,Download this template

2,Open template file in any word editor you have

3,Find this code :
label1 = "WORLD";
Title1 = "WORLD";

label2 = "US";
Title2 = "US";

label3 = "Entertainment";
Title3 = "Entertainment";

label4 = "Science - Health";
Title4 = "Science - Health";

label5 = "Sports";
Title5 = "Sports";

label6 = "Technology";
Title6 = "Technology";

label7 = "Feature";
Title7 = "Feature";

label8 = "Topnews";
Title8 = "Top News";

Change the value of variables : label1,label2....label8 to name of category you want to show post in home page . Position of each label as picture bellow


For example : if you want to show posts under 'WORLD' category in position of label1 ,change the value of label1 to 'WORLD' and change the value of Title1 to 'WORLD' .
Value of Title variable is the text which showed as title of category in homepage .
Label7 is the position of content slider ,and Label8 is the position of Top news section . So you can change the value of label7 ,title7 and label8,title8 to make template display as you want .

4, To change logo ,find this line :

.imagelogo { float: left; background: url(http://img28.imageshack.us/img28/5600/logosyz.png) no-repeat; width: 300px; height: 60px; cursor: pointer; }

and change the URL in bold to your logo's .
After change these values ,save template and upload it to Blogger .

5,In Blogger Dashboard, go to Page element ,add content to Top-Ads ,Ads, Ads 1 ,Ads 2 widget .

6,In Menu widget ,add link to each category in your blog .

7,In Blogroll widget ,you can add link to your friend's blogs .

8,There are many place you can add your own widget ,so you can add or remove them to make blog as your need .

That's all . I hope you like this template . Feel free to leave suggestion and question for me in the comment .Thankx

Switch display between thumbnail and summary view with jquery and CSS

Some websites have two modes for displaying : summary view (included thumbnail and summary text )and thumbnail view (only thumbnail) ,especially gallery or portfolio websites . Just click and website turn into thumbnail or summary view .With this effect , website will be more interactive to users . In addition , the ability to change page layouts provides your users with a more immersive experience and allows them to consume information more easily, either with a quick gallery view, or a detailed summary view. I've read an tutorial for making this effect in http://designm.ag website ,and I think it maybe helpful to you so I write down it here .






You can see the live demo here

Enough ? Now ,here is the tutorial for making this
1,As usual ,we need a HTML/Javascript widget . Add one into your blog layout .
2,Adding this CSS code to widget content for styling elements :

<style type="text/css">
body {
    margin: 0;
    padding: 50px 0 0;
    font: 10px normal Verdana, Arial, Helvetica, sans-serif;
    background: #111 url(http://www.sohtanaka.com/web-design/examples/display-switch/body_bg.jpg) no-repeat center top;
    color: #fff;
}
* {
    margin: 0;
    padding: 0;
}

img {
    border: none;
}
h1 {
    font: 5em normal Georgia, 'Times New Roman', Times, serif;
    text-align:center;
    margin-bottom: 20px;
}
h1 span {     color: #e7ff61; }
h1 small{
    font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    letter-spacing: 1.5em;
    display: block;
    color: #ccc;
}

.container {
    width: 758px;
    margin: 0 auto;
    padding-bottom: 100px;
    overflow: hidden;
}
ul.display {
    float: left;
    width: 756px;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #333;
    border-right: 1px solid #333;
    background: #222;
}
ul.display li {
    float: left;
    width: 754px;
    padding: 10px 0;
    margin: 0;
    border-top: 1px solid #111;
    border-right: 1px solid #111;
    border-bottom: 1px solid #333;
    border-left: 1px solid #333;
}
ul.display li a {
    color: #e7ff61;
    text-decoration: none;
}
ul.display li .content_block {
    padding: 0 10px;
}
ul.display li .content_block h2 {
    margin: 0;
    padding: 5px;
    font-weight: normal;
    font-size: 1.7em;

}
ul.display li .content_block p {
    margin: 0;
    padding: 5px 5px 5px 245px;
    font-size: 1.2em;
}
ul.display li .content_block a img{
    padding: 5px;
    border: 2px solid #ccc;
    background: #fff;
    margin: 0 15px 0 0;
    float: left;
}

ul.thumb_view li{
    width: 250px;
    height: 184px;
}
ul.thumb_view li h2 {
    display: inline;
}
ul.thumb_view li p{
    display: none;
}
ul.thumb_view li .content_block a img {
    margin: 0 0 10px;
}


a.switch_thumb {
    width: 122px;
    height: 26px;
    line-height: 26px;
    padding: 0;
    margin: 10px 0;
    display: block;
    background: url(http://www.sohtanaka.com/web-design/examples/display-switch/switch.gif) no-repeat;
    outline: none;
    text-indent: -9999px;
}
a:hover.switch_thumb {
    filter:alpha(opacity=75);
    opacity:.75;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
}
a.swap { background-position: left bottom; }


</style>

3,Here is the HTML code  :
<a href="#" class="switch_thumb">Switch Thumb</a> 
<ul class="display">
    <li>
        <div class="content_block">
            <a href="your_url_1"><img src="your_thumbnail_image_1"  /></a>

            <h2><a href="your_url_1">Title of item 1</a></h2>
            <p>summary 1 goes here</p>
        </div>
    </li>

<li>
        <div class="content_block">
            <a href="your_url_2"><img src="your_thumbnail_image_2" /></a>

            <h2><a href="your_url_2">Title of item 2</a></h2>
            <p>summary 2 goes here</p>
        </div>
    </li>   
....................
</ul>
Change the value (where I marked red) to your image and data . You can add more <li>...........</li> for more content .
4,Now, the last step : adding Jquery code

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    $("a.switch_thumb").toggle(function(){
      $(this).addClass("swap");
      $("ul.display").fadeOut("fast", function() {
          $(this).fadeIn("fast").addClass("thumb_view");
         });
      }, function () {
      $(this).removeClass("swap");
      $("ul.display").fadeOut("fast", function() {
          $(this).fadeIn("fast").removeClass("thumb_view");
        });
    });

});
</script>

Ok ,Save the widget and we are done . You can check the result in web browsers.

How it work

when we open the page ,it display in summary mode ( thumbnail and summary text ) ,when you click on switch display button ,the Jquery script will change the HTML in step 3 by :
-Add class 'swap' to <a href="#" class="switch_thumb">Switch Thumb</a>  , so change the state of switch button as you see
-Add class 'thumb_view' to <ul> element . In CSS code , style of this 'thumb_view' class will hide the text and arrange thumbnail as we see in thumbnail mode .
To go back summary mode ,you click again the switch button .When you click that button ,all the class 'swap' and 'thumb_view' will be removed ,so summary text will be displayed and page layout change to summary mode .
That's all