Prado

Prado blogger template. convert wordpress theme to blogger template. template nivo slider for blogger. blogger template with 3 column footer

demo Prado blogger template. convert wordpress theme to blogspot template. nivo slider blogger template. 3 column footer blogger template

download Prado blogger template. template from wordpress theme. blogger template with nivo slier. template blogger 3 column footer

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

41 Person has expressed his thoughts, Now you turn guys!

  1. Hi,My New Template is coming soon.Please tell me how you ad dates(Green background).Please send the codes and instructions...

  2. @7chip : Hi.. You can see from file. Just download it

  3. hi,,,im using ur template now... :) great work :)
    i have a question here,,,how do i remove the autoread function?

  4. @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 != &quot;item&quot;'>
    <script type='text/javascript'>
    var thumbnail_mode = &quot;float&quot; ;
    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 == &quot;static_page&quot;'>
    <data:post.body/>
    <b:else/>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
    <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script><a expr:href='data:post.url'>[ Read More ]</a>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>
    </b:if>
    </b:if>

    Change that code with this code
    <data:post.body/>


    Save

    Thankyou :)

  5. 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/

  6. @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

  7. @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

  8. @Mandy : Im so sorry. Your comment accidentally deleted

  9. thank you. im using your template now. it works wonders.

  10. 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"

  11. @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

  12. thx you so mush!

  13. @FAEA : You'r welcome :)

  14. Hi, Your Template Was So Excellent,
    Check Out My Blog
    www.win7tricksandtips.blogspot.com

  15. This comment has been removed by the author.
  16. @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

  17. 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.

  18. @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/

  19. @Elbaul : You'r welcome

  20. Hi!
    I want to remove de nivo slider and the header to put mine's. How can I do it?

  21. @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;)

  22. How can I configure de nested menu?

  23. @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

  24. Hi, just another question. How can I put de sidebar in the left side?

  25. #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;

  26. 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.

  27. @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

  28. @Diego Zulueta Piastra : You'r welcome...

  29. 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.

  30. @Diego Zulueta Piastra : Hi.. When you instal this template, the tabview automatic like this : Popular Recent Labels

  31. Look what I'm talking about:

    http://pruebaajedrez.blogspot.com/

    The third tab's name is 3

  32. @Diego Zulueta Piastra : Please add the Label widget..

  33. The comment form says: "Leave a reply". I want to show it in spanish: "Deja un comentario". How can I do it?

  34. @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

  35. This comment has been removed by the author.
  36. @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

  37. This comment has been removed by the author.
  38. This comment has been removed by the author.
  39. @Giorgio Casiello : Hi.. Great bro.. Keep up blogging..

+ Add Your Comment

Do not waste your time with irrelevant comments or leave a link for backlink will be removed