ThisDemo2 Blogger Store Template

blogger store template thisdemo2

Thisdemo2 Blogger Store Template originally named Johny Wusss which design by Maskolis, I only add post template to use it like store template and also add one static page call Order Form to order via email, this order form actually a contact page which build from foxy form and you can get it for free from they site.

With a three-column display, this Blogger Store Template is able to display more products on the page.

To make this template looks like the demo, you must use below post template:

<table border="1" style="width: 100%;"><tbody>
<tr><th width="60%"><img alt="YOUR ALT" border="0" src="YOUR IMAGE SOURCE"
style="display: block; height: 100%; margin: 0px auto 10px; text-align: center; width: 100%;"
title="YOUR IMAGETITLE" /></th><td style="text-align: center;">
<a href="http://YOUR-ORDER-FORM-URL" target="_blank">ORDER VIA EMAIL</a>
</td> </tr> </tbody>&alt;/table>
Price: $ 0.00,-</h1>

Adjust capitalized text above with yor condition, and remember to create static contact page to meet http://YOUR-ORDER-FORM-URL condition, for you who don't know how to create static page and contact page can search and  read my article in this blog.

Below is demo and download link:

Demo       Download

If you need to see how template running like demo site, you must download demo data.


Five Simple and Best Blogger Store Without Cart

Online store template is really useful for someone who need sell they product via internet, they sometimes only need display all product and start conversation with buyers to deal some transaction. And usually they don't need shopping cart, because  all transaction made via bank transaction, so online store more look online catalogue display.

Blogspot usually known as Blogger is free blogging service which own by Google, by default they have default template which could use to people to start blogging on they service. Blogger support custom domain which mean you can use your own domain to point to them, and also support for who need modifying default template.

In this posting I have collect five simple and best blogger store template without cart, and all template look clean and simple, but none of this have a shopping cart inside, If you need to know and try to use it for your online store, you can see the demo and download it for free, below is the list you can try it one by one:

1.  Demo 2 Blogger Store Without Cart


2.  Blogger Store Template 4 Column


3.  2wearstore Blogger Store Template


4.  Bogger Store Template V2


5.  Simplex Blogger Store Template


That's it and Thank you

Four Steps to Clean Up Virus and Malware

Virus is malicious software which annoying, virus also hide your file or even damage it, but for me some worm and trojan is a kind of malicious software which really annoys, because worm or trojan can disturb my operating system and I hate to reinstall my computer, the most sucks is, it can create backdoor and steal personal data and insert some adware program for the author benefit.

So, if you think your computer windows get virus and malware attack, follow below steps to clean it:

1. Detect malware with Rkill and Malwarebytes Anti-malware

Download Rkill 

Download Anti-malware Malwarebytes 

2. Scan and clean computer with Adwcleaner, this program will clean your windows system from malicious and adwaren software like hao123.client (you must remove them from control panel too), baidu pc faster, and some unwanted program.

Download Adwcleaner

3.  Scan and remove malware, rootkits, rogues, worms and more with Roguekiller, this program can fix host hijacks, DNS hijacks, Proxy hijacks, registry hijacks and also fix Malicious Master Boot Record and Shortcut.

Download Roguekiller

4. Remove malware with Combofix, run this software from your desktop, it is important and make your options folder show hidden file and folder, and also do not forget to disable your active scanner antivirus temporary before starting it.

Download Combofix

This step is optional but I recommeded to run it, reset your browser to default setting, for Mozilla Firefox you can do this by click Help tab and Troubleshooting Information, then click Reset Firefox button, see image below:

For Internet Explorer and Chrome, find reset button inside setting in option menu, usually on the right top the browser, and also for others browser.

That's it four steps that useful for me to clean up some kind of malware and virus attacking, and to make my computer more clean and safety, install anti-malware beside antivirus, you can try with the free one from Malwarebytes Anti-malware or Anvi Smart Defender and some antivirus like Comodo or Microsoft Security Essential.

-- Update 05-11-2015 --
In 2014, there's suck and danger ransomware which could encrypt and destroy your data, one of kind of this malware which I see destroy my friend important data, the malware called CTB Locker, they encrypt data and ask pay some of bitcoin to decrypt it, my friend got infection when click link on they email, so be careful if you have to click some link which give from your contact. 

Thanks and Good luck.

Blogger Javascript Syntax Highlighting Code

Sometimes, when you put syntax code like php, css, or even javascript, you need highlight your syntax in your blog, so people could read it easily and simply to copy and paste the code you are sharing to reuse by them. Syntax highlightingr also make your code beautiful and easy to read.

There are some syntax highlighting javascript code that you can find from search engine, but for me, I only using two of kinds of  syntax highlighting, there are Alex Gorbatchev syntax highlighter and simple code snippet syntax use <pre> tag, the last one is used in my blog here.

Below is <pre> tag syntax code which use here:

<pre style="background-color: #f7e3ad; color: black; font-family: verdana;
font-size: 12px; height: auto; line-height: 20px;
overflow: auto; padding: 0px; text-align: left; width: 99%;">

Above <pre> tag will make automatic scroll when your have long syntax on right direction, and you also change background color and also other configuration as you wish, It is simple highlight syntax.

But Alex Gorbatchev syntax highlighter is my favorite syntax highlighting, to use it you can choose to running it from your web or use cdn on discoverer website, see image below how syntax highlighter running :

Blogger Javascript Syntax Highlighting Code

To use it, you need add this code below before </head> in Edit HTML Blogger Template:

<link href='' rel='stylesheet' type='text/css'/>
<link href='' rel='stylesheet' type='text/css'/>
<script src='' type='text/javascript'></script>
<script src='' type='text/javascript'></script>
<script src='' type='text/javascript'></script>
<script src='' type='text/javascript'></script>
<script src='' type='text/javascript'></script>
<script src='' type='text/javascript'></script>
<script src='' type='text/javascript'></script>
<script src='' type='text/javascript'></script>
<script src='' type='text/javascript'></script>
<script src='' type='text/javascript'></script>
<script src='' type='text/javascript'></script>
<script src='' type='text/javascript'></script>
<script src='' type='text/javascript'></script>

<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = '';

Watch code end with shBrushxxx.js, this will highlight accordance your syntax code (csharp, cpp, css, etc), and to display it on your post, use <pre> tag below:

<pre class="brush: csharp">
put your syntax here......

Another Blogger javascipt syntax highlighting which you can try are:

SHJS - Syntax Highlighting in JavaScript
Google Code Prettify
Rainbow Javascript 

Thats's is, I hope these can helpful.

Is Link Directory Submission Important For Build Backlink?

backlink building with link directory

A few years ago building link with link directory is a good way to make your site have higher rank, but this time I suggest on this issue, everything has changed a lot over the past year. Even a few years back, me personally was very active doing some submission to building back links, but for this time, I am very rarely to do that.

In terms of link building , I did a lot of mistakes, actually there are general rules that must be observed in that regard, which is to ensure build a normal high quality links with the same speed as the others , I think I was too fast in building the link, and my result is getting decrease in page rank by Google.

These days , it's still okay to build a link directory , but I recommend doing it only with directories related to your website category or niche, in general directories, for me personally, it's best to stay away from them, but you can submit to them if there are in good rank and have quality category, maybe like or some others.

Try to build a natural link, because I am also get a lot unnatural link from my was submission, this bad for SEO, so stay away from unnatural link. And also stay away from paid link building.

This below is some link directory website which provide free submission from internet, you can choose which one is appropriate to your blog or website, and they have high PR between 9 to 6 :
  • Scientific Directory is had PR.9 but they retire on Jan 2014.
  • Directory of Wonderful Things, PR.8
  • General Directory. PR.8
  • General Directory, PR.7
  • Science and Technology Directory, PR.7 
  • Music Directory, PR.7
  • Latin American Directory, PR.7
  • Arts Web Directory, Pr.7
  • Industry's Companies Catalog Directory, Pr.7
  • Art School Directory, PR.6
  • Women's Directory, PR.6
  • Health Directory, Pr.6
  • Travel & Tourism Directory, PR.6
That's it, enjoy and thanks.

Related Post Blogger With Thumbnail Inside Box Shadow

Related Post Blogger With Thumbnail Inside Box Shadow

In this article I will show you how to create related post blogger with thumbnail inside box shadow, and final result look like the image above and this related post also show which post is related to the article being read.

First you must log-in to your blogger Dashboard, and go to Template then click Edit Html, scroll down and find </head> , copy this code below before it:

<!-- Related Posts Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
margin: 10px 0px !important;
background-color: #9cd37b; //this is color insinde box shadow
background-image: -moz-linear-gradient(#9cd37b, #fff); //change shadow color as you like
background-image: -webkit-gradient(linear, left top, left bottom, from(#9cd37b), to(#fff));
background-image: -webkit-linear-gradient(#9cd37b, #fff);
background-image: -o-linear-gradient(#9cd37b, #fff);
background-image: -ms-linear-gradient(#9cd37b, #fff);
background-image: linear-gradient(#9cd37b, #fff);
height: 220px;
padding: 0px !important;
box-shadow: 0px 4px 4px -4px rgba(0, 0, 0, 0.7) !important;
border-radius: 5px 5px 5px 5px;
#related-posts h2{
margin: 2px !important;
padding: 10px !important;
color: rgb(255, 255, 255);
font-weight: normal;
text-transform: capitalize;
background-color: rgb(8, 83, 246);
border-bottom: 1px solid rgb(0, 0, 0);
border-top-right-radius: 5px;
border-top-left-radius: 5px;
background-color: #111; //this is color inside box title
background-image: -moz-linear-gradient(#9cd37b, #111); //change this color if you want
background-image: -webkit-gradient(linear, left top, left bottom, from(#9cd37b), to(#111));
background-image: -webkit-linear-gradient(#9cd37b, #111);
background-image: -o-linear-gradient(#9cd37b, #111);
background-image: -ms-linear-gradient(#9cd37b, #111);
background-image: linear-gradient(#9cd37b, #111); 
#related-posts a{
color: black;
font-family: verdana!important;
margin: 10px 0px 10px 10px !important; 
#related-posts a:hover{
margin: 10px 0px 10px 10px !important;
#related-posts img{
border: 1px solid #666 !important;
padding: 1px !important;
width: 80px !important;
height: 70px !important;
margin-right: 15px !important;
overflow: hidden;
#related-posts img:hover{

<script type='text/javascript'>
var defaultnoimage=&quot;;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Products:&quot;;
<script src=';token_hash=AAH-3GpOoevEA2SkYo_hC7uCeDHPKqQlL1SNN554Qfa3uw' type='text/javascript'/>
<!-- Related Posts End -->

To get what color you want inside box shadow, adjust all the code which labeled in blue color, of course you must preview it to get the best result and don't forget to adjust max-results as you like (recommended four or five post)

Second, still in the same menu, find code below:

<div class='post-footer-line post-footer-line-1'>

You will find more than one code, and paste this code below after the second code, why? because this is work for me

<!-- Related Posts Start-->
<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;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=4&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
</div><div style='clear:both'/>
<!-- Related Posts End -->

That's it how to create related post blogger with thumbnail inside box shadow, leave a comment if you got some problem to implement this. Good luck and thank you.

Simple Blogger Page Navigation

blogger page navigation
Page navigation is important to navigate your blog or website, so readers can easily go to page they want to see and reading, it can help to explore your blog for them.

From search engine, you can find a ton guide how to make pagenavi on blogger, but here will show you three simple steps to create it for your blogger, the steps are:

Steps One
From Dashboard go to Template and Click Edit HMTL,
scroll down and find this code:


Paste this code below right above it:

/* Page Navigation styles */
#blog-pager, .pagenavi {
clear: both;
text-align: center;
margin: 30px auto 10px;
#blog-pager a, .pagenavi span, .pagenavi a {
margin: 0 5px 0 0;
padding: 2px 10px 3px;
text-decoration: none;
color: #fff;
background: #636563;
-moz-border-radius: 2px;
-khtml-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in;
#blog-pager a:visited, .pagenavi a:visited {
color: #fff000;
#blog-pager a:hover, .pagenavi a:hover {
color: #fff;
text-decoration: none;
background: #000;
#blog-pager-older-link, #blog-pager-newer-link {
float: none;
.pagenavi .current {
color: #fff;
text-decoration: none;
background: #000;
.pagenavi .pages, .pagenavi .current {
font-weight: bold;
.pagenavi .pages {
color: #fff;
background: #636563;
/* Page Navigation styles End*/

Steps Two
Still on same window, find this code below:

<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'>

and paste below it :

<b:includable id='page-navi'>
<div class='pagenavi'>
<script type='text/javascript'>
   var pageNaviConf = {
   perPage: 5,      // this wil show five post per pagenavi, you can set this
   numPages: 5,  // this will show five pagenavi per page, set this as you wish
   firstText: "First",
   lastText: "Last",
   nextText: "»",
   prevText: "«"
<script type="text/javascript"
<div class='clear'/>

Steps Three
Find this code :

<b:include name='nextprev'/>

and replace it with below code:

<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi'/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include name='nextprev'/>

Live demo how this page navigation script display can see on my homepage, Thanks.