Showing posts with label Template. Show all posts
Showing posts with label Template. Show all posts
template modifications that are specifically designed for those of you who have blogs news content, simple and not too complicated. This template is made inspired by the look of the site wordpress hack, but a lot of different parts. Although the header is made similarly but part of the homepage and postpage completely different. Below is the screenshot (click image to enlarge):
As with previous designs, bang Johny split 3 column on the homepage and only 2 columns on postpage. The design is very simple not too difficult way of installing the widget, the most just in the middle to make midlebar or specific categories with thumbnails, the way I described in the installation tutorial johny magazine widget template, ie by entering the code below and replace text blue background (entertainment ) with a label or category you wish to view.
<script type="text/javascript">
var numposts = 4; showpostthumbnails var = true; displaymore var = false; displayseparator var = false; showcommentnum var = false; showpostdate var = false; showpostsummary var = true; NUMCHARS var = 60;
</ Script>
<Script type = "text / javascript">
</ Script>
On the sidebar there are 4 measuring 125 x 125 ad, you just enter the code in the box below HTML / Javascript.
<div id="advertise">
<ul class="ads">
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHVyOu0UJZU6ecdio1_JI9278lb1kkBEKgHfdY8ufS1xSnAv6w1L9Y-aP8FwGlwTmR-qEd4Xa7w6zx1gtOBAVgslJyRxeGbxS0S-e3lISRmvCaq99PMbGNpTbCsPlFdI_A6LV3eKJ8rZY/s1600/banner+johny.jpg" alt="Advertise Here" /></a></li>
<li class="last"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHVyOu0UJZU6ecdio1_JI9278lb1kkBEKgHfdY8ufS1xSnAv6w1L9Y-aP8FwGlwTmR-qEd4Xa7w6zx1gtOBAVgslJyRxeGbxS0S-e3lISRmvCaq99PMbGNpTbCsPlFdI_A6LV3eKJ8rZY/s1600/banner+johny.jpg" alt="Advertise Here" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHVyOu0UJZU6ecdio1_JI9278lb1kkBEKgHfdY8ufS1xSnAv6w1L9Y-aP8FwGlwTmR-qEd4Xa7w6zx1gtOBAVgslJyRxeGbxS0S-e3lISRmvCaq99PMbGNpTbCsPlFdI_A6LV3eKJ8rZY/s1600/banner+johny.jpg" alt="Advertise Here" /></a></li>
<li class="last"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHVyOu0UJZU6ecdio1_JI9278lb1kkBEKgHfdY8ufS1xSnAv6w1L9Y-aP8FwGlwTmR-qEd4Xa7w6zx1gtOBAVgslJyRxeGbxS0S-e3lISRmvCaq99PMbGNpTbCsPlFdI_A6LV3eKJ8rZY/s1600/banner+johny.jpg" alt="Advertise Here" /></a></li>
</ul>
<div class="clear"></div>
</div>
<ul class="ads">
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHVyOu0UJZU6ecdio1_JI9278lb1kkBEKgHfdY8ufS1xSnAv6w1L9Y-aP8FwGlwTmR-qEd4Xa7w6zx1gtOBAVgslJyRxeGbxS0S-e3lISRmvCaq99PMbGNpTbCsPlFdI_A6LV3eKJ8rZY/s1600/banner+johny.jpg" alt="Advertise Here" /></a></li>
<li class="last"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHVyOu0UJZU6ecdio1_JI9278lb1kkBEKgHfdY8ufS1xSnAv6w1L9Y-aP8FwGlwTmR-qEd4Xa7w6zx1gtOBAVgslJyRxeGbxS0S-e3lISRmvCaq99PMbGNpTbCsPlFdI_A6LV3eKJ8rZY/s1600/banner+johny.jpg" alt="Advertise Here" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHVyOu0UJZU6ecdio1_JI9278lb1kkBEKgHfdY8ufS1xSnAv6w1L9Y-aP8FwGlwTmR-qEd4Xa7w6zx1gtOBAVgslJyRxeGbxS0S-e3lISRmvCaq99PMbGNpTbCsPlFdI_A6LV3eKJ8rZY/s1600/banner+johny.jpg" alt="Advertise Here" /></a></li>
<li class="last"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHVyOu0UJZU6ecdio1_JI9278lb1kkBEKgHfdY8ufS1xSnAv6w1L9Y-aP8FwGlwTmR-qEd4Xa7w6zx1gtOBAVgslJyRxeGbxS0S-e3lISRmvCaq99PMbGNpTbCsPlFdI_A6LV3eKJ8rZY/s1600/banner+johny.jpg" alt="Advertise Here" /></a></li>
</ul>
<div class="clear"></div>
</div>
For a Feedburner subscription box on the right sidebar of the artifacts made static if you want to edit his writings, should go into the design and then select edit HTML. You just search keywords then search Enews with control + F to make it easier. If you have found you just change the sentence, do not forget the URL Feedburner also be replaced with the URL of your feed.
For the rest is up to you to modify it yourself, if you want to see the whole of this template's demo click below. You can also download it for free, good luck and be creative with Johny bang-made templates may be useful. If anyone is willing to ask the existing contents of the comment box below or send an email directly to bang Johnny johnytemplate@gmail.com.
Note:
If there's a problem with your static page in my template please read this Remove Automatic Readmore at Static Page Blogger or re-download it then you can upload the updates one (only for Creating Website templates and Johny Simple Magazine).
And for Johny Portal, Website and Johny Magazine Creating user templates, change this code (post body close to the header):
# Crosscol-wrapper {margin: 0 auto; padding: 0 auto}
Into:
# Crosscol-wrapper {margin: 0 auto; padding: 5px}
Johny Simple Magazine, Easy Magazine Template For Your Site
Due to the limitations of my internet connection will be shortening only this article. For those who like the darker colors, especially black, I provide another template for you. I love the name of this template Johny Magazine 2, Darkmatter Templates For Your Site. As the name implies this template continuation of the first version of Johny Magzine on an earlier version of the header and footer sections are black, but a version of this part time post body all black (who scared ....?)
This template is made inspired by Darkmatter Joomla template from RocketTheme, just below screenshot, more details you can directly click on the Demo is on the bottom.
If you are interested in using this template, everything I have included in the zip file you downloaded, from sliders, sidebar accordion, box and label advertise or all of an existing category. You enter into the widget but do not forget to replace all its URL to your own URL.
For Flash News found on the top navigation please make your own, which enter into http://www.rsspump.com/ enter your blog feed URL, then copy the code below put this code (put it at points):
<div class='toppic'><div class='topnav'><div style='float:left;padding:9px 0px;'>.................................................. ........................................................... .........
Oiya one another almost forgot, this template I do not intentionally add the search box. So you have to make yourself up to want to put that or it could be taken from the default blogspot, I think it's very easy. And for those who still use the static page template has been modified so that I can show up as static page post page (click on the sample page in the navigation).
More details please just see the demo. For those who are interested please download this template that I have included the script code to be installed in the middle sidebar or right sidebar. So first yes, the network has begun to slow because the wind was really kenceng mas / ya right, good luck and hopefully useful.
NB:
I actually also made Johny Magazine 2 is the light version without adding a static page with Yahoo slider social bookmarking and sharing of Mashable. Well this is just sharing the template, yes than no unused, if anyone is interested please see the demo here, and if anyone wants to use this template please download here. (If anyone asked specifically for Johny Magazine 2 Light leave your email, then will I send the script to complete the installation of the widget)
Wow apparently many are interested in the template Johny Magazine 2 versions of this light, well than I sent an email to my friends one by one as I love the direct download link for the script for the installation widget. Do not forget if you have already downloaded it replace the URL with your own URL. This download link Script Widget
Updates:
For one thing, my storage area on google code could not be opened. Therefore the news ticker (Johny Magazine 2 Light) and accordion sidebar (johny Magazine 2) can not run as before. To overcome this you must replace the following code in the position edit HTML:
Accordion sidebar
Find the code below:
<script src='http://Johny Woods.googlecode.com/files/johny-manis.js' type='text/javascript'/>
Replace with the following code:
<script src='http://johnytemplate.googlecode.com/files/johnysimple.js' type='text/javascript'/>
News ticker
Find the code below:
<script src='http://Johny Woods.googlecode.com/files/ticker.js' type='text/javascript'/>
and you replace it with the following code:
<script src='http://johnytemplate.googlecode.com/files/newsticker.js' type='text/javascript'/>
Especially for users Johny Magazine 2 Light slider Yahoo if you can not find the following javascript URL in Edit HTML position:
http://Johny Woods.googlecode.com / files / jquery.min.js
And you have to replace it with the URL below
http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
Last save templates
This template is made inspired by Darkmatter Joomla template from RocketTheme, just below screenshot, more details you can directly click on the Demo is on the bottom.
If you are interested in using this template, everything I have included in the zip file you downloaded, from sliders, sidebar accordion, box and label advertise or all of an existing category. You enter into the widget but do not forget to replace all its URL to your own URL.
For Flash News found on the top navigation please make your own, which enter into http://www.rsspump.com/ enter your blog feed URL, then copy the code below put this code (put it at points):
<div class='toppic'><div class='topnav'><div style='float:left;padding:9px 0px;'>.................................................. ........................................................... .........
Oiya one another almost forgot, this template I do not intentionally add the search box. So you have to make yourself up to want to put that or it could be taken from the default blogspot, I think it's very easy. And for those who still use the static page template has been modified so that I can show up as static page post page (click on the sample page in the navigation).
More details please just see the demo. For those who are interested please download this template that I have included the script code to be installed in the middle sidebar or right sidebar. So first yes, the network has begun to slow because the wind was really kenceng mas / ya right, good luck and hopefully useful.
NB:
I actually also made Johny Magazine 2 is the light version without adding a static page with Yahoo slider social bookmarking and sharing of Mashable. Well this is just sharing the template, yes than no unused, if anyone is interested please see the demo here, and if anyone wants to use this template please download here. (If anyone asked specifically for Johny Magazine 2 Light leave your email, then will I send the script to complete the installation of the widget)
Wow apparently many are interested in the template Johny Magazine 2 versions of this light, well than I sent an email to my friends one by one as I love the direct download link for the script for the installation widget. Do not forget if you have already downloaded it replace the URL with your own URL. This download link Script Widget
Updates:
For one thing, my storage area on google code could not be opened. Therefore the news ticker (Johny Magazine 2 Light) and accordion sidebar (johny Magazine 2) can not run as before. To overcome this you must replace the following code in the position edit HTML:
Accordion sidebar
Find the code below:
<script src='http://Johny Woods.googlecode.com/files/johny-manis.js' type='text/javascript'/>
Replace with the following code:
<script src='http://johnytemplate.googlecode.com/files/johnysimple.js' type='text/javascript'/>
News ticker
Find the code below:
<script src='http://Johny Woods.googlecode.com/files/ticker.js' type='text/javascript'/>
and you replace it with the following code:
<script src='http://johnytemplate.googlecode.com/files/newsticker.js' type='text/javascript'/>
Especially for users Johny Magazine 2 Light slider Yahoo if you can not find the following javascript URL in Edit HTML position:
http://Johny Woods.googlecode.com / files / jquery.min.js
And you have to replace it with the URL below
http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
Last save templates
Johny Magazine 2, Darkmatter Template For Your Site
One more template results of my tinkering incredible template called Minima. Although apparently simple template can be easily modified to be a multifunctional template. I created a template that I modified uh sorry my name is Johny Magazine, because it's filled with a display on the homepage core articles of the overall content of a blog.
For the master blogger before I apologize, instead of a smart ass because I've managed to modify a simple template to template this multi-function, because I've learned the process of creating a template so that no code or script is not useful and should not have used his advice please yea ...
Johny Magazine this template has 3 columns in homepage, the first column there is a slider at the top of the content, although small in size but enough to mempercatik display. Recent articles I put in the middle or in the second column and below I added one more widget up what later would be filled. In the third column or the right of me to be two rows, the first row of the upper part there is a sidebar tabber that I only appear on the homepage only. For more details see the header and footer sections screenshots (click image to enlarge).
Footer section
Postpage or post on the page there are two columns, deliberately did not add anything the only feature commentary box that's all the more interesting. If anyone can add to the related post are also put under the post or in the right sidebar. In the footer, this well my weakness, I can not modify the colors with a touch of the most stunning images from the internet only modification made simple photoshop.
Immediately froth than not frivolous way below there is a demo link to see more clearly about Johny Magazine this template, and I certainly include the download link as well in case there are my friends who are interested to wear it at least there's also a sense of pride template results alone who tinkers used at other people .... hehehehehe. Do not forget to look also modified my template to another template Johny Portal or Website Creating modification. For a complete tutorial Johny Magazine this template please read Tutorial Johny Magazine Widget Templates.
UPDATES:
If anyone wants the template slider works automatically, it has been my templates and updates can be downloaded over here. To display the posts on the slider, you just look for the following code label1 = "mystery", a mystery is a label that is displayed in the slider. You can replace it with the desired label or category. For more details can be read in the article Creating Image Slider Based on Specific Categories.
Updates:
For one thing, my storage area on google code could not be opened. Therefore the news ticker on this template can not be run as before. To overcome this you must replace the following code in the position edit HTML, then look for the code below:
<script src='http://Johny Woods.googlecode.com/files/ticker.js' type='text/javascript'/>and you replace it with the following code:
<script src='http://johnytemplate.googlecode.com/files/newsticker.js' type='text/javascript'/>
Last save templates
Note:
If there's a problem with your static page in my template please read this Remove Automatic Readmore at Static Page Blogger
And for Johny Portal, Website and Johny Magazine Creating user templates, change this code (post body close to the header):
# Crosscol-wrapper {margin: 0 auto; padding: 0 auto}
Into:
# Crosscol-wrapper {margin: 0 auto; padding: 5px}
For the master blogger before I apologize, instead of a smart ass because I've managed to modify a simple template to template this multi-function, because I've learned the process of creating a template so that no code or script is not useful and should not have used his advice please yea ...
Johny Magazine this template has 3 columns in homepage, the first column there is a slider at the top of the content, although small in size but enough to mempercatik display. Recent articles I put in the middle or in the second column and below I added one more widget up what later would be filled. In the third column or the right of me to be two rows, the first row of the upper part there is a sidebar tabber that I only appear on the homepage only. For more details see the header and footer sections screenshots (click image to enlarge).
Section Header
Footer section
Postpage or post on the page there are two columns, deliberately did not add anything the only feature commentary box that's all the more interesting. If anyone can add to the related post are also put under the post or in the right sidebar. In the footer, this well my weakness, I can not modify the colors with a touch of the most stunning images from the internet only modification made simple photoshop.
Immediately froth than not frivolous way below there is a demo link to see more clearly about Johny Magazine this template, and I certainly include the download link as well in case there are my friends who are interested to wear it at least there's also a sense of pride template results alone who tinkers used at other people .... hehehehehe. Do not forget to look also modified my template to another template Johny Portal or Website Creating modification. For a complete tutorial Johny Magazine this template please read Tutorial Johny Magazine Widget Templates.
UPDATES:
If anyone wants the template slider works automatically, it has been my templates and updates can be downloaded over here. To display the posts on the slider, you just look for the following code label1 = "mystery", a mystery is a label that is displayed in the slider. You can replace it with the desired label or category. For more details can be read in the article Creating Image Slider Based on Specific Categories.
Updates:
For one thing, my storage area on google code could not be opened. Therefore the news ticker on this template can not be run as before. To overcome this you must replace the following code in the position edit HTML, then look for the code below:
<script src='http://Johny Woods.googlecode.com/files/ticker.js' type='text/javascript'/>and you replace it with the following code:
<script src='http://johnytemplate.googlecode.com/files/newsticker.js' type='text/javascript'/>
Last save templates
Note:
If there's a problem with your static page in my template please read this Remove Automatic Readmore at Static Page Blogger
And for Johny Portal, Website and Johny Magazine Creating user templates, change this code (post body close to the header):
# Crosscol-wrapper {margin: 0 auto; padding: 0 auto}
Into:
# Crosscol-wrapper {margin: 0 auto; padding: 5px}
Johny Magazine, Magazine Templates for Blog News
Here I want to share but be patient, I again modify the template so that it matches with a blog attached to any content. This blog is the original template techstop. But I think this template is less flexible because it can only be used for blogs with content tutorial or some sort of diary. So a lot of parts that must be modified.
For that I am trying to find just a simple template to modify the template that is similar to the one I wear now. Creating a Website Template modifications already so now this is the first Minima template with two columns, then I divide it into 3 columns on the homepage, and only 2 columns on the post and page. My goal split into 3 columns on the homepage to make it more flexible, so it can be also used my friends who have a blog with content such as news. The following screenshot section and postpage homepage (click image to enlarge):
There are some differences in the look of the template that I use, in addition to parts of the homepage, also my feedburner subscription box fox so now becoming a part of the related post feature. So give more space on the sidebar. For the sidebar width, not intentionally at the bottom I have again divided into two because I have provided a small sidebar on the homepage.
Okay now I'll give you some code that should be placed in the sidebar so that it looks similar to a blog that I wear now:
NB:
Those who want the look of this two column template like that I use, please go to this link.
Once you've downloaded and extracted the file, there are two xml files one by using the show / hide comment and one without show / hide comment
If there is a problem with the download link can ask for comment or confirmation box to johnytemplate@gmail.com.
For the tutorial Johny Portal is still under construction, so please be patient
Note:
If there's a problem with your static page in my template please read this Remove Automatic Readmore at Static Page Blogger or re-download it then you can upload the updates one (only for Creating Website templates and Johny Simple Magazine).
And for Johny Portal, Website and Johny Magazine Creating user templates, change this code (post body close to the header):
For that I am trying to find just a simple template to modify the template that is similar to the one I wear now. Creating a Website Template modifications already so now this is the first Minima template with two columns, then I divide it into 3 columns on the homepage, and only 2 columns on the post and page. My goal split into 3 columns on the homepage to make it more flexible, so it can be also used my friends who have a blog with content such as news. The following screenshot section and postpage homepage (click image to enlarge):
There are some differences in the look of the template that I use, in addition to parts of the homepage, also my feedburner subscription box fox so now becoming a part of the related post feature. So give more space on the sidebar. For the sidebar width, not intentionally at the bottom I have again divided into two because I have provided a small sidebar on the homepage.
Okay now I'll give you some code that should be placed in the sidebar so that it looks similar to a blog that I wear now:
- Translate flag image (width sidebar above)
Actually the tutorial has been widely circulated on the internet, but instead you bother nyarinya just give me the script code to be installed:<style>
.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
</style>
<div>
<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="English"><img align="absbottom" alt="English" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrQtfHUbkZ3QKRir_Twmbk3gV0fv2JAihjdwQ05Zm0OIlBD0mJXhKsH9krBu7nYMPWMTIjW1EVY6krg8F_nbj7Dht0mpnxHF8OnAyjlqbe2-gQ0adQrw0U3BPW_ipyiLzbxE3YqqRzfQ/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="English" width="24" /></a>
<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="French"><img align="absbottom" alt="French" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5dXebFEgcYe6m7OUe7UpIArGm_LtZ7X6OjXVNem5_I_8xT7KoJUwL_BESqMvH449HuJqMFPUc1YiOmuL7UU0lOGAKTMXIhowMUTfwhxedAIAH6ggLHG1xBvwjmhlvvRqKJxGy8OLV-w/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="French" width="24" /></a>
<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="German"><img align="absbottom" alt="German" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7ohix20dY_t6FmhMFE2pTGVyrHQTaeIzervHFYhALWpXlPFekwapWrGokVZFxTIQx4xRNCL1QKacM-HnSmLiixEyCaZzP4pRIDq8eoxG2OCgrLz2iI1mPevXLtOMteXxxcbpqXqe37hE/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="German" width="24" /></a>
<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="Spain"><img align="absbottom" alt="Spain" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl_1wvhztlBKyHyOTgfAK5Eu3CcQw0Mj7jGWKTBuG83Fr6I0MXowwsyKf1UkjIrHTarOTEy13oTgAydoP0CRDoOlxGOVtpqLkPYME83H0XUMvtBUwkf8GmcWxGQug4t0y7FD_LACyfY5I/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Spain" width="24" /></a>
<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="Russian"><img align="absbottom" alt="Russian" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkx2aMzy36bNooDaUzwDngbqiefKZ3X0hfDaProbFl05vGlvgtzVP3ZNE9gjJFB518g3ECyJ2rDb-lD3sDQ6EkmLFMTLymFWOBfzJyfEdW3ao7KdTi4hD30rrvOTwe6N1GpSuzERnf-w/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Russian" width="24" /></a>
<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="Japanese"><img align="absbottom" alt="Japanese" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsT2C_3jK68Hz8W3nH9NuDFvAz58ukifK7kUJzv_IGza5zOUXtu1S_-_Q77meg_BYWddvPmwquWnUyIkCtGkyMWWXsf_daIcprBtW89nDTFrSnWQs1gt2xS73rZF4ZeAUSxad3mma4FyU/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Japanese" width="24" /></a>
<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="Arabic"><img align="absbottom" alt="Arabic" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOC0_kBhje7or6iv9WIZACp-SSBjIQ5NXgolyQ-betspqIadYvIQQEvZmOKZD6HEhVWZgNBN97gkOlM4_oUplB9PYFXcrXmSBhk4-DHev15SZq5HC8fLDToZ0zk_eZuY61gSAafThRQg/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Arabic" width="24" /></a>
<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="Chinese Simplified"><img align="absbottom" alt="Chinese Simplified" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR1tCegngOWSfGDmoS03jFmG0lShVTWB3iK1u9lCDjl9i-c4K4oWASJYUycGDahrxzyDzOMXC_toq4GUepRcBeh28FE9wcmlCrK6ZdUN6HCj8yswuu5HbcJNTvV_07hOVXV2jWglGbdQ/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Chinese Simplified" width="24" /></a></div> - Tab ViewIn this section, the tab view which I still use manual, now many ways to make the tab view that is more easily for example by adding a touch of jQuery. But it does not hurt if the script code that I use in this blog I share with you (For more details can be read on a tutorial to make the tab view):<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 92px;
height: 22px;
text-align: center;
margin: 5px 0px 0px 3px;
background-color:#999999;
padding-top: 6px;
border: 1px solid #ffffff;
border-bottom: 1px solid #ccc;
font-family: "Arial, Helvetica, sans-serif", Arial;
font-weight: 900;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #444343; }
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc;
overflow: hidden;
background-color: #F2F2F2;
}
div.TabView div.Pages div.Page
{
padding: 2px;
height: 100%;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
.list {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0xEn3D-bp_nTWnD7Nzt3qIFEYNZ3gEEd1xk2SSdWcOgamUYvx513XUHIL_dKBc6HRaSuPhKoZxbA7o5cHEEqt0Fwvn1oRk4HWOJKdeGGuNE3N1e0yLH6WxCzzgMd4tL38byVbj9AwsHA/") no-repeat left center;
border-bottom:1px dotted #7f7f7f;
line-height:1.5em;
padding:3px 0px 3px 20px;
}
</style>
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 298px;">
<a href="http://www.blogger.com/post-create.g?blogID=7490537618574143540"><span style="color: white;">Tutorial Blog</span></a>
<a href="http://www.blogger.com/post-create.g?blogID=7490537618574143540"><span style="color: white;">Wordpress</span></a>
<a href="http://www.blogger.com/post-create.g?blogID=7490537618574143540"><span style="color: white;">Joomla</span></a></div>
<div class="Pages" style="height: 200px; width: 298px;">
<div class="Page">
<div class="Pad">
<div class="list">
<a href="http://creatingwebsite-Johny Woods.blogspot.com/2011/02/membuat-efek-image-zoom-dengan-jquery.html">Membuat Efek Image Zoom dengan Jquery</a></div>
<div class="list">
<a href="http://creatingwebsite-Johny Woods.blogspot.com/2011/02/membuat-sliding-loginregister-form.html">Membuat Sliding Login/Register Form Panel di Blog</a></div>
<div class="list">
dan seterusnya ............................................................... </div>
</div>
</div>
<div class="Page">
<div class="Pad">
<div class="list">
<a href="http://creatingwebsite-Johny Woods.blogspot.com/2011/02/membuat-efek-image-zoom-dengan-jquery.html">Membuat Efek Image Zoom dengan Jquery</a></div>
<div class="list">
<a href="http://creatingwebsite-Johny Woods.blogspot.com/2011/02/membuat-sliding-loginregister-form.html">Membuat Sliding Login/Register Form Panel di Blog</a></div>
<div class="list">
dan seterusnya ............................................................... </div>
</div>
</div>
<div class="Page">
<div class="Pad">
<div class="list">
<a href="http://creatingwebsite-Johny Woods.blogspot.com/2011/02/membuat-efek-image-zoom-dengan-jquery.html">Membuat Efek Image Zoom dengan Jquery</a></div>
<div class="list">
<a href="http://creatingwebsite-Johny Woods.blogspot.com/2011/02/membuat-sliding-loginregister-form.html">Membuat Sliding Login/Register Form Panel di Blog</a></div>
<div class="list">
dan seterusnya ............................................................... </div>
</div>
</div>
</div>
</div>
</form>
<script src="http://johnytemplate.googlecode.com/files/tab_view.js">
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script> - Latest Articles
Script code that is installed:At the bottom, change its URL with the URL of your blog<div style="background: none repeat scroll 0% 0% rgb(242, 242, 242); border: 1px solid rgb(204, 204, 204); height: 200px; overflow: auto; padding: 10px;">
<span id="pbl_labels"></span>
<div id="pbl_posts">
Recent Posts </div>
<script type="text/javascript">
var jumlah_maksimum_post = 10;
var dengan_ringkasan = true;
var jumlah_karakter_ringkasan = 100;
</script>
<script src="http://kauman.googlecode.com/files/recentpostsbylabel.js">
</script>
<script src="http://creatingwebsite-Johny Woods.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed">
</script></div> - To make the first letter in the post to be great as it's easy in this post, please read the tutorial on Creating Great Letter (Drop Cap) on Early Post.
NB:
Those who want the look of this two column template like that I use, please go to this link.
Once you've downloaded and extracted the file, there are two xml files one by using the show / hide comment and one without show / hide comment
If there is a problem with the download link can ask for comment or confirmation box to johnytemplate@gmail.com.
For the tutorial Johny Portal is still under construction, so please be patient
Note:
If there's a problem with your static page in my template please read this Remove Automatic Readmore at Static Page Blogger or re-download it then you can upload the updates one (only for Creating Website templates and Johny Simple Magazine).
And for Johny Portal, Website and Johny Magazine Creating user templates, change this code (post body close to the header):
#crosscol-wrapper{margin:0 auto;padding:0 auto}
Into :
#crosscol-wrapper{margin:0 auto;padding:5px}Template Creating Website Modifications
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:Replace all image URL and title to the url you want to show in a slideshow<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggPsqMmjrLv59PEu7AswkYAij6P2EChvaU5C0CIIcBDGRJgaeAB-JCH4NvAQyNNGrZ4PJvO2zCo2ne6oz4aH29wE0rtyg3C2SRGs9u_6M1-afw7fks3PN1CEqqF3EvFWjiAH5_uGa1tw/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7d_J6OITccHHH5KenIOylHF5aYFH2-kUYzXmz_I5YJneAiFycYKiZlMaIAEcjj4I4MJRxyFqiaa8QQla0UTZM5dHAlJpBCXploLazayT9FaPl-1uKHkMuCHhLGrbsCG36YN8Qdvpiqw/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> - Installing Popular Post WidgetI 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.
Tutorial Widget Johny Magazine Template
After yesterday I have modified the template Minima be Johny Simple Magazine, now I am going to modify its order to more fully again. Many complain that there is no previous template slide image on the homepage, on this template that I named Johny Simple Magazine 2 I added a few features that allow users more flexibility in placing the desired widget.
The template I named Johny Simple Magazine 2 because it look similar to the first series header. On the homepage there is a 5 to put a sidebar widget that you want and a sidebar for ad size 650 x 80 which is located below the main wrapper. On the right sidebar I added accordion sidebar of dezinerfolio.com, for more details please see the demo. At postpage, you no longer need to add code related articles are usually put under the post, this template already provides these features and also columns for size 300 x 250 ad beside it (see demo).
Now I will give a tutorial installation of widgets contained in this template:
- Image Slider
Put the following code in the field above blog post, select Add Gadget >> HTML / Javascript.Replace all URLs and article images with the url you want to show in the image slider.<!-- 1st Content -->
<div id="gal1" style="display:none;" class="img400">
<div class="h250"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtzVvoifN9YnRlJwCVpejXITmq67KZGhwjasDBjO12xCjLy0LMpd6Oe287kdsGBFnWfsH5TktrklkyeHwQpYzvmMCA27Pr-PCB8CNZGnU9oQNJHm5n4bBCQpdSbCuT8cmpeSGJwvYHusw/s1600/barca-beat-madrid-in-santiago-bernabue.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div class="bottom">
<div class="topic">
<a href="http://johnysimple-magazine2.blogspot.com/2011/12/real-madrid-1-3-barcelona-in-santiago.html">Real Madrid 1-3 Barcelona in Santiago Bernabéu</a>
</div>
<div class="summary">Barcelona were the comeback kings at the Santiago Bernabeu as the champions recovered from conceding within the first ...... <a href="http://johnysimple-magazine2.blogspot.com/2011/12/real-madrid-1-3-barcelona-in-santiago.html">Read Full Post</a>
</div>
</div></div>
</div>
<!-- 2st Content -->
<div id="gal2" class="img400">
<div class="h250">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlaIxd6u-5QtVi317b-NK3KbTYwLA2JTvz9zuaMUuSy5mFMxYALCcws4KWSeEs6oCX5PHPBWMu17IMNxuYURwLU-0OhHd-saq4HNUUAsNL5fFg4yKCM4BcXyTXpPEzQ7CZMRZ2XQmWFyU/s1600/ahmadinejad.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div class="bottom">
<div class="topic"><a href="http://johnysimple-magazine2.blogspot.com/2012/01/iran-ahmadinejad-to-seek-latin-american.html">Iran's Ahmadinejad to seek Latin American support</a>
</div>
<div class="summary">Iranian President Mahmoud Ahmadinejad will seek support from Latin America's leftist leaders on a tour starting....... <a href="http://johnysimple-magazine2.blogspot.com/2012/01/iran-ahmadinejad-to-seek-latin-american.html">Read Full Post</a>
</div>
</div></div>
</div>
<!-- 3st Content -->
<div id="gal3" style="display:none;" class="img400">
<div class="h250">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji4Am_aIQNZuhDWrY_GnekE141pjYuavy93-fvZYI5vnSqr-2VVPWrcpz_4oCyE4bHBnKlNlvWyMEnryJmwQO3J76_eZJEVmuNwtZfEBBSKGgu9gGNSpt5Qh1TjBcgQ5U4Jzn1mwz259U/s1600/federer.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div class="bottom">
<div class="topic"><a href="http://johnysimple-magazine2.blogspot.com/2012/01/federer-untroubled-by-back-eases-into.html">Federer, untroubled by back, eases into second</a>
</div>
<div class="summary">Roger Federer showed no sign of back trouble, testing it at every opportunity, as he cruised into the second round...... <a href="http://johnysimple-magazine2.blogspot.com/2012/01/federer-untroubled-by-back-eases-into.html">Read Full Post</a>
</div>
</div></div>
</div>
<!-- 4st Content -->
<div id="gal4" style="display:none;" class="img400">
<div class="h250"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigcmeBHhQuekcm5_licWQRJDITkxKWD49PxHwh4UrTgU3GSCfh1CgjrtyIcrbDTiZMTgaK5N154qB2Frpd-gdsoM5uQBrfgBnuxRnMUXZibpvPaBa7ylfm-_R7XbZ__5dAbg8hKTlXsrQ/s1600/Julian-Pavone.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div class="bottom">
<div class="topic"><a href="http://johnysimple-magazine2.blogspot.com/2011/12/julian-pavone-is-worlds-youngest.html">Julian Pavone is World’s Youngest Professional Drummer</a>
</div>
<div class="summary">Guinness World Records has recognized a U.S. boy as the youngest professional drummer. Julian Pavone was certified......<a href="http://johnysimple-magazine2.blogspot.com/2011/12/julian-pavone-is-worlds-youngest.html">Read Full Post</a>
</div>
</div></div>
</div>
<!-- 5st Content -->
<div id="gal5" style="display:none;" class="img400">
<div class="h250"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5FKUqh9fmf8tV_ZR1-6ryI0LG9xaiLNJV0eAPbTiC_6hGF8TqFu6eWED5cDM7Xhi3Yyct9zN4t5mL5SMYGtYx8kvemwthLkSSaDXm6uNYg6w_UgCtf3z_S1Xk4fTYI4uC4jZQ_cTXFtc/s1600/nadal.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div class="bottom">
<div class="topic"><a href="http://johnysimple-magazine2.blogspot.com/2012/01/nadal-hits-back-over-motivation-doubts.html">Nadal hits back over motivation doubts</a>
</div>
<div class="summary">A combative Rafa Nadal returned serve at sceptics who have questioned his motivation at the Australian Open on Sunday ...... <a href="http://johnysimple-magazine2.blogspot.com/2012/01/nadal-hits-back-over-motivation-doubts.html">Read Full Post</a>
</div>
</div></div>
</div>
<!-- 6st Content -->
<div id="gal6" style="display:none;" class="img400">
<div class="h250"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHhjzexylVMRJ3Zu5l67-OzcfnYa8ZWI0DC8kwDMSpy3UN3rO-U0Q2bljRLjn8X4qsU_4Q2CNn0qMiMCGpDV17uNe2g7O7Bekvb2JNx1GvuD2CaYfBtK8HEmQ8TzVx8T967guG8pjhWho/s1600/3-US-ships-in-Vietnam-to-train-with-former-foe.jpg&cat=1&pid=2107&cache=false" /></div>
<div class="min250">
<div class="bottom">
<div class="topic"><a href="http://johnysimple-magazine2.blogspot.com/2011/12/3-us-ships-in-vietnam-to-train-with.html">3 US ships in Vietnam to train with former foe</a>
</div>
<div class="summary">Three U.S. Navy ships were welcomed Friday by former foe Vietnam for joint training, despite China’s irritation following...... <a href="http://johnysimple-magazine2.blogspot.com/2011/12/3-us-ships-in-vietnam-to-train-with.html">Read Full Post</a>
</div>
</div></div>
</div>
<div style="height:255px; margin-top:-255px;"><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> <a href="#" rel="gal6">6</a> </div></div><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(4000)
</script> - Accordion Sidebar
You can put the code below in the right sidebar or wherever you want, select Add Gadget >> HTML / Javascript.<div id="basic-accordian" ><!--Start of accordion parent-->
<!--Start 1st Content-->
<div id="test-header" class="accordion_headings header_highlight" >Judul/Heading</div>
<div id="test-content">
<div class="accordion_child">
-------------------- Letakkan tulisan atau kode script disini -------------------------
</div>
</div>
<!--End 1st Content-->
<!--Start 2st Content-->
<div id="test1-header" class="accordion_headings" >Judul/Heading</div>
<div id="test1-content">
<div class="accordion_child">
-------------------- Letakkan tulisan atau kode script disini -------------------------
</div>
</div>
<!--End 2st Content-->
<!--Start 3st Content-->
<div id="test2-header" class="accordion_headings" >Judul/Heading</div>
<div id="test2-content">
<div class="accordion_child">
-------------------- Letakkan tulisan atau kode script disini -------------------------
</div>
</div>
<!--End 3st Content-->
<!--Start 4st Content-->
<div id="test3-header" class="accordion_headings" >Judul/Heading</div>
<div id="test3-content">
<div class="accordion_child">
-------------------- Letakkan tulisan atau kode script disini -------------------------
<a href="#" style="float:right;font:normal 10px Arial;padding:5px 0;">More Article »</a>
</div>
</div>
<!--End 4st Content-->
<!--Start 5st Content-->
<div id="test5-header" class="accordion_headings" >Judul/Heading</div>
<div id="test5-content">
<div class="accordion_child">
-------------------- Letakkan tulisan atau kode script disini -------------------------
<a href="#" style="float:right;font:normal 10px Arial;padding:5px 0;">More Article »</a>
</div>
</div>
<!--End 5st Content-->
<!--Start 6st Content-->
<div id="test6-header" class="accordion_headings" >Judul/Heading</div>
<div id="test6-content">
<div class="accordion_child">
-------------------- Letakkan tulisan atau kode script disini -------------------------
<a href="#" style="float:right;font:normal 10px Arial;padding:5px 0;">More Article »</a>
</div>
</div>
<!--End 6st Content-->
<!--End of accordion parent--></div> - Creating Categories with Thumbnails (Category with Thumbnail)Enter the code below in the sidebar that you want:
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.
For the other part I think it is very easy, you can create yourself and adjust to the needs of the content or the content of your blog, if there are those who do not understand, please fill in the comment box. Below I have prepared you for the link to the demo and want to see those who are interested to try this template please download gratissssssss ....... to make the slider automatically read Creating Image Slider Based on Specific Categories
For one thing, my storage area on google code could not be opened. Therefore accordion sidebar news ticker and can not run as before. To overcome this you must replace the following code in the position edit HTML:
Accordion sidebarFind the code below:
<script src='http://Johny Woods.googlecode.com/files/johny-manis.js' type='text/javascript'/>
Replace with the following code:
<script src='http://johnytemplate.googlecode.com/files/johnysimple.js' type='text/javascript'/>
News ticker
Find the code below:
<script src='http://Johny Woods.googlecode.com/files/ticker.js' type='text/javascript'/>
and you replace it with the following code:
<script src='http://johnytemplate.googlecode.com/files/newsticker.js' type='text/javascript'/>
Related Articles (Bottom post)
If lost or do not show up looking for the javascript URL in position Edit HTML
http://Johny Woods.googlecode.com / files / relateds.js
and you replace it with the URL below:
http://jamu-martin.googlecode.com/files/related-martin.js
Last save templates
Note: If there's a problem with your static page in my template please read this Remove Automatic Readmore at Static Page Blogger
Johny Simple Magazine 2, Template Full Widget
I shorten it, yes, I named this template Johny Simple Music, you can approximate this template yourself why I named thus. But if you want to use for other content as well go ahead. Features available in this template are as follows:
Recent Post Slider ImageAutomatic image slider, the slider is working every time you make a new post will appear in the slider. So no need to bother to enter one by one his captions and URLs. Click Add a Gadget >> select HTML / Javascript, enter the following code at the bottom of the column header (there are two columns select the above):
<div id="slider">
<script style="text/javascript" src="http://creatingwebsite.googlecode.com/files/slidergallery.js"></script>
<script style="text/javascript">
var numposts_gal = 6;
var numchars_gal = 150;
var random_posts = false; // random posts
</script>
<script src="http://johny-simplemusic.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>
Updates:
Because my google code repository is in trouble in the templates slider does not work, to restore the original state you have to change the code in blue above with the code below:
<script style="text/javascript" src="http://johnytemplate.googlecode.com/files/sliderauto.js">
- On the dashboard go to >> edit HTML templates do not forget to check expand widget templates. After that look for the code below:Then replace it with the following code:
<script src='http://creatingwebsite.googlecode.com/files/readmore.js' type='text/javascript'/>
<script src='http://johnytemplate.googlecode.com/files/readmore.js' type='text/javascript'/>
<script type='text/javascript'>var numposts = 5;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = true;var showpostsummary = false;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/top music?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
Kategory without thumbnailExamples such as the right sidebar below the top music. Enter this code in the box of your HTML / Javascript template:
<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://johny-simplemusic.blogspot.com/feeds/posts/summary/-/jazz?max-results=8&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://johny-simplemusic.blogspot.com/search/label/jazz" style="float:right;font:normal 10px Arial;padding:5px 0;">More Post »</a>
Red: blog URLBlue or category labels
Below is a demo and download link for those who want to try this template, sorry if the language is less easy to read, understand already sleepy, it also was so penginnya always share tomorrow hehehehe certainly be amended. Good night and sweet dreams .... congratulations
Thanks for the greatest to my friend a reliable blogger Irengajah maker of Dhetemplate.
Because penympanan place I got banned google code at google some script functions dri this template to die, to handle follow the instructions below (go to edit HTML do not forget to check the box expand widget templates):
- Read more
Search URL script below:http://creatingwebsite.googlecode.com/files/readmore.js
Replace with the URL of the script:http://johnytemplate.googlecode.com/files/readmore.js
- Slider image
Search URL script below:http://creatingwebsite.googlecode.com/files/easyslider.js
Replace with the URL of the script:http://johnytemplate.googlecode.com/files/easyslider.js
- Page navigasi
Search URL script below:http://creatingwebsite.googlecode.com/files/pagenavi-creatingwebsite.js
Replace with the URL of the script:http://johnytemplate.googlecode.com/files/pagenav.js.js
Johny Simple Music, Mini Template For Music
Subscribe to:
Posts
(
Atom
)











