Page navigation widget is a widget that serves to open the back page on the blog.Its function is similar to the "older posts" and "recent posts" on the blog. The difference is that with this widget you can be faster to browse the backyard of a blog because you do not have to open one page that can directly jump there but kehalamman next. So that could save your search time. 

Ok for those of you who are interested to apply. Here's how to installation. 

1. Log in to blogger. Open the menuDesign -> Page Elements

2. Click Add a Gadget -> HTML / Javascript and then put the code below into the box

<style>
.showpageArea a {
text-decoration:underline;
}

.showpageNum a {
text-decoration:none;
border: 1px solid #bbb;
margin:0 3px;
padding:3px;
}

.showpageNum a:hover {
border: 1px solid #bbb;
background-color:#bbb;
}
.showpagePoint {
color:#fff;
text-decoration:none;
border: 1px solid #fff;
background: #000;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #bbb;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

</style>



<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';


var pageCount=5;
var displayPageNum=3;
var firstPageWord = 'Awal';
var endPageWord = 'Akhir';
var upPageWord ='Sebelumnya';
var downPageWord ='Selanjutnya';



var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333;background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> <a href="http://www.hermanblog.com">Grab this Widget ~ Navigasi Halaman</a></div>

Number five on the " var PageCount "shows the number of posts that will appear on each page. Please be replaced according to your wishes. 3. If you already clickSave . Then place the widget below Blog post like the example below

4. Click on View Blog and see what happens. Good luck .. 

Wibiya - one of the websites that provide facilities free toolbar for your blog, toolbar from wibia is very sophisticated. 

feature of the toolbar Wibiya these include: direct search, who's online, live video, translate, timeline, Various Facebook widgets, twitter, youtube , Live chat and sharing your photos. Hmmm not advanced this toolbar? curious to see the Demo??

 immediately wrote visit wibia and look at the bottom of your browser.Once you have a look if you want to install it into your Blogger? Well below this review to make it. 

• 1. Go to website wibiya.com and click the " Get It Now " 
• 2.In Form " Create An Account "fill out the form according to your data then kik tomblol" Next " 
• 3. Then choose your toolbar theme in the " Select a Theme "Then click the" Next " 
• 4. In the " Application Settings"configuration your accounts into the toolbar, it Seletlah click the" Next " 
• 5. In the " Add it "final installation or click the logo" Blogger "or install on blogger
• 6. Make sure you log in to install blogger widgets, blogger logo after you click on the final stage, you are directed to the "Import page elements" blogger 
• 7.Select the blog you want to install the toolbar, then click the " Add Widget"then the toolbar will be installed automatically and hovering at the bottom of your blog.

 Well done deh review on how to create advanced Wibiya Toolbar, a toolbar is widely used by website owners to enhancing the website , so our blog if you use this toolbar seemed like on Facebook. 

A few may be useful.

Recent posts and recent comments and posts or comments last widget is a widget that is often used by bloggers, because the second widget is very useful to know the last comment and the last post on our blog.past I've tried to write about how to make recent comments and recent posts with javascript, but now we do not need to bother anymore to create a widget using javascript because bloggers are already providing this widget in the widget featured blogger.those of you who do not know about how to use this widget please follow the guidelines below. How to use this widget is quite easily is:

1.  ' Design → Page Elements "
   
2. Then Click the " Add a Gadget "
   
3. And click on the " Featured "
   
   
4. Find gadget Recent Comments , click the button to use the widgets (+)
   
   
   After the dialog box as above then fill out the widget configuration and press the " SAVE "
   
5. And for widget Recent Post on step number 3 search gadget " Recent Posts "and click the (+) the configuration box will appear as below Well after appearing box configuration as above, then fill in the configuration according to your wishes and " SAVE "
   
   
   
   
6. Finish and see the results.

Okkey blogger is evidence of progress that you can feel, hopefully more sophisticated bloggers and we are even easier to use blogger. Greetings bloggers

Views Comment Owner or blog owner has a different trinkets popular blog because with this trick the reader comments can distinguish the author with the user in a comment article.
Previous I've been talking about how to make the owner of the blog comment box is different to the user, but the development of blogger also makes the tutorial can not be used on the new template, as the template of the new code themselves different from the old one. And I had also written about how to change the old into the new comments , and on this occasion I will try to write a tutorial on how to make the box look different blog owner's comments in the new template. Yuk directly to tutorial

1. Log on menu Design -> Edit HTML and check " Expand Widget Templates "
   
2. Put the CSS code below the above code ]]> </ b: skin> 
   
   . comment-body-author {
   background: # FFFF29; / * Background color * /
   border: 1px dotted # FF2929; / * Border * /
   margin: 0;
   padding: 0 0 0 20px;
   }
   
3. Then find the code that is black then paste the code in red , as shown below.
   
   
   <dt expr:class='"comment-author "+ data:comment.authorClass' expr:id='data:comment.anchorName'>
   <b:if cond='data:comment.favicon'>
   <img expr : src = 'data: comment.favicon' height = '16px 'style =' margin-bottom:-2px; 'width = '16px' />
   </ b: if>
   <a expr: name = 'data: how. anchorname '/>
   <b:if cond='data:blog.enabledCommentProfileImages'>
   <data:comment.authorAvatarImage/>
   </ b: if>
   <b:if cond='data:comment.authorUrl'>
   <a expr: href = 'data: comment.authorUrl' cond = 'data: comment.AUTHOR == data: post.author'> <dd class='comment-body-author'> <p> <data:comment.body/> </ p> </ dd> <b : else /> <dd expr:class='"comment-body "+ + data:comment.commentAuthorClass' expr:id='data:widget.instanceId data:comment.cmtBodyIdPostfix'><b: if cond = ' data: comment.isDeleted '> <span class='deleted-comment'> <data:comment.body/> </ span> <b:else/> <p><data:comment.body/> <span class = interaction iframe-guide '/> </ p> </ b: if> </ dd> </ b: if> <dd class='comment-footer'>
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   Notice truly penempatanya
   
4. SAVE and see the results.
   

Okkeylah so first. may be useful for you and do not be shy to ask if there is trouble because I will try to help you.

Comments are things that can not be separated by post, such like motors with gasoline, but in this post I will discuss how to change the shape of the old comments blogger blogger to new comments are more sophisticated with no author photo next to post comments. If you use the Older photo template author should not appear that there is a new blogger on the existing template author photo next to them. Take a look at the image below to distinguish the previous comment with a new comment. Nah visible above scheme there is a difference with the added picture commentators. Would you like to change?The first step to get in on the " Settings "then" Comments "and be sure to choose" YES "to the question" Show profile images on comments? " thenSAVE the second step menu entry Edit HTML and tick box " Expand Widget Templates " Then, find the code below

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class = "comment-author 'expr: id ='" comment-"+ Data: comment.id '>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr: href = ' Data: comment.authorUrl ' class = 'comment-body'> <b:if cond='data:comment.isDeleted'> <span class = 'comment-footer> <span class='comment-timestamp'> <a expr:href='"#comment-" + data:comment.id' title='comment permalink'> <data: comment . timestamp /> </ a> <b:include data='comment' name='commentDeleteIcon'/> </ span> </ dd> </ b: loop> </ dl>

Understand and adapt to your template code themselves. then Replace the code above with the code below

<div expr:class='data:post.postAuthorClass' expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd expr:class='&quot;comment-body &quot; + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
<span class='interaction-iframe-guide'/>
</p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</div>

Now living SAVE deh and see what happens. , and if there are any questions please catapult comments here, starting now my passion to reply to your comments. Thank you.

Hi bloggers, how are you all? hopefully in good health and is always cheerful. In this article, I will share the knowledge I've learned to you is still about bloggers and the topics I discuss this time is about "Showing widgets on specific pages" that are often used in the template megazine, for example you want to display the widget only posted post or no just posted post. Well we just learned together. first step you have to do is enter the menu " Design "and then go to the" Edit HTML "and check the"Expand widget templates " and find code like this widget

<b:widget id='HTML1' locked='false' title='Pesan' type='HTML'>
<b:includable id='main'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>

</b:includable>
</b:widget>

To facilitate the search widget Please enter a title such as " Message "box into the browser search (ctrl + F) then add code <b:if cond='data:blog.url == data:blog.homepageUrl'> and closed with a code </ b: if> to put on only the front page alone and placed as below

<b:widget id='HTML1' locked='false' title='Pesan' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Note the placement of code that is green ! then save . , and below is the code that can be used for other placement to put on the front page / index to use code

<b:if cond='data:blog.pageType == data:blog.homepageUrl'>

To put it in the Archive page

<b:if cond='data:blog.pageType == "archive"'>

To place an item posted / posting only use code

<b:if cond='data:blog.pageType == "item"'>

And to the page or pages used static page blogger

<b:if cond='data:blog.pageType == "static_page"'>

And for extra, if you want to put on a specific page by using the URL using the code below

<b:if cond='data:blog.url == "URL_HERE"'>

Replace code URL_HERE the URL you want to display. , and for exceptions, for example, you do not put the widget only on the front page just by changing the sign = first to sign ! Example

<B: if cond = 'data: blog.pageType ! = data: blog.homepageUrl '>

Well not too hard right? may be useful for you. A few please comment if there is a question,: D NB: Code above also can be applied to other bloggers functions which I will discuss in a later

Greetings bloggers, Earlier in the post yesterday I've talked about the " Highlighting a specific text on the post "with a different background image background even I've written there. On this occasion to discuss more about the Post Highlights with extra select button that makes all visitors to the blog will find the text block, suppose you write a tutorial and you insert a script to be copied then select all button is very useful for automatic text block. Such examples below this

Do you remember ...
When you lie to me
and I memaafkanya .. remember you will struggle against you though I could not keep me fighting for my attention you'll remember about you at any time come menyelimutimu But now you respond with a smile pahitmu ...

Hehehe just an example do not need to be interpreted ya .. Okay we move on to how pembuatanya 1. Log in Edit HTML on your blog and then put the javascript code below under the code <head>

<script type="text/javascript">
function fnSelect(objId)
{
fnDeSelect();
if (document.selection)
{
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(objId));
range.select();
}
else if (window.getSelection)
{
var range = document.createRange();
range.selectNode(document.getElementById(objId));
window.getSelection().addRange(range);
}
}
function fnDeSelect()
{
if (document.selection)
document.selection.empty();
else if (window.getSelection)
window.getSelection().removeAllRanges();
}
</script>

4. Still on the Edit HTML and insert the following CSS code above the code]]> </ b: skin>

/ * __Style_copy_area__ * /
. copybox {/ * - Style Box dalam - * /
padding: 5px;
border: 1px solid # FFC71F;
background: # FFFFCC;
}
. kopiaer { / * - Style Box Luar - * /
background: red;
padding: 7px;
}
. cangkirkopi { / * - Style Tombolnya - * /
background: # B88A00:
border: 1px solid # FFC71F:
color: # FFD65C;
padding: 2px;
font-weight: bold;
}

You can mengunah display CSS code above to suit your taste and SAVE

5. After that the post editor use the following code to highlight the text a

<div class="kopiaer">
<input class = "cangkirkopi" type = "button" value = "Select All" onClick = "fnSelect (' kopihangat ' ) "/>
<div class = "Copybox" id = " kopihangat " > TEKS YANG INI Ingin DITAMPILKAN </ div> </ div>

> Remember replace text in blue is different each 1x use and both have the same > Replace the text in red above with your text 6. Publish dehh and see what happens Well above is a short tutorial I hope is useful to you, please comment if you have a catapult questions about this tutorial.