S2P Deadly Template


This template is all completely automatic. You just enter the label and script code in the box HTML / Javascript then there are the features on this template will appear automatically. Immediately, I will explain one by one to use this template:
I start at the top, News Ticker, or news headlines as described above header. To change the headline of your blog go to Edit HTML (use control + F to shorten), find the URL http://tempolates.blogspot.com. Having met the change with your blog URL. Similarly, the search box or search box search URL http://tempolates.blogspot.com replace with your blog URL.
The second is a subscription e-mail box, located just above the image slider. To change your email subscription, this code in the Edit HTML (do not forget to check the box expand widget templates):
<form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=blogspot/tempo&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input id='subbox' name='email' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Enter your email address...&apos;;}' onfocus='if (this.value == &apos;Enter your email address...&apos;) {this.value = &apos;&apos;;}' type='text' value='Enter your email address...'/><input name='uri' type='hidden' value='blogspot/tempo'/><input name='loc' type='hidden' value='en_US'/><input id='subbutton' type='submit' value='Enter'/></form>
         Description: 
         The red color: replace with your feed address.


Installation of Widget

Before getting into the installation of the widget, you just look at the structure contained in the template layout Master piece below:



  • To display the slider, go to edit layout and then click on the box HTML / Javascript. Enter the following code into it.

<div id='featuredContent'>
<div class='sliderwrapper' id='featured-slider'>
<script>
document.write("<script src=\"/feeds/posts/default/-/temp?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts3\"><\/script>");
</script>
</div>
<div id='paginate-featured-slider'>
<ul>
<script>
document.write("<script src=\"/feeds/posts/default/-/temp?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
</script>
</ul>
<div class='clear'></div>
</div>
<script type='text/javascript'>
featuredcontentslider.init({
id: "featured-slider", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax","path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.4], //[true/false, fadedegree]
autorotate: [true, 5000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
</div>
Note: the red text above, it is the label I put on a slider. You may change your preference. And green is the information in the form of the speed slider slider, mouseover effects and others, should not be included. For more details you can read the tutorial to make the slider here .
  • Now for the label with a label of 1 to 6 as in the layout above, it is very easy. You can just type / enter the desired label in the box. Note the picture below:
Description:
  • Replace news with your label, and change the title of the widget (label 1) with the appropriate title to the label.
  • Now we go on the tabber sidebar located on the right. There are three tabber there, ie recent post, popular posts and comment. In order to post recent column put the following code into it:

<ul>
<script>
document.write ("<script
</ Script>
</ Ul>
For popular post you go to layout then select widget popular posts, please select how many posts there you want to display.
  • In order to post comment column put the following code into it:
<style type="text/css">
ul.tb_recent_comments{list-style:none;margin:0;padding:0;}
.tb_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.tb_recent_comments li .avatarImage{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.tb_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
numComments  = 5,
showAvatar  = true,
avatarSize  = 50,
characters  = 60,
defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://johnytemplate.googlecode.com/files/recentcomment.js"></script>
<script type="text/javascript" src="http://tempolates.blogspot.com/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=5"></script>
Description:
The red color (5): the number of comments displayed
Color yellow (50): the size of the pixel avatar
Green color (60): The number of characters a comment 
The pink color: replace with your blog URL.

  • Last save, make a recent comment by avatar has been completed.
  •   Carousel slider located on the footer works automatically display your latest article there. So here you do not need to change or add the script code again.

0 comments:

Post a Comment