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;}