Dropdown MenuTeks1/Link1Teks2/Link2 Teks3/Link3

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

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.

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