Tutorial Widget Johny Magazine Template

For those who are still confused how the installation of widgets contained in the template Johny Magazine, I will give a tutorial how to installation. Okay with it:

Installing Slideshow (upper left sidebar)
After you log in, then click the Layout menu >> Page Elements. After that select the Add a Gadget >> HTML / Javascript. Enter the code below at the top of the left sidebar:
<div id="gal1" class="img400">
<div class="h250"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZqb5Tnfrcfhy5uMhJ15-bdvGvARui6IUlj-0aRAz8IaSRT4dW1S4sMccvv45EdaIEq1xpsCKGgMeYkKNO2wh85VEe-dtof9aZ-kzWopXTodsozv9AY-KOawqUO7hoyttoh4yFsDD7dQ/s1600/Limitless-Movie-Review-Starring-Bradley-Cooper-Robert-De-Niro.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div style="margin-top:168px;" class="des_4"><strong>Entertainment </strong></div>
<div class="des_1 font16 c_white"><a href="http://johnymagazine.blogspot.com/2011/12/limitless-movie-review-starring-bradley.html"><strong>Limitless Movie Review, Starring Bradley Cooper & Robert De Niro </strong></a>
</div>
</div>
</div>

<div id="gal2" style="display:none;" class="img400">
<div class="h250"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEaDfw0eg5qgMTO_WEPZlp1xmLBBsYRt54P624mrvJA8Axax4KZzM-ksbXvsZKsyFPTPzZiIfMC-cfW_mrYZpd85_XOBxj5D54IHku3WhyKeG1SMUz2Gd6QH8EnEdt-bQh_QcNX-ApDQ/s1600/sucker-punch.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div style="margin-top:168px;" class="des_4"><strong>Entertainment</strong></div>
<div class="des_1 font16 c_white"><a href="http://johnymagazine.blogspot.com/2011/12/sucker-punch-2011-by-zack-snyder.html"><strong>Sucker Punch (2011) By Zack Snyder</strong></a>
</div>
</div>
</div>

<div id="gal3" style="display:none;" class="img400">
<div class="h250"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK7tEcanLisYUcUIaYTsxuUOSOZMDvBdkcmczKLH6tWgSV_rusctKhyVt925fbcTTq4X5aqIxTzxJtPP3U76MpKnb8jQ66g2iKirWAzFuMz0hKSPrNHGPEFdmJubhzVB1isUCb99MWCQ/s1600/Loris-Capirossi-Retires.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div style="margin-top:168px;" class="des_4"><strong>Sport</strong></div>
<div class="des_1 font16 c_white"><a href="http://johnymagazine.blogspot.com/2011/12/loris-capirossi-retires-riders-pay.html"><strong>Loris Capirossi Retires, Riders Pay Tribute</strong></a>
</div>
</div>
</div>

<div id="gal4" style="display:none;" class="img400">
<div class="h250"><img alt="" src="http://3.bp.blogspot.com/-G0uxBYje1l8/TwBmKFae9aI/AAAAAAAAAS0/zYXE2GFSDdg/s1600/Atheris-matildae.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div style="margin-top:168px;" class="des_4"><strong>News World</strong></div>
<div class="des_1 font16 c_white"><a href="http://johnymagazine.blogspot.com/2012/01/new-large-horned-viper-discovered-but.html"><strong>New large horned viper discovered, but biologists keep location quiet</strong></a>
</div>
</div>
</div>

<div id="gal5" style="display:none;" class="img400">
<div class="h250"><img alt="" src="http://2.bp.blogspot.com/-YpiHF_g2GAo/TwBiXmHRQtI/AAAAAAAAARs/maMVbbezvIw/s1600/Libyan+rebel+chief.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div style="margin-top:168px;" class="des_4"><strong>News Today</strong></div>
<div class="des_1 font16 c_white"><a href="http://johnymagazine.blogspot.com/2012/01/libyan-rebel-chief-warns-egypt-over-pro.html"><strong>Libyan rebel chief warns Egypt over pro-Gaddafi TV </strong></a>
</div>
</div>
</div>

<div style="height:250px; margin-top:-250px;"><div id="galtabs" class="page_hl pd_5"><a href="#" rel="gal1">1</a> <a href="#" rel="gal2">2</a> <a href="#" rel="gal3">3</a> <a href="#" rel="gal4">4</a> <a href="#" rel="gal5">5</a><div class="clearit"></div>
<div class="clearit pb_10"></div>
<script type="text/javascript">
var myheads=new ddtabcontent("galtabs");myheads.setpersist(false);myheads.setselectedClassTarget("link");myheads.init(5000)
</script></div></div>
Replace all image URL and title to the url you want to show in a slideshow
Installing Popular Post Widget
I believe we have much to set it up the way, for those who are still confused click menu Layout >> Page Elements. After that select the Add a Gadget >> Popular Post widget that is on the third line. Please create their own in determining the number of posts to be displayed.
Installing Random Post
Steps as above, after you select HTML / Javascript. Place the following code in it:
<script type="text/javascript">
    var randarray = new Array();var l=0;var flag;
    var numofpost=4;function randomposts(json){
    var total = parseInt(json.feed.openSearch$totalResults.$t,10);
    for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
    if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
    for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
    for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
    document.write(item);}}
    }document.write('</ul>');}
    </script>
    <script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>
For number 4 I love the color red is the number of random post is displayed, please replace your liking.
Installing Tabber Tabs Widget (Top Right Sidebar)
Before installing this you should see the template layout structure, then add three widgets that you want to show in this Tabber menu. For example I took from Johny Magazine template below the picture layout tabber:

From the picture above, the widget will be displayed in the tabber is the category Entertainment, Sport and World News. You must enter script code to install these categories, for example now you want to put on tabber 1 is the category Entertainment, enter the code in the box below into the HTML / Javascript:
Change entertainment that I love the color blue with labels / categories you want. Notice I circled numbers from the image above, the number 4 is the number of categories that are displayed and 60 is the number of characters displayed in the title, for more details you please read the tutorial how to install certain categories with thumbnails. Anyway do not forget to be given the title of the widget, for example: Entertainment

Then fill also tabber tabber 2 and 3, the same steps as above to enter the entertainment category. but you can also fill up with more widgets to your liking. Once everything is loaded, re-select add gadget continues HTML / Javascript enter the code below at the top position (above the third tabber, see figure 2) remember not to be given the title, leave it blank:
<style type="text/css">
.blogtabs {padding: 0px !important;border: 0 solid #bbb;}
.blogtabs h2 {float: left;margin: 0 7px 3px 0;font-size: 12px;color:#CECECF;padding: 5px 8px;overflow: hidden;position: relative;background: #3b3b3b;cursor:pointer;border: 1px solid #9E9D9D;}
html .blogtabs h2.active {color:#727171;background: #fff;}
.blogtabs .widget-content {padding:1px 10px 10px 5px;background: #fff;clear:both;margin:0;}
.btab, #showtabs {display:none;}
</style>
<script type="text/javascript" src="http://johnytemplate.googlecode.com/files/min.js"></script>
<script type="text/javascript" src="http://johnytemplate.googlecode.com/files/jtabber.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#showtabs').simpleBlogTab ({organictabs: 3});
});
</script>
<div id="showtabs"></div>
The last step click on save, and see the results.

Thus had the installation tutorial widgets contained in the template Johny Magazine. For those who read this article directly without knowing where the template in question please read Johny Magazine, Magazine Templates for Blog News. Good luck and hopefully useful for those who are still confused, please fill in the comment box below.

Posted by Dexcuit at 1:59:00 AM No comments :

Tutorial Widget Johny Magazine Template

No comments :

Post a Comment

Labels

Popular Posts