syndromous-ways

How to add parse HTML tool  to your blog

Tool parse HTML is an application to convert HTML before add to post or template so the HTML code can be displayed.

Here's how to add parse HTML tool :
1.  Open www.gmodules.com
2. Set according your wish

how to add ribbon to show old/new post on blog
I think it's not important widget that you have to add to your blog. But i think this widget can help your visitor to know that's old or new post. This ribbon can also make your blog more beautiful and interested.

If you want to use this widget, just follow my instruction
1. log in to your blogger account  > Dashboard > Template > Edit HTML
2. find this code

<div class='post hentry'>

3. Paste this code below code  <div class='post hentry'>

<b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.isFirstPost'>
<span style='display:block;position: absolute;top: -4px;right: -4px;margin: 0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixcjbZR3PODlsY00vY4G-vCvCupUGJw02jy5xhtzj_EIEBYW9EZa90ABu2vPXkpqku3yCCKh5dfJSXHDzssqaN8ZJ38a4Q9lall34Udkc_GPvuX29kFSWxpDmf9B8OBH-ykSYbOC-h2Q/s56/New-Ribbon-By-EXEIdeas.png);width: 56px;height: 56px;'/>
<b:else/>
<span style='display:block;position: absolute;top: -4px;right: -4px;margin: 0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLVGsWQCvY-PGwVFwOMbDfqFT3PsBXMiX6xehTQXolSweXk0dpidWwp_5TLZtuoSZNoKJ_Tt9vzeEf-CqwG06ScEzPOA-W9nFNIPHK2PWEUalbWvWddUmr7MN1dCWwjAKlAu-MV4Z6vg/s56/Old-Ribbon-By-EXEIdeas.png);width: 56px;height: 56px;'/
</b:if></b:if></b:if>

* This code only show on your home page, if you want to show on your post page, delete the green code

4. find code </head> and then paste this code below and place it above code </head>

<style>.post{position:relative;}</style>

5. Save template

How to add follower twitter widget on blog


1.  Log in to your blogger account
2.  Dashboard  > Layout > Add Gadget > HTML/Javascript
Copy this script below

<br />
<script type="text/javascript" src="http://julak-project.googlecode.com/files/twitter%20fan%20box%20.js"></script><div id="twitterfanbox">
</div>
<script type="text/javascript">fanbox_init("<span style="color: red;">alahifghafur</span>");</script><br />

Note : Change alathifghafur with your username.

How to add breadcumbs navigation in blogger



1. Login to blogger > Template > Edit HTML
2. Click CTRL + F and then find this code below

<b:include data='top' name='status-message'/>

 3. Add the following code after that code

<b:include data='posts' name='breadcrumb'/>

4. And then find this code

<b:includable id='main' var='top'>

5. Then, change with this code

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>

6. And then input style, click CTRL + F and then find this code ]]></b:skin>
7. Add this code above code ]]></b:skin> 

.breadcrumbs {padding:5px 5px 5px 0px;margin: 0px 0px 15px 0px;font-size:95%;line-height: 1.4em;border-bottom:3px double #e6e4e3;}

How to add widget Back to Top in blog
I am sure you often see blog with this widget, that is Back to Top widget. I think this widget not very important because according me, blog should not need this widget.  Main fungction from this widget is if you click widget back to top so automatically display screen will soon be heading to the top.

1. Log in to your blogger account > Dashboard > Template > Edit HTML
2. Find this code ]]></b:skin>
3. Add the following code just above the code ]]></b:skin>

<br />
<br />
#backtotop {<br />
padding:5px;<br />
position:fixed;<br />
bottom:10px;right:10px;<br />
cursor:pointer;<br />
}   <br />
<br />

4.  Then find the code </body> then add the following code

<br />
<a href="#" id="backtotop"><img alt="back to top"  src="<span style="color: red;">http://julak-project.googlecode.com/files/back%20to%20top.png</span>"  /></a>

5.  Then find code </head>
6. Add the back to top javascript code below before </head>

<br />
<b><span style="color: red;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'</span></b>
type='text/javascript'></script><br />
<script language="javascript">
$(window).ready(function(){
$('#backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});</script>

7. Click preview, if it's work and not error, save the template.

• Look at http://julak-project.googlecode.com/files/back%20to%20top.png That is url to store the image "Back to Top". I recommend if you want to use this widget please hosting itself in google code.

How to make archieve be scroll on blogspot