Trilogy Johny Template, Free Templates Three at Once

Today I will be a variety of templates to friends blogger templates all three at once, with three models of different content but still within the same color composition, namely white and blue. Deliberately created to meet the demand of three blogger friends via email and hopefully pleasing. The third template in the header and footer is almost the same. with a combination of blue and white with a little gray added to the look. Well just the following three templates:

Johny Papers Magazine

johny papers magazine


The first template I design mainly for blogs that have content for the news, and like my other magazine template feature no static page or a static page. Way of fitting the existing widgets in this template are:
  1. Latest Post
    It's on the left, this feature automatically, meaning that if you make a post for the article that will appear automatically on the latest post. Setting up to be like in the demo template as follows (new blogger interface):In the dashboard select settings and then click on the formatting and language then select only the timestamp format of hours, because the width of the timestamp on my latest post to display clock settings (see demo). To set the number of posts to be shown still to settings, select the post and comment >> show at most select how many posts that will be shown in the latest post.
  2. Slider
    To change the image on the slider, locate the following code:

        
    numposts1 = 7;
        
    label1 = "health";

     
    Description:The number 7 is the number of the image displayed on the slider, you can change it according to your taste. health is a label or category is shown on the slider, you simply replace it with the label you want to appear on the slider (Remember the letters should be equal to the label you have created).

  3. Label 1, label 2 dan label 3
    It is located under the banner 468 x 69 and the twitter follow. To display the widget enter the following code on the layout >> add gadget choose HTML / Javasxript:
    <script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script>

    <script type="text/javascript" src="/feeds/posts/default/-/news?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

    <script type="text/javascript">
    function recentpostslist(json) {
     document.write('<ul>');
     for (var i = 0; i < json.feed.entry.length; i++)
     {
        for (var j = 0; j < json.feed.entry[i].link.length; j++) {
          if (json.feed.entry[i].link[j].rel == 'alternate') {
            break;
          }
        }
    var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
    var entryTitle = json.feed.entry[i].title.$t;
    var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
     document.write(item);
     }
     document.write('</ul>');
     }
    </script>
    <script src="http://johnyportal2.blogspot.com/feeds/posts/summary/-/news?max-results=5&alt=json-in-script&callback=recentpostslist"></script>
    <a href="http://johnyportal2.blogspot.com/search/label/news" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category &#187;</a>
    Description:Blue: is a label or category showing on the widget. You can replace it with the label you adjust as needed.Red: Replace URL with the URL of your blog. 
  4. Labels and labels 4 5
    Enter the code below:
    <script type="text/javascript">
    var numposts = 4;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;
    </script>
    <script src="/feeds/posts/default/-/serba serbi?orderby=updated&alt=json-in-script&callback=labelthumbs" type="text/javascript">
    </script>
    <a href="http://test-Johny Woods.blogspot.com/search/label/serba serbi" style="float:right;font:normal 10px Arial;padding:5px 0;">More on this category</a>
    Red: label or category is showing on the widget. You can replace it with the label you adjust as needed.Blue: Replace URL with the URL of your blog.
  5. Tab view menu
    It is located on the upper right sidebar, you just make 4 widget you want to install will automatically be tabber sidebar, I recommend to be given the title of the widget.
  6. Twitter Widget
    To create a twitter widget like on the demo enter the code in the box below HTML / Javascript:
    <div style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikxneiTOAhvS8EJSF-MUe4f1O-qdNfTtmOZrlvWSGq3c63rfz8M-e2prX4Gt4vmjzoXuznpvJFxxn3bJL0tZDV25aEalTmldfLYETMvJIgEvie3GEBNk6y4FwLC3oql06qHBf4cMi6mTc/s1600/tweet.png) no-repeat;padding-top:45px;padding-left:8px">
    <script src="http://widgets.twimg.com/j/2/widget.js"></script>
    <script>
    new TWTR.Widget({
    version: 2,
    type: 'profile',
    rpp: 10,
    interval: 3000,
    width: 285,
    height: 123,
    theme: {
    shell: {
    background: 'transparent',
    color: '#000000'
    },
    tweets: {
    background: 'transparent',
    color: '#000000',
    links: '#135a9e'
    }
    },
    features: {
    scrollbar: false,
    loop: true,
    live: true,
    hashtags: true,
    timestamp: true,
    avatars: true,
    behavior: 'default'
    }
    }).render().setUser('Johny Woods').start();
    </script>
    </div>
    Ganti Johny Woods dengan twitter username anda.
  7. To replace existing ads or adsense under post in addition to related articles on Edit HTML (check expand widget templates) find the following code:
    <div id="banner-ads">
    <script type='text/javascript'><!--
    google_ad_client = "ca-pub-9608487840337104";
    google_ad_host = "pub-1556223355139109";
    /* johny samping */
    google_ad_slot = "1127342458";
    google_ad_width = 300;
    google_ad_height = 250;
    //-->
    </script>
    <script src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'>
    </script>
    Replace Johnny Woods with your twitter username.

Gallery Johny

gallery johny template



The second of the trilogy template template's my name Johny Johny Gallery, as the name suggests this template specifically for blogs that contain templates and theme gallery. This template also does not feature any static page (static page), there are no special features contained on this template that needs to be addressed is how to make a post in order as shown in the demo blog.
  1. To make sure you are in a position to post HTML (not compose). Below is an example in creating a post on this template Johny Gallery:
    <div align="center">
    </div>
    <div class="badge sblogger">
    </div>
    <img class="latest_img" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFq45gqj1sICnZbWu6ScPKz9lRkMSuoqs6A3csEisXIiMwLJY1pjZ9ZkUru1SXry1X5v8nVjyY15HslkKYelEBksNw9xjpkF6odTPv6L_qkq3fCsaU2t4jPAhPS5Eu_Z92-Pi3K3UMaEs/s1600/Johny+Darkmovie.jpg" width="310" />
    <div class="fullpost">
    <ul class="postbuttons">
    <li><a class="livedemo" href="http://johny-darkmovie.blogspot.com/" rel="nofollow" target="_blank">Live Demo</a> </li>
    <li><a class="download" href="http://www.box.com/s/qjhv758fzmne8lt3xpa8" rel="nofollow" target="_blank">Download Theme</a></li>
    </ul>
    </div>
    <b>TEMPLATE FEATURES</b>
    Silahkan diisi deskripsi template atau terserah anda.........
    Note that I gave the script code above color: Green color: the picture is the URL that should be changed. After you upload the image insert image URL in the code is colored green.
        
    Blue: is a demo blog URL
        
    Red color: URL to download

  2. Menenampilkan widget to share and subscribe there on the upper right sidebar, enter the following code in the box HTML / Javascript:
    <style type="text/css">.Johny Woods{width:288px;float:left;margin:0 0 2px;padding:0 5px;}
    .Johny Woods .count{margin:0px;padding:10px 0px 0px 0;}
    .Johny Woods .subicons{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj41lNX2aQ6Ns7PjS9EhaLpgjY4uY_lUE-OmD4aPpd_St9zujblcwwdQqUGX_VfeZQkRpDwwfLW3TuItcPbnc0vgGeSTUOsyUlxXsg3XCXQv4zZs3e0wrFVRbvw1CkNkg812dzsaqZOoBQ/s1600/batas.png) repeat-x scroll bottom;margin:0px 0 0px 0;float:left;width:288px;font-family:Helvetica, Arial;font-size:12px;}.Johny Woods .subicons a{text-decoration:none;color:#333333;}.Johny Woods .subicons a:hover{text-decoration:underline;color:#333333;}.Johny Woods .subicons .rssicon{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlD412OmOWrHR1tpuPl-QKw5ALE8bD95t6RmN6wsN5lVDnhpdlK_tdEyF-41OY0EKqh4s2MbbYwQibmti5QcZtlWyOrdF3hvgk70Ef7_U2BlhdNcYoXhdyrZ47R-sSYcWtpoqbmpDDgkk/s1600/%255Bwww.gj37765.blogspot.com%255Drsssprite.png) no-repeat;background-position:0px 5px;min-width:2px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 28px;margin:0 0 0 5px;}.Johny Woods .subicons .googleicon{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlD412OmOWrHR1tpuPl-QKw5ALE8bD95t6RmN6wsN5lVDnhpdlK_tdEyF-41OY0EKqh4s2MbbYwQibmti5QcZtlWyOrdF3hvgk70Ef7_U2BlhdNcYoXhdyrZ47R-sSYcWtpoqbmpDDgkk/s1600/%255Bwww.gj37765.blogspot.com%255Drsssprite.png) no-repeat;background-position:0px -37px;min-width:2px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 28px;margin:0 0 0 5px;}.Johny Woods .subicons .fbicon{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlD412OmOWrHR1tpuPl-QKw5ALE8bD95t6RmN6wsN5lVDnhpdlK_tdEyF-41OY0EKqh4s2MbbYwQibmti5QcZtlWyOrdF3hvgk70Ef7_U2BlhdNcYoXhdyrZ47R-sSYcWtpoqbmpDDgkk/s1600/%255Bwww.gj37765.blogspot.com%255Drsssprite.png) no-repeat;background-position:0px -79px;min-width:20px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 28px;margin:0 0 0 5px;}.Johny Woods .subicons .twittericon{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlD412OmOWrHR1tpuPl-QKw5ALE8bD95t6RmN6wsN5lVDnhpdlK_tdEyF-41OY0EKqh4s2MbbYwQibmti5QcZtlWyOrdF3hvgk70Ef7_U2BlhdNcYoXhdyrZ47R-sSYcWtpoqbmpDDgkk/s1600/%255Bwww.gj37765.blogspot.com%255Drsssprite.png) no-repeat;background-position:0px -121px;min-width:20px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 7px 0px 28px;margin:0 0 0 5px;}.Johny Woods .emailsub{border-bottom:0px solid #e6e6e6;padding:15px 0 0px 0;float:left;width:100%;font-family:Helvetica, Arial;}.Johny Woods .emailsub .emailicon{background:url(http://www.fordfarmhouse.com/images/email.png) no-repeat 0 2px;float:left;padding:0px 20px 0px 50px;margin:0 5px;width:288px;line-height:20px;vertical-align:middle;font-size:14px;color:#333;}.Johny Woods .emailsub .emailupdatesform{margin:15px 5px 5px 5px;width:288px;float:left;}.Johny Woods .emailsub .emailupdatesform input.emailupdatesinput{background:#fff !important;float:left;border:1px solid #afafaf;padding:0px 8px 0px 8px;color:#a19999;font-size:12px;height:25px;width:185px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}.Johny Woods .emailsub .emailupdatesform input.joinemailupdates{/*linear-gradient*/background:-webkit-gradient(linear,left top,left bottom,color-stop(#b4c5fa,0),color-stop(#0f46fa,1));background:-webkit-linear-gradient(top,#b4c5fa 0%,#0f46fa 100%);background:-moz-linear-gradient(top,#b4c5fa 0%,#0f46fa 100%);background:-o-linear-gradient(top,#b4c5fa 0%,#0f46fa 100%);background:linear-gradient(top,#b4c5fa 0%,#0f46fa 100%);background:-webkit-gradient(linear,left top,left bottom,from(#567dfc),to(#0f46fa));border:1px solid #1143a8;text-transform:none;font:bold 12px arial;color:#fff;height:25px;padding:0 12px 0 12px;margin:0 0 0 5px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;cursor:pointer;}</style><div class="Johny Woods"><div class="subicons"><div class="rssicon">&nbsp;<a rel="nofollow" href="http://feeds.feedburner.com/Johny Woods" target="_blank">  RSS</a></div><div class="googleicon">&nbsp;<a href="https://plus.google.com/u/0/ID GOOGLE +" rel="author" target="_blank"> G+</a></div><div class="fbicon"> &nbsp;<a href="https://www.facebook.com/URL Facebook" target="_blank" rel="nofollow">FB</a></div><div class="twittericon">&nbsp;<a href="https://www.twitter.com/TWITTER USERNAME" target="_blank" rel="nofollow">Twitter</a></div></div><div class="emailsub"><div class="emailicon"><p style=" width:250px; color:#3A3A3A; font-size: 13px; font-weight: normal; font-family: Helvetica, Arial;  padding-right:5px; margin:0;">If you enjoyed this article subscribe to receive more great content from us</p></div><div class="emailupdatesform"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Johny Woods', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="Johny Woods" name="uri" type="hidden" /><input value="Submit" class="joinemailupdates" type="submit" /></form><div class="count"><a rel="nofollow" href="http://feeds.feedburner.com/Johny Woods"><img style="border:0" alt="" src="http://feeds.feedburner.com/%7Efc/Johny Woods?bg=aeaeae&amp;fg=000&amp;anim=1" height="26" width="88" /></a></div></div></div> </div>
    Description:I am writing in bold please print your ID and replace it with your username.Red paper (Johnny Woods) is a demo blog Feedburner ID, replace with your feedburner ID.

  3. To make popular posts like on the demo, go to layout >> add gadgets then select popular posts. Here you have to check only the thumbnail, snippets leave blank.
 Johny Soulmater

johny soulmater


The third template is very simple, which is on the right sidebar similar to Johny Papers Magazine. In the sidebar you can just enter the tabber 4 widget on the sidebar. Twitter widget for installation means the same as the above template Johny Papers Magazine. While to replace FeedBurner located under the post, find the below script code in HTML edit (do not forget to check expand widget templates):
<div class='subscribe'>
<p class='intro'>If you enjoyed this article just <a href='http://feeds.feedburner.com/JohnyTemplate' target='_blank' title='feedburner'>
<b>click here</b></a>, or subscribe to receive more great content just like it.</p>
<p class='feed'><a href='http://johnytemplate.blogspot.com/feeds/posts/default'>Subscribe via RSS Feed</a></p>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=JohnyTemplate&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='JohnyTemplate'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='botsub' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email&quot;;}' onfocus='if (this.value == &quot;Enter your email&quot;) {this.value = &quot;&quot;;}' type='text' value='Enter your email....'/>
<input id='botsubbutton' type='submit' value='Submit'/><br/>
<small>Your information will not be shared. Ever.</small>
</form>
</div>

Description:Blue color: replace with your feed address.Red color: replace with your URL.
That was three templates that I share this day, if there are less obvious in the installation of widgets please leave your message in the comments box below. Good luck and hopefully useful, sorry if the templates was less pleased because my ability to make a difference is still much the same template masters of other bloggers who've champ .... hehehehehehe

No comments :

No comments :

Post a Comment