Johny Simple Magazine 2, Template Full Widget

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.

<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>



<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>


<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>



<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>



<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>


<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>
Replace all URLs and article images with the url you want to show in the image slider.
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" >


<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>



<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>



<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>





<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>



<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>





<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>


</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

Updates :

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 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'/>

    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

Demo | Download

Posted by Dexcuit at 12:42:00 AM No comments :

Johny Simple Magazine 2, Template Full Widget

No comments :

Post a Comment

Labels

Popular Posts