3 Color Options for Storage Johny Template

Posted by : Unknown Wednesday, 3 September 2014

Previously I am sorry can not answer incoming comments either via email or through the comment box on this blog, due to health conditions that do not want to compromise. From some of the comments that come in on Johny Storage article templates, there are some friends who requested to be made with different color versions. This time I will give three alternative colors for the template Johny Storage, which is dark (dominant black), blue and red. Here I only added 2 categories feature automatically extends, for the other features remain the same.

Johny Storage Dark

Demo | Download

This template dominant black and blue, exactly the same way with the installation of Storage Johny on my previous article. I will repeat again here

News Ticker or news headlines located above the header. To change the headline of your blog go to Edit HTML (use control + F to shorten), find the URL http://johny-storage.blogspot.com. After the meet change with your blog URL. Likewise, the search box or search box search URL http://johny-storage.blogspot.com replace with your blog URL.
The second is an email subscription box, located just above the image slider. To change the email subscription to 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('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/htbgh', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><input id='subbox' name='email' onblur='if (this.value == '') {this.value = 'Enter your email address...';}' onfocus='if (this.value == 'Enter your email address...') {this.value = '';}' type='text' value='Enter your email address...'/><input name='uri' type='hidden' value='blogspot/htbgh'/><input name='loc' type='hidden' value='en_US'/><input id='subbutton' type='submit' value='Enter'/></form>
Description:
Blue color: replace with your feed address.

Installation Widget
Before getting into the widget installation, you just have layout structure contained in the template Johny Storage below (ie no additional widgets Label Label 7 and 8 located under the blog post):

To display the slider, go to layout and click on the edit 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/-/sport?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/-/sport?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>
Description:Note the blue writing above, it is a label that I put on the slider. Please change as you wish. And red is the color information in the form of the speed slider slider, mouseover effects, etc., should not be included. For more details you can read the tutorial here to make the slider.
Now for the label with the label 1 to 8 as the layout above, is very easy. You just type / enter the desired label into the box. Note the image below:

Description:Replace news with your label, and change the title of the widget (label 1) with the title in accordance with the label.
Now we are heading in the sidebar tabber is located on the right. There are three tabber there, ie recent post, popular post and comment. For recent post column put the following code into it:
<ul>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts5+"&orderby=published&alt=json-in-script&callback=showrecentposts6\"><\/script>");
</script>
</ul>
To post you stayed popular into the layout and then select the widget popular post, please post there how you want to display. And for a recent comment or your comment please read the tutorial here. The third sidebar tabber should you change as you wish, it is located in the second row right sidebar.
Carousel slider located on the footer works automatically displays your latest article there. So here you do not need to change or add the script code again, but if you want to display per category in the slider please read the tutorial to make the Carousel slider here.
Special to Dark Storage Johny. create a twitter widget enter the code in the box below HTML / Javascript:
<div style="background:#cc0000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjntnjxX4kelG_uPEW6AY-bNxHnNeiVoGCoZD1wdSsHcRAn62By0TYMFUWpXFz_VKsmql9xszBThNSPJsdTes7K9EzehWznycsLF6FFqGw2efyCIfZRTjLWsgbjgrRv-D1YnSiVaj4Famc/s1600/tweet+2.png) no-repeat;padding-top:46px;padding-left:10px">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 10,
interval: 3000,
width: 280,
height: 122,
theme: {
shell: {
background: 'transparent',
color: '#aeaeae'
},
tweets: {
background: 'transparent',
color: '#aeaeae',
links: '#5193f0'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
behavior: 'default'
}
}).render().setUser('Johny Woods').start();
</script>
</div>
Replace Johnny Woods with your twitter username.