Monday, November 7, 2011

Simple RSS Portal Blogger Template




I think we need to have a page that contains our favorite sites, so that we can follow the news from the internet world without having to surf away everywhere, that's the basic idea about this RSS portal template

Ok. to use this Simple RSS Portal Blogger Template template ,

Look at the section numbers on the picture above, and do the changes in the red codes (Title) and blue codes (URL) below

Section-1 (Top navigation menu)
First, login to your blogger dashboard - Design/layout - Edit HTML ..and find the code below ..., then change the red code with your own title, and blue code with your links
The green code, you may change it with your Adsense search code..

<div id='stylefour'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Home</span></a></li>
<li><a href='/' title=''><span>About</span></a></li>
<li><a href='/' title=''><span>Contact Us</span></a></li>
</ul>

<div id='search'>
<form action='/search/' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='255' name='q' onblur='if (this.value == &quot;&quot;)
{this.value = &quot;Search here...&quot;;}' onfocus='if (this.value == &quot;Search
here...&quot;) {this.value = &quot;&quot;}' type='text' value='Search here...'/>
<input id='searchbutton' type='submit' value='GO'/>
</form>
</div>


Section-2 (Horizontal dropdown menu)
To use this horizontal drop menu, go to Design - Page Eements - Add a Gadget - HTML/JavaScript , and Paste the code below into it ..., but , up to you, you can use this additional menu or not

<div id="dmmenu">
<table cellspacing="0" cellpadding="0" id="menu1" class="dm1">
<tr>
<td>
<a class="item1" href="javascript:void(0)">How To</a>
<div class="section">
<a class="item2"

href="http://simpleportalbloggertemplate.blogspot.com/search/label/Tutorials">Tutorials</a>
<a class="item2" href="example1.html">Category Two</a>
<a class="item2" href="example1.html">Category Three</a>

<a class="item2" href="example1.html">Category Four</a>
<a class="item2" href="example1.html">Category Five</a>
<a class="item2" href="example1.html">Category Six</a>
<a class="item2" href="example1.html">Category Seven</a>
</div>
</td>
<td>

<a class="item1" href="javascript:void(0)">Products</a>
<div class="section">
<a class="item2" href="example1.html">First Product</a>
<a class="item2" href="example1.html">Second Product</a>
<a class="item2" href="example1.html">Third Product</a>
<a class="item2" href="example1.html">Fourth Product</a>

<a class="item2" href="example1.html">Fifth Product</a>
<a class="item2" href="example1.html">Sixth Product</a>
</div>
</td>
<td>
<a class="item1" href="javascript:void(0)">Company</a>
<div class="section">

<a class="item2" href="example1.html">About our Company</a>
<a class="item2" href="example1.html">Careers</a>
<a class="item2" href="example1.html">Media Center</a>
<a class="item2" href="example1.html">News</a>
</div>
</td>
<td>
<a class="item1" href="example1.html">Privacy Policy</a>
</td>
<td>
<a class="item1 right" href="example1.html">Help</a>

<div class="section">
<a class="item2" href="example1.html">Help blabla 1</a>
<a class="item2" href="example1.html">Help bleble 22</a>
<a class="item2" href="example1.html">Help bleble 3</a>
<a class="item2" href="example1.html">Help bleble 44444</a>
</div>
</td>
</tr>
</table>
</div>

<script type="text/javascript">
var dm1 = new DropMenu1('menu1');
dm1.position.top = -1;
dm1.init();
</script>


Section-3 (RecentPost Menu)
To use this horozontal menu, go to Design - Page Eements - Add a Gadget - HTML/JavaScript , and Paste the code below into it ..., and the blue code is the site URL , you may placing your own site or onther sites,
Such as the horizontal menu above, you can use this additional menu or not

<script type="text/javascript" src="http://7templates.googlecode.com/files/accrecpost-pack.js"></script>
<script style="text/javascript">
var numposts = 10;
var numchars = 200;
</script>
<script src="http://free-7.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=accrecentpost"></script>


Section-4 (Recent Post Slide Menu)
To use this Recent Post Slide Menu, go to Design - Page Eements - Add a Gadget - HTML/JavaScript , and Paste the code below into it ..., and the blue code is the site URL , you may placing your own site or onther sites,
such as the horizontal menu above, you can use this additional menu or not

<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 12;
var numchars = 30;
</script>
<script src="http://7-templates.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script></ul>


Section-5 (Share buttons)
login to your blogger dashboard - Design/layout - Edit HTML ..and find the code below ...
The blue codes, you may change with your profiles, such as: your facebook account url, twitter account url, google buzz account url, and your own RSS feeds...

<ul id="share">
<li><a class="facebook" href="http://www.facebook.com/" title="facebook">Facebook</a></li>
<li><a class="twitter" href="http://twitter.com/" title="Folow me on
Twitter">Twitter</a></li>
<li><a class="rss" href="/feeds/posts/default" title="Subscribe via RSS">rss</a></li>
<li><a class="email" href="http://www.google.com/buzz" title="google buzz">buzz</a></li>
</ul>

0 comments:

Post a Comment