Blogger official support threaded comments . You can see the demo in SimplexDesign blog ^^ .
I think it's better than Blogger default comment ,and more convenient than embedded comment systems such as Disqus , IntenseDebate ...
I think it's better than Blogger default comment ,and more convenient than embedded comment systems such as Disqus , IntenseDebate ...
If you are using Blogger default comment system (not threaded comment ) , you might see an error : comment pagination not shown for posts with 200+ comments .
What is comment pagination ? Like numbered page navigation ,here is comment pagination :
Yes ,blogger team said that they has an API for comment pagination ,but I don't know why it doesn't work in my blog . For example , my post on Simplex Enews template has 250 comments ,and I added comment pagination code into template , but I see no comment pagination appear . It only show first 200 comments and their no way to move to the last 50 comments .
So I decided to make it myself ,add a little javascript into template for comment pagination . Fortunately ,it work ,so I think it maybe helpful to you in case your blog use default comment system and your post has more than 200 comments :D
Here are steps for making a comment pagination as I did ^^ pls backup before follow steps bellow ,because at least we have a way to comeback .
1,Go to Dashboard - > Template -> Edit HTML .
2,Add these line right before ]]></b:skin>
#commentpaging {float:right;}
#commentpaging a {margin-right:5px;}
3,Add the code bellow before <body>
<script type='text/javascript'>
//<![CDATA[
function commentpagination(url,comment){
var posturl= url;
var comment = comment;
cmpage = Math.ceil(comment/200);
document.write('<a href="'+posturl+'?commentPage=1">Oldest</a>');
for (var i = 1; i <= cmpage; i++) {
document.write('<a href="'+posturl+'?commentPage='+i+'">'+i+'</a>');
}
document.write('<a href="'+posturl+'?commentPage='+cmpage+'">Latest</a>');
}
//]]>
</script>
4, Find this line
So here is what you got
First ,this script will take the number of comment in a post ,and than divide by 200 . Round up the result to the nearest integer ,we will get the number of comment pages .
For example ,if my post has 250 comments :
250/200 = 1.25 -> round up -> 2
So the comment page 1 contain first 200 comments and the comment page 2 contain the last 50 comments .
The url to a comment page has structure :
When we get the number of comment page ,and comment page url structure ,the next step is very simple ,just write down all comment page with a loop statement .
It's the way this code work . Hope this helpful to you
What is comment pagination ? Like numbered page navigation ,here is comment pagination :
Yes ,blogger team said that they has an API for comment pagination ,but I don't know why it doesn't work in my blog . For example , my post on Simplex Enews template has 250 comments ,and I added comment pagination code into template , but I see no comment pagination appear . It only show first 200 comments and their no way to move to the last 50 comments .
So I decided to make it myself ,add a little javascript into template for comment pagination . Fortunately ,it work ,so I think it maybe helpful to you in case your blog use default comment system and your post has more than 200 comments :D
Here are steps for making a comment pagination as I did ^^ pls backup before follow steps bellow ,because at least we have a way to comeback .
1,Go to Dashboard - > Template -> Edit HTML .
2,Add these line right before ]]></b:skin>
#commentpaging {float:right;}
#commentpaging a {margin-right:5px;}
3,Add the code bellow before <body>
<script type='text/javascript'>
//<![CDATA[
function commentpagination(url,comment){
var posturl= url;
var comment = comment;
cmpage = Math.ceil(comment/200);
document.write('<a href="'+posturl+'?commentPage=1">Oldest</a>');
for (var i = 1; i <= cmpage; i++) {
document.write('<a href="'+posturl+'?commentPage='+i+'">'+i+'</a>');
}
document.write('<a href="'+posturl+'?commentPage='+cmpage+'">Latest</a>');
}
//]]>
</script>
4, Find this line
<b:includable id='comments' var='post'>
and add these code right after the line above
<span id='commentpaging'>
Comment Page :
<script type='text/javascript'>commentpagination("<data:post.url/>","<data:post.numComments/>");</script>
</span>
Comment Page :
<script type='text/javascript'>commentpagination("<data:post.url/>","<data:post.numComments/>");</script>
</span>
So here is what you got
<b:includable id='comments' var='post'>
<span id='commentpaging'>
Comment Page :
<script type='text/javascript'>commentpagination("<data:post.url/>","<data:post.numComments/>");</script>
</span>
5,Save template . That's all .<span id='commentpaging'>
Comment Page :
<script type='text/javascript'>commentpagination("<data:post.url/>","<data:post.numComments/>");</script>
</span>
How it work
First ,this script will take the number of comment in a post ,and than divide by 200 . Round up the result to the nearest integer ,we will get the number of comment pages .
For example ,if my post has 250 comments :
250/200 = 1.25 -> round up -> 2
So the comment page 1 contain first 200 comments and the comment page 2 contain the last 50 comments .
The url to a comment page has structure :
http:// post url .html?commentPage=comment page number
for example ,here is the url of comment page 2 in my blog
http://www.thesimplexdesign.com/2011/02/simplexenews-latest-version-fixed.html?commentPage=2
When we get the number of comment page ,and comment page url structure ,the next step is very simple ,just write down all comment page with a loop statement .
It's the way this code work . Hope this helpful to you
In SimplexBlognews ,Simplex Enews templates and many other templates ,there's a widget for embedding video . You can insert one video from video service to this sidebar by inserting the embed code right into widget content .
But we want a slideshow for video in this widget ,is it possible ?
Yes,it's possible . We can make a small slideshow for video in this widget .
Download Loopedslider js
Want a demo ? Please see in Demo of SimplexEnews template ,I added a slideshow for video in the right sidebar.
1,Go to Dashboard ->Design - >Edit HTML
2,Upload Looped slider script in your host or host them in blogger .
3,Add script of Jquery framework right after </head>
4,Add the script to activate loopedslider in the end of template ,right before </body>
5,Add the CSS code right before ]]></b:skin>
You can add or remove CSS code to make the slide display as you want .
6,Save changes .
7,Go to Page Elements ,Click on edit link sidebar widget which you want to add video slideshow ,or create a new HTML/Javascript widget .
Paste the HTML markup as structure bellow :
Save changes .
10,Back to blog and see the result .
That's all for video slideshow in sidebar . I hope it helpful to you . Free to leave comment here
But we want a slideshow for video in this widget ,is it possible ?
Yes,it's possible . We can make a small slideshow for video in this widget .
Download Loopedslider js
Want a demo ? Please see in Demo of SimplexEnews template ,I added a slideshow for video in the right sidebar.
How to do ?
Do backup before make anychanges1,Go to Dashboard ->Design - >Edit HTML
2,Upload Looped slider script in your host or host them in blogger .
3,Add script of Jquery framework right after </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
After this line ,add script of looped slider .
<script src="your_host............./loopedslider.js" type="text/javascript"></script>
4,Add the script to activate loopedslider in the end of template ,right before </body>
<script>
$('.slides1').cycle({
fx: 'fade',
speed: 'slow',
timeout: 3000,
pager: '.pagination'
});
</script>
$('.slides1').cycle({
fx: 'fade',
speed: 'slow',
timeout: 3000,
pager: '.pagination'
});
</script>
5,Add the CSS code right before ]]></b:skin>
.slides1 { position:absolute; top:0; left:0; }
.slides1 div { position:absolute; top:0; width:500px; display:none; }
You can add or remove CSS code to make the slide display as you want .
6,Save changes .
7,Go to Page Elements ,Click on edit link sidebar widget which you want to add video slideshow ,or create a new HTML/Javascript widget .
Paste the HTML markup as structure bellow :
<ul class="slides1">
<li>
.............video embed code .............
</li>
<li>
................video embed code ..................
</li>
<li>
..................video embed code .............
</li>
</ul>
<ul class="pagination">
</ul>
<li>
.............video embed code .............
</li>
<li>
................video embed code ..................
</li>
<li>
..................video embed code .............
</li>
</ul>
<ul class="pagination">
</ul>
Save changes .
10,Back to blog and see the result .
That's all for video slideshow in sidebar . I hope it helpful to you . Free to leave comment here
Have you redesign your web/blog in this holiday season ? In this post ,I will show you some icon packs that good for Xmas . These collections are collected from various sources . Hope them helpful to you .
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
13,
14,
15,
16,
17,
18,
19,
20,
21,
22,
23,
24,
25,
26,
27,
28,
1,
Free Christmas Icons
2,
Christmas Icon Sets
3,
Christmas icons
4,
Snowmen Icons
5,
Winter Holiday Icons
6,
Xmas Icons
7,
Comment
8,
Christmas Mini Pack
9,
Christmas Icons
10,
Christmas Social Icons
11,
Holiday Seasonal Icons
12,
White Animals Icons
13,
Social Nomnomnom
14,
Harry Potter And The Bitten Apple
15,
Snowmen Icons
16,
Pool
17,
Christmas icons
18,
Articles
19,
Christmas Icons 2
20,
Lontar Eve
21,
Christmas icons
22,
Christmas Icons 2007
23,
Christmas icon
24,
Christmas Icons
25,
My Christmas
26,
Blogger Xmas Logo Icons
27,
Xmas pack
28,
Icon
Many many of you complaint my host 110mb.com not working . Yes ,it's not a stable and reliable free hosting . So in this post ,I will tell you solution to fix this problem . The idea is very simple , we can host scripts in blogger itself .
This solution will make your template hard to read ,not good for SEO (as SEO expert said) because we included all scripts in template file . But hosting scripts in blogger will increase the loading speed ,and it work 100% ,don't need to worry about downtime .
1,If you are using a template from SimplexDesign ,open template in a word editor such as notepad ,wordpad ,notepad ++ ...
2,Make a search for this term <script ,it will show you all the place where scripts are embedded to your template .
Take a closer look ,if the script is hosted in another host , you will see something like this :
<script src='http://hosting....../xxxx.js' type='text/javascript'/>
The src attribute in <script statement above indicate the URL of javascript file .
Copy this URL http://hosting....../xxxx.js and paste it in browser window
It will show you the content of js file as picture above ,or a dialog which asking for download js file .
If you download the js file ,open it in a word editor
3,Insert the script in js file into blogger template by using this structure :
<script type='text/javascript'>
//<![CDATA[
insert content of js file here
............
//]]>
</script>
After inserting the script to blogger directly ,delete the line
<script src='http://hosting....../xxxx.js' type='text/javascript'/>
that we found in step 2 .
Do this for the rest .
4,Save template and upload it to blogger .
That's all .
I hope with this tip ,we can forget the problem with free javascript hosting . Yes,if you have a hosting ,you can host js file in your host ,it better for SEO .
This solution will make your template hard to read ,not good for SEO (as SEO expert said) because we included all scripts in template file . But hosting scripts in blogger will increase the loading speed ,and it work 100% ,don't need to worry about downtime .
How to do ?
1,If you are using a template from SimplexDesign ,open template in a word editor such as notepad ,wordpad ,notepad ++ ...
2,Make a search for this term <script ,it will show you all the place where scripts are embedded to your template .
Take a closer look ,if the script is hosted in another host , you will see something like this :
<script src='http://hosting....../xxxx.js' type='text/javascript'/>
The src attribute in <script statement above indicate the URL of javascript file .
Copy this URL http://hosting....../xxxx.js and paste it in browser window
It will show you the content of js file as picture above ,or a dialog which asking for download js file .
If you download the js file ,open it in a word editor
3,Insert the script in js file into blogger template by using this structure :
<script type='text/javascript'>
//<![CDATA[
insert content of js file here
............
//]]>
</script>
After inserting the script to blogger directly ,delete the line
<script src='http://hosting....../xxxx.js' type='text/javascript'/>
that we found in step 2 .
Do this for the rest .
4,Save template and upload it to blogger .
That's all .
I hope with this tip ,we can forget the problem with free javascript hosting . Yes,if you have a hosting ,you can host js file in your host ,it better for SEO .
After two year working ,I decided to add a new domain for SimplexDesign blog ,that will make it more professional and easy for the development in the future . The new domain is :
http://thesimplexdesign.com
I think it easy to remember and not so far from the domain we all known http://simplexdesign.blogspot.com .
You may ask me what happen to .blogspot.com domain ? Oh ,yes ,it still alive and you can still access SimplexDesign blog with this domain . All post links ,backlinks to this domain are remained ,not broken . So if you have a link back to SimplexDesign ,don't worry about it .
A new thing is the contact email . From now,lease send / forward all emails (request templates ,questions ,comments ,suggestions ....) to this email :
Admin@thesimplexdesign.com
This email is very easy to remember and separated from my personal email : contact.dinhquanghuy@gmail.com , so your emails will not be flooded in other emails of mine ,and I can answer you faster .
Facebook for SimplexDesign ,oh ,I want to repeat this facebook again :
http://www.facebook.com/simplexdesignblog
In case you want to receive update via Twitter ,please follow :
http://twitter.com/dinhquanghuy
That's all new today :D thanks for support me all the time ,and hope you keep supporting me in the future .
Sometime ,we need a bigger and detailed version of an image ,but size of image is limited by post frame . So we can do a zoom function for image . For example ,you have a blog that selling children apparel . Because of the limitation of post frame ,if we add a big image ,it will break out the layout .If we add a small size image ,it's hard for buyer to see product in detail . It's time for zooming function .
Download
Installing this script is not different to lightbox effect .
Now let's start
1,Download the script files and upload to your hosting . This step is required because I have no hosting in hand now .
2,Now add these line bellow before <body>
<link href="/styles/cloud-zoom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/JavaScript" src="/js/cloud-zoom.1.0.2.min.js"></script>
3,How to use
In blog posting window ,after inserting image ,click on edit HTML ,and edit the HTML code of image to this form
<a href="bigimage.jpg" class="cloud-zoom" rel="option goes here .........">
<img src="smallimage.jpg" title="Optional title display" >
</a>
Bigimage.JPG is the big and detail version of image
Smallimage.JPG is the small version of image
Class 'cloud-zoom' is required .
4,If your blog has a line for calling jquery framework ,do not add more
5,Options can be set by adding into rel attribute . I marked where to put option by the text "option go here" in the step 3 . Each option is separated by a comma ( , ) .
Here is the list of options
Download
Installing this script is not different to lightbox effect .
Now let's start
1,Download the script files and upload to your hosting . This step is required because I have no hosting in hand now .
2,Now add these line bellow before <body>
<link href="/styles/cloud-zoom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/JavaScript" src="/js/cloud-zoom.1.0.2.min.js"></script>
3,How to use
In blog posting window ,after inserting image ,click on edit HTML ,and edit the HTML code of image to this form
<a href="bigimage.jpg" class="cloud-zoom" rel="option goes here .........">
<img src="smallimage.jpg" title="Optional title display" >
</a>
Bigimage.JPG is the big and detail version of image
Smallimage.JPG is the small version of image
Class 'cloud-zoom' is required .
4,If your blog has a line for calling jquery framework ,do not add more
<script type='text/javascript' src='js/jquery.js'></script>
because more than one jquery calling can make all script stop .5,Options can be set by adding into rel attribute . I marked where to put option by the text "option go here" in the step 3 . Each option is separated by a comma ( , ) .
Here is the list of options
- zoomWidth : The width of the zoom window in pixels. If 'auto' is specified, the width will be the same as the small image .
- zoomHeight : The height of the zoom window in pixels. If 'auto' is specified, the height will be the same as the small image.
- position : Specifies the position of the zoom window relative to the small image. Allowable values are 'left', 'right', 'top', 'bottom', 'inside' or you can specifiy the id of an html element to place the zoom window in e.g. position: 'element1'
- adjustX : Allows you to fine tune the x-position of the zoom window in pixels.
- adjustY : Allows you to fine tune the y-position of the zoom window in pixels.
- tint Specifies a tint colour which will cover the small image. Colours should be specified in hex format, e.g. '#aa00aa'. Does not work with softFocus.
- tintOpacity : Opacity of the tint, where 0 is fully transparent, and 1 is fully opaque .
- lensOpacity : Opacity of the lens mouse pointer, where 0 is fully transparent, and 1 is fully opaque. In tint and soft-focus modes, it will always be transparent.
- softFocus : Applies a subtle blur effect to the small image. Set to true or false. Does not work with tint.
- smoothMove : Amount of smoothness/drift of the zoom image as it moves. The higher the number, the smoother/more drifty the movement will be. 1 = no smoothing.
- showTitle : Shows the title tag of the image. True or false. true
- titleOpacity : Specifies the opacity of the title if displayed, where 0 is fully transparent, and 1 is fully opaque.
Some readers asked me for a blogger version of Linepress template (from Gabfire) . After a long time ,now I want to show you the result . It's good for a magazine or news portal . Hope you all like this .
Live Demo | Download
2,Open the template file in any word editor . I recommend Notepad ++ for easy in editing .
3,To add social network account
Find this code :
<div id="submenu">
<ul class="subnav">
<li><a title="Subscribe to latest posts in RSS" rel="nofollow" href="/feeds/posts/default" class="gab_rss" target="_blank">RSS for Entries</a></li>
<li><a title="Subscribe to latest posts via email" rel="nofollow" href="http://feedburner.google.com/fb/a/mailverify?uri=simplex" class="gab_email" target="_blank">Subscribe via E-mail</a></li>
<li><a title="follow on twitter" rel="nofollow" href="http://www.twitter.com/dinhquanghuy" class="gab_twitter" target="_blank">Follow on Twitter</a></li>
<li><a title="Connect on facebook" rel="nofollow" href="http://www.facebook.com/simplexdesignblog" class="gab_facebook" target="_blank">Connect on Facebook</a></li>
and change the link in bold to your social network and feed burner accounts .
4,Save template and upload to blogger .
5,Go to page elements .
6,To add logo
click on logo widget
and add your logo into widget content as structure
like picture bellow
7,To add item to main menu navigation
click on 'menunav' widget
add link to your categories
8,To add content in 'teaser' section
click on teaser widget
add the category name into widget content
Do the same for 'teaser','featureright','mediabar','primarybottomleft' widget
9,To add content in the tab
click on each widgets from 'priBottab1','priBottab2','priBottab3','priBotab4'
add the category name into widget content ,add the name of category into widget title.
10,Other widgets can be edit as you want . You can add script into widget content (ads ,video embed ...)
11,You can add or remove or move widgets in anyplace as you want .
Save changes . That's all for this template .
I hope this template work fine for you .
Live Demo | Download
How to install this template
1,Download the template .2,Open the template file in any word editor . I recommend Notepad ++ for easy in editing .
3,To add social network account
Find this code :
<div id="submenu">
<ul class="subnav">
<li><a title="Subscribe to latest posts in RSS" rel="nofollow" href="/feeds/posts/default" class="gab_rss" target="_blank">RSS for Entries</a></li>
<li><a title="Subscribe to latest posts via email" rel="nofollow" href="http://feedburner.google.com/fb/a/mailverify?uri=simplex" class="gab_email" target="_blank">Subscribe via E-mail</a></li>
<li><a title="follow on twitter" rel="nofollow" href="http://www.twitter.com/dinhquanghuy" class="gab_twitter" target="_blank">Follow on Twitter</a></li>
<li><a title="Connect on facebook" rel="nofollow" href="http://www.facebook.com/simplexdesignblog" class="gab_facebook" target="_blank">Connect on Facebook</a></li>
and change the link in bold to your social network and feed burner accounts .
4,Save template and upload to blogger .
5,Go to page elements .
6,To add logo
click on logo widget
and add your logo into widget content as structure
<img src="your logo url"/>
like picture bellow
7,To add item to main menu navigation
click on 'menunav' widget
add link to your categories
8,To add content in 'teaser' section
click on teaser widget
add the category name into widget content
Do the same for 'teaser','featureright','mediabar','primarybottomleft' widget
9,To add content in the tab
click on each widgets from 'priBottab1','priBottab2','priBottab3','priBotab4'
add the category name into widget content ,add the name of category into widget title.
10,Other widgets can be edit as you want . You can add script into widget content (ads ,video embed ...)
11,You can add or remove or move widgets in anyplace as you want .
Save changes . That's all for this template .
I hope this template work fine for you .
Some readers asked me how to make a frontpage like simplextube2 . The video player is shown directly in homepage . The idea behind this script is similar to other 'readmore' script ,but it focus on video .
