If Google Adsense doesn't display in templates ,here is the tip for you

Some of you complaint that Google Adsense can't display in my templates (especially Simplex Newspaper 2) . The reason is in the ad code ,with less than 1 minute ,you can make ad show as normal .



Here is the code you receive from Google Adsense

<script type="text/javascript"><!--

google_ad_client = "xxxxxx";

/*xxxxxxxxxxxxxx */

google_ad_slot = "xxxxxxxx";

google_ad_width = xxxxxx;

google_ad_height = xxxxxxx;

//-->

</script>

<script type="text/javascript"

src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

</script>

To make Ads show up , just remove <!-- and //--> from the code above , like this one

<script type="text/javascript">

google_ad_client = "xxxxxx";

/*xxxxxxxxxxxxxx */

google_ad_slot = "xxxxxxxx";

google_ad_width = xxxxxx;

google_ad_height = xxxxxxx;

</script>

<script type="text/javascript"

src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

</script>

Save template and the ad will show as normal .

-With template Simplex Transcript ,if you add three adsense in home page ,the ads in single page will not displayed .To fixed this problem ,you can remove one adsense block in home page .And the ads will show in single page .The reason is in the way how Simplex Transcript work .When you entered a single page ( a specific post ) ,the home page is still loaded first and then hidden by CSS code, after that ,single post is loaded .So it will load 3 adsense code in homepage first and then load adsense code in single page . Because Google allow only 3 Adsense code in one page only ,but in this case ,you have 4 adsense code in line . So the 4th adsense code in Single page will not be displayed ^^

If you followed my instruction ,but the ads doesn't show up , I'm sorry , I can't help you further because this problem is not in my templates .This is what I said to Spluch before and now I want to write it down again : It's Google Adsense issue .
Many people are facing this error when Adsense show only blank frame ,no ads ,no PSAs ...
You can follow topics on this problem on SEORoundtable, webmasterworld, DigitalPoint and Google Group discussions thread here ,here , here ,and here the latest.
There are many reason given by users,but none of them are true ,I think .Search and contact Google support are the best solution I have for you if you are in this case .

12 amazing SEO infographics

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 .

1. Order of SEO Operations

2. SEO Tactics


3. Search Engine Marketing ROI


4. The Visual FAQ of SEO

5. SEO vs. PPC


6. SEO Check List


7. SEO Factors


8. Long Tail SEO


9. SEO ROI Is King


10. Local Search


11. The Social Media Effect


12. SEO Spider Trap


 

See the original post here

Adding Facebook comment box to Blogger blog

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 .

 

Do you want a Facebook comment box on your Blogger blog ? Just follow these steps

1,Go to Facebook developer page ,you will see an interface for creating a new application like this picture bellow :
Enter your site name ,and your site url ( remember to add an slash at the end of url ,like this : http://simplexdesign.blogspot.com/ )
and click on Create application


2,Fill the security check ,and it will lead you to a page that provide App id and some Sample Code .
Remember your App ID .Here is my App ID : 124557050936207


3,Go to this page and enter your App ID in Unique Id ,enter the number of comment you want to show in Number of Comments ,and the width of comment box in Width .



After that ,click on Get code . You will get a code like that


replace APP_ID in the code with the App ID you get from Step 2 ,and then copy the code .

4, Go to Blogger Dashboard ,continue to Design and then Edit HTML ,check on Expand Widget Templates .

5,-If you want Facebook comment box appear right after your post ,find this line
<p><data:post.body/></p>

-If you want to place it on top of regular comments ,find this line :
<b:includable id='comments' var='post'>

And paste the code from step 3 right after one of two lines above ,depend on where you want Facebook comment box show .

Save template and you are done .
Check your blog for result ^^

Breadcrumb for Simplex Enews template

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 .

Here is steps to make a breadcrumb for SimplexEnews template

1,Open template in a word editor .

2,Find this code :

#breadcrumb a,#breadcrumb span { padding:0 3px 0 10px; background:url(http://img827.imageshack.us/img827/1085/iconarrowright.png) no-repeat 0 3px; }

and delete it .

3,Find this code
<strong style="float:left;">Breaking News:</strong>
             <script>
                     document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label9+&quot;?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts4\&quot;&gt;&lt;\/script&gt;&quot;);
             </script>           
             <script type="text/javascript">
     
                    $('#news').innerfade({
                        animationtype: 'slide',
                        speed: 1000,
                        timeout: 3000,
                        type: 'random',
                        containerheight: '1em'
                    });
            </script> 
 
and replace it with

<strong style="float:left;">

You are here : <a expr:href='data:blog.homepageUrl'>Home</a> &#187;

<span id="break"></span>

</strong> 
 
4,Find this code :

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

and insert this line right after the code above:

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

5,Find this line :

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

and insert this code right after the line above
<div id="breakcrumb" style="display:none">
                                     <data:post.title/>
                                 </div>

6,Find this line

<b:if cond='data:blog.pageType == &quot;item&quot;'>

and insert this code rightafter the line above
<div id="breakcrumb" style="display:none">
                                         <b:loop values='data:post.labels' var='label'>
                                             <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
                                         </b:loop> &#187; 
                                         <data:post.title/>
                                     </div>

7,Find this code
<b:includable id='status-message'>
                                 <b:if cond='data:navMessage'>
                                        <div class='status-msg-wrap'>
                                         <div class='status-msg-body'>
                                             <data:navMessage/>
                                         </div>
                                         <div class='status-msg-border'>
                                             <div class='status-msg-bg'>
                                                   <div class='status-msg-hidden'><data:navMessage/></div>
                                             </div>
                                         </div>
                                        </div>
                                     <div style='clear: both;'/>
                                 </b:if>
                             </b:includable>
and replace it with
<b:includable id='status-message'>
                                 <b:if cond='data:navMessage'>
                                     <div id="breakcrumb" style="display:none">
                                         <data:navMessage/>
                                     </div>                                       
                                 </b:if>
                             </b:includable>

8,The last step : insert the following code right before </body>
<script>
     var brc = document.getElementById('breakcrumb');
     var brcc = brc.innerHTML;   
     var brcc1;
     var bold = brc.getElementsByTagName('b');
     if (bold.length&gt;=1)
      {brcc1 = bold[0].firstChild.data}
      else {
      brcc1 = brcc;}
     var show = document.getElementById('break');
     show.innerHTML =brcc1;     
     
</script>

Save template and you are done . I hope a breadcrumb in this template will helpful to you .

Simplex Transcript - another template on magazine style

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 .







Live Demo | Download


Here is steps for installing this template
1,Download this template .


2,Open it in any word editor you have . I recommend notepad++ .


3,To add logo or banner to header .Find this code :
<a href='http://simplextranscript.blogspot.com' title=''>
                        Simplex TRANSCRIPT                        <span>ONLINE NEWSPAPER</span>
                 </a>
and change it to your site name or logo .


4,To edit category menu ,find this code :
<div id='navcats'>
             <ul>
                 <li>
                     <a href="http://simplextranscript.blogspot.com">Home</a>
                 </li>
                 <li>
                     <a href="/search/label/world">World News</a>
                     <ul class="children">
                         <li><a href="#">Category</a></li>
                         <li><a href="#">Category</a></li>
                         <li><a href="#">Category</a></li>
                     </ul>
                 </li>
                 <li><a href="/search/label/sports">Sports</a></li>
                 <li><a href="/search/label/finance">Finance</a>
                     <ul class="children">
                         <li><a href="#">Category</a></li>
                         <li><a href="#">Category</a></li>
                         <li><a href="#">Category</a></li>
                     </ul>
                 </li> 
                 <li><a href="/search/label/entertainment">Entertainment</a>
                      <ul class="children">
                         <li><a href="#">Category</a></li>
                         <li><a href="#">Category</a></li>
                         <li><a href="#">Category</a></li>
                     </ul>
                 </li>
                 <li><a href="/search/label/business">Business</a></li>                    
             </ul>         
         </div>
and add the link to your categories . Menu with structure like this :
<ul class="children">
                         <li><a href="#">Category</a></li>
                         <li><a href="#">Category</a></li>
                         <li><a href="#">Category</a></li>
                     </ul> 
is sub-menu . To know more ,you can see this post "multi-level menu for Simplex newspaper 2 template"


5,To add link to your social network accounts in Stay connect menu ,find this code :
<li class="">
                     <a class="gab_connect" href="#" title="">Stay Connected</a>
                        <ul>
                         <li class="">
                             <a title="" rel="nofollow" href="/feeds/posts/default/" class="gab_rss">Latest Posts in RSS</a>
                         </li>
                         <li><a title="" rel="nofollow" href="/feeds/comments/default/" class="gab_rss">Latest Comments in RSS</a></li>
                         <li><a title="" rel="nofollow" href="" class="gab_email">Subscribe by e-mail</a></li>           
                         <li><a title="" rel="nofollow" href="your twitter" class="gab_twitter">Follow us on Twitter</a></li>       
                         <li><a title="" rel="nofollow" href="your facebook" class="gab_facebook">Connect on Facebook</a></li>
                     </ul>
                    </li>
and add link to your social network accounts .


6, To add your ads ,find code :
<a href="http://simplexdesign.blogspot.com"><img src="http://img535.imageshack.us/img535/7039/300x250ads.jpg"/></a>
and replace it with an ad size 300x250
find :
<a href="http://simplexdesign.blogspot.com"><img src="http://img30.imageshack.us/img30/3598/120x600ads.jpg"/></a>
and replace it with an ad size 120x600
find :
<a href="http://simplexdesign.blogspot.com"><img src="http://img36.imageshack.us/img36/9267/sdads468x60.png"/></a>
and replace it with an ad size 468x60


7,To show posts in categories in homepage ,find this code
label1 = "sport";
Title1 = "SPORT";


label2 = "politic";
Title2 = "POLITIC";


label3 = "media";
Title3 = "media";


label4 = "cycling";
Title4 = "CYCLING";


label5 = "motor";
Title5 = "MOTORSPORTS";


label6 = "football";
Title6 = "FOOTBALL";


label7 = "basket";
Title7 = "BASKET BALL";


label8 = "racing";
Title8 = "RACING";


label9 = "world";
Title9 = "WORLD NEWS";


label10 = "entertainment";
Title10 = "ENTERTAINMENT";


label11 = "business";
Title11 = "BUSINESS";


label12 = "feature";
Title12 = "FEATURE";
 and change value of each label and Title variables to your categories . Position of labels are in picture bellow :





8,Save template and upload it to Blogger when you finish editing


Ok ,you are done .
Feel free to leave me comments . If it's a question ,I will try to answer as quick as possible . Thanks for your support .


Note
-this template's structure is similar to Simplex Blognews and Simplex Newspaper II ,so you can see install instruction of them before installing Transcript .
--You can translate text easily by finding the word you need to translate with search function of word editor .It will lead you to where the text is .

Multi-level menu for Simplex Enews template

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



here is steps for adding multi-level menu :
1,Add this code before </head>
<script src="http://dinhquanghuy.110mb.com/superfish.js" type="text/javascript"></script>
2,find this
.nav li ul { background:#fff; position:absolute;left:-999em;width:172px; margin:0px 0px 0px -2px; border:1px solid #dfdfdf; border-width:1px 1px 0px; z-index:999; }
and delete left:-999em;
3,Add this code before ]]></b:skin>
.nav li ul {display:none;}
4,Now find this code :
<ul class="nav" id="cat-nav">
                    <b:section id='menu' showaddelement='no'>
                     <b:widget id='LinkList1' locked='false' title='menu' type='LinkList'>
                         <b:includable id='main'>
                             <b:loop values='data:links' var='link'>
                                 <li><a expr:href='data:link.target'><data:link.name/></a></li>
                             </b:loop>
                         </b:includable>
                     </b:widget>           
                 </b:section>
             </ul>     
and replace it with the code of menu like that :
<ul class="nav" id="cat-nav">
                 <li><a href="link to category">Category</a></li>

                 <li><a href="link to category">Category</a></li>      

                  <li><a href="link to category">Category</a>
                     <ul>
                         <li><a href="link to sub-cateogry">link to sub-category</a></li>
                         <li><a href="link to sub-cateogry">link to sub-category</a></li>
                         <li><a href="link to sub-cateogry">link to sub-category</a></li>
                   
                     </ul>
                 </li>
             </ul>
that's all . I hope it helpful to you .

Make a featured content slider

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.

About Author

I'm Nady from indonesia, I like webdesign absolutely using platform
blogger, tumblr n wordpress. Here is my blog :http://www.main-blogger.com/

SimplexOrange - Good template for tutorial site

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 .




Live Demo | Download

Do you like it?
Here is my instruction to install this template :

1,Download this template

2,Open it in any word editor you have .

3,To change logo ,find this code
<div id="logo"><a expr:href='data:blog.homepageUrl'><img src="http://img196.imageshack.us/img196/2866/simplexorange.jpg"/></a></div>
link to logo is marked in bold . Change it to your logo's

4,To change content of bio-box at the bottom of each post ,find this code :
<div class="bio-block">
                                              <img width="50" height="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_Xrc96qBDJqTLrUtK4h_ivqGhChafaXz94jte3x0txxTxvbHUjm4jwRnGzV4M7SvQhn9Nc_RQuGoYfLgq9UgfMPE3_O2OwAT0SVRoGWoa7DzBTXwEVI_wIm8ffbWTEXOGmTDF75xIlt8/s45/hoa+s%25C6%25B0a.jpg"/>
                                             <div class="bio">
                                                 <p>NhamNgaHanh is the founder and editor in chief of <a href="http://simplexdesign.blogspot.com">SimplexDesign blog </a>,a blog on Blogger tips ,tricks ,designer resources and many premium Blogger templates for free use.</p>
                                             </div>
                                         </div>
I marked link to author avatar and author short bio in bold . You can change as you want .

5,To change link in icons to your social network accounts ,find this code :
 <li id="subscribe-widget" style="" class="widget1 subscribe-widget">
                     <ul class="social-links">
                         <li class="rss first-link">
                             <a href="/feeds/posts/default">
                                 <em></em><strong>Site RSS</strong>
                             </a>
                         </li>
                         
                         <li class="rss-fuel">
                             <a href="http://simplexdesign.blogspot.com/feeds/posts/default">
                                 <em></em><strong>Network Feed</strong>
                             </a>
                         </li>
                         
                         <li class="twitter">
                             <a target="_blank" href="http://twitter.com/dinhquanghuy">
                                 <em></em><strong>Follow on Twitter</strong>
                             </a>
                         </li>
                         
                         <li class="facebook">
                             <a target="_blank" href="http://facebook.com/simplexdesignblog">
                                 <em></em><strong>Fan Us on <br/> Facebook</strong>
                             </a>
                         </li>
                         
                         <li class="news">
                             <a href="">
                                 <em></em><strong>Submit <br/> News</strong>
                             </a>
                         </li>

                         <li class="contribute">
                             <a href="">
                                 <em></em><strong>Write for Us</strong>
                             </a>
                         </li>
                     </ul>
                 </li>
and change link in bold to yours .

6,To change twitter update to your account ,find this code :
 <a id="twitter-submit" target="_blank" href="http://twitter.com/dinhquanghuy" class="button">Follow on Twitter</a>
                 
                 &lt;script type=&quot;text/javascript&quot; src=&quot;http://twitter.com/javascripts/blogger.js&quot;&gt;&lt;/script&gt;
                 &lt;script type=&quot;text/javascript&quot; src=&quot;http://twitter.com/statuses/user_timeline/dinhquanghuy.json?callback=twitterCallback2&amp;count=5&quot;&gt;&lt;/script&gt;
and change the text in bold to your twitter account .

7,Save template and upload it to Blogger .

8,Go to Dashboard ,click on menu widget to add link to your categories .

9,You can add your ads in topads widget ,you can also add the widget you want .

10,Save changes and you are done .

11,If you want to show your post in feature post section ,please add a label 'feature' to the post .

That's all for SimplexOrange template . I hope you like it .Remember to leave me comments ^^Thanks in advance .

Multi-level menu for Simplex Newspaper II

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 .




1,Open template in any word editor you have ,or in Blogger (go to Design tab ---> edit HTML ----> checked Expand Widget Templates )

2,find this code

             <ul>
                 <b:section id='topcat' showaddelement='no'>
                     <b:widget id='LinkList1' locked='false' title='Top Category' type='LinkList'>
                         <b:includable id='main'>
                             <b:loop values='data:links' var='link'>
                                 <li><a expr:href='data:link.target'><data:link.name/></a></li>
                             </b:loop>
                         </b:includable>
                     </b:widget>           
                 </b:section>           
             </ul>
         
and change it to
<ul>
                 <li>
                     <a href="link to category">Home</a>
                 </li>
                 <li>
                     <a href="link to category">World News</a>
                     <ul class="children">
                         <li><a href="link to subcategory">Category</a></li>
                         <li><a href="link to subcategory">Category</a></li>
                         <li><a href="link to subcategory">Category</a></li>
                     </ul>
                 </li>

                 <li><a href="link to category">Travel</a></li>
                 <li><a href="link to category">Sports</a></li>

                 <li><a href="link to category">Finance</a>
                     <ul class="children">
                         <li><a href="link to subcategory">Category</a></li>
                         <li><a href="link to subcategory">Category</a></li>
                         <li><a href="link to subcategory">Category</a></li>
                     </ul>
                 </li>
                
                 <li><a href="link to category">Entertainment</a></li>
                 <li><a href="link to category">Business</a></li>                    
             </ul>
Remember to change the text in bold to your category and sub category . Link to category and sub category has structure : http://yourblog.blogspot.com/search/label/your-category

If you want to make multi-level menu in page navigation (About us ,contact us ....) ,you can also replace the code
<div id="navpages">
             <ul>
                 <b:section id='page' showaddelement='yes'>
                     <b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
                          <b:includable id='main'>
                             <b:loop values='data:links' var='link'>
                                 <li><a expr:href='data:link.href'><data:link.title/></a></li>
                             </b:loop>
                         </b:includable>
                     </b:widget>
                 </b:section>               
             </ul>
             <div class="clear"></div>
         </div>
with the code has structure like this
<ul>
                 <li>
                     <a href="link to category">Home</a>
                 </li>
                 <li>
                     <a href="link to category">World News</a>
                     <ul class="children">
                         <li><a href="link to subcategory">Category</a></li>
                         <li><a href="link to subcategory">Category</a></li>
                         <li><a href="link to subcategory">Category</a></li>
                     </ul>
                 </li>

                 <li><a href="link to category">Travel</a></li>
                 <li><a href="link to category">Sports</a></li>

                 <li><a href="link to category">Finance</a>
                     <ul class="children">
                         <li><a href="link to subcategory">Category</a></li>
                         <li><a href="link to subcategory">Category</a></li>
                         <li><a href="link to subcategory">Category</a></li>
                     </ul>
                 </li>
                
                 <li><a href="link to category">Entertainment</a></li>
                 <li><a href="link to category">Business</a></li>                    
             </ul>

3,The most important step :
find this code :
#navcats {
    width:970px;
    background: url(http://img651.imageshack.us/img651/9570/bggradientlines.gif) repeat;
    border-bottom:1px solid #efefef;
    position:relative;
    z-index:1;
}
and change z-index :1 to z-index:999
z-index:999 will make this menu float on others elements . If you don't change this value ,you will see multi-level menu is hidden by other elements .

That's all .Save template and you are done .

Autolink for Blogger

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 .


You can see the demo of this script in SimplexBlognews demo here
you can see in each post ,the word "Morbi" and word "nec" are autolinked to SimplexDesign blog .

Do you interested ?
Here is steps :
1,Open your template in word editor .

2,Add this line before </head>
<script src="http://dinhquanghuy.110mb.com/autotag.js" type="text/javascript"></script>

3,Find this line <b:if cond='data:blog.pageType == &quot;item&quot;'>
and look down ,you will see this code :
<p>
                                             <data:post.body/>                                 
                                         </p>
replace it with
<p>
                                         <div expr:id='&quot;summary&quot; + data:post.id'>
                                             <data:post.body/>
                                         </div>       
                                         <script type='text/javascript'>
                                             highlightSearchTerms('nec',true,'http://simplexdesign.blogspot.com','summary<data:post.id/>');
                                             highlightSearchTerms('morbi',true,'http://simplexdesign.blogspot.com','summary<data:post.id/>');
                                         </script>                                         
                                     </p>

take a look at the texts in bold . In this text ,"nec" and "morbi" is the text that script will find to add link , "http://simplexdesign.blogspot.com" is the link .
You can add more anchor text and link with this structure  
highlightSearchTerms('text you want to add link',true,'link','summary<data:post.id/>');
The script will find "text you want to add link" in your post and place a link "link" on this text .

This script is not as good as SimpleTags because SimpleTags using PHP and server resource for finding text and make link .Using this script you have to add text and link manually . But I think it's more flexible for you ,because you can use this script for advertising like Textlinkads ,search the text and link to advertiser .
I hope this script helpful to you . Feel free to comment here

Multi-level menu for SimplexBlognews

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 .



So here is my instruction for making multi-level menu for Simplex Blognews template  :
1,Open template in any word editor
2,Add this line before </head>

<script src="http://dinhquanghuy.110mb.com/template/jqueryslidemenu.js" type="text/javascript"></script>

3, Find this code :
<ul>
                 <b:section id='topcat' showaddelement='no'>
                     <b:widget id='LinkList1' locked='false' title='Top Category' type='LinkList'>
                         <b:includable id='main'>
                             <b:loop values='data:links' var='link'>
                                 <li><a expr:href='data:link.target'><data:link.name/></a></li>
                             </b:loop>
                         </b:includable>
                     </b:widget>           
                 </b:section>   
             </ul>
and replace it with this code :
<ul>
                 <li>
                     <a href="link to category">Home</a>
                 </li>
                 <li>
                     <a href="link to category">World News</a>
                     <ul class="children">
                         <li><a href="link to subcategory">Category</a></li>
                         <li><a href="link to subcategory">Category</a></li>
                         <li><a href="link to subcategory">Category</a></li>
                     </ul>
                 </li>

                 <li><a href="link to category">Travel</a></li>
                 <li><a href="link to category">Sports</a></li>

                 <li><a href="link to category">Finance</a>
                     <ul class="children">
                         <li><a href="link to subcategory">Category</a></li>
                         <li><a href="link to subcategory">Category</a></li>
                         <li><a href="link to subcategory">Category</a></li>
                     </ul>
                 </li>
                
                 <li><a href="link to category">Entertainment</a></li>
                 <li><a href="link to category">Business</a></li>                    
             </ul>
Remember to change the text in bold to your category and sub category . Link to category and sub category has structure : http://yourblog.blogspot.com/search/label/your-category
Save template and you are done .
upload it to Blogger and check the result .