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 :)

Note: 
For those of you who have put up read more manual code please uninstalled first before installing the code auto read more .

1. Log in to Blogger. Go to the menu Design-> Edit HTML
2. You can check the "Expand Widget Templates"
3. Put the code below just above </ head>

<script type='text/javascript'> thumbnail_mode var = "no-float"; summary_noimg = 300 ; summary_img = 301 ; img_thumb_height = 150; img_thumb_width = 150 ; </ script>
<script type='text/javascript'>
/ / <! [CDATA [
function removeHtmlTag (strx, chop) {
if (strx.indexOf ("<")! = -1)
{
var s = strx.split ("<")
for (var i = 0; i <s.length; i + +) {
if (s [i]. indexOf (">")! = -1) {
s [i] = s [i]. substring (s [i]. indexOf (">" ) +1, s [i]. length);
}
}
strx = s.join ("");
}
= chop (chop <strx.length-1)? chop: strx.length-2;
while (strx.charAt (chop-1)! = '' && strx.indexOf ('', chop)! = -1) chop + +;
strx = strx.substring (0, chop-1 );
return strx + '...';
}
function createSummaryAndThumb (pid) {
var div = document. getElementById (PID);
imgtag var = "";
var img = div.getElementsByTagName ("img"),
if (img.length <1) {
imgtag = '< span style = "float: right ; padding: 0px 0px 10px 5px; "> <img src =" http://2.bp.blogspot.com/_0Nr--qemD8Y/TCLunoOn0SI/AAAAAAAAAsU / PFNWur48hKg/s1600/def-thumb.png "width =" '+ img_thumb_width +' px 'height = "' + img_thumb_height +" px "/> </ span > ';
var summ = summary_noimg;
}
if (img.length> = 1) {
imgtag = '< span style = "float: right; padding: 0px 0px 5px 10px;"> <img src = "'+ img [0]. src +'" width = "'+ img_thumb_width +' px 'height = "'img_thumb_height + +" px "/> </ span > ';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag (div.innerHTML, summ) + '</ div>';
div.innerHTML = summary;
}
/ /]]>
</ script>

Description: 
summary_noimg = 300 indicates the number of characters that are displayed without images summary_img = 301 indicates the number of characters displayed include images img_thumb_height = 150 thumbnail image shows highimg_thumb_width = 150 indicates the width of the thumbnail images float: rightindicates the position of the thumbnail images on the right. If you want the thumbnail to the left switch right to left img backup image that appears if there are no images in the post. You can replace the image with another image backup or just delete the picture address if you do not want to use the backup image. 4. Then find<data:post.body/> or <p> <data:post.body/> </ p> 5. Replace the code with the code below

<b:if cond='data:blog.pageType != "item"'> 
<div expr:id='"summary" data:post.id'> <data:post.body/> + </ div > 
<script 
style = "float: left"> <a expr:href='data:post.url'> <b> Read more »</ b> </ a> </ span > 
</ b: if> 
< b: if cond = 'data: <b:if == "item"'> <p> <data:post.body/> </ p>
</ b: if>

6. If so, save your template. 7. Completed. Please see the results as usual you can be creative yourself link read more instance to add the post title in it or change the read more link to the image . Same way with read more manual . Good luck! When there are less obvious please inquire through the comment section I will try to help you.

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.