


Prado Blogger Template
If Static Pages has an error with your browsers such as Firefox and Chrome, please attention note the updates
Free Prado Blogger Template is a clean and elegant magazine style blogger template adapted from WordPress Theme to Blogger Template with the iPad design integrated. It's a 2 column blogger template with right sidebar, 4 column footer, magazine style template, Nivo Slider featured content, tabview ready, drop down menu, SEO optimize, banner ads ready, social widget ready, compatible with most browsers like Firefox, Chrome, Opera, Safari and Internet Explorer, and more. This template suitable for tech and gadget blogs speacially about iPad
Similar Templates : Pre Live Mag Blogger Template & whitePress Blogger Template
Designer : Web2Feel / Demo Prado WordPresTheme
Author : ireng_ajah - DheTemplate.com / WordPress Theme 2 Blog
Setting Prado Blogger Template
1. Setting Nivo Slider
Go to Design >> Edit HTML and find this code below
<a href='http://www.dhetemplate.com/'><img alt='#Post Title' class='nivim' height='300' src='http://1.bp.blogspot.com/--TJ1VlYc_Wo/Tgh770B3EkI/AAAAAAAAKBo/5E7uy50c-5g/s1600/2.jpg' title='#Post Title' width='768'/></a>
Change the Red Color with your link, ALT image, URL image and Title
2. Setting RSS Feed, Facebook, Twitter, Linkedin and Youtube
Go to Design >> Edit HTML and find this code below :
<li><a href='http://feeds.feedburner.com/Dhetemplate-NewFreeBloggerTemplateEveryday'><img alt='RSS' src='http://3.bp.blogspot.com/-zdJvW1ZSC1o/Te4eESuhBvI/AAAAAAAAJmw/twnMNj_1CN8/s1600/rss.png' title='Subscribe here'/></a></li>
<li><a href='http://www.facebook.com/dhetemplate'><img alt='Facebook' src='http://2.bp.blogspot.com/-z9hK7ZQNwLo/Te4eDDMZ4hI/AAAAAAAAJmg/BXicYJj2xHk/s1600/facebook.png' title='My Facebook'/></a></li>
<li><a href='http://twitter.com/DheTemplate'><img alt='Twitter' src='http://2.bp.blogspot.com/-FVwm4jqPdbo/Te4es7sK2BI/AAAAAAAAJm4/XvN1Yy6PszU/s1600/twitter.png' title='Follow me'/></a></li>
<li><a href='YOUR_LINKEDIN_LINK'><img alt='Linkedin' src='http://2.bp.blogspot.com/-mRQHHuLx1zA/Te4eD-imHKI/AAAAAAAAJmo/WkIEoc1bcW8/s1600/linkedin.png' title='My Linkedin'/></a></li>
<li class='lasticon'><a href='YOUR_YOUTUBE_LINK'><img alt='Youtube' src='http://2.bp.blogspot.com/-fzXNbgXnUbM/Te4etHP5I6I/AAAAAAAAJnA/zmRJRsjJ2LU/s1600/youtube.png' title='My Channel'/></a></li>
Change the red color with yours
3. Setting Banner 125 x 125px
Setting banner left
<span class='banner1'>
Your banner code here
</span>
Setting banner right
<span class='banner2'>
Your banner code here
</span>
** Updates **
Go to Design > Edit HTML and find this code below
.crosscol .PageList li, .PageList li{
margin:0;
padding:0;
outline:none
}
.PageList{
width:480px;
padding:0;
margin:0 auto;
}
.PageList li a{
margin:0;
padding:10px 10px;
display:block;
font-size: 14px;
line-height:30px;
font-weight:bold;
color:#fff;
}
.PageList li a:hover{
color:#fff;
}
.PageList li.selected a{
color:#fff;
text-decoration:none;
}
Change that code with this one :
#PageList1{
padding:0;
margin:0;
float:left;
width:480px;
}
.crosscol .PageList li, .footer .PageList li, .crosscol .PageList ul, .footer .PageList ul {
float: left;
list-style: none;
margin: 0;
padding:0;
}
.PageList li a{
margin:0;
padding:10px 10px;
font-size: 14px;
line-height:30px;
font-weight:bold;
color:#fff;
display:block;
}
.PageList li a:hover{
color:#fff;
}
.PageList li.selected a{
color:#fff;
text-decoration:none;
}
Then add this code below to hide the PageList title
#PageList1 h2 {display:none;}
exactly before ]]></b:skin> code
**Leave a comment or contact us if you have question about this template
Hi,My New Template is coming soon.Please tell me how you ad dates(Green background).Please send the codes and instructions...
@7chip : Hi.. You can see from file. Just download it
hi,,,im using ur template now... :) great work :)
i have a question here,,,how do i remove the autoread function?
@benz mobile : Hi... Thankyou for using Prado Blogger template
Here step by step to remove autoread :
Go to Design >> Edit HTML. Click Expand Widget Templates
1. Remove Jump-link CSS code. This is for appearing jump-link function (readmore default Blogger)
#navbar-iframe, .date-header, .jump-link{display:none !important}
Delete Bold code, so the code will be like this
#navbar-iframe, .date-header{display:none !important}
2. Javascript code
Remove this code below :
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 650;
summary_img = 450;
img_thumb_height = 160;
img_thumb_width = 160;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; margin-right:10px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
</b:if>
3. HTML autoreadmore
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script><a expr:href='data:post.url'>[ Read More ]</a>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
</b:if>
Change that code with this code
<data:post.body/>
Save
Thankyou :)
The dates on my posts are not coming out correctly in the upper left hand corner, can someone help? It is saying undefined. Also, I'm having some issues with my photos as you will see...sorry Im new at this.
http://skillett1993.blogspot.com/
@Angelique : Hi.. I saw your blog.
1. Date format : Setting >> Formatting. In Date Header Format, choose the date format like this : Tuesday, July 05, 2011
2. Nivo Slider. Im sorry, Madame. The image size should be 768 x 300px. I try to add new code for automatic resize the image to be 768 x 300px but i cant.
Thankyou
@Mandy : Hi.. First, instal template without Slider (available in download file)
Second. Go to Design > Edit HTML and find this code below :
#top {
background:url(http://4.bp.blogspot.com/-c-E-wbIENGk/TggmMw12zOI/AAAAAAAAKBQ/Gjv3byRDZ6A/s1600/top.jpg) top center no-repeat;
margin:0 auto;
position:relative;
height:250px;
padding:0;
}
Delete the bold code
Thanks
@Mandy : Im so sorry. Your comment accidentally deleted
thank you. im using your template now. it works wonders.
Wow it is really great and so useful post for blogger. the script is also so good and easy to understand. using of it we can make a some more attractive site.
psd to xhtml
hello
I am your fan
it is so useful post for blogger
And i have a challenge
My blogger's Nivo Slider (top)
white "iPad" back have red "1234"
How can i delete or lid the red"1234"
@FAEA : Hi.. Go to Design > Edit HTML and find this code below
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position:relative;
z-index:9;
cursor:pointer;
}
Replace that code with this one :
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position:relative;
z-index:9;
cursor:pointer;
display:none;
}
Save
thx you so mush!
@FAEA : You'r welcome :)
Thankz For Template.
i use it to my blog thankz again.
visi my blog www.demobizone.tk
Hi, Your Template Was So Excellent,
Check Out My Blog
www.win7tricksandtips.blogspot.com
hello, your template is very very beautiful....i have a question...how i can change the font of post title ??
it is possible to use other web fonts?
@gio.casiello : Hi.. This template used font Candal from Google WebFont. If you want to change with another one, find this code (CSS code) :
<link href='http://fonts.googleapis.com/css?family=Candal' rel='stylesheet' type='text/css'/>
Change with other font from Google WebFont
Then,
.post-title a, .post-title a:visited, .post-title strong{
font-family:"Candal", Arial, Tahoma;
font-weight:normal;
line-height:1.2em;
display:block;
text-decoration:none;
color:#000;
margin:5px 0 0 0;
.margin:10px 0 0 0;
text-align:left
background-color: transparent;
}
Change the bold code with that font
Hi, thanks for this template, very awesome. I have a question, There's some way for the Nivo slider to show the popular post?. Or I have to link the post by hand?
Sorry If I have any mistake in my english.
@Alejandro Alcalde : Hi.. It's a manual input. If you want to create automatic Popular Post slider, you can see the tutorial here :
http://www.abu-farhan.com/category/tips-trik-blogger/popular-post-tips-trik-blogger/
@ireng_ajah Thanks
@Elbaul : You'r welcome
Hi!
I want to remove de nivo slider and the header to put mine's. How can I do it?
@Diego Zulueta Piastra : Hi.. To remove Nivo slider, you can download and reinstal Prado Without Slider (available in download file)
To change the header, find this code below :
#top {
background:url(http://4.bp.blogspot.com/-c-E-wbIENGk/TggmMw12zOI/AAAAAAAAKBQ/Gjv3byRDZ6A/s1600/top.jpg) top center no-repeat;
margin:0 auto;
position:relative;
height:250px;
padding:0;
}
Change the image with yours.
For perfect match with body background, also find this code :
#wrap2{
background:url(http://4.bp.blogspot.com/-drLmmYsZZGI/Tggl1bbUtSI/AAAAAAAAKBI/g7FdGLIv3e8/s1600/mast.png) repeat;
width:100%;
height:250px;
margin:0 auto;
padding:0;
}
and change the image.
Dont forget to set the height (height:250px;)
How can I configure de nested menu?
@Diego Zulueta Piastra : Go to Design > Edit HTML and find this code below :
<div id='menu'>
Structure menu look alike this :
<li><a href='#'>Drop Menu 1</a>
and this
<li><a href='#' title='Edit Me'>Child Menu 1.1</a></li>
Change the "#" (without quote) with your URL
Edit Me Title and
Drop Menu 1 & Child Menu 1.1 with Title menu
Hi, just another question. How can I put de sidebar in the left side?
#main-wrapper{
float:left;
width: 690px;
padding:0;
margin:0;
overflow:hidden;
}
#right, #sidebar-top, #sidebar-bottom{
width:270px;
float:right;
margin:0;
padding: 0;
word-wrap:break-word;
overflow:hidden;
}
Switch the FLOAT code so
#main-wrapper { float:right; and
#right, #sidebar-top, #sidebar-bottom{ float:left;
Sorry, just the last one.
I see there is the page list and the drop menu in the same wrapper. I don't to show the pages. I only want to use the drop menu. How can I put the drop menu in the left side and eliminate the page list?
I appologyse for my poor english.
@Diego Zulueta Piastra : Hi.. First, Edit this code :
#menu{
float:right;
width:500px;
display:block;
padding:0;
font-size:14px;
font-weight:bold;
}
Change the Width with 1000px and change the float to be Left
Then, remove this code
<b:section class='crosscol' id='crosscol-wrapper'>
<b:widget id='PageList1' locked='false' title='Pages' type='PageList'/>
</b:section>
Save
Thanks for all your help
@Diego Zulueta Piastra : You'r welcome...
In the sidebar, the title of the third tab is not label, it is 3. How can I reolve this problem?
I have tried to do it manually, but it doesn't work.
@Diego Zulueta Piastra : Hi.. When you instal this template, the tabview automatic like this : Popular Recent Labels
Look what I'm talking about:
http://pruebaajedrez.blogspot.com/
The third tab's name is 3
@Diego Zulueta Piastra : Please add the Label widget..
The comment form says: "Leave a reply". I want to show it in spanish: "Deja un comentario". How can I do it?
@Diego Zulueta Piastra : Hi.. GO to Design > Edit HTML. DOnt forget to click Expand Widget Templates. Then, find this word : Leave a Reply
Replace that word with yours, Deja un comentario
If you want to replace Response so far. too, just find that word and replace with yours
@ireng_ajah...Thanks for the last help....i have a new question for you ( sorry...:D )...i want to insert 5 drop menu on the header, but when i add the 5th in EDIT HTML, the last of 5 menĂ¹ goes one step below...so i have four correct and one below those...how i can insert 5 dropmenu all in the same step on the header?? i hope you have understand me....thanks so much...
@Hi Giorgio Casiello..
You should change the width size of Menu
#menu{
float:right;
width:500px;
display:block;
padding:0;
font-size:14px;
font-weight:bold;
}
Replace the size more bigger but when you increase width of menu, you must decrease width of StaticPage. It mean "Increase Menu = decrease StaticPage "
StaticPage code :
#crosscol-wrapper{
float:left;
width:480px;
height:50px !important;
margin:0;
padding:0;
}
#PageList1{
padding:0;
margin:0;
float:left;
width:480px;
}
Decrease the bold code
thank you very much...i have solved my problem, i am working now at another my blog like a static "portfolio", ok...i have a question for you...i not know if what i want is possible, so i ask to you...:
when i click on title of a blog (or a logo) i am redirect to home page of this blog. well, i want to redirect to another URL when someone click on this "header", it is possible, how ?
thanks so much....
ok i have solved...i have add a html code with the image and link....good morning !!
@Giorgio Casiello : Hi.. Great bro.. Keep up blogging..