. This template have a different size between main post and single post.
codes to show and hide the widget blog like a header, main post, sidebar, bottom widget and search. So, please
this template for free.
1. Setting Menu (Menu on Main Post and Single Post)Go to Layout > Edit HTML and find these code below
<div id='navigation'>
<div id='navhome'>
Change
YOUR-LINK-ABOUT-HERE, LINK-RSSFEED-HERE and
Edit Me.
2. Setting Acordion Menu (Menu Blog widget like in demo live)I was added Accordion menu for this template. This widget (Accordion Menu) for link
Recent post and
recent post per category.<div class="arrowlistmenu">
<h3 class="menuheader expandable">Recent Posts</h3>
<ul class="categoryitems">
<--- Code here ---></ul>
<h3 class="menuheader expandable">Category 1</h3>
<ul class="categoryitems">
<--- Code here ---></ul>
<h3 class="menuheader expandable">Category 2</h3>
<ul class="categoryitems">
<--- Code here ---></ul>
</div>
Red color is
Title of Submenu.Insert your code Recent Post in <--- Your Link here --->.
Setting Recent Post per Category on Menu BlogCopy and paste this code below
<script src="http://sites.google.com/site/vectorireng/javascript/codejavascript.js"></script>
<script>var numposts = 8; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="
http://freetemplate-ajah.blogspot.com/feeds/posts/default/-/
Free%20Blogger%20Templates?orderby=published&alt=json-in-script&callback=rp">
</script>
Change the
red color with your blog.
Blue color is
name of label/category your post.
Letter case is sensitive. Make sure you type correctly. That is example for my post
label Free Blogger Templates. If your
post label name is ABC, you must type
/-/ABC?
If your
post label name is ABC Post, you must type
/-/ABC%20Post?
3. Setting Feature ContentCopy and paste these code below
<style type="text/css">
div.TabTampil div.TTs{height: 24px; overflow: hidden; }
div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active{ background: #fff; }
div.TabTampil div.Halamans{ clear: both; overflow: hidden; background: #fff;}
div.TabTampil div.Halamans div.Halaman{ height: 100%;
padding: 0px; overflow: hidden; color: #000;}
div.TabTampil div.Halamans div.Halaman div.Alas{ padding: 5px; }
div.TabTampil div.TTs a{float: left;display: block; width: 30px; text-align: center; height: 20px; padding: 3px; margin-right:1px; vertical-align: middle; text-decoration: none; font:bold 12px Arial; color: #ff0000}
</style>
<form action="tabtampil.html" method="get">
<div id="TabTampil" class="TabTampil"><div style="width: 250px;" class="TTs">
<a>1</a><a>2</a><a>3</a></div>
<div style="width: 250px; height: 200px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
<a href="
LINK-ULR-HERE" title="
Title" target="_blank"/><img src="
LINK-URL-IMAGE" alt="
Alt Image" title="
Title Image" width="240" height="180" /></a>
</div></div>
<div class="Halaman">
<div class="Alas">
<---- Feature Post Here ---></div></div>
<div class="Halaman">
<div class="Alas">
<a href="
LINK-ULR-HERE" title="
Title" target="_blank"/><img src="
LINK-URL-IMAGE" alt="
Alt Image" title="
Title Image" width="240" height="180" /></a>
</div></div>
</div></div></form><script style="text/javascript"
src="http://sites.google.com/site/vectorireng/javascript/codejavascript.js"></script><script
type="text/javascript">tabtampil_inisial('TabTampil');</script>
Red color is
number Feature Content displayed. Code above is example for 3 Feature Contents. You can add new feature content by added new number of red color and code post feature content.
4. Add new widget on SidebarAs i wrote above, this template using the
<b:if cond='....'></b:if> codes. And as you see in body (HTML) all blogs widget begins / grouped with the
<b:if cond='....'></b:if> code. For Header2 code, Navhome, Middlehome, Featured, Searchhome, and Bottom widget will appear in the layout (
see image number 4). For widget Header, Menu, Main Post, and Sidebar, it will not appear. Therefore, if you want to add a new widget on Sidebar, you can add through the
Add Element from the widgets that appear on the layout and give the title. Then, click Edit HTML and search that widget and
cut and paste on sidebar.Another way to add widget on Sidebar (
only HTML/Javascript widget)
Go to Layout > Click Edit HTML and find this code
<div id='sidebar-wrapper'>
Then, copy and paste this code like the other codes
<b:widget id='HTML55' locked='false' title='
Title Sidebar' type='HTML'/>
Change
Title Sidebar with your title
Save
If you have question about setting this template, you can leave a comment.
