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

/ * - (Nav & Search Box) - * /
# nav {
background : # 1c426d; / * Warna backgroud Kotak Navigasi * /
height: 31px; / * Tinggi Kotak Navigasi 
0px 0px 0px; } # nav ul { position: relative; overflow: hidden; padding-left: 5px; padding-top: 1px; margin: 0; font: 1.1em / * Font tab Ukuran navigasi * / Arial, Helvetica , sans -serif; font-weight: bold; } # nav ul li {float: left; list-style: none } # nav ul li a, # nav ul li a: visited { display: block; color: # ffffff; / * Warna teks pada Kotak navigasi * / margin: 0 8px; padding: 5px 7px } # nav ul li a: hover { color: # ffffff; background -color: # C4C5B8; / * Kotak ketika Warna Text cursor melintasi navigasi * / margin: 0 8px; padding: 5px 7px } # nav ul li a.current, # nav ul li a.current: visited, # nav ul li a.current: hover {margin: 0 8px;background -color: # A6A994; color: # ffffff; padding: 5px 7px} # searchform { margin: 0; padding: 0; overflow: hidden; display: inline; } # searchbox { background : # EEE url (http://lh3.ggpht.com/_15FopxVONSo/THEhOlDrX4I / AAAAAAAAD28/5oYAsTcO0G8/search-icon.gif) no-repeat top left;width: 180px; height: 16px; color: # 202020; font-size: 12px; font-family: Verdana, Arial, Helvetica , sans-serif; font-weight: normal;margin: 2px 0px 0px 15px; padding: 4px 0px 3px 25px; border-top: 1px solid # DDD; border-right: 1px solid # 666; border-left: 1px solid # DDD; border-bottom : 1px solid # 666; display: inline; }# searchbutton { background : # 1c426d; / * Warna backgroundtombol pencari * / color: # FFF; / * Text tombol Warna pencari * / font-size: 11px; font-family: Verdana, Arial, Helvetica , sans-serif;margin: 0px; padding: 2px 3px 0px 3px; font-weight: bold;border-top: 1px solid # DDD; border-right: 1px solid # 666;border-left: 1px solid # DDD; border-bottom: 1px solid # 666; }

Description:
Post-colored red on a description of each code. Please change according to your template. If you want to change the background image with the navigation menu, then add the code url (the address of your image) behind the code "colorbackground navigational boxes ". For example: background : # 1c426d url (http://url-gambar) ; 4. After that look for the code as shown below

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Herman Blog (Header)' type='Header'/>
</b:section>
<div style='clear: both'/>
</div>

Find the code in your template that most closely with the above code 5. If you have found, place the following code below.

<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav-left'>
<ul>
<li><a href='/'>Home</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML30' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='250' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;cari artikel disini...&quot;;}' onfocus='if (this.value == &quot;cari artikel disini...&quot;) {this.value = &quot;&quot;}' type='text' value='cari artikel disini...'/>
<input id='searchbutton' type='submit' value='GO'/>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

6. So that the order will be like this:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Herman Blog (Header)' type='Header'/>
</b:section>
<div style='clear: both'/>
</div>

<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav-left'>
<ul>
<li><a href='/'>Home</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML30' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='250' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;cari artikel disini...&quot;;}' onfocus='if (this.value == &quot;cari artikel disini...&quot;) {this.value = &quot;&quot;}' type='text' value='cari artikel disini...'/>
<input id='searchbutton' type='submit' value='GO'/>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

7. If so, Save Template and see the results. If you do not want to use the search box to stay clear code in bold. Beres .. To add a link in the navigation menu. Open the menu Page Element and click Edit on the "Top Tabs". Add a link which you want to display there. Ok. Good luck. Hopefully useful.

After my post about how to make the alert message box . Apparently there is a friend who asked kesaya how to make alert box message that there is confirmation.maybe the question is like this time yes Hmm,, I think no one here we go . After cruising to and fro, go here and there. Finally, see also the tips. Ok without further ado, let 's get started. 1. As usual, log into blogger. Then go to the menu Design ->Edit HTML 2. Place the following code under <head> or rather between <head>and <b:skin>

<script type='text/javascript'>
if (confirm(&quot;Thank you for visiting this blog. Click OK to continue ")) { 
window . location = " http://www.hermanblog.com/ "; 
} 
else { 
window . location = " http://google. com / "; 
} 
</ script>

Description :
Writing in bold is the text that appears in the alert box. Please replace with the text you want
colored paper red is the web address that will open if the user clicks OK
Posts colored green is the address that will open if the user clicks Cancel or Close3. If so, click Save Template and see what happens Moreover alert box that is below the above there is one more type of alert box with the prompt field like the example below. alert box to make it do the same as above. The difference is only in the script. To be more clear please note the following ways. 1. Log in to blogger.Then open the menu Design -> Edit HTML 2. Enter the following script code below<head> 

<Script type = "text / javascript "> 
var name = prompt (" nama anda Masukkan Disini "," Nama "); 
alert (" Welcome to my blog ") 
</ script>

Caution: 
If you've ever installed a script alert box then removed once the script before installing this script. 

text in bold is the message that appears in the alert box
text color red is the text that appears in the answer box.
text color green is a message that appears after visitors click OK. Please replace as you wish.

3. If so, click Save Template . 4. Completed. Please see the results. 

Previously I've been posting about how to create a related post to display a list of post titles related to the main post. Making it easier for readers to find related topics.To learn more about related post read here . Well this time I want to discuss how to create a more interesting related post is by adding a thumbnail or picture in it .To be more clear the picture below. Interesting is not it? 
This method can be used in conjunction with a related post without thumbnail.
 For those of you who are interested to set it up, follow these steps: 

1. Open the menu Design -> Edit HTML
2. You can check the "Expand Widgets Templates" 3. Put the code following the above </ head>

<!--Related Posts with thumbnails Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
height:100%;
min-height:100%;
padding-top:10px;
padding-left:15px;
padding-right:15px;
}

#related-posts h2{
font-size: 1.3em;
color: black;
font-family: Arial;
margin-bottom: 0.75em;
}

#related-posts a{
color:black;
}

#related-posts a:hover {
background-color:#eeeeee;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr8IVqGSSpq_wyjyYy6mnRTwD9g7gBxgYledyeQHLb1R3PwklH8GqWu4DvX4rVgueDgrkyHVSGB8utlNJveMV-6GEMeY7d-CsS9PTAHD54J6gihxAkT6oENGOdoJadLj18WasqxYBcN1EC/";
var maxresults=5;
var splittercolor="#cccccc";
var relatedpoststitle="You might also like:";
</script>
<script src='http://hbhost.googlecode.com/files/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails End-->

4. Then look <p class='post-footer-line post-footer-line-1'/>

5. If not found try searching for post-footer-line

6. Put the code follows below.

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<!-- Related Posts with Thumbnails Code End-->

7. If it Save your template. Specification: var images that appear on postings that do not have a picture. You can replace the image with another image . maxresults var = 5 indicate the number of posts that appear on the related post. Please set the number of posts that would appear to change the number . splittercolor var = "#cccccc " shows color dividing line. Replace cccccc with code color you want.relatedpoststitle var = " You might also like: " show related post titles. Replace the red text with the title you want. those of you who feel the way the above is too difficult, you can use the related post with thumbnail widget provided bylinkwithin.com . For installation very easy way, here are the steps: 1. Go towebsite http://www.linkwithin.com 2. Fill in the required data on the form that has been provided

Email : Your email address Blog link : Video blog where you install the related posts widget with thumbnail Platform : select Other Width : choose the number of related posts that would appear

You can check the little box if you are using a background template, dark 3. ClickGet Widget 4. Copy and paste the code script given above </ body> on your blog template and save your template. Finish If there are less obvious or experience difficulties in installing related post with thumbnails please leave your comment below. I will try to help you.

# Related-posts { float: left; width: 250px; margin-left: 5px; font-size: 12px; line-height: 1.8em; margin-bottom: 10px; } # related-posts a { color: # 4b4b4b; } 
# related-posts a: hover { color: # ca1717; } 
# related-posts. widgets { list-style-type: none; margin: 0 5px 5px 0;padding: 0; } # related-posts. widgets h2, # related-posts h2 { font-size: 20px; font-weight: normal; margin: 5px 7PX 0; padding: 0 0 5px; } # related-posts a { text-decoration : none; } # related-posts a: hover { text-decoration : none; } # related-posts ul { margin: 10px 5px 5px 20px; padding: 0; }

5. Then look up </ head>

6. Put the code javascript follows thereon 

<Script src = 'http://hbhost.googlecode.com/files/Related-posts.js' type =' text / javascript '/>

7. Then find <p> <data:post.body/> </ p> or <data:post.body/>

8. If there are two codes are the same, choose the first 9. Put the code follows below

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<div style='font-size:18px'> <b> Related Posts: </ b > </ div>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'/>
<b: if cond = 'data: <b:if == "item"'>
<script expr: src = '"/ feeds/posts/default/- /" + data: label.name + "? alt = json-in-script & callback = related_results_labels & max-results = 5"'type =' text / javascript '/> </ b: if>
</ b: loop>
<script type = 'text / javascript '> removeRelatedDuplicates (): printRelatedLabels ();
</ script>
</ div>
</ b: if>

Description:
The text in bold is the title of the widget and the number 5 is the number of posts that Appear in the related posts. Please replace as Desired 10. If it is, save your template and see the results. If it works do not forget to push the button like below

Thanks to features Show your face from Blogger blogger comment box is now able to display images or photos from visitors who comment on blogs.


 To displayan avatar , it is very easy. You simply turn it on by going to the menu Settings -> H then on the "Showprofile images on comments "choose YES . Wrong ..It's just the way it applies only to certain particular template templates provided by blogger and the results are less than optimal in which avatars only appear when visitors leave a comment with blogger id.While that comment with openid or anonymous avatar does not appear.Nevertheless, you can also bring it to do a little editing on your template code so that the result will be like this.

 Implementing:
 1. First go to the menu Settings ->Comments . Choose and YES on the "Show profile images "and press Save . 
2.After that, go to Design-> Edit HTML
3. You can check the "Expand Widget Templates". To be more secure backup of your template. 
4. Find the following code:

<dl id='comments-block'>

5. Replace the code with this code

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

6. After that, find the following code

<a expr:name='data:comment.anchorName'/>

7. Replace the code with the following code

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>

8. After that add the following CSS code above ]]> </ b: skin>

#comments-block .avatar-image-container img {
background: #fff url(http://i37.photobucket.com/albums/e74/mrphoto16/Hermanblog/avatar.gif) no-repeat left top;
width:32px;
height:32px
}

Description: 
Text in red is the address of the picture for avatar anonymous. While the bold text is the size of an avatar . You can change as you wish.

9. Kalu is save your template. Finish a try. Good luck

By default, the display cursor on the blog are arrow-shaped, but for those of you who are bored with the look of them or would like to give admiration for visitors. You can replace the icon image so that when a visitor comes to your blog, the display cursor icon will change according to what you use. In order to more clearly you can see here . To change the cursor into the image icon, it is very easy. Here are the steps: 1. Log in to Blogger. Go to the menu Design-> Edit HTML 2. Find the code</ head> 3. Put the code below css thereon

<style type="text/css"> 
HTML, BODY {cursor: url (" http:// downloads.totallyfreecursors.com/thumbnails/cool1.gif "), auto;} 
</ style>

Description: 
The text in red is the url address of the cursor. Please change the url address you want to use the cursor.

4. After that, save your template. Done If you do not have an icon the cursor, try tovisit http://www.totallyfreecursors.com . website is providing hundreds of thousands of interesting cursor icon that you can choose according to taste.Congratulations creative blog :)

Not already a week I was not updating this blog. This is because I was busy rearranging the content on this blog and add some tools to it. One is thebreadcrumb navigation . Breadcrumb is a WordPress plugin that works belong to facilitate readers to browse the blog page. So, like a map or sitemap in the blog.plugin is usually placed on the posting. An example looks like this: In addition to facilitate the reader in knowing the location of the page being traced, this plugin can also optimize your blog page in search engines ( SEO ). Even recommended directly by Google know. Do not believe? Here is a quote that I took from the ebook ' Google Search Engine Optimization Starter Guide '. Want to know more SEO techniques in the ebook Google Search Engine Optimization Starter Guide? Please read here .Ok I think enough explanation, for users wordpress plugin Breadcrumb you can download here . As for the blogger users follow the steps below to install the breadcrumb navigation: 1. Open Blogger. Go to the menu Design -> Edit HTML 2.You can check the 'Expand Widget Templates'. 3. After that, find the code <b:if cond='data:post.title'> 4. Put the code below under <b:if cond='data:post.title'>

<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumb'>
<a expr:href='data:blog.homepageUrl' rel='tag'> Home </ a > »
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr: href = 'data: label.url "rel =" tag "> <data:label.name/> </ a>
<b:if cond='data:label.isLast != "true"'>, </ b: if>
</ b: loop >
» </
b: if>
<data:post.title/>
</ div>
</ b: if>

5. Then look up the code ]]> </ b: skin>

6. Put the code below css thereon

. Breadcrumb {
padding: 5px 5px 5px 0px;
margin: 10px 0px 0px 0px;
font-size: 90%;
line-height: 1.2em;
border-bottom: 3px double # e6e4e3;
}

7. If you've saved your template and see what happens. Hopefully useful :)