Noct Blog Tip

The best Numbered Page Navigation Widget for Blogger

2011-01-02T18:10:00.001-08:00

Pagination Functionality can increase your website or blog's traffic. After tested many Page Navigation Widgets, I found the best one from Deluxe Blog Tips , I say "the best" because :
- It is easy to custom CSS, make it like Wordpress's Page-Navi plugin
- Easy to install to your blog
- Fast, stable and no bugs (if you install it the right way, of course!)

Edit HTML, find this line:
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
Insert after it:

<b:includable id='page-navi'>

<div class="pagenavi">

<script type="text/javascript">

var pageNaviConf = {

perPage: 3,

numPages: 3,

nextText: &quot;&#187;&quot;,

prevText: &quot;&#171;&quot; }

</script>

<script type="text/javascript" src="https://sites.google.com/site/noctblogsite/script/pagenavi.min.js"></script>

<div class="clear" />

</div>

</b:includable>

In which:
- perPage: number of posts are shown in each page
- numPages: number of pages are shown in page navigation
- firstText, lastText, nextText, prevText: simply the "First", "Last", "Next", "Prev" text

Next, find the line:

<!-- navigation -->

<b:include name='nextprev'/>

Replace it with:

<b:if cond="data:blog.pageType == &quot;index&quot;">

<b:include name="page-navi">

<b:else>

<b:if cond="data:blog.pageType == &quot;archive&quot;">

<b:include name="page-navi">

</b:include>

</b:if></b:else></b:include></b:if>

Final, choose a style, and insert the corresponding CSS code above </b:skin>

.pagenavi{clear:both;margin:10px auto;text-align:center}

.pagenavi span,.pagenavi a { font-size:12px;padding: 2px 4px 2px 4px;margin: 2px;border: 1px solid #dfdfdf;color:#000;}

.pagenavi a:visited{}

.pagenavi a:hover,.pagenavi .current{color: #FFF;background-color: #e81d1d;border: 1px solid #fb1515;text-decoration:none;}

.pagenavi{clear:both;margin:10px auto;text-align:center}

.pagenavi span,.pagenavi a { padding:4px  7px;margin-right:2px;font-size:11px;color:#555;background:#e8e8e8;border:solid  1px #ccc;}

.pagenavi a:visited{}

.pagenavi a:hover,.pagenavi .current{color: #FFF;background-color: #e81d1d;border: 1px solid #fb1515;text-decoration:none;}

.pagenavi .pages{display:none}

.pagenavi{clear:both;margin:10px auto;text-align:center}

.pagenavi span,.pagenavi a {

border: 1px solid #BFBFBF;

padding: 3px 6px;

margin: 2px;

font-size:11px;color:#4a77ae;

background:#e8e8e8;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px; }

.pagenavi a:hover,.pagenavi .current{color:#000;background:#f6f6f6;border: 1px solid #ccc;text-decoration:none;}

A simple Scroll to Top Button with Jquery

2010-12-31T03:53:00.000-08:00

Scroll to Top button control is a great addition for blogs with long posts. You can see a button like that right on this blog. There are many jQuery solutions which allow your visitors to smoothly scroll to the top of a page, in this post I will show you the easiest way to add a Scroll to Top Button with Jquery effect.

Demo

First, add these lines above </b:skin>

.scroll_top { background: transparent url(http://2.bp.blogspot.com/_9f84sW5p23I/TRzEsuHJ62I/AAAAAAAAAWg/H_0jxua4GqU/s1600/scroll_top.png) no-repeat;

display:block;

width:50px;

height:50px;

cursor:pointer;

position:fixed;

right:10px; bottom:10px; }

Next, paste this code above </body>

<div class='scroll_top'/>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

<script src='https://sites.google.com/site/noctblogsite/script/scroll_top.js' type='text/javascript'/>

That's all. Hope you like it !

Jquery Translate Widget for Blogger

2010-12-30T02:20:00.000-08:00

Google Translate Widget is very useful for the sites which have audiences come from several countries, because they may not understand our language. But the translate widget below is different, it uses jquery AJAX API combine with Google Translate, click on the flag to see effect:

Impressed ? This effect won't disappear by the next time you visit that website.
If you want to add this awesome widget to your blog, just create a HTML/Javascript widget then paste this code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script src="http://jquery-translate.googlecode.com/files/jquery.translate-1.3.9.min.js" type="text/javascript"></script>

<script src="https://sites.google.com/site/noctblogsite/script/cookie.js" type="text/javascript"></script>

<a style="margin-right:10px" href="javascript:void(0)" onclick="lanES()" title="Espanol"><img alt="Spanish" src="http://2.bp.blogspot.com/_9f84sW5p23I/TRxGl5Mcu-I/AAAAAAAAAV8/S3pkV5G8QcE/s1600/spanish.png" /></a><a style="margin-right:10px" href="javascript:void(0)" onclick="lanEN()" title="English"><img alt="English" src="http://1.bp.blogspot.com/_9f84sW5p23I/TRxGkSfkSiI/AAAAAAAAAVw/nEwNg6cyxvg/s1600/english.png" /></a><a style="margin-right:10px" href="javascript:void(0)" onclick="lanFR()" title="French"><img alt="French" src="http://1.bp.blogspot.com/_9f84sW5p23I/TRxGk0Bu5aI/AAAAAAAAAV0/V2AiefsUjhw/s1600/french.png" /></a><a href="javascript:void(0)" onclick="lanJP()" title="Japanese"><img alt="Japanese" src="http://4.bp.blogspot.com/_9f84sW5p23I/TRxGlalpCTI/AAAAAAAAAV4/K9zJiFzbMhs/s1600/japanese.png" /></a>

You can add some more languages if you want. Hope you like it !

Glow Blogger Template

2010-12-28T18:19:00.000-08:00

Base on a great theme from Elegant Themes , I tried to convert it into Blogger Template. And here is the result:

Demo | Download

Do you like it ?

All js files of template were removed. Try new script address

Simplista Blogger Template

2010-12-27T19:16:00.000-08:00

Another Blogger Template from Noct Blog Tip, it was converted from a free wordpress theme of WPNow

Some features:

2-Column Layout
Horizontal Category Menu
Adsense Ready
Auto-readmore
Comment Avatar
... and more

Demo | Download

Hope you like it !

Note: if your footer columns content is too long, it may cause overflow. In that case, please increase columns height:

#leftcolumn { ... height:230px; }



#middlecolumn { ... height:230px; }



#rightcolumn { ... height:230px; }

Anime Heaven V3 Blogger Template

2010-12-27T01:32:00.001-08:00

Today i am very excited to release Anime Heaven V3, the final - the best in Anime Heaven series.

So what's new ?

- Green Style
- 2 columns with right sidebar
- Many bugs fix
- All widgetized - now easier to use

- Pages Menu current effect fixed, now works perfect

- New Layout View

Demo | Download

You are free to use or modify this template but must keep Footer Credit Links