sábado, 12 de enero de 2013

Circles



Circles is an efficient and magnificent template for blogger users. This theme is designed with such practices that your users would think twice whether it is a Blogger Template, or not because it has all the elements just like WordPress Themes. This template is ideal for those websites which running a Gadget niche blog including multimedia, technology and etc. The color combination of White, orange, and gray makes this theme adorable. It is a crystal clear theme with some robust features.

Template Name: Circles OPintemplates
Platform: Blogger / Blogspot
Release date : 08, dec 2012
Author : www.opintemplates.blogspot.com
License : Creative Commons Attribution 3.0
Level :Template Premium Original
Stile : Magazine
Features : Slider , Links Circles Jquery, two columns, fixed width, tree columns at foot
Color : Salmon (pink), black. grey

Evaluation :
correct operating
 
This Template is free to use and is not actively supported by the author, but will be monitored for serious bugs that may need correcting.

Creative Commons Attribution: You are free to use, distribute or adapt this template for your personal or commercial website. But, you must attribute the work to the author. Should not remove credit links.

NO Responsive Template

Settings:

1 - You can change the images of existing Slider by changing your preferences or add many more.

 <a href='#Link'><img class='slideimg' height='300' src='https://lh5.googleusercontent.com/-_9yEVVeDEds/UOCgTreyA4I/AAAAAAAACCg/YKZVpu4zLnM/s1002/Imagena.png' title='' width='1000'/></a>
</div>

<div class='spanel'>  
<a href='#Link'><img class='slideimg' height='300' src='https://lh3.googleusercontent.com/-nLXAE__mUi4/UOCgTrHIXaI/AAAAAAAACCk/DgEqSWYCnPY/s1000/Imagenb.png' title='' width='1000'/></a>
</div>

<div class='spanel'>  
<a href='#Link'><img class='slideimg' height='300' src='https://lh5.googleusercontent.com/-PDIWNcybTZQ/UOCgUBL0HDI/AAAAAAAACCs/SYTDAvHBi2s/s1000/Imagenc.png' title='' width='1000'/></a>
</div>


2 - You can change the globe of REVOLVERMAPS by another of your choice.

You can change the Globe of Revolvermaps to account for its visitors. To do this go to http://www.revolvermaps.com select Get the Mini version, select size and shape of your choice with transparent background and mark the point UPDATE. Once you have the code replace it with the one on the next line of your template Boxes.


<script src='http://jk.revolvermaps.com/t.js' type='text/javascript'/><script type='text/javascript'>rmt_ki101(&#39;6&#39;,150,&#39;ahcsphjjpxc&#39;,&#39;ff0000&#39;);</script>


3- Se proveen tres campos donde colocar imágenes o textos que publiciten artículos o sitios web.
 

fields that handle this section are:


<div class='homewidget clearfix'>
<div class='hwidget'>
<ul class='ch-grid'>
   <li>
    <div class='ch-item ch-img-1'>             
        <div class='ch-info-wrap'>
            <div class='ch-info'>
                <div class='ch-info-front ch-img-1'/>
                <div class='ch-info-back'>
                    <h3>TITLE-HERE</h3>
                    <p>CAPTION OR TEXT<a href='URL-LINK-HERE'>TEXT-LINK-HERE</a></p>
                </div> 
            </div>
        </div>
    </div>
</li>
</ul></div>

<div class='hwidget'>
<ul class='ch-grid'>
   <li>
    <div class='ch-item ch-img-2'>             
        <div class='ch-info-wrap'>
            <div class='ch-info'>
                <div class='ch-info-front ch-img-2'/>
                <div class='ch-info-back'>
                    <h3>TITLE-HERE</h3>
                    <p>CAPTION OR TEXT<a href='URL-LINK-HERE'>TEXT-LINK-HERE</a></p>
                </div> 
            </div>
        </div>
    </div>
</li>
</ul></div>

<div class='hwidget'>
<ul class='ch-grid'>
   <li>
    <div class='ch-item ch-img-3'>             
        <div class='ch-info-wrap'>
            <div class='ch-info'>
                <div class='ch-info-front ch-img-3'/>
                <div class='ch-info-back'>
                    <h3>TITLE-HERE</h3>
                    <p>CAPTION OR TEXT<a href='URL-LINK-HERE'>TEXT-LINK-HERE</a></p>
                </div> 
            </div>
        </div>
    </div>
</li>
</ul>
</div>
</div>

You can replace them with text or go to their links associated changing what marked red for their own data

To change the background images of each circle will get the format of your choice 220px by 220 px and substitute the following fields marked in red

.ch-img-1 {
background-image: url("https://lh5.googleusercontent.com/-BSmF0FcY_AU/UOhwc36pn2I/AAAAAAAACGA/N49F-baWGL4/s220/casa_rossa_naif.jpg");
}
.ch-img-2 {
background-image: url("https://lh5.googleusercontent.com/-kzxNoIa5gZA/UOhwf7-BtzI/AAAAAAAACGI/TBbIArDIc4s/s220/gallo_naif.jpg");
}
.ch-img-3 {
background-image: url("https://lh3.googleusercontent.com/-cT-o7qh2f30/UNfMavdhY4I/AAAAAAAAB_E/x_CUh_fVBgE/s220/grande_albero_naif.jpg");
}


4-Numeric paging is included for which it must comply with the following:

The figure marked in red must match the number of post to display per page. (see Desktop-Settings-Format-X Show up post on the main page)

The figure marked in green corresponds to the number of pages to be made and you will look like a larger or smaller number of buttons in the footer.

<!--Page Navigation Starts-->
<script type='text/javascript'>
var pageCount=3;
var displayPageNum=3;
var upPageWord =&#39;&#171;&#39;;
var downPageWord =&#39;&#187;&#39;;
</script>
<script src='http://dl.dropbox.com/u/14895124/Planocreativo/js/pagenavigation-blogger.js' type='text/javascript'/>
<!--Page Navigation Ends-->

Java files are provided for you to shelter-in your own server.

5 - This template comes ready to extend any presentation to a customized size. The layout widget can now be expanded to showcase it more. You can change the size by changing the width and length values ​​marked in red in this code.

.slideshow-container {
 width: 250px !important;
 height: 140px !important;
}

6 - Finally the file comes with our OPINTEMPLATES logo as favicon (the little symbol on the top legüetas in browsers) To place your election to replace the code in red by the direction of an image of 16px by size 16px represent you and to your liking.

<link href='http://3.bp.blogspot.com/-agfk_XSODnE/TWMxGtGQxXI/AAAAAAAAAFg/jk6TtOf2Qug/s1600/opt.png' rel='shortcut icon' type='image/x-icon'/>
<link href='http://3.bp.blogspot.com/-agfk_XSODnE/TWMxGtGQxXI/AAAAAAAAAFg/jk6TtOf2Qug/s1600/opt.png' rel='icon' type='image/x-icon'/>




0 comentarios:

Publicar un comentario

newer post older post Home