While searching a site for learning SEO ,I find these infographic from Hubspot website .They are very useful for SEO beginner like me .It help me to know what SEO is and what to do for SEO a website . It's like a framework ,by knowing the terms and order of tasks in SEO ,I can find more infomation for each step myself .Each picture comes with link to a related post .

Facebook is the biggest social network in the world now , it's a great tool for connecting friends and keep update from them .
Many people have an account on Facebook ,and it's very convenient to use Facebook account as a key to comment on a Blogger blog instead of using OpenID ,or a Blogger account . In SimplexDesign blog , I also implemented Facebook comment box as one method for commenting .

 

The latest version of Simplex Enews -click here

A breadcrumb trail will help readers keep track of their location , and they can browse easily between different parts of website .
In SimplexEnews template ,there's a section for breaking news ,but if you don't like breaking news ,or think it's not suitable in your site ,you can replace it with a breadcrumb trail .

Click here for the latest version of Simplex Transcript template

Many people asked me for a Blogger version of Gabfire 's Transcript . And now ,I want to show you all Simplex Transcript . Blogger version of Transcript template .

we have multi level menu for SimplexBlognews and Simplex Newspaper II ,and now ,we can add multi-level menu for Simplex Enews template .

There are some tutorial on sliders in Simplexdesign blog like using Jquery Cycle or using Nivoslider . In this post ,Nady from Indonesia will show us another slider ,using FeatureContent Slider . This is the first guest post in my blog . Thanks all for supporting and thanks Nady for this post .This tips is applied for default Blogger templates only,because in Simplex Templates ,I modified the code so much that it's hard for you to search and add code in correct place.

Now with javascript, blogger can make automatic slider for featured posts look like wordpress, just give the name of 'Featured' on the label of each post. Before go to the tutorial, you can see demo in main slider

This tutorial uses 2 javascripts one for getting posts from a specific label , I get this script in SIMPLEX BLOGNEWS and the other for content slider , Featured Content Slider v2.4

1,The first step

Put this code or script for hack label post before </head>
&lt;script&gt;
/* Script from:http://simplexdesign.blogspot.com/ */
imgr = new Array();
imgr[0] = &quot;http://lh3.ggpht.com/_kViOplhgIHI/TKxBIScZTiI/AAAAAAAAAWE/PM7AQ1lf6ME/noimages.jpg&quot;;
showRandomImg = true;
aBold = true;
summaryPost = 140;

numposts1 = 5;
label1 = &quot;Featured&quot;;

function removeHtmlTag(strx,chop){var s=strx.split(&quot;&lt;&quot;);for(var i=0;i&lt;s.length;i++){if(s[i].indexOf(&quot;&gt;&quot;)!=-1){s[i]=s[i].substring(s[i].indexOf(&quot;&gt;&quot;)+1,s[i].length)}}s=s.join(&quot;&quot;);s=s.substring(0,chop-1);return s}

function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i&lt;numposts1;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k&lt;entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k&lt;entry.link.length;k++){if(entry.link[k].rel=='replies'&amp;&amp;entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(&quot;&quot;)[0];break}}
       
if (&quot;content&quot; in entry) {
var postcontent = entry.content.$t;}
else
if (&quot;summary&quot; in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = &quot;&quot;;
postdate = entry.published.$t;
if(j&gt;imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent    ; a = s.indexOf(&quot;&lt;img&quot;); b = s.indexOf(&quot;src=\&quot;&quot;,a); c = s.indexOf(&quot;\&quot;&quot;,b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&amp;&amp;(b!=-1)&amp;&amp;(c!=-1)&amp;&amp;(d!=&quot;&quot;)) img[i] = d;

var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=[&quot;Jan&quot;,&quot;Feb&quot;,&quot;Mar&quot;,&quot;Apr&quot;,&quot;May&quot;,&quot;Jun&quot;,&quot;Jul&quot;,&quot;Aug&quot;,&quot;Sep&quot;,&quot;Oct&quot;,&quot;Nov&quot;,&quot;Dec&quot;];var day=postdate.split(&quot;-&quot;)[2].substring(0,2);var m=postdate.split(&quot;-&quot;)[1];var y=postdate.split(&quot;-&quot;)[0];for(var u2=0;u2&lt;month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;
}}

var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '&lt;div class=&quot;contentdiv&quot;&gt;&lt;div class=&quot;sliderPostPhoto&quot;&gt;&lt;a href=&quot;'+posturl+'&quot;&gt;&lt;img width=&quot;590&quot; height=&quot;240&quot; class=&quot;alignnone&quot; src=&quot;'+img[i]+'&quot;/&gt;&lt;/a&gt;&lt;div class=&quot;sliderPostInfo&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;featuredPost&quot;&gt;&lt;h2&gt;&lt;a href=&quot;'+posturl+'&quot;&gt;'+posttitle+'&lt;/a&gt;&lt;/h2&gt;&lt;span&gt;'+daystr+'&lt;/span&gt;&lt;p&gt;'+removeHtmlTag(postcontent,summaryPost)+'...&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;';     
document.write(trtd);      
j++;
}}
&lt;/script&gt;

You can modify this code,according to your need

summaryPost = 140; -> the number of character in post summary
numposts1 = 5;-> number of posts

and, size your images
width=&quot;590&quot; height=&quot;240&quot;

2,The second step
Put this script for content slider before </body>
&lt;script src='http://dl.dropbox.com/u/12924430/contentslider.js'&gt;&lt;/script&gt;
&lt;script&gt;
featuredcontentslider.init({
id: &quot;slider1&quot;, //id of main slider DIV
contentsource: [&quot;inline&quot;, &quot;&quot;], //Valid values: [&quot;inline&quot;, &quot;&quot;] or [&quot;ajax&quot;, &quot;path_to_file&quot;]
toc: &quot;#increment&quot;, //Valid values: &quot;#increment&quot;, &quot;markup&quot;, [&quot;label1&quot;, &quot;label2&quot;, etc]
nextprev: [&quot;Previous&quot;, &quot;Next&quot;], //labels for &quot;prev&quot; and &quot;next&quot; links. Set to &quot;&quot; to hide.
enablefade: [true, 0.5], //[true/false, fadedegree]
autorotate: [true, 6000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
&lt;/script&gt;
 
3,The third step
Find this code <div id='main-wrapper'> and put this code thereafter.
 <b:if cond='data:blog.pageType == &quot;index&quot;'>
<div id='featured'>
<div class='sliderwrapper' id='slider1'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
<div class='pagination' id='paginate-slider1'>
</div>
</div>
</b:if>

5,The fifth step
Adding style for 'featured content slider' with CSS. Put this code before ]]></b:skin>

#featured{margin-bottom:35px}
.sliderwrapper{position: relative;overflow: hidden;border: 10px solid #dedde5;border-bottom-width: 6px;height: 250px}
.sliderwrapper .contentdiv{background:#68667B;visibility: hidden;position: absolute;left: 0;top: 0;padding: 5px;height: 100%;filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity: 1;opacity: 1;}
.pagination{text-align: right;background-color:#dedde5;padding: 2px 10px 10px}
.pagination a{font-size:11px;color:#dedde5;padding: 0 5px;background:#68667B}
.pagination a:hover, .pagination a.selected{color:#68667B;background-color:#fff}
.featuredPost{width:95%;padding:5px 10px 10px;background:#68667b;background:rgba(104, 102, 123, 0.9);color:#dedde5;position:absolute;bottom:0}
.featuredPost a{color:#fff}
.featuredPost a:hover{color:#dedde5}
.featuredPost h2{margin:0;font-size:16px;line-height:1}
.featuredPost span{font-size:10px}
.featuredPost p{font-size:11px}


yup.. you have to adjust again the code, according to your template


6,The last step
Create a new post and give it the label 'Featured'. If you are using image, default size is 590x240 pixel, look at first step if you need modify.

I made a template name SimplexOrange . It was inspired by website www.fuelyourblogging.com . I modified in CSS and made it available in Blogger . It's look simple and clean ,a lot of space for advertising or widget . I think it's good for tutorial /sharing resource sites .

SimplexBlognews and Simplex Newspaper II are similar templates ,they has the same layout ,so we can make multi-level menu for Simplex Newspaper II as the way we did with Simplex Blognews .

Do you know Simple Tags plugin in Wordpress ? it will search in your post any words like category name and make it a link to this category .For example ,in your post ,there is a category name "abc" ,Simple Tags will find in your post the word "abc" and make it a link to abc category .

A friend ask me for making something similar to Simple Tags in Blogger . So now I want to introduce Autolink script in Blogger for you .

Latest version of Simplex Blognews - Click here
In latest version of Simplex Blognews ,Multi-level menu is integrated as a part of template file .

I have a question via mail , ask me for multi-level menu for Simplex Blognews template because they have many categories and sub categories .If using default Link list widget of template ,it will break the template structure .

I want to introduce my latest template . SimplexSimplicity . It's built base on Tabs,which is very popular in modern websites .