2 Template Kurang Kerjaan

Tonight I am going for another two templates for all the blogger friends. The template I created is long, the month of fasting time yesterday, was again a busy time fitting committee work so it would only now had time to publish. Been a while, so about a month if not mistaken I do not share the template for blogger friends. My plan was to make a blogger template to number about one hundred, after that I think to decide to try to create a theme for WordPress, yeah it's still just a plan of its realization depends on how the later course, because making a theme for WordPress in addition to need knowledge of script code that is more, well it takes a lot of expenses, such as must have their own domain and hosting with a large capacity.

Both of these templates have the same header and navigation just different colors, for which a template-type magazine and the other two column template, more simple and not too difficult to install. Well just, following both the template:

Johny Sompret Banget

banget


If you want to keep all the javascript that exist in this template please click the download link below:


This template-type magazine, a lot of features that I put on this template. Not too difficult to install, especially if you've tebiasa with artificial template I will be very easy to understand. To further simplify the installation this widget on notice template layout screenshot below:


I deliberately use the Old Blogger Interface layout to facilitate all appearance, because if there is a new blogger layout scroll feature so it can not get to the bottom. Here's how the installation of the features that exist in this template:

Slider

Slider works on the template automatically displays the latest post, How to set it up, look at the column layout that I gave above posts slider. Then enter the following code into it:

<div id='featuredContent'>
<div id='slideshow'>
<div id='slideshowThumbs'>
<ul><script>    
document.write(" <script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script> </ul>
</div>
<div class='post' id='slideshowContent'>
<script>    
document.write(" <script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script></div>
</div>
<script type='text/javascript'>
$(function() {
$("#slideshowThumbs ul").tabs("#slideshowContent > div", {
effect: 'fade',
fadeOutSpeed: 1000,
rotate: true
}).slideshow({
clickable: true,
autoplay: true,
interval: 3000
});
});
</script>
<div class='clear'>
</div>
</div>

Tab View Widget per Label


Note the picture above, to change the title of the tab (diary, jazz and so on) find the following code in the Edit HTML:
Title1="DIARY";Title2="JAZZ";Title3="HEALTH";Title4="SPORT";Title5="COMEDY"
Having met the above article change blue with the title you want to display on the tab view widget category.

While to fill the widget with the label, still in Edit HTML find the following code (do not forget to tick the expand widget templates):
<div class='tabber' id='tab1'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/sport?max-results=&quot;+numposts9+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts9\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='tabber' id='tab2'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/lifestyle?max-results=&quot;+numposts9+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts9\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='tabber' id='tab3'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/economics?max-results=&quot;+numposts9+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts9\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='tabber' id='tab4'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/diary?max-results=&quot;+numposts9+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts9\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='tabber' id='tab5'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/health?max-results=&quot;+numposts9+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts9\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='clear'>
</div>

Red writing above is fifth on the label that I enter this category tabber widget, you simply replace it with your label and adjust the view tab titles that have been made​​.
Widget Label
Are included in the label widget in this template layout is: Label 1, Label 2, 4 Labels, 4 Labels, Label 5 and Video Category. You can just enter the name or type a label that you have created on the box. Like the example shown below:
Johny Woods
Widget Subscribe me
It is located on the right sidebar at the top, still in the layout and then select the HTML / Javascript and enter the following code in it:
<style type='text/css'>
.social a{color: #6e6e6e;font: bold 12px Calibri,Helvetica, Arial, sans-serif;text-decoration: none;padding: 3px 5px 2px;position: relative;display: inline-block;text-shadow: 0 1px 0 #fff;-webkit-transition: border-color .218s;-moz-transition: border .218s;-o-transition: border-color .218s;transition: border-color .218s; background: #f3f3f3;border: solid 1px #dcdcdc;}
.social a:hover {color: #333;border-color: #999;-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);}
.social a:active{color:#000;border-color: #444;}
.sub-box{width:300px;background:();padding: 2px 5px 7px 2px;font-family:Droid Sans,Helvetica,Arial;}
.emailform{margin:16px 0 0; display:block; clear:both;}
.emailtext{margin:10px 0 0;background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9w-Az1rE8o08WWxegHtKl5cXo-QigyHA-Rd2QBMfE31tGlTzfRgPoQh-T17waK4q13_Dc275UWbaLATB_y502uHzuw781TXaJ8FZ2LllzSdPNZ1r21rdWf6kcMbAJz7_j865sVCyB-g/s1600/email.png) no-repeat scroll 4px center;padding:6px 5px 6px 34px;color:#444;font-weight:bold; text-decoration:none;border:1px solid #ccc;width:175px;}
.emailtext:hover{background: #f3f3f3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9w-Az1rE8o08WWxegHtKl5cXo-QigyHA-Rd2QBMfE31tGlTzfRgPoQh-T17waK4q13_Dc275UWbaLATB_y502uHzuw781TXaJ8FZ2LllzSdPNZ1r21rdWf6kcMbAJz7_j865sVCyB-g/s1600/email.png) no-repeat scroll 4px center;border-color:#999;}
.emailtext:focus{outline:none;}
.sub-button{color:#eee;font-weight:bold; text-decoration:none;padding:5px 10px; border:1px solid #666;cursor:pointer;background:#999}
.sub-button:hover{color:#444;border-color: #999;background:#ccc}
</style>
<center><div class="social" style="padding: 0pt 0pt 0pt 5px;">
<table><tbody><tr><td>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=Johny Woods' target='_blank'><img alt='newsletters' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6J53yg7DSYNzBSDbM2jLqUz3XUQl84nVuXLf0cxW10av9B15H4xetzrsOeWGgyvkL0AP8bs8OV5hTi4gj1wKZ4eRaMetUHCjUPD-Ida7MboC_GybI_aSp4gDop4T39RDstL6DJmQgWQ/s1600/mail.png" border="0" title='newsletters'/></a> </td>
<td> <a href='http://feeds.feedburner.com/Johny Woods' target='_blank'><img alt='rss' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1aD1V7mnwhb4jy6O7KfcQUFgLOwb_Gu6uDtf4IvVZaEuAPLkIA-XuaDRqokNeShlArEy_1UUMfxPfIICcp4mF17Jz9L4l_na59LtXWRVhrA6kBzGiGrNieq2Rg42PrVgPrfJ4bq0ofg/s1600/rss.png" border="0" title='rss'/></a> </td>
<td> <a href='http://twitter.com/Johny Woods' target='_blank'><img alt='twitter' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQCBYL6ozWDkkmqqW1nXiftMQL2DjT64LcnNuaTzJ5Ng5L0svIxw2zuICP3RQ2JgscuhFZtEnN_vElRDhyyIP_-V9hShoUgdHAnLWZxLz4Awiwi_K1Gq5BKoJDuRpyjUQ1_PMhvS0Gkw/s1600/twitter.png"  border="0" title='twitter'/></a> </td>
<td> <a href='http://www.facebook.com/Johny Woods' target='_blank'><img alt='facebook' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKk1gTrb6nFsaN5Sn57Dr_6xjzZ0r9iamgOIgOokI0NT_pdqVIHpJt5KWEsMRKOsPp4jfkFJ0LOIU6Yc_Pvz97OjECv1hPkG5EbJEJJtUtdemVYzFRZKudBRutAYxO02E-Y_a8yxVkjw/s1600/facebook.png"  border="0" title='facebook'/></a> </td>
<td> <a href='http://www.youtube.com/maskoli' target='_blank'><img alt=' youtube' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN-k5HC_kCHB45rmL5gnQohRv6oe67nhyphenhyphen543ku6H_dOtWoa9DqiLLERyTx5AzDdClh53eIQo1CyxJIOVZ1k87HCuBZngrDgjEnGXMLkrvAmE0gm4XUapegzABa6akIeahtanDCjYA48w/s1600/youtube.png"  border="0" title='youtube'/></a>
</td></tr></tbody></table> </div></center>
<center>
<div class='sub-box'>
<div style="text-align: left; display: inline-block;">
<h8 style="display:block;font-family:'calibri';font-size:15px;font-weight:bold;">Subscribe via RSS Feed</h8>
<small><i>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.</i></small>
<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 type="hidden" value="Johny Woods" name="uri"/>
<input type="hidden" name="loc" value="fr_FR" />
<input type="text" 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;}" value="Enter your email..." name="email" class="emailtext" />
<input type="submit" class="sub-button" value="Enter" title='' alt='' />
</form></div></div></center>




Reply Comment
To activate the komantar reply to this template, change the template ID on this Blog on Edit HTML (do not forget to check expand widget templates): 6056708173853814595 after the meet change with your blog ID

Johny Ganteng Banget

Johny Ganteng Banget



For those of you who want to look like Johnny jeepers Banget template but with a simpler shape and lighter for sure, I also set up another template that you can use. This template is so named because it is adapted to make .... hehehehehe. In the template there are only two features that you need to be considered, namely:

Recent Post
Located on the top right sidebar, how her partner, then select the layout into HTML / Javascript and enter the following code into it:
  1. <style type='text/css'>
    #mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
    #terbaru{margin:0px}
    .mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
    .mas-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
    .mas-elemen h6,.mas-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
    .mas-elemen:hover{background-color:#c3c3c3}
    .mas-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
    #mas-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#141414 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjjCWiWPOnA7oNZN_jk5hjVJqtVxQzaCWEyU4YPquKqkgNekHsGcN5TrwH9N57iWgcRGz6FvllZDC-1RSCAzrtOia6WnesOgqtbxDFH_7v1hj1eu01o4PpRth8q3O89YHPnEVTRqTDyQ/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
    #mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
    #mas-navigasifeed:hover{background-color:#c3c3c3}
    #mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
    #mas-navigasifeed span{padding:5px 10px}
    #mas-navigasifeed .next{float:right}
    #mas-navigasifeed .previous{float:left}
    #mas-navigasifeed .home{text-align:center}
    #mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}
    </style>
    <script type='text/javascript'>
    //<![CDATA[
    var numfeed = 5;
    var startfeed = 0;
    var urlblog = "http://johny-gantengbanget.blogspot.com/";
    var charac = 100;
    var urlprevious, urlnext;

    function Johny Woodsfeed(johny,banget){
    var showfeed = johny.split("<");
    for(var i=0;i<showfeed.length;i++){
    if(showfeed[i].indexOf(">")!=-1){
    showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
    }
    }
    showfeed =  showfeed.join("");
    showfeed = showfeed.substring(0,banget-1);
    return showfeed;
    }
    function showterbaru(json) {
    var entry, posttitle, posturl, postimg, postcontent;
    var showblogfeed = "";
    urlprevious = "";
    urlnext = "";
    for (var k = 0; k < json.feed.link.length; k++) {
    if (json.feed.link[k].rel == 'previous') {
    urlprevious = json.feed.link[k].href;
    }
    if (json.feed.link[k].rel == 'next') {
    urlnext = json.feed.link[k].href;
    }
    }
    for (var i = 0; i < numfeed; i++) {
    if (i == json.feed.entry.length) { break; }
    entry = json.feed.entry[i];
    posttitle = entry.title.$t;
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    posturl = entry.link[k].href;
    break;
    }
    }
    if ("content" in entry) {
    postcontent = entry.content.$t;
    } else if ("summary" in entry) {
    postcontent = entry.summary.$t;
    } else {
    postcontent = "";
    }
    if ("media$thumbnail" in entry) {
    postimg = entry.media$thumbnail.url;
    } else {
    postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigq4_yakXZxNxMGrG0UlxA5wt1kLWxRZqcTxHDm3ftn6qKaXCpvhPjgtMO7i1SkBCugmz4ha24RhsaL6o60f1R1-RQvsjBk_GbLgo_S37_72-lAiJvX0qxhdsToWTxTHlWvLi-c3RDIQ/s1600/no+image.jpg";
    }
    showblogfeed += "<div class='mas-elemen'>";
    showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
    showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
    showblogfeed += "<p>" + Johny Woodsfeed(postcontent,charac) + "...</p>";
    showblogfeed += "</div>";
    }
    document.getElementById("terbaru").innerHTML = showblogfeed;
    showblogfeed = "";
    if(urlprevious) {
    showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";
    } else {
    showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
    }
    if(urlnext) {
    showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";
    } else {
    showblogfeed += "<span class='noactived next'>Next &#9658;</span>";
    }
    showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
    document.getElementById("mas-navigasifeed").innerHTML = showblogfeed;
    }

    function navigasifeed(url){
    var p, parameter;
    if(url==-1) {
    p = urlprevious.indexOf("?");
    parameter = urlprevious.substring(p);
    } else if (url==1) {
    p = urlnext.indexOf("?");
    parameter = urlnext.substring(p);
    } else {
    parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
    }
    parameter += "&callback=showterbaru";
    incluirscript(parameter);
    }
    function incluirscript(parameter) {
    if(startfeed==1) {removerscript();}
    document.getElementById("terbaru").innerHTML = "<div id='mas-loading'></div>";
    document.getElementById("mas-navigasifeed").innerHTML = "";
    var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
    var terbaru = document.createElement('script');
    terbaru.setAttribute('type', 'text/javascript');
    terbaru.setAttribute('src', archievefeed);
    terbaru.setAttribute('id', 'MASLABEL');
    document.getElementsByTagName('head')[0].appendChild(terbaru);
    startfeed = 1;
    }
    function removerscript() {
    var elemen = document.getElementById("MASLABEL");
    var parent = elemen.parentNode;
    parent.removeChild(elemen);
    }
    onload=function() { navigasifeed(0); }
    //]]>
    </script>
    <div id="terbaru"></div>
    <div id="mas-navigasifeed"

Reply Comment
To activate the komantar reply to this template, change the template ID on this Blog on Edit HTML (do not forget to check expand widget templates): 149656394876047094 after the meet change with your blog ID.

That was enough to do two templates that I share this night with occasional sleepy, I share with all friends of bloggers around the world for free, please use the download or if you are interested. If there is anything else about the two templates above are not clear, please leave a comment, I did my best to answer. Final word luck hopefully useful



Posted by Dexcuit at 1:18:00 PM No comments :

No comments :

Post a Comment

Subscribe to: Post Comments ( Atom )