miércoles, 30 de noviembre de 2011

Active Slider




Active Slider 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, blue, and gray makes this theme adorable. It is a crystal clear theme with some robust features.


Template Name: Active Slider 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 : Featured Slider , Links Circles Jquery, two columns, fixed width, tree columns at foot
Color :Blue, 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.

Ajustes:


0 - The Slider asset of this template is prepared to show a total of five post in string. You can repeat the section of the script to add more but we recommend that you do not load it can ralentizarce page.

In the template such as deliver, repeat the first five post and the data are taken from its source Feed RSS. Remember to have it enabled and unlocked.

You can modify the gadget to display, for example, that correspond to the post last month, ten back, or the number that you find interesting and practical.

To adapt the template look in the code (repeated five times) and modify it painted green for the tip of your blog (your URL).

I marked in red corresponds to the post previously shown

The yellow marked the post to be displayed in this step of the program.

The sequence must be correlated.


<script language='JavaScript'>
imgr = new Array();
imgr[0] = &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhynm7WoqgfMX4mfSADNamgmWpZIp5PrxY-OFXvuGj5aDB0dwBX4V7MnXXxJwyQBsU7Kxu4FZWn01KnkxhK0K0diKGvJ42V_B1DJYWkSKss6A_Mkh4WH2Jnbu_Mp7BQ0D2jxVf_VJiWp93Z/s1600/Have_Images_TEXT.png&quot;;
showRandomImg = true;
tablewidth = 940;
tableheight = 230;
cellspacing = 0;
borderColor = &quot;#&quot;;
bgTD = &quot;#12151c &quot;;
imgwidth = 400;
imgheight = 240;
fntsize = 26;
acolor = &quot;#fff&quot;;
aBold = true;
icon = &quot; &quot;;
text = &quot;Comments&quot;;
showPostDate = true;
summaryPost = 550;
summaryFontsize = 12;
summaryColor = &quot;#fff&quot;;
icon2 = &quot;  &quot;;
startposts = 0;
numposts = 1;
home_page = &quot;http://opintemplates-active-demo.blogspot.com/feeds/posts/default&quot;;
</script>



1 - You can modify the logo placed on any of your preference by changing the addresses marked in red. The image should have similar dimensions

#header {
padding:40px 0 0 500px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBHILG3xSi6XAbmW5VefvFc2AacjT8JculusxlYvuod8I6mp2BBRniMbKiJHiChiBY56Jpu30rxKen_sVOm5jQTY6Qic-jDjIBgu_bZ8fUbQOi4uCORTduhDuQXrDAR6h0iDo4YftEf1I/s100/blueorigin%252520.png)no-repeat;
position:absolute;
left:0;
height:78px;
top:45px;
}

2 - the blog title appears automatically as low relief without entering a given image. The logo can be changed easily. Also it can be replaced by an image written

To change the font color of the title place the HTML color code replacing that red


#header a {
color:#000;
text-decoration:none;
}


If you want to change the color of the description under the title replace the code in red
#header .description {
font-size:13px;
font-weight:bolder;
color:#000;
text-shadow:2px 2px 2px #333;
text-transform:uppercase;
}

3 - You can change the links in the menu bar searching and replacing these data by their choice.

<!-- begin top menu -->

<div class='clearfix' id='topMenuCont'>

<ul class='clearfix'>

<li><a class='home' expr:href='data:blog.homepageUrl'>
Home</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Posts RSS'>Posts RSS</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;' title='Comments RSS'>Comments RSS</a></li>
<li><a href='http://www.opintemplates.blogspot.com/' title='Blogger'>OPINTEMPLATES</a></li>

</ul>
</div>

<!-- end top menu -->


4 - They provide direct links to his Twitter, Facebook and to subscribe via RSS. You only need to enter your e-services in the fields marked in red. The address of your RSS feed is automatic.

<!-- social links -->
            <ul id='socialLinks'>


<li><a href='#' title='Twitter'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUvw0KO3z04NIzmIzB4HCYbHdoTktsAQdR2vTATX01uYGo1xPaALqyEjziruGvjeZPCNxO_btAS_XpuUUbLcKdRRWhNsvZNpPzAlF92zPoOZWAdqBmQzR_gPXHYeX0HsS-0r_nYzEhEOBr/'/></a></li>                               

<li><a href='#' title='Facebook'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4-CYbIhK0N8dSdL2z5_Mjrgb0a_WzrBMnZR5jBC3WoeE9a-yUgbalQxgp4fyQeNQK-8abV5vRNVLkPDm_0pJtPqBnzToLvBXo4vhFlKGs6oPrbikfK9qWwiR0o5MU9Xz10G2U9I9x1vPw/'/></a></li>              

<li><a class='rssTag' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Posts RSS'><img alt='Feeds' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl2WZ-jk62CZmhQRkDqvj-0_tKmc-kOhDhIB4sixDYwbItwkWEyfjmyGRqa9FqLyy7hHvNlEDExMV6pu6CK1EWoOnv8rQccScAqk4IpB_8j6tRRFmU9V-DY9eYrvFNi6bvfS96M5hredn2/'/></a></li>

            </ul>

<!-- end social links -->


5 - 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=5;
var displayPageNum=3;
var upPageWord =&#39;&#171;&#39;;
var downPageWord =&#39;&#187;&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v2.js' type='text/javascript'/>
<!--Page Navigation Ends-->

6 - 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 on this code.

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

7 - The comment area has a background image to the absence of Avatar and one for the case of anonymous commenter. The fields have been expanded to maximum comfort.

8 - The writing area has been extended to maximum comfort.

9 - If you have entered a post by default, it automatically leaves the page number and passed the estandart in this case much more attractive icons.


10 - has been enabled icons to share with the Google +1 for your readers to vote and promote.

11 - If the proposed minimum social networks blogguer not reach here you can modify or add your own icons accompanied with the corresponding link. You can also change the text by changing the sharing invitation in red text:


<!-- Social Sharing Icons -->

        <div class='social'>
       
<strong>Share this article:</strong>
               
<a href='javascript:(function(){TwitThisPop=window.open(%22http://twitthis.com/twit?url=%22+encodeURIComponent(location.href)+%22&amp;title=%22+((document.title)%20?%20encodeURIComponent(document.title.replace(/^s*|s*$/g,%27%27))%20:%20%22%22),%20%22TwitThisPop%22,%20%22width=600,%20height=500,%20location,%20status,%20scrollbars,%20resizable,%20dependent=yes%22);%20setTimeout(%22TwitThisPop.focus()%22,%20100);%20})()'><img alt='Tweet this!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBrF2ha0JCnuif-DLLd6hfS5NPIAZTAacSoViVf-vp53inOMH-F0VouS7az0vBeKRnOzf17LkXKpvL04Y1nHjjUnKbNuOQTvq_Dkd5BXexGebga8_V3nY08bEUpHy2fs5TjJCR0UTTqYfI/'/></a>               
               
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='StumbleUpon.'><img alt='StumbleUpon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTgoj8i6NaHs26xbQeNjJzVMfazJXXIy4IIDBY1HFPKcybBrc8nJ5FHcGjhByhTVTygFtgaHVul7gZcdwr36tiGg8NjY84LmZG5tmxXhTYxFrNqK_Rw3lQM0Ll3V3AVF40I3RpcvcI_ZZb/'/></a>
               
<a expr:href='&quot;http://digg.com/submit?phase=2url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Digg this!'><img alt='Digg This!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFhO_koEr0vQfLwyiW9sXsqSPmUr268cylywmznG607GR1bmDq-3cMHEER6VxNV-Y79Ye5xxOyXmaICrgXTtSVdSVBtO3RmuEahfO0Oc5mgHuXOMHwaLz6fdA1ipCalkLCRhd7_N9g6rbM/'/></a>               
               
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Bookmark on Delicious' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhThREBU06BPASvHmnslbyEwzKWva5FVZtmKvcifAdumABbb8EVTXQZ0nE_Wi4TXbm4tAhfiL8SkutDMsHsUxMlxicC0ocaBzgIj1gZ_HLlWBr1cXNIpxoCtlIzP4wxfUJXj0OyWqWBfy8H/'/></a>
               
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Facebook'><img alt='Share on Facebook' id='sharethis-last' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz686I0YmxMgr9hWtAZDllBQl9DDRXo540eOZWqwzr_ruV_DhxeI4cqKqZZdHwfJ-fDxLQFSgA4SMEweDNnF5DJOpetKk6IBRHwYEgxBEwF1wNWbL01WjmMvGFRGgYYVaVRI5SMsR3IEia/'/></a>
               
            </div>
       
        <!-- end Social Sharing Icons -->

12 - 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD7rtLA4JZPnk6TYaRb0YzjddbppcOQb8R2h_QcFlkyxPmYSVCbirATyJLk-jxFeNFgZud1AFSJ58VYZwVK-nywU8fW0HlZ24thQG2oGtomF00SJU51gIqVJfv7jteYL6Wv0NAJdoGVOU-/s1600/opt.png' rel='shortcut icon' type='image/x-icon'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD7rtLA4JZPnk6TYaRb0YzjddbppcOQb8R2h_QcFlkyxPmYSVCbirATyJLk-jxFeNFgZud1AFSJ58VYZwVK-nywU8fW0HlZ24thQG2oGtomF00SJU51gIqVJfv7jteYL6Wv0NAJdoGVOU-/s1600/opt.png' rel='icon' type='image/x-icon'/>
Listo. A disfrutarla.

0 comentarios:

Publicar un comentario

newer post older post Home