Home  ›  1 Right Sidebar  ›  2 Column  ›  3 Column Footer  ›  Ads Ready  ›  Black  ›  Clean  ›  Elegant  ›  Gray  ›  Image SlideShow  ›  Ireng Ajah  ›  Magazine Style  ›  SEO Friendly  ›  White

Pre Live Mag


Template Details :
Free Pre Live Mag Blogger Template is a clean and elegant magazine style blogger template with vertical content slider with some features like 2 column, 3 column footer, Magazine style template, Vertical content slider, SEO friendly with semantic heading level, Ads Ready, Auto readmore, RSS & Twitter buttons, Comment with gravatar ready, very good for all type of blog and compatible with most user browsers
Similar Templates : Cubenatic Blogger Template & Wazzirator Blogger Template
Designer & Author : ireng_ajah - DheTemplate.com
1. Setting Twitter & RSS Feed

Go to Design > Edit HTML and find this code below
<li class='twitter'><a href='#TWITTER_LINK'>Twitter</a></li>
<li class='rss'><a href='#FEED_LINK'>RSS</a></li>

Change the Red color with yours

2. Setting Featured content

Go to Design > Page Elements. Click EDIT of Featured-Content widget. Copy and paste this code below

<div id='featured'>
<ul class='ui-tabs-nav'>
<li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#fragment-1'><img alt="testing" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4fNA8ZmwnSazZCE18x73AwxXErz-8kqmPgzCyfd9l7xTAiCDSfN_jZIIfrj-87adoqXhOpa7DIV-WvLkFiOyoSd1A3K2dX5TQv4JYIDp0PtJ2jlVevvtUjQxPasHDjDOVvFWlDhXVMJA/s400/Poster-Inc.jpg" width="80" /><span>Poster Inc</span></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-2'><img alt="testing" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhABxdQjJv4b7PAjr-_f7ecvdCRvO6joZF0y7UZ8Gv04tgV0mzhCd6gC6iH2VXETxeQc96D-2F4nD6vuwpkQrlV3a-5gFr9632hw035Z93DxJ7wa6M-YOZrKaUG98fB0JCYKRfgcvu7eyE/s400/whitePress.jpg" width="80" /><span>whitePress</span></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-3'><img alt="testing" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijc8gfJpW-qxBaMKAl_z8xVHyeXk85K8zy0Q8E3GRdqNRD8f8K335zjrUpm3IEfieg5FB8QPq03g4OJ1dFIi_qe1zXh6Z1vtkGEn0ouC9s9vUVRpKfMhDa7xvo8D7GVF4rEkpf4fN1aOQ/s400/Ireng-Manis-V2.jpg" width="80" /><span>Ireng Manis V2</span></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-4'><img alt="testing" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEaXqXBbBhGes2BGF9E6jIkmYa0h4xToC2cpgKDaIAT0X1rnQsiKfqSDUXb-uETdlJxoERR-X49L3uB93rQaVOj3gUOPClbU7Npuixe25slwzbH1WxeXuY2cNQMDAzGSCb0PSUOiEWupk/s400/Press-Magajah.png" width="80" /><span>Press Magajah</span></a></li>
</ul>
<!-- First Content -->
<div class='ui-tabs-panel' id='fragment-1' style=''>
<img alt="testing" height="290" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4fNA8ZmwnSazZCE18x73AwxXErz-8kqmPgzCyfd9l7xTAiCDSfN_jZIIfrj-87adoqXhOpa7DIV-WvLkFiOyoSd1A3K2dX5TQv4JYIDp0PtJ2jlVevvtUjQxPasHDjDOVvFWlDhXVMJA/s400/Poster-Inc.jpg" width="420" />
<div class='info'>
<h3><a href='http://www.dhetemplate.com/2010/11/free-poster-inc-blogger-template.html'>Poster Inc Blogger Template</a></h3>
<p>Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam...<a href='http://www.dhetemplate.com/2010/11/free-poster-inc-blogger-template.html'>More</a></p>
</div>
</div>
<!-- Second Content -->
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''>
<img alt="testing" height="290" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhABxdQjJv4b7PAjr-_f7ecvdCRvO6joZF0y7UZ8Gv04tgV0mzhCd6gC6iH2VXETxeQc96D-2F4nD6vuwpkQrlV3a-5gFr9632hw035Z93DxJ7wa6M-YOZrKaUG98fB0JCYKRfgcvu7eyE/s400/whitePress.jpg" width="420" />
<div class='info'>
<h3><a href='http://www.dhetemplate.com/2010/11/free-whitepress-blogger-template.html'>whitePress Blogger Template</a></h3>
<p>Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros...<a href='http://www.dhetemplate.com/2010/11/free-whitepress-blogger-template.html'>More</a></p>
</div>
</div>
<!-- Third Content -->
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''>
<img alt="testing" height="290" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijc8gfJpW-qxBaMKAl_z8xVHyeXk85K8zy0Q8E3GRdqNRD8f8K335zjrUpm3IEfieg5FB8QPq03g4OJ1dFIi_qe1zXh6Z1vtkGEn0ouC9s9vUVRpKfMhDa7xvo8D7GVF4rEkpf4fN1aOQ/s400/Ireng-Manis-V2.jpg" width="420" />
<div class='info'>
<h3><a href='http://www.dhetemplate.com/2010/11/free-ireng-manis-v2-blogger-template.html'>Ireng Manis V2 Blogger Template</a></h3>
<p>Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros...<a href='http://www.dhetemplate.com/2010/11/free-ireng-manis-v2-blogger-template.html'>More</a></p>
</div>
</div>
<!-- Fourth Content -->
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''>
<img alt="testing" height="290" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEaXqXBbBhGes2BGF9E6jIkmYa0h4xToC2cpgKDaIAT0X1rnQsiKfqSDUXb-uETdlJxoERR-X49L3uB93rQaVOj3gUOPClbU7Npuixe25slwzbH1WxeXuY2cNQMDAzGSCb0PSUOiEWupk/s400/Press-Magajah.png" width="420" />
<div class='info'>
<h3><a href='http://www.dhetemplate.com/2010/07/free-blogger-template-press-magajah.html'>Press Magajah Blogger Template</a></h3>
<p>Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam...<a href='http://www.dhetemplate.com/2010/07/free-blogger-template-press-magajah.html'>More</a></p>
</div>
</div>
</div>

Green color = alt image
Blue color = image url
Brown color = Title of featured content
Red color = URL post
Black bold = short description of featured content

** Updates **

Go to Design > Edit HTML and find this code below

.crosscol .PageList li, .PageList li{
margin:0;
padding:0;
outline:none
}

.PageList{
padding:0;
margin:0;
float:left;
width:700px;
}

.PageList li a{
line-height:1.6;
font-size:16px;
font-weight:bold;
margin:0;
padding:5px 20px;
display:block;
color:#fff;
}

.PageList li a:hover{
background:#474640;
color:#fff;
}

.PageList li.selected a{
background:#474640;
color:#fff;
text-decoration:none;
}

Change that code with this one :

#PageList1{
padding:0;
margin:0;
float:left;
width:700px;
}

.crosscol .PageList li, .footer .PageList li, .crosscol .PageList ul, .footer .PageList ul {
float: left;
list-style: none;
margin: 0;
padding:0;
}

.PageList li a{
line-height:1.6;
font-size:16px;
font-weight:bold;
margin:0;
padding:5px 20px;
display:block;
color:#fff;
}

.PageList li a:hover{
background:#474640;
color:#fff;
}

.PageList li.selected a{
background:#474640;
color:#fff;
text-decoration:none;
}

Then add this code below to hide the PageList title

#PageList1 h2 {display:none;}

exactly before ]]></b:skin> code

Related Posts

Subscribe Our Newsletter
About Contact Disclaimer Privacy Policy Sitemap