Showing posts with label Optimation. Show all posts
Showing posts with label Optimation. Show all posts

How to Make a Dropdown Menu In Blogger


Dropdown menu is the menu that contains a bunch of text or links are shortened to a single menu. example looks like this:






Its contents will only appear if you click on the menu so that it can save space blog.This method can be used as alternative blogroll or other needs. Well to make it, it is very easy: 1. Log in to Blogger . offer menu Design -> Page Elements 2. Clicks Add a Gadget -> HTML / Javascript 3. Enter the code below into the box







<select onChange="document.location.href=this.options[this.selectedIndex].
value;">
<option value="http://alamatblog.com/#" selected>Blogroll</option>
<option value="http://alamatLink.com/">Nama Link</option>
<option value="http://alamatLink.com/">Nama Link</option>
<option value="http://alamatLink.com/">Nama Link</option> 
</select>

If you want to add a new link again to add the code < option value = "http://alamatLink . com / "> Link Name </ option> above the </ select> Replacealamatblog with with your blog address. Replace text colored red with the address of the link you want to install. Replace text colored blue with the name of the link you want displayed. 4. If you already click Save . Finish Note: the code above to open links in the same page. If you want to open a link in a new page. Change the code














<select onChange="document.location.href=this.options[this.selectedIndex].
value;">
Be

<select onchange="javascript:window.open(this.options[this.selectedIndex].
value);">

Good luck ..

Installing Reply Option In Blogger Comments Form



In this post I will show you how to install the reply option in the blogger comment form. As we know, this is very useful tool to facilitate the blog owners and visitors in reply to a comment. If the Wordpress platform tool is automatically installed in the comment form. As with the blogger platform. However, you can also install the reply option in your blogspot blog with just a few additions to the code in your blog template. those of you who want to know how it works, just practice on this blog because I've put reply option on comment form. Nah for If you are interested to put up reply option on your blog comment form. Here's the tutorial: 1. Login to navigation dashboard Blogger. Open the menu Design -> Edit HTML 2. You can check the 'Expand Widget Templates' 3. Find code

form comments












<data:commentPostedByMsg/>
or

<data:comment.timestamp/>
4. Place the following code on it

<span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=BloggerIdAnda&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0, location=0, statusbar=1, menubar=0, scrollbars=yes, width=400, height=450&quot;); return false;'>[Reply Comment]</a></span>

Replace the words in red with the id of your blog. To find your blog id click menuDesign and note-digit number in your address bar. If you want to change the word that appears in the reply comment form, edit the text in green. 5. If so save your template and see what happens. be more interesting you can also change the icon image reply posts. The trick, replace the green paper with the <img src = " url-image "/> Do not forget to change the image url with the address of your image icon. Eg: http://lh4.ggpht.com/_15FopxVONSo/TEF6-vtUqHI/rcwCiaUc-Os/reply.png For example, here I provide some models reply icon. If interested, please upload images to your icon image hosting you or copy the image icon beside the address to tries. Hopefully useful.
























Creating Related Posts with Thumbnail


related-post

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

How to Create Related Posts Widget V2


Yesterday there was a friend who asked me, 'how do I make a widget related posts as I use on this blog. " Actually I create a widget related posts I've been posting on this blog, it's just the version related posts that I use now is different from theversion related posts that have been posted on this blog. Therefore, in this post I will explain how to create related posts as I use on this blog or that I gave the namerelated posts v2 . 


Maybe you will ask what is the difference between v1 and v2 related posts? If the v1 related posts , related posts will be shown along with titles grouped by label and label each. For example, consider the following screenshot. while version 2, related posts or Articles related to only display post titles alone (without title label) and all related articles merged into one so Similar to the related posts widget belongs to WordPress. An example looks like this:

 For those of you who want to install related posts or related posts wordpress v2 style please follow the steps below: 

1. On page dashboard blogger, go to Design -> Edit HTML 
2. You can check the "Expand Widget Templates" 
3. Find the code ]]> </ b: skin> 
4. Put the code below css thereon







related posts widget










# 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

Attach Avatar in Blogger Comments Box


avatar on blogger comment form

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:








avatar on blogger comments











<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


smile

Download Alexa Booster

Alexa Booster - To increase the page rank and SEO of a blog can use a variety of tricks and how, to use banklink booksmark blog or social qualities of having good PageRank and dofollow. for novice blog or blog which makes it somewhat difficult to increase blog traffic, so it must be a lot of effort to advertise this blog and blog traffic so be good. 


Download Alexa Booster

Download Alexa Booster



No need to worry for beginner bloggers to increase traffic to blog because here hasbihtc.blog will provide tricks to increase blog traffic quickly. not have many visitors, because this softwere our blog will have high traffic and of course from various proxies.


Download Alexa Booster


Directly be ok. softwerenya name is " Alexa Booster ". softwere with this blog we can have high traffic. we just live our blog address and wait until the process is complete.


Download Alexa Booster

Download Alexa Booster


softwere can be downloaded free of charge from your service provider or download alexa driving here to get the softwere. advantage of this softwere able to rapidly increasing traffic various proxies , and IP .

I use it quite easily. 
- Install the application as usual 
- Enter the address of the blog or wibesite
- Follow the instructions 
- Wait until the process is complete


Nb. For bloggers who do not know what it is Alexa Booster or usefulness Understanding Alexa Rank and few tips from my hasbihtc.blog on Download Alexa Booster may be beneficial yours respectfully happy blogging.

Copyright © : http://hasbihtc.blogspot.com/2012/02/download-alexa-booster.html#ixzz28UlKRdeo

Installing Label Cloud On Blogger


label cloud
Label cloud was developed byphydeaux3 . As the name implies, is associated with a label widget so for those of you who do not put a label widget on your blog. This method can not be used. To label blogger standards, usually the number of posts that fall under this category will be listed in the form of numbers located on the side.


But different from the label cloud , which describes the number of posts in a font size of the label. So the more posts that fall into that category, the greater the size of the font. Making it look more interesting and less monotonous. In addition, it is also suitable for the size of the width of the sidebar as massage arrangement to the side. Well for those of you who want to install label cloud, here are the steps: 1. As always log into Blogger. On the menu Layout -> Edit HTML 2. Backup your template 3. Tick ​​the " Expand Widget Templates " 4. Put the code below the above code ]]> </ b: skin>










/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}
5. After that, put the code below the above code </ head> 

<script type='text/javascript'>
/ / Label Cloud User Variables
cloudMin var = 1;
maxFontSize var = 20, / * source Ukuran maksimal label * /
var maxColoris = [0,0,0], / * source Warna kiss * /
var minFontSize = 10, / * source Ukuran minimal label * /
var minColor = [179,179,179], / * source Warna Kecil * /
var lcShowCount = false;
</ script>
6. Then find the code below.

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
7. Replace the code above with the code below

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point --------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a&gt;b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}


var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = &quot;<data:label.name/>&quot;;
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] &lt; cloudMin){
continue;
}
for (var i=0;3 &gt; i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>
8. If so, click Save Template . Done If my friend wants to modify the font size and color of the label. Please direct your attention to code like this



<script type='text/javascript'>
/ / Label Cloud User Variables
cloudMin var = 1;
maxFontSize var = 20 , / * source Ukuran maksimal label * /
var maxColoris = [ 0 , 0 , 0 ], / * source Warna kiss * /
var minFontSize = 10 , / * source Ukuran minimal label * /
var minColor = [ 179 , 179 , 179 ], / * source Warna Kecil * /
var lcShowCount = false;
</ script>
Replace the words in red as you wish. Good luck ..!

How to Register FeedBurner


Feedburner is a web publishing service by spreading the content and the rss feed of a blog / website, so the service Feedburner helps promote a blog or website content so it can be a blog or website traffic1.For feedburner register please visit www.feedburner. com When you visit the page will appear as below








2. Please fill in the red circled with the address of your blog or website and then immediately click next and do not need to click on the box I am podcaster then the following page will appear: 3. Fill in the appropriate data and then click Active blog feeds, if no error is usually because the feed address please fill in the name of the other until the window below 4. After the address of your blog feed so, you simply go to the blogger to change blogger feed settings. How to access the settings menu  site feed. Then enter your feed address that you have made ​​to a field posting feed URL changing direction  save. Back to Feedburner. Jump just click skip directly to feed management do not need to click next, then you are setting your feedburner








Setting feedburner


Setting feedburner is intended to optimize our blog feed that already in daftarin on feedburner
feedburner settings to the way, the first step that should be done is to login at feedburner. Please visithttp://www.feedburner.com/ then sign in then there will be a page. There, please enter your username and password, which when I first made ​​the list in feedburner. Then click sign in.








After that you will be taken to a page in your Feedburner feed. Please click on the blog that would feed on the setting. On that page, there are 5 menu on feedburner (Analyze, Optimize, Publicize, Monetize, and Troubleshootize). optimized SmartFeed click menu and then click enable. clicking Publicize menu and activate the email subscription service, Ping shot and FeedCount. Email subsciption service function is to activate the subscription form that you can plug in your blog. To ping shot, serves to inform feedburner directly if your blog is updated. So if you do the ping ping service of the site, can be directly detected quickly by feedburner.





Number of comments again show at Blogspot blogs


The number of comments is no longer displayed on Blogger Blogspot? How can you let the number of comments on Blogspot again? Why the number of comments is not displayed?


Anyone who operates a Blogger Blogspot blog is occasionally "surprised" with small problems or malfunctions. There is no evil intent behind it. Causes are often technical innovations and improvements usually only temporary restrictions.

Blogger leads to changes, it is usually associated with changes in all blogs. Greatly simplified, one can imagine it is an update of a software - it will be re-programmed functions provided. Blogger has also in principle the possibility to integrate these innovations in all blogs. Unfortunately, it often happens without warning and it can be for an uncertain period of time being not find any solutions. It requires a good understanding to these changes in the (X) to detect HTML at all and, if necessary to change it.
Since June 2012, the number of comments on Blogger is no longer displayed. This is especially blogs that use the standard templates (design).


One can wait for now, the problem has been resolved by bloggers or eliminated by changing the code problem itself.
The modification of the code has been tested on several blogs, and worked without problems and limitations.Nevertheless, no guarantee can be given that this tip works with all blogs. For now, you should also try this first implementation on a test blog. If the test was successful, and the change is to be implemented then in the main blog, make a backup of the blog and the template (design) is to be made and these can then be uploaded as needed.
The solution is to share some code, and it is important to note that when changing the template (design), this step may be repeated.

Access to the HTML code in the old Blogger interface
  • at blogger.com log and seek appropriate Blog
  • Design >> Edit HTML

Access to the HTML code in the new Blogger interface
  • at blogger.com log and seek appropriate Blog
  • Live in the template >> Blog >> Edit HTML and seeing this message: "The HTML editing can affect the operation of some functions and is recommended only for advanced users. If you edit the HTML code of the template, this can have unforeseen effects on other Blogger features. We recommend first the template designer, where you can add in the "Advanced" CSS. "
  • but whoever wishes to make changes in the HTML code ignores this warning and click Continue

In both surfaces:
  • Check "widget templates show completely"
  • in both surfaces enable the site search (F3 or CTRL + F) and search for the following line:<data:post.commentLabelFull/>:
  • the first result is the yellow highlighted code is deleted


  • The following code will be inserted and "Save Template" then:
<b:if cond='data:post.numComments == 1'> 1 Comment <b:else/> <b:if cond='data:post.numComments 0'> == 0 Kommentare <b:else/> <data:post.numComments/> Kommentare </ b: if> </ b: if>




  • If needed, the words 1 " comment ", 0" comments "and (multiple)" Comments changed "(eg answer / answers, thoughts / opinions, etc.)
Reload the blog and the number of comments should be shown again:





By BlogSpot users that have this implementation works well, a brief comment would be great. For demonstration purposes, the functionality for other readers links to your own blog are welcome.