Sharing is Sexy Widget

I have installed the sharing is sexy widget in this template, but if you want to put it on your other blog, I provide a tutorial for you. As we know, a blog will be famous soon if spread over all the social bookmark sites. And one one way to update your article on the social bookmark sites, by installing the sharing is sexy widget.

But first, please change your feedburner ID

• Login to blogger, click on Edit HTML, Click Expand Template Widgets
• Then look for the code : <li class='sexy-syndicate'> <a href='http://feeds2.feedburner.com/blog-zone' title='Subscribe to RSS'/> </ li>
• Replace the red text (blog-zone) with your feedburner ID
• Save Template

To install the sharing is sexy widget in your other blog, please follow the steps below :

• Login to blogger, click on Edit HTML, Click Expand Template Widgets
• Put the following code after ]]></b:skin> 

<style type='text/css'>

div.sexy-bookmarks { height:54px; background:url(http://sites.google.com/site/dodyfarial/image/sharing.png) no-repeat left bottom;position:relative; width:540px }

div.sexy-bookmarks span.sexy-rightside { width:17px; height:54px; background:url(http://sites.google.com/site/dodyfarial/image/sharing.png) no-repeat right bottom; position:absolute; right:-17px }

div.sexy-bookmarks ul.socials { margin:0 !important;padding:0 !important; position:absolute; bottom:0;left:10px }

div.sexy-bookmarks ul.socials li { display:inline-block !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:48px !important; cursor:pointer !important; padding:0 !important }

div.sexy-bookmarks ul.socials a { display:block !important; width:48px !important; height:29px !important;f ont-size:0 !important; color:transparent !important}

.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover { background:url(http://sites.google.com/site/dodyfarial/image/sexy.png) no-repeat !important }

.sexy-furl { background-position:-300px top !important }

.sexy-furl:hover { background-position:-300px bottom !important }

.sexy-digg { background-position:-500px top !important }

.sexy-digg:hover { background-position:-500px bottom !important }

.sexy-reddit { background-position:-100px top !important }

.sexy-reddit:hover { background-position:-100px bottom !important }

.sexy-stumble { background-position:-50px top !important }

.sexy-stumble:hover { background-position:-50px bottom !important }

.sexy-delicious { background-position:left top !important }

.sexy-delicious:hover { background-position:left bottom !important }

.sexy-yahoo { background-position:-650px top !important }

.sexy-yahoo:hover { background-position:-650px bottom !important }

.sexy-blinklist { background-position:-600px top !important }

.sexy-blinklist:hover { background-position:-600px bottom !important }

.sexy-technorati { background-position:-700px top !important }

.sexy-technorati:hover { background-position:-700px bottom !important }

.sexy-myspace { background-position:-200px top !important }

.sexy-myspace:hover { background-position:-200px bottom !important }

.sexy-twitter { background-position:-350px top !important }

.sexy-twitter:hover { background-position:-350px bottom !important }

.sexy-facebook { background-position:-450px top !important }

.sexy-facebook:hover { background-position:-450px bottom !important }

.sexy-mixx { background-position:-250px top !important }

.sexy-mixx:hover { background-position:-250px bottom !important }

.sexy-script-style { background-position:-400px top !important }

.sexy-script-style:hover { background-position:-400px bottom !important }

.sexy-designfloat { background-position:-550px top !important }

.sexy-designfloat:hover { background-position:-550px bottom !important }

.sexy-syndicate { background-position:-150px top !important }

.sexy-syndicate:hover { background-position:-150px bottom !important }

.sexy-email { background-position:-753px top !important }

.sexy-email:hover { background-position:-753px bottom !important }

</style>

• Then look for the code <data:post.body/>
• If you are using read more, there will be two <data:post.body/> code. Put the following code after the first <data:post.body/>

<div class='sexy-bookmarks'>

<ul class='socials'>

<li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/your feedburner ID' title='Subscribe to RSS'/></li>

<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

</ul>

<span class='sexy-rightside'/></div>

• Save Template.

Replace red text with your feedburner ID, if you do not have, you can register your blog in feedburner. Good luck !

Avatar Mybloglog

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

Related Posts

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>Related Posts</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.

Read More

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. In this template, I've put read more. If you want to use the blogger red more , you can delete the blue read more () you can see in this post.

Log in to Blogger, then on the Edit HTML page, click the Expand Widget Templates.

I. If you want to use blogger read more

• Click Layout, then click Edit in the Blog Posts

  

• You can change the text “Read More“ to “Read Full Story” or whatever you want.

  

Search for the word “read more” or be with CTRL + F and type in the word “read more”, you will see the following code :

<span class='rmlink' style='float:right'><a expr:href='data:post.url'><img alt='read more' src='http://lh5.ggpht.com/_7Y9pl24WpQY/SuM7b-deOLI/AAAAAAAAB_4/PKYOsvyuCdc/readmore_thumb%5B2%5D.png?imgmax=800'/></a></span>

Delete the following code : 

<img alt='read more' src='http://lh5.ggpht.com/_7Y9pl24WpQY/SuM7b-deOLI/AAAAAAAAB_4/PKYOsvyuCdc/readmore_thumb%5B2%5D.png?imgmax=800'/>

The result will be as follows :

<span class='rmlink' style='float:right'><a expr:href='data:post.url'></a></span>

Save Template.

II. If you want to use read more from this template

Very simple, in writing the article click edit html, you just have to insert the code <span class="fullpost"> on the post you want to cut (the article will appear first). And closing the article with </span>

example :

How to Install Page Flip

Optimize your blog visitors to read your rss feed, by registering on feedburner. As we know, feedburner is the most popular services. By installing the widget from feedburner course will help you to promote your blog via rss feed. There is one way to help you promote your feed, by placing page flip on the blog.

Page flip is like an animated image, which usually are in the top right corner, and when the mouse in the spotlight, the image will open like paper. you can see the demo here.

• Please login to blogger with your ID
• Klik pada Edit HTML
• Put the following code above ]]></b:skin>

  #pageflip { position: relative }
  #pageflip img { border:none; width:50px; height:52px; z-index:99; position: absolute; right:0; top:0; -ms-interpolation-mode:bicubic }
  #pageflip .msg_block { width:50px; height:50px; position:absolute; right:0; top:0;
  background:url(http://lh5.ggpht.com/_7Y9pl24WpQY/S1sO-qUjmxI/AAAAAAAACwU/DrjPrO1XXaU/page%20flip_thumb%5B1%5D.png?imgmax=800) no-repeat right top; text-indent:-9999px }

• Copy all the script code (click here) and then place under ]]></b:skin>
• Then place the following code right after <body>

  <div id='pageflip'>
  <a href='http://feeds.feedburner.com/your name' target='_blank'>
  <img alt='' src='http://lh6.ggpht.com/_7Y9pl24WpQY/S1sO3NyCTSI/AAAAAAAACwM/6DxgJaTzsdc/page%20flip%20image_thumb%5B1%5D.png?imgmax=800'/>
  <span class='msg_block'/>
  </a>
  </div>

• Replace red text with your feedburner ID
• Save Template.

Good luck !