In this post ,I want to show you renewed version of my template Simplex Celebrity ,which is more easy to install ,bugs fixed ,loading faster ,a forum wide-page and SEO friendly .
There are two template files for this version ,one with Disqus comment system and the other without .
Live Demo | Download SimplexCelebrity with Disqus | Download SimplexCelebrity without Disqus
1, Download template file from links above .Choose template file with Disqus comment system if you want to use Disqus ,or choose the other if not .
2,If you choose template file with Disqus comment system ,open template file in a word editor such as Notepad ++ and find this block code :
<div id='disqus_thread'/>
<script type='text/javascript'>
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'simplexcelebs'; // required: replace example with your forum shortname
// The following are highly recommended additional parameters. Remove the slashes in front to use.
// var disqus_identifier = 'unique_dynamic_id_1234';
// var disqus_url = 'http://example.com/permalink-to-page.html';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href='http://disqus.com/?ref_noscript'>comments powered by Disqus.</a></noscript>
and this block
<script type='text/javascript'>
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'simplexcelebs'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function () {
var s = document.createElement('script'); s.async = true;
s.type = 'text/javascript';
s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>
change the text in bold "simplexcelebs" to your Disqus shortname .
Save template ,and upload it to Blogger .
3,Go to Blogger Dashboard ->Design->Page Element .In this page ,you will see many widgets .
4,To add logo to your blog
Click on logo widget
and fill widget content with link to logo as what I did in image below
5,To add items to menu bar
click on edit link in menu bar widget
and add link to categories in your blog as I did in the image
Link to each category has structure : http://yourblog.blogspot.com/search/label/your category
6,'top ads','sidebarads' are widgets for advertising . You can click on 'edit' link of these widgets and add the ad code into widget content . Like this
7,To add content to slider
click on edit link in "feature slider" widget
write the title you want to show in widget title
and write the name of category which you want to show in slider in widget content
for example ,in the picture below ,I want to show content of category "feature" in slider ,so I add title "feature slider" into widget title and add category name "feature" into widget content . And recent posts from "feature" category will be shown in slider .
8,Do the same with other widgets . Click on 'edit' link in a widget ,add category name into widget content and add the title you want to show in widget title . Recent posts in this category will be shown in where the widget you choose is .
for example ,I want to show posts in "music" in the position of widget "category box 2"
First ,I click on edit link in "category box 2" widget
a dialog appeared . I add category name "music" into widget content ,and add "MUSIC" in the widget title
after that ,click Save .
Here is what we have after editing :
9,To add a forum to blog,create a new page ,name it 'forum' and paste the forum embeded code into page content (in Edit HTML mode)
then go to Dashboard -> Go to Design -> Edit HTML ,search for the text
'http://simplexcelebs.blogspot.com/p/forum.html'
you will find out these block code :
<b:if cond='data:blog.url != "http://simplexcelebs.blogspot.com/p/forum.html"'>
<b:section id='sidebar' class="widget1" showaddelement='yes'>
<b:widget id='HTML14' locked='false' title='Subscribe' type='HTML'>
and
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<b:if cond='data:blog.url == "http://simplexcelebs.blogspot.com/p/forum.html"'>
<div id="fullcontent">
<b:loop values='data:posts' var='post'>
Change "http://simplexcelebs.blogspot.com/p/forum.html" to your forum page's url .
10,Lightbox effect has been integrated in this template
To use Lightbox effect in your post ,when editing post ,click on Edit HTML .
To add lightbox effect for one image , use rel="lightbox" title="Your image Caption" as picture above
To add lightbox effect for multiple images , use rel="lightbox[albumname]" title="Your Image Caption"
if you want to add another image to this album,upload the second image and use rel="lightbox[albumname]" title="Caption for Second image of albumname"
in this case , lightbox will work like a gallery with next and previous links and you can use keyboard to navigate through the album
That's all for this template .I hope you enjoy this version ^^
There are two template files for this version ,one with Disqus comment system and the other without .
Live Demo | Download SimplexCelebrity with Disqus | Download SimplexCelebrity without Disqus
Here is steps for installing this template
1, Download template file from links above .Choose template file with Disqus comment system if you want to use Disqus ,or choose the other if not .
2,If you choose template file with Disqus comment system ,open template file in a word editor such as Notepad ++ and find this block code :
<div id='disqus_thread'/>
<script type='text/javascript'>
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'simplexcelebs'; // required: replace example with your forum shortname
// The following are highly recommended additional parameters. Remove the slashes in front to use.
// var disqus_identifier = 'unique_dynamic_id_1234';
// var disqus_url = 'http://example.com/permalink-to-page.html';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href='http://disqus.com/?ref_noscript'>comments powered by Disqus.</a></noscript>
and this block
<script type='text/javascript'>
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'simplexcelebs'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function () {
var s = document.createElement('script'); s.async = true;
s.type = 'text/javascript';
s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>
change the text in bold "simplexcelebs" to your Disqus shortname .
Save template ,and upload it to Blogger .
3,Go to Blogger Dashboard ->Design->Page Element .In this page ,you will see many widgets .
4,To add logo to your blog
Click on logo widget
and fill widget content with link to logo as what I did in image below
5,To add items to menu bar
click on edit link in menu bar widget
and add link to categories in your blog as I did in the image
Link to each category has structure : http://yourblog.blogspot.com/search/label/your category
6,'top ads','sidebarads' are widgets for advertising . You can click on 'edit' link of these widgets and add the ad code into widget content . Like this
7,To add content to slider
click on edit link in "feature slider" widget
write the title you want to show in widget title
and write the name of category which you want to show in slider in widget content
for example ,in the picture below ,I want to show content of category "feature" in slider ,so I add title "feature slider" into widget title and add category name "feature" into widget content . And recent posts from "feature" category will be shown in slider .
8,Do the same with other widgets . Click on 'edit' link in a widget ,add category name into widget content and add the title you want to show in widget title . Recent posts in this category will be shown in where the widget you choose is .
for example ,I want to show posts in "music" in the position of widget "category box 2"
First ,I click on edit link in "category box 2" widget
a dialog appeared . I add category name "music" into widget content ,and add "MUSIC" in the widget title
after that ,click Save .
Here is what we have after editing :
9,To add a forum to blog,create a new page ,name it 'forum' and paste the forum embeded code into page content (in Edit HTML mode)
then go to Dashboard -> Go to Design -> Edit HTML ,search for the text
'http://simplexcelebs.blogspot.com/p/forum.html'
you will find out these block code :
<b:if cond='data:blog.url != "http://simplexcelebs.blogspot.com/p/forum.html"'>
<b:section id='sidebar' class="widget1" showaddelement='yes'>
<b:widget id='HTML14' locked='false' title='Subscribe' type='HTML'>
and
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<b:if cond='data:blog.url == "http://simplexcelebs.blogspot.com/p/forum.html"'>
<div id="fullcontent">
<b:loop values='data:posts' var='post'>
Change "http://simplexcelebs.blogspot.com/p/forum.html" to your forum page's url .
10,Lightbox effect has been integrated in this template
To use Lightbox effect in your post ,when editing post ,click on Edit HTML .
To add lightbox effect for one image , use rel="lightbox" title="Your image Caption" as picture above
To add lightbox effect for multiple images , use rel="lightbox[albumname]" title="Your Image Caption"
if you want to add another image to this album,upload the second image and use rel="lightbox[albumname]" title="Caption for Second image of albumname"
in this case , lightbox will work like a gallery with next and previous links and you can use keyboard to navigate through the album
That's all for this template .I hope you enjoy this version ^^
In previous post on Lightbox effect (Lightbox really working script) , I wrote about a script for Lightbox effect based on Scriptaculous (a Javascript framework) that work well in Blogger .
But if your blog is using Jquery framework ,this Lightbox effect can't work because there's a conflict between Jquery and Scriptaculous .
So here we have another solution that can be used in Blogger ,and of course ,it can be applied for all Simplex templates (included Simplex Celebrity ,Simplex Enews ...etc) .It's Jquery Lightbox
But if your blog is using Jquery framework ,this Lightbox effect can't work because there's a conflict between Jquery and Scriptaculous .
So here we have another solution that can be used in Blogger ,and of course ,it can be applied for all Simplex templates (included Simplex Celebrity ,Simplex Enews ...etc) .It's Jquery Lightbox
Many people comment in my blog for reporting errors when installing and using template Simplex Blognews . Thanks you all for this . Without your error reporting and support ,I can't continue this work .
In this post ,I want to introduce to you latest version of Blognews template which is easier to use and fixed some bugs .
Download Simplex Blognews with Disqus comment system | Download Simplex Blognews with Blogger comment system
2,Open template file in any word editor you have such as notepad ++
3,Here is code of main menu bar in template file :
<ul>
<li>
<a href='http://simplexblognews.blogspot.com'>Home</a>
</li>
<li>
<a href='http://simplexblognews.blogspot.com/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='http://simplexblognews.blogspot.com/search/label/travel'>Travel</a></li>
<li><a href='http://simplexblognews.blogspot.com/search/label/sports'>Sports</a></li>
<li><a href='http://simplexblognews.blogspot.com/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='http://simplexblognews.blogspot.com/search/label/entertainment'>Entertainment</a></li>
<li><a href='http://simplexblognews.blogspot.com/search/label/business'>Business</a></li>
</ul>
Change the text in bold to your category link . Follow this structure :
<li><a href='category link '>category name</a></li>
4,If you download Simplex blognews comes with Disqus comment system ,to activate Disqus comment system ,find this code :
<b:includable id='comments' var='post'>
<div id='disqus_thread'/>
<script type='text/javascript'>
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'simplexblognews'; // required: replace example with your forum shortname
// The following are highly recommended additional parameters. Remove the slashes in front to use.
// var disqus_identifier = 'unique_dynamic_id_1234';
// var disqus_url = 'http://example.com/permalink-to-page.html';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href='http://disqus.com/?ref_noscript'>comments powered by Disqus.</a></noscript>
</b:includable>
and this code :
Change the text 'Simplexblognews' in bold to your Disqus shortname .
If you don't plan to use Disqus ,skip this step .
5,Save template and upload it to Blogger .
6,In Blogger Dashboard ,go to Page elements . In this page ,you will see many widgets .
7,To add your social network account
click on 'edit' link in Stay Connected widget
and add link to your social network accounts .
8,To add your logo ,click on 'edit' link in logo widget
and add link to your logo into widget content
9,'top ads','below feature ads' ,'primary top col ads','sidebarads','secondary ads right' ,and 'footerads' are widgets for advertising . You can click on 'edit' link of these widgets and add the ad code into widget content . Like this
10,To show posts under a category in the slider:
click on 'edit' link in 'feature content slider' widget
add the title you want to show into widget title ,and add the name of category into widget content .
In these pictures above ,I want to show posts in 'feature' category into slider ,so I add category name 'feature' into widget content and add the title 'feature' into widget title .
11,Do the same with other widgets . Click on 'edit' link in a widget ,add a category name into widget content and add the title you want to show in widget title . Recent posts in this category will be shown in where the widget you choose is .
For example ,I want to show posts under category 'Asia' in the position of widget 'below featured left'
First ,I click on 'edit' link in 'below featured left'
a dialog appeared .
then ,I add the category name 'asia' into widget content ,and add the title I want to show 'Asia' into widget title .
After that ,click Save .
If the category 'asia' existed in my blog ,and there is at least one post under category 'asia' ,it will be displayed in the position of 'below featured left'
12,To add images into Flickr widget
click edit link on flickr widget
and add your FlickR id into widget content
13,To add video to Daily video section
Click on Daily Vid widget
then add video embed code into widget content
14,To add a forum to blog,create a new page ,name it 'forum' and paste the forum embeded code into page content (in Edit HTML mode)
then go to Dashboard -> Go to Design -> Edit HTML ,search for the text 'http://simplexblognews.blogspot.com/p/forum.html'
and replace it with link to 'forum' page you've just created .There are 4 places need to change in total . After that ,save the changes .
15,If you want to increase/decrease the number of post in each category in homepage ,you can find go to Blogger Dashboard -> Design tab -> Edit HTML ,and then checked on Expand Widget templates . Find this code :
Try to increase each value to get the number of post you want .
Save template when you finish editing . You can drag and drop widgets ,change widget positions ,add or remove widgets ...
That's all for this template . With this version , you don't need to worry much about the code as old Blognews versions .
I hope you like it
In this post ,I want to introduce to you latest version of Blognews template which is easier to use and fixed some bugs .
Download Simplex Blognews with Disqus comment system | Download Simplex Blognews with Blogger comment system
How to install this template
1,Download this template from one of two links above .If you want to use Disqus ,choose template file included Disqus and if you don't ,choose the file with Blogger default comment system2,Open template file in any word editor you have such as notepad ++
3,Here is code of main menu bar in template file :
<ul>
<li>
<a href='http://simplexblognews.blogspot.com'>Home</a>
</li>
<li>
<a href='http://simplexblognews.blogspot.com/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='http://simplexblognews.blogspot.com/search/label/travel'>Travel</a></li>
<li><a href='http://simplexblognews.blogspot.com/search/label/sports'>Sports</a></li>
<li><a href='http://simplexblognews.blogspot.com/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='http://simplexblognews.blogspot.com/search/label/entertainment'>Entertainment</a></li>
<li><a href='http://simplexblognews.blogspot.com/search/label/business'>Business</a></li>
</ul>
Change the text in bold to your category link . Follow this structure :
<li><a href='category link '>category name</a></li>
4,If you download Simplex blognews comes with Disqus comment system ,to activate Disqus comment system ,find this code :
<div id='disqus_thread'/>
<script type='text/javascript'>
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'simplexblognews'; // required: replace example with your forum shortname
// The following are highly recommended additional parameters. Remove the slashes in front to use.
// var disqus_identifier = 'unique_dynamic_id_1234';
// var disqus_url = 'http://example.com/permalink-to-page.html';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href='http://disqus.com/?ref_noscript'>comments powered by Disqus.</a></noscript>
</b:includable>
and this code :
<script type='text/javascript'>
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'simplexblognews'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function () {
var s = document.createElement('script'); s.async = true;
s.type = 'text/javascript';
s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>
Change the text 'Simplexblognews' in bold to your Disqus shortname .
If you don't plan to use Disqus ,skip this step .
5,Save template and upload it to Blogger .
6,In Blogger Dashboard ,go to Page elements . In this page ,you will see many widgets .
7,To add your social network account
click on 'edit' link in Stay Connected widget
and add link to your social network accounts .
8,To add your logo ,click on 'edit' link in logo widget
and add link to your logo into widget content
9,'top ads','below feature ads' ,'primary top col ads','sidebarads','secondary ads right' ,and 'footerads' are widgets for advertising . You can click on 'edit' link of these widgets and add the ad code into widget content . Like this
10,To show posts under a category in the slider:
click on 'edit' link in 'feature content slider' widget
add the title you want to show into widget title ,and add the name of category into widget content .
In these pictures above ,I want to show posts in 'feature' category into slider ,so I add category name 'feature' into widget content and add the title 'feature' into widget title .
11,Do the same with other widgets . Click on 'edit' link in a widget ,add a category name into widget content and add the title you want to show in widget title . Recent posts in this category will be shown in where the widget you choose is .
For example ,I want to show posts under category 'Asia' in the position of widget 'below featured left'
First ,I click on 'edit' link in 'below featured left'
a dialog appeared .
then ,I add the category name 'asia' into widget content ,and add the title I want to show 'Asia' into widget title .
After that ,click Save .
If the category 'asia' existed in my blog ,and there is at least one post under category 'asia' ,it will be displayed in the position of 'below featured left'
12,To add images into Flickr widget
click edit link on flickr widget
and add your FlickR id into widget content
13,To add video to Daily video section
Click on Daily Vid widget
then add video embed code into widget content
14,To add a forum to blog,create a new page ,name it 'forum' and paste the forum embeded code into page content (in Edit HTML mode)
then go to Dashboard -> Go to Design -> Edit HTML ,search for the text 'http://simplexblognews.blogspot.com/p/forum.html'
and replace it with link to 'forum' page you've just created .There are 4 places need to change in total . After that ,save the changes .
15,If you want to increase/decrease the number of post in each category in homepage ,you can find go to Blogger Dashboard -> Design tab -> Edit HTML ,and then checked on Expand Widget templates . Find this code :
numposts = 4;
numposts1 = 1;
numposts2 = 9;
numposts3 = 4;
numposts4 = 4;
numposts5 = 2;
numposts6 = 1;
numposts7 = 10;
numposts8 = 7;
Try to increase each value to get the number of post you want .
Save template when you finish editing . You can drag and drop widgets ,change widget positions ,add or remove widgets ...
That's all for this template . With this version , you don't need to worry much about the code as old Blognews versions .
I hope you like it
Latest version of Simplex Blognews -Click here
Simplex Blognews has some changes in code . I added Disqus comment system into this template ,remove some CSS tags ,optimize the code and re-solve the problem with showing Google adsense ads .
Live Demo | Download | Download Blognews template with forum page
To install this template ,you can see to my post on how to install Simplex Blognews
To activate Disqus comment system : find this code
<b:includable id='comments' var='post'><div id='disqus_thread'/><script type='text/javascript'>/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */var disqus_shortname = 'simplexblognews'; // required: replace example with your forum shortname
// The following are highly recommended additional parameters. Remove the slashes in front to use.// var disqus_identifier = 'unique_dynamic_id_1234';// var disqus_url = 'http://example.com/permalink-to-page.html';
/* * * DON'T EDIT BELOW THIS LINE * * */(function() {var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);})();</script><noscript>Please enable JavaScript to view the <a href='http://disqus.com/?ref_noscript'>comments powered by Disqus.</a></noscript>
</b:includable>
and replace 'simplexblognews' ( marked in bold ) to your Disqus shortname .
then find this code :
<script type='text/javascript'>/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */var disqus_shortname = 'simplexblognews'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */(function () {var s = document.createElement('script'); s.async = true;s.type = 'text/javascript';s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);}());</script>
and replace 'simplexblognews' (marked in bold) to your Disqus shortname .
if you plan to use a Blognews template with a wide page for a forum ,you can download version with forum page .
After installed ,create a page with name 'forum' ,then click on Edit HTML mode in editor window,and paste script of embeded forum (for example Vanilaforum) into page content
That's all for Simplex Blognews .Have fun !!!
One friend commented in my blog asking how to implement a floating bar to website . Do you know what is a floating bar in website and how it look like ? See my live demo please .Some other good examples of floating bars can be found at Meebo and Wibiya , I think many of you know Wibiya .With a floating bar ,we can :
Live demo
1,In this post ,I will make a floating menubar ,but you can replace the code (in bold) with code of advertisements ,social networks ,contact information or anything you like .
if you are using Blogger ,go to Dashboard ->Design - >Edit HTML, and add this code right after <body> in template xml .
2,We need some CSS for menu bar .
Here is the CSS code :
<style>
#navi {
height: 50px;
margin-top: 50px;
}
#menu {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #426d9c), color-stop(40%, #0f67a1), color-stop(100%, #1384d1));
background: -moz-linear-gradient(top, #426d9c, #0f67a1, #1384d1);
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
line-height: 50px;
text-align: center;
margin: 0 auto;
padding: 0;
}
#navi ul {
padding: 0;
}
#navi ul li {
list-style-type: none;
display: inline;
margin-right: 15px;
}
#navi ul li a {
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #000;
padding: 3px 7px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-transition-property: color, background;
-webkit-transition-duration: 0.5s, 0.5s;
}
#navi ul li a:hover {
background: #01458e;
color: #ff0;
-webkit-transition-property: color, background;
-webkit-transition-duration: 0.5s, 0.5s;
}
.default {
width: 850px;
height: 50px;
box-shadow: 0 5px 20px #888;
-webkit-box-shadow: 0 5px 20px #888;
-moz-box-shadow: 0 5px 20px #888;
}
.fixed {
position: fixed;
top: -5px;
left: 0;
width: 100%;
box-shadow: 0 0 40px #222;
-webkit-box-shadow: 0 0 40px #222;
-moz-box-shadow: 0 0 40px #222;
}
</style>
if you are using Blogger ,add this code right before </head> .You can edit CSS to make menubar display as you want (change color ,font ,shadow,round corner...)
3,Finally , the most important part : Javascript
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var menu = $('#menu'),
pos = menu.offset();
$(window).scroll(function(){
if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
menu.fadeOut('fast', function(){
$(this).removeClass('default').addClass('fixed').fadeIn('fast');
});
}
else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
menu.fadeOut('fast', function(){
$(this).removeClass('fixed').addClass('default').fadeIn('fast');
});
}
});
});
</script>
you can add this code right before </body> .
Now save template file and you will see a menubar floating in your site .
javascript code will : Hide the menu -> replace class "default" with class "fixed" -> then show the menu again .
What makes the magic is in classes "default" and "fixed" , in CSS code , we define "default" class with attributes for a static menubar and "fixed" class with attributes for a floating menubar .
So when we scroll the page ,"default" class will be replaced with "fixed" class ,and this will make menubar float over other elements .
When we scroll back to top ,"fixed" class will be replaced with "default" class ,and floating menu becomes static menu .
That's all for a floating bar .To customize this floating bar ,just need some changes in CSS. I hope this will be helpful to you .
- Make a menu navigation
- Social information
- Advertising
- Highlight important information (promos, etc.)
- Contact information
- Polls / feedback
Live demo
Here is steps for making a floating bar
1,In this post ,I will make a floating menubar ,but you can replace the code (in bold) with code of advertisements ,social networks ,contact information or anything you like .
<div id="navi">
<div id="menu" class="default">
<!--code of floating bar goes here-->
<!--code of floating bar goes here-->
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Freebies</a></li>
<li><a href="#">Inspiration</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">WordPress</a></li>
</ul>
</div><!-- close menu -->
</div><!-- close navi -->
if you are using Blogger ,go to Dashboard ->Design - >Edit HTML, and add this code right after <body> in template xml .
2,We need some CSS for menu bar .
Here is the CSS code :
<style>
#navi {
height: 50px;
margin-top: 50px;
}
#menu {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #426d9c), color-stop(40%, #0f67a1), color-stop(100%, #1384d1));
background: -moz-linear-gradient(top, #426d9c, #0f67a1, #1384d1);
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
line-height: 50px;
text-align: center;
margin: 0 auto;
padding: 0;
}
#navi ul {
padding: 0;
}
#navi ul li {
list-style-type: none;
display: inline;
margin-right: 15px;
}
#navi ul li a {
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #000;
padding: 3px 7px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-transition-property: color, background;
-webkit-transition-duration: 0.5s, 0.5s;
}
#navi ul li a:hover {
background: #01458e;
color: #ff0;
-webkit-transition-property: color, background;
-webkit-transition-duration: 0.5s, 0.5s;
}
.default {
width: 850px;
height: 50px;
box-shadow: 0 5px 20px #888;
-webkit-box-shadow: 0 5px 20px #888;
-moz-box-shadow: 0 5px 20px #888;
}
.fixed {
position: fixed;
top: -5px;
left: 0;
width: 100%;
box-shadow: 0 0 40px #222;
-webkit-box-shadow: 0 0 40px #222;
-moz-box-shadow: 0 0 40px #222;
}
</style>
if you are using Blogger ,add this code right before </head> .You can edit CSS to make menubar display as you want (change color ,font ,shadow,round corner...)
3,Finally , the most important part : Javascript
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var menu = $('#menu'),
pos = menu.offset();
$(window).scroll(function(){
if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
menu.fadeOut('fast', function(){
$(this).removeClass('default').addClass('fixed').fadeIn('fast');
});
}
else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
menu.fadeOut('fast', function(){
$(this).removeClass('fixed').addClass('default').fadeIn('fast');
});
}
});
});
</script>
you can add this code right before </body> .
Now save template file and you will see a menubar floating in your site .
How it works ?
At first ,we don't scroll the page , "menu" element has a class "default" .When we scroll the page ,javascript code will : Hide the menu -> replace class "default" with class "fixed" -> then show the menu again .
What makes the magic is in classes "default" and "fixed" , in CSS code , we define "default" class with attributes for a static menubar and "fixed" class with attributes for a floating menubar .
So when we scroll the page ,"default" class will be replaced with "fixed" class ,and this will make menubar float over other elements .
When we scroll back to top ,"fixed" class will be replaced with "default" class ,and floating menu becomes static menu .
That's all for a floating bar .To customize this floating bar ,just need some changes in CSS. I hope this will be helpful to you .
One of my templates SimplexTube has been re-newed . I made a new layout for this template ,a better slider and this template now support more Video hosting services (Youtube,Vimeo ,Metacafe ,DailyMotion,Liveleak ) .
Live Demo | Download
2,To change the logo ,find this code :
<div class="logo rounded">
<a expr:href='data:blog.homepageURL'>
<img src="http://img691.imageshack.us/img691/8568/simplextube.jpg"/>
</a>
</div>
and change the url of logo (marked in bold) to your logo url .
3,To add your social networks ,find this code :
<ul id="menuSocial">
<li><a href="/feeds/posts/default/"><img width="16" height="16" alt="Subscribe to RSS" src="http://img441.imageshack.us/img441/3599/rssu.png"/>Subscribe</a></li>
<li><a href="http://twitter.com/dinhquanghuy"><img width="16" height="16" alt="" src="http://img88.imageshack.us/img88/7361/twittere.png"/>Follow us</a></li>
<li><a href="http://facebook.com/simplexdesignblog"><img width="16" height="16" alt="" src="http://img232.imageshack.us/img232/2014/facebookxx.png"/>Become our fan</a></li>
</ul>
and change the text in bold to your social network accounts .
4,To add the ads code into header ,find this code :
5, This is the code of main menu navigation :
<ul id="nav">
<li><a href="http://simplextube.blogspot.com">Home</a></li>
<li><a href="http://simplextube.blogspot.com/search/label/video">Video</a></li>
<li><a href="http://simplextube.blogspot.com/search/label/performance">Performance</a></li>
<li><a href="http://simplextube.blogspot.com/search/label/guitar%20review">Guitar Reviews</a></li>
<li><a href="http://simplextube.blogspot.com/search/label/guitar%20tips">Guitar Tips</a></li>
<li><a href="http://simplextube.blogspot.com/search/label/history">History</a></li>
</ul>
find this code and replace links in bold to your categories
6,When finish editing template , you can upload file to Blogger .
7,In page Elements ,you can add or remove widgets as you want .
Like SimplexTube ,there are two display modes in this template : display as video post and display as a normal blog post .
To post in video display mode , your post need to follow this structure :
then label your post with label "video" .
For example ,I want to create a video post with youtube video at this address : http://www.youtube.com/watch?v=e5wfYPXAjl8 ,here is what I do :
Go to Dashboard - > Posting ->New Post
and enter post content like this
Click Publish Post . Ok ,we finish posting a new video to blog . You can see this post in homepage.
-Link from Vimeo has structure http://www.vimeo.com/video-id ,for example http://vimeo.com/18539129 ,it's what you see in the address bar of browser .To post this video to blogger ,you will make a post like this :
http://vimeo.com/18539129
-Link from Liveleak has structure http://www.liveleak.com/view?i=video-id ,for example http://www.liveleak.com/view?i=b7a_1294580726 ,it's what you see in the address bar of browser .To post this video to blogger ,you will make a post like this :
http://www.liveleak.com/view?i=b7a_1294580726
-Link from Metacafe has structure http://www.metacafe.com/watch/video-id/video-name/ ,for example http://www.metacafe.com/watch/5743958/tom_and_jerry_tales_volume_6_movie_trailer/ ,it's what you see in the address bar of browser .To post this video to blogger ,you will make a post like this :
-Link from dailymotion has structure http://www.dailymotion.com/video/video-id_video-name-video-category ,for example http://www.dailymotion.com/video/xgfzpx_homeless-guy-with-an-amazing-voice-gets-discovered_news ,it's what you see in the address bar of browser .To post this video to blogger ,you will make a post like this :
http://www.dailymotion.com/video/xgfzpx_homeless-guy-with-an-amazing-voice-gets-discovered_news
To post a normal article : go to Posting ->New Post and write your content as normal . But remember to add label 'blog' at Labels field . This label will mark the post a normal blog post and it will show your post in Blog Post style ( Not Video Post style ).
To show your post in slider at the top of homepage,add one more label 'feature' to the post .
That's all for this template .I hope you like it .
You can use this template for free ,but keep the credit please .
Live Demo | Download
To install this template ,you can follow these steps :
1,Download template file .2,To change the logo ,find this code :
<div class="logo rounded">
<a expr:href='data:blog.homepageURL'>
<img src="http://img691.imageshack.us/img691/8568/simplextube.jpg"/>
</a>
</div>
and change the url of logo (marked in bold) to your logo url .
3,To add your social networks ,find this code :
<ul id="menuSocial">
<li><a href="/feeds/posts/default/"><img width="16" height="16" alt="Subscribe to RSS" src="http://img441.imageshack.us/img441/3599/rssu.png"/>Subscribe</a></li>
<li><a href="http://twitter.com/dinhquanghuy"><img width="16" height="16" alt="" src="http://img88.imageshack.us/img88/7361/twittere.png"/>Follow us</a></li>
<li><a href="http://facebook.com/simplexdesignblog"><img width="16" height="16" alt="" src="http://img232.imageshack.us/img232/2014/facebookxx.png"/>Become our fan</a></li>
</ul>
and change the text in bold to your social network accounts .
4,To add the ads code into header ,find this code :
<div id="bannerHead">
<!--ads go here -->
</div>
and add your ad code to where I noted "ads go here"<!--ads go here -->
</div>
5, This is the code of main menu navigation :
<ul id="nav">
<li><a href="http://simplextube.blogspot.com">Home</a></li>
<li><a href="http://simplextube.blogspot.com/search/label/video">Video</a></li>
<li><a href="http://simplextube.blogspot.com/search/label/performance">Performance</a></li>
<li><a href="http://simplextube.blogspot.com/search/label/guitar%20review">Guitar Reviews</a></li>
<li><a href="http://simplextube.blogspot.com/search/label/guitar%20tips">Guitar Tips</a></li>
<li><a href="http://simplextube.blogspot.com/search/label/history">History</a></li>
</ul>
find this code and replace links in bold to your categories
6,When finish editing template , you can upload file to Blogger .
7,In page Elements ,you can add or remove widgets as you want .
To use this template :
Like SimplexTube ,there are two display modes in this template : display as video post and display as a normal blog post .
To post in video display mode , your post need to follow this structure :
video-link-endofvid
[starttext]
text description goes here
[endtext]
then label your post with label "video" .
For example ,I want to create a video post with youtube video at this address : http://www.youtube.com/watch?v=e5wfYPXAjl8 ,here is what I do :
Go to Dashboard - > Posting ->New Post
and enter post content like this
http://www.youtube.com/watch?v=e5wfYPXAjl8endofvid
[starttext]
Textdescription .....blah blah blah ...
[endtext]
add the label 'video' in Labels field .Click Publish Post . Ok ,we finish posting a new video to blog . You can see this post in homepage.
-Link from Vimeo has structure http://www.vimeo.com/video-id ,for example http://vimeo.com/18539129 ,it's what you see in the address bar of browser .To post this video to blogger ,you will make a post like this :
http://vimeo.com/18539129
[starttext]
Textdescription .....blah blah blah ...
[endtext]
-Link from Liveleak has structure http://www.liveleak.com/view?i=video-id ,for example http://www.liveleak.com/view?i=b7a_1294580726 ,it's what you see in the address bar of browser .To post this video to blogger ,you will make a post like this :
http://www.liveleak.com/view?i=b7a_1294580726
[starttext]
Textdescription .....blah blah blah ...
[endtext]
-Link from Metacafe has structure http://www.metacafe.com/watch/video-id/video-name/ ,for example http://www.metacafe.com/watch/5743958/tom_and_jerry_tales_volume_6_movie_trailer/ ,it's what you see in the address bar of browser .To post this video to blogger ,you will make a post like this :
http://www.metacafe.com/watch/5743958/tom_and_jerry_tales_volume_6_movie_trailer/
[starttext]
Textdescription .....blah blah blah ...
[endtext]
-Link from dailymotion has structure http://www.dailymotion.com/video/video-id_video-name-video-category ,for example http://www.dailymotion.com/video/xgfzpx_homeless-guy-with-an-amazing-voice-gets-discovered_news ,it's what you see in the address bar of browser .To post this video to blogger ,you will make a post like this :
http://www.dailymotion.com/video/xgfzpx_homeless-guy-with-an-amazing-voice-gets-discovered_news
[starttext]
Textdescription .....blah blah blah ...
[endtext]
To post a normal article : go to Posting ->New Post and write your content as normal . But remember to add label 'blog' at Labels field . This label will mark the post a normal blog post and it will show your post in Blog Post style ( Not Video Post style ).
To show your post in slider at the top of homepage,add one more label 'feature' to the post .
That's all for this template .I hope you like it .
You can use this template for free ,but keep the credit please .
The latest version of Simplex Enews -click here
