Slider Menu 15 comments

This template is also available that feature attractive, slider menu. Silder menu is interesting enough to be placed under the header. Besides attractive because of its dynamic, the menu is quite effective slider invite blog visitors to see and click on your post put the slider in the menu.

There are some changes that I do in this menu, other than background color, writing models, and the color of the writing, I also change the time interval (delay) between the post. I put the menu is the top slider template, exactly below the header.

To edit the contents of this slider menu, please follow the instructions below :

1. In the Page Elements, see the following gadgets :

    

2. Click on the gadget, then click the HTML / Javascript.

3. Enter the following code into the box provided :
   

   <!-- Casing -->
   <div id="casing">
   <!-- Slider -->
   <div id="slider">
   <div id="mover">
   <div class="slide">

   
   

   <h2><a href="http://soft-template.blogspot.com/2009/11/read-more.html">&nbsp;Auto Read More</a></h2> <p>As we know, bloggers have support read more. But still we have to divide the posts that will appear first and which will appear whole. Read more automatic advantage is you no longer need to manually divide the posts read more will work automatically according to the sentence fragment height, which we previously had on the Edit HTML settings. And...</p> <img alt="" width="130px" src="http://lh3.ggpht.com/_wyuKzbY9B1A/SuQOiU0tPgI/AAAAAAAAAcQ/rgnL0rj74BE/read%20more_thumb%5B3%5D.jpg?imgmax=800" height="80px"/>
   </div>

   
   

   <div class="slide">
   <h2><a href="http://soft-template.blogspot.com/2009/11/avatar-mybloglog.html">&nbsp;Avatar Mybloglog</a></h2> <p>Avatar mybloglog  is the face profile image visitors who commented on our blog. And visitors who make comments are member of mybloglog, a social bookmarking site that is very popular. I have provided avatar mybloglog widget on this template, but if you are interested to put it on your other blog, I'll give you a guide below. On the Edit HTML...</p> <img alt="" width="130px" src="http://lh5.ggpht.com/_wyuKzbY9B1A/SuM0KGoRERI/AAAAAAAAAas/nbLA8Za-l8E/Sasha%20jadi%20artis2_thumb%5B6%5D.jpg?imgmax=800" height="80px"/>
   </div>

   
   

   <div class="slide">
   <h2><a href="http://soft-template.blogspot.com/2009/11/label-cloud-modification.html">&nbsp;Label Cloud Modification</a></h2> <p>Label cloud is a label or category that looks like a cloud. Actually, bloggers are provide labels cloud, but the label cloud from this blogger just by writing just one color. Label cloud that we will modify is how to make the writing colorful large and small as writing. In this template I have put a label cloud modification, but if you want to place...</p> <img alt="" width="130px" src="http://lh4.ggpht.com/_wyuKzbY9B1A/SuQGJwiUzVI/AAAAAAAAAcI/noM9V2VIK1A/label_thumb%5B8%5D.jpg?imgmax=800" height="80px"/>
   </div>

   
   

   <div class="slide">
   <h2><a href="http://soft-template.blogspot.com/2009/11/related-posts.html">&nbsp;Related Posts</a></h2> <p>Related Posts are posts which are in a label or category. Using the related posts to facilitate visitors to see what articles are in a label with other articles, and will most likely be in the clicks by visitors, because it was right under our posts. Actually, I've put the code related posts on this template, but if you want to put this code in...</p> <img alt="" width="130px" src="http://lh6.ggpht.com/_wyuKzbY9B1A/SuP_GmO4XDI/AAAAAAAAAcA/MDwK16GZT-s/related_posts_widget_thumb%5B2%5D.png?imgmax=800" height="80px"/>
   </div>

   
   

   </div>

   <!-- /Mover -->
   </div>
   <!-- /Slider -->
   </div>
   <div class="clear"/></div>

4. Replace all the code that I give color to your code, then click Save.

Sections must be changed:

Blue color   -------->   url address of the posting
Green color -------->   the contents of the postings to be displayed
Red color    -------->   url address of the image
Font bold    -------->   post title

Good Luck !

Read More 8 comments

As we know, bloggers have support read more. But still we have to divide the posts that will appear first and which will appear whole. Read more automatic advantage is you no longer need to manually divide the posts read more will work automatically according to the sentence fragment height, which we previously had on the Edit HTML settings.

And once again I explained, that I've placed the code read more automated in this template. But if you want to come along put on another blog, then please follow the tutorial below.

Log in to Blogger, then on the Edit HTML page, click the Expand Widget Templates. Look for the code </ head> and put the following code before the code </ head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 300; summary_img = 300; img_thumb_height = 100; img_thumb_width = 120; </script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><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>

Search code <data:post.body/> or <p><data:post.body/></ p>, then delete the code and replace with the following code :

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'><br/><b>Read More … </b></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

and the Save Template.


Description:

1. summary_noimg = 300 -> high for posting without a picture.
   
   
   
2. summary_img = 300 -> to higher posts with pictures.
   
   
   
3. img_thumb_height = 100 -> high-image.
   
   
   
4. img_thumb_width = 120 -> width of the image.
   
   
   
5. Read More ... -> you can replace with Read Full Story or whatever you want.

Avatar Mybloglog 0 comments

Avatar mybloglog  is the face profile image visitors who commented on our blog. And visitors who make comments are member of mybloglog, a social bookmarking site that is very popular. I have provided avatar mybloglog widget on this template, but if you are interested to put it on your other blog, I'll give you a guide below.

On the Edit HTML, please smear Expand Widget Templates, then place the following code above the code </ head>

<script type='text/javascript'>
//<![CDATA[
/*
Merlinox and Napolux MyBlogLog Avatar Creator
created by Merlinox (blog.merlinox.com)
helped by Napolux (www.napolux.com)
version 0.1 (20061214)
version 0.2 (20061215)
compatible with all blogger blog
*/
if(typeof(myLayer)!='function'){
function myLayer (x){
//individuo l'oggetto
if(document.layers){ // browser="NN4";
lay=document.layers[x];
}
if(document.all){ // browser="IE";
lay=eval("document.all." + x);
}
if(!document.all && document.getElementById){ // browser="NN6+ or IE5+ if you're willing to dump the !document.all stuff";
lay=document.getElementById(x);
}
return lay;
}
}
//lo prendo da blogger
function myBlogAvatar(codiceCommento,autore,stile){
//scrivo lo span
//var myBlogSpan = "myBlog-" + codiceCommento;
//document.write("<span id='" + myBlogSpan + "'><i>myBlogLog...</i></span>");
//metto tutto minuscolo perchè indexOf è case sensitive
if (autore != ""){
alt="MyBlogLog: " + autore;
myBlog = "<a target='_blank' href=\"http://www.mybloglog.com/buzz/co_redir.php?href=" + autore + "\" rel='nofollow'><img src=\"http://pub.mybloglog.com/coiserv.php?href=" + autore + "\" alt=\"" + alt + "\" title=\"" + alt + "\" border=\"1\" class=\"myBlogAvatar\"></a>";
//myLayer(myBlogSpan).innerHTML = myBlog + myLayer(myBlogSpan).innerHTML;
//myLayer(myBlogSpan).innerHTML = myBlog;
document.write(myBlog);
}
}
//]]>
</script>

After that look for the code <b:loop values='data:post.comments' var='comment'>

Then place the following code after the code above :

<div style='border:0;float:left;margin: 0 5px 0 0;'>
<script>
myBlogAvatar('<data:comment.id/>','<data:comment.authorUrl/>');
</script>
</div>

Good Luck !! 

Label Cloud (Modification) 3 comments

Label cloud is a label or category that looks like a cloud. Actually, bloggers are provide labels cloud, but the label cloud from this blogger just by writing just one color. Label cloud that we will modify is how to make the writing colorful large and small as writing.

In this template I have put a label cloud modification, but if you want to place them in another blog, then please follow the tutorial below.

Login to Blogger and on the Edit HTML, click the Expand Widget Templates. Then place the following code above the code ]]></ b: skin>

.label-size-1 a {
font-size: 13px;
text-decoration: none;
color:#4B8A08;
}
.label-size-2 a {
font-size: 15px;
text-decoration: none;
color:#DF0101;
}
.label-size-3 a {
font-size: 16px;font-family: Arial, Trebuchet MS, Verdana;text-decoration: none;
color:#045FB4;
}
.label-size-4 a {
font-size: 18px;
text-decoration: none;
color:#DF0101;
}
.label-size-5 a {
font-size: 23px;
text-decoration: none;
color:#045FB4;
}
.label-size-1 a:hover,
.label-size-2 a:hover,
.label-size-3 a:hover,
.label-size-4 a:hover,
.label-size-5 a:hover {text-decoration:underline}

And then Save Template.

Related Posts 1 comments

Related Posts are posts which are in a label or category. Using the related posts to facilitate visitors to see what articles are in a label with other articles, and will most likely be in the clicks by visitors, because it was right under our posts.

Actually, I've put the code related posts on this template, but if you want to put this code in your blog, then I would give this guide below.

The following short tutorial:

1. Log in to Blogger.
   
   
   
2. Click Layout.
   
   
   
3. Click the Edit HTML tab.
   
   
   
4. Then click the Expand Widgets Templates.
   
   
   
5. Find the code like this : <p><data:post.body/></ p> 
   
   or if the confused press Ctrl + F and type the following code :
   
   <data:post.body/>
   
   
   
6. Then place the following script after the code <data:post.body/>
   
   
   

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<div class='widget-content'>
<h3>Artikel Terkait</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 7;
maxNumberOfPostsPerLabel = 7;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>

Don’t forget to Save Template.