Template Blogger Super Genit
Johny Prett
This template has a post on the front page look similar to Johny Jijay, you could say this template is light version of Johny Jijay. The difference is only on the slider and sidebar that I appear on the homepage. The template I created specifically for blogs that have content gallery, but it's up to what you want to wear.
SLIDER
As well Jijay template Johny, Johny prett also has two sliders. To replace the existing slider in homepage, find the following code in the Edit HTML (do not forget to check expand widget templates):
<div id='sliderTimer-wrapper'>
<ul id='sliderTimer-header'/>
<ul id='sliderTimer'>
<li class='sliderTimer-item active' id='mas-1' ref='Box Office' style='background: none'>
<script>
document.write("<script src=\"/feeds/posts/default/-/box office?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></li>
<li class='sliderTimer-item active' id='mas-2' ref='Best Seller' style='background: none'>
<script>
document.write("<script src=\"/feeds/posts/default/-/best seller?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></li>
<li class='sliderTimer-item active' id='mas-3' ref='Watch Online' style='background: none'>
<script>
document.write("<script src=\"/feeds/posts/default/-/watch?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></li>
<li class='sliderTimer-item active' id='mas-4' ref='Horror Movie' style='background: none'>
<script>
document.write("<script src=\"/feeds/posts/default/-/horror?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></li>
<li class='sliderTimer-item active' id='mas-5' ref='Cartoon Kids' style='background: none'>
<script>
document.write("<script src=\"/feeds/posts/default/-/cartoon?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></li>
<li class='sliderTimer-item active' id='mas-6' ref='Comedy' style='background: none'>
<script>
document.write("<script src=\"/feeds/posts/default/-/comedy?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></li>
</ul>
</div>
<ul id='sliderTimer-header'/>
<ul id='sliderTimer'>
<li class='sliderTimer-item active' id='mas-1' ref='Box Office' style='background: none'>
<script>
document.write("<script src=\"/feeds/posts/default/-/box office?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></li>
<li class='sliderTimer-item active' id='mas-2' ref='Best Seller' style='background: none'>
<script>
document.write("<script src=\"/feeds/posts/default/-/best seller?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></li>
<li class='sliderTimer-item active' id='mas-3' ref='Watch Online' style='background: none'>
<script>
document.write("<script src=\"/feeds/posts/default/-/watch?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></li>
<li class='sliderTimer-item active' id='mas-4' ref='Horror Movie' style='background: none'>
<script>
document.write("<script src=\"/feeds/posts/default/-/horror?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></li>
<li class='sliderTimer-item active' id='mas-5' ref='Cartoon Kids' style='background: none'>
<script>
document.write("<script src=\"/feeds/posts/default/-/cartoon?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></li>
<li class='sliderTimer-item active' id='mas-6' ref='Comedy' style='background: none'>
<script>
document.write("<script src=\"/feeds/posts/default/-/comedy?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></li>
</ul>
</div>
Code blue is the title bar on the slider timer, and red is the color of a label or category is displayed on the slider. Please change the title and the label that you want.
Johny Genit
This responsive template I created specifically for bloggers impress a girl because it looks feminine, but if there's a guy you want to use this blogger templates, yes please wrote. This template is only a modification of my previous template prett Johny, Johny Genit difference in post page only contained in 2 columns, the column post and right sidebar, for more details please see the screenshot below:
SLIDER
Slider which I put on this template is Camera Slider (click to see original slider) made Manuel Masia of www.pixedelic.com. Actually many color choices slider pagination on this, because if fitted will all incriminating loading, I just chose the color green and eliminating the only option for the other colors. How to install this slider very easy, find this code in the Edit HTML:
blogURL: 'http://johny-genit.blogspot.com/',
Replace yellow above URL, the URL of your blog.
Author Box
I fill this template with Author Box located under each post, to replace with your data, please find this code in the Edit HTML (do not forget to check expand widget templates):
<div class='masadmin'>
<h3>Written by : <a href='http://www.blogspot-store.info/'>Your Name</a> - Describe about you </h3>
<div class='isi'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0erqoX7QcVRA7K0p__1DN7RriBt6nFA-trxck1cLneN4lcI-h15iklhorQ7cZKxnvhcojobBEU-ANTyJKlHIHZTdHPdRUbER9TCrSuAkVfpziq8FLPrB5UXcHX5Bk51q2FCeJkW7Vxw/s220/Johny Woods.jpg'/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id libero non erat fermentum varius eget at elit. Suspendisse vel mattis diam. Ut sed dui in lectus hendrerit interdum nec ac neque. Praesent a metus eget augue lacinia accumsan ullamcorper sit amet tellus.
<p><span style='float:left;text-align:left;'>
Join Me On: <a href='http://www.facebook.com/you facebook' rel='nofollow'>Facebook</a> | <a href='http://www.twitter.com/your twitter' rel='nofollow'>Twitter</a> | <a href='https://plus.google.com/your G+/' rel='nofollow'>Google Plus</a></span>
<span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://www.blogspot-store.info/' target='_blank'>:: Thank you for visiting ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
<h3>Written by : <a href='http://www.blogspot-store.info/'>Your Name</a> - Describe about you </h3>
<div class='isi'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0erqoX7QcVRA7K0p__1DN7RriBt6nFA-trxck1cLneN4lcI-h15iklhorQ7cZKxnvhcojobBEU-ANTyJKlHIHZTdHPdRUbER9TCrSuAkVfpziq8FLPrB5UXcHX5Bk51q2FCeJkW7Vxw/s220/Johny Woods.jpg'/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id libero non erat fermentum varius eget at elit. Suspendisse vel mattis diam. Ut sed dui in lectus hendrerit interdum nec ac neque. Praesent a metus eget augue lacinia accumsan ullamcorper sit amet tellus.
<p><span style='float:left;text-align:left;'>
Join Me On: <a href='http://www.facebook.com/you facebook' rel='nofollow'>Facebook</a> | <a href='http://www.twitter.com/your twitter' rel='nofollow'>Twitter</a> | <a href='https://plus.google.com/your G+/' rel='nofollow'>Google Plus</a></span>
<span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://www.blogspot-store.info/' target='_blank'>:: Thank you for visiting ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
Description:
Green color: URL photo blogger profile, please go to your blogger profile, and replace it with your blogger profile image URL.
Color Pink: Please fill Facebook ID, Twitter and G+ you
I think the other color is easy to understand, so please fill it with your own data.
Widget Comment:
Go to Layout >> add a gadget >> HTML / Javascript enter the following code into it:
Replace the URL above with the blue color of your blog URL<style type="text/css">ul.tb_recent_comments{list-style:none;margin:0;padding:0;}.tb_recent_comments li{background:none !important;margin:0;padding:5px 0 2px!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: #eee;display: block;font:11px Arial;line-height: 1.4;}</style><script type="text/javascript">//<![CDATA[// Recent Comments SettingsvarnumComments = 5,showAvatar = true,avatarSize = 40,characters = 50,defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",hideCredits = true;//]]></script><script type="text/javascript" src="http://html-scripts.googlecode.com/files/rcentcmmntavr.js"></script><script type="text/javascript" src="http://www.blogspot-store.info/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=5"></script>
That was two templates that I share this afternoon, which should be noted is, you have to save all images on hosting blogger post or upload images when making posts. If you save the image in addition to the blogger, the image thumbnail on the home page will not appear. For those who are interested please use and if there are not clear please leave a message in the comments box below, good luck and hopefully useful.
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment