Showing posts with label sidebar. Show all posts
sidebar × widget
how to display the gadget sidebar on certain pages
Here are the parts of your blog page
Homepage - Is your blog's main page, the front page.
Archivepage - is the archive page
Itempage - Is your post pages
Indexpage - It is the home page, the page labels, and search page.
Staticpage-new feature that google page that does not get in on the posts.
1. Showing Widget Only on Homepage
<b:if cond='data:blog.url == data:blog.homepageUrl'>
..........................
</ B: if>
2. Widget displays in addition to the Homepage
<b:if cond='data:blog.url != data:blog.homepageUrl'>
.....................................
</ B: if>
3. Widget displays only in Archivepages
<b:if cond='data:blog.pageType == "archive"'>
......................................
</ B: if>
4. Widget displays in addition to the Archivepages
<b:if cond='data:blog.pageType != "archive"'>
.................................................. ..
</ B: if>
5. Widget displays only in Itempages / Post
<b:if cond='data:blog.pageType == "item"'>
............................................
</ B: if>
6. Displays widgets in addition to the Itempages
<b:if cond='data:blog.pageType != "item"'>
....................................
</ B: if>
7. Displaying widgets only in Staticpages
<b:if cond='data:blog.pageType == "static_page"'>
..................................
</ B: if>
8. Displays widgets in addition to the staticpages
<b:if cond='data:blog.pageType != "static_page"'>
............................
</ B: if>
9. Posts widget displays the URL of Certain
<b:if cond='data:blog.url == " your URL posts "'>
.........................................
</ B: if>
10. Displays widgets in addition to the specific post URL
<b:if cond='data:blog.url != "your URL posts"'>
................................................
</ B: if>
How Uses?
The following code example my blog widget
<b:widget id='HTML2' locked='false' title='stat' article type='HTML'>
<b:includable id='main'>
.................................................. opening code
<! - Only display title if it's a non-empty ->
<b:if cond='data:title != ""'>
<h2 class='title'> <data:title/> </ h2>
</ B: if>
<div class='widget-content'>
<data:content/>
</ Div>
<b:include name='quickedit'/>
.............................................. cover code
</ B: includable>
</ B: widget>
The red is the placement of code for the appearance of the widget on certain pages only. May be useful
sidebar × tips trick blog × widget
Auto Scrolling Recent Posts Widget for Blogger
1.Login to your blogger dashboard and go to Desing --&-- Page Elements.
2.Click on 'Add a Gadget' on the sidebar.
3.Select 'HTML/Javascript' and add the one of code given below
<script style="" src="http://sitemaphendrytha.googlecode.com/files/auto%20recent%20post.js"> </script><script style=""> var nMaxPosts = 15; var sBgColor; var nWidth; var nScrollDelay = 175; var sDirection="left"; var sOpenLinkLocation="N"; var sBulletChar="»»"; </script> <script style="" src="Your web site url here/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2"> </script>
e Your web site url here with your web site url
Look at the example below:
4.Now save your "HTMl JavaScript"
DEMO:
menu navigation × sidebar × widget
how to add vertikal menu slide dancing
DEMO
This menu is perfect slide dancing in place disidebar your blog is fairly easy to install you just follow these steps:
1.Log in to your blogger dashboard
2.Go to --> layout- -> Edit HTML
3.Scroll down to where you see this:
]]></b:skin>
4.Now add below code just before ]]></b:skin> tag .
5.Click on "Save Templates" and now you are done.
NEXT STEP
Login to your blogger dashboard and go to Desing --&-- Page Elements.
.Click on 'Add a Gadget' on the sidebar.
Select 'HTML/Javascript' and add the one of code given below
<ul class="nice-menu">
<li class="orange"><a href="">Home</a></li>
<li class="red"><a href="">About</a></li>
<li class="green"><a href="">Portfolio</a></li>
<li class="blue"><a href="">Blog</a></li>
<li class="bright"><a href="">Contact</a></li>
<li class="dark"><a href="">What not?</a></li>
</ul>
DEMO
This menu is perfect slide dancing in place disidebar your blog is fairly easy to install you just follow these steps:
1.Log in to your blogger dashboard
2.Go to --> layout- -> Edit HTML
3.Scroll down to where you see this:
]]></b:skin>
4.Now add below code just before ]]></b:skin> tag .
/**
* Name: Nice Menu
* Version: 0.1
* Author:Hendrytha
**/
ul.nice-menu {
list-style: none;
margin-top: 30px;
width: 300px;
}
@-moz-keyframes expand {
0% {
width: 5px;
padding-left: 0px;
}
100% {
width: 200px;
padding-left: 20px;
}
}
@-moz-keyframes expand-bounce {
0% {
width: 5px;
padding-left: 0px;
}
50% {
width: 200px;
}
70% {
width: 170px;
}
80% {
width: 200px;
}
90% {
width: 190px;
}
100% {
width: 200px;
padding-left: 20px;
}
}
@-webkit-keyframes expand {
0% {
width: 5px;
padding-left: 0px;
}
100% {
width: 200px;
padding-left: 20px;
}
}
@-webkit-keyframes expand-bounce {
0% {
width: 5px;
padding-left: 0px;
}
50% {
width: 200px;
}
70% {
width: 170px;
}
80% {
width: 200px;
}
90% {
width: 190px;
}
100% {
width: 200px;
padding-left: 20px;
}
}
@-moz-keyframes shrink {
0% {
width: 200px;
padding-left: 20px;
}
100% {
width: 5px;
padding-left: 0px;
}
}
@-moz-keyframes shrink-bounce {
0% {
width: 200px;
padding-left: 20px;
}
50% {
width: 5px;
}
70% {
width: 35px;
}
80% {
width: 5px;
}
90% {
width: 15px;
}
100% {
width: 5px;
padding-left: 0px;
}
}
@-webkit-keyframes shrink {
0% {
width: 200px;
padding-left: 20px;
}
100% {
width: 5px;
padding-left: 0px;
}
}
@-webkit-keyframes shrink-bounce {
0% {
width: 200px;
padding-left: 20px;
}
50% {
width: 5px;
}
70% {
width: 35px;
}
80% {
width: 5px;
}
90% {
width: 15px;
}
100% {
width: 5px;
padding-left: 0px;
}
}
ul.nice-menu li {
width: 5px;
height: 30px;
line-height: 20px;
padding: 0px 0px 0px 0px;
margin-top: 3px;
background: transparent;
width: 5px;
}
ul.nice-menu.tight li {
margin-top: 0 !important;
}
ul.nice-menu li {
-moz-animation-name: shrink;
-moz-animation-duration: 0.5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name: shrink;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
}
ul.nice-menu.bounce li {
-moz-animation-name: shrink-bounce;
-moz-animation-duration: 0.5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name: shrink-bounce;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
}
ul.nice-menu li:hover {
width: 200px;
padding-left: 20px;
-moz-animation-name: expand;
-moz-animation-duration: 0.5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name: expand;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
}
ul.nice-menu.bounce li:hover {
-moz-animation-name: expand-bounce;
-moz-animation-duration: 0.5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name: expand-bounce;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
}
ul.nice-menu a {
width: 200px;
text-decoration: none;
font-size: 14px;
color: #FFF;
text-shadow: 0px 0px 3px #333;
font-weight: bold;
position: absolute;
padding: 5px 0px;
padding-left: 20px;
}
ul.nice-menu li.green {
background: rgb(107,186,112);
}
ul.nice-menu li.blue {
background: rgb(78,92,127);
}
ul.nice-menu li.orange {
background: rgb(216,121,40);
}
ul.nice-menu li.dark {
background: rgb(42,32,30);
}
ul.nice-menu li.red {
background: rgb(178,59,30);
}
ul.nice-menu li.bright {
background: rgb(241,249,210);
}
5.Click on "Save Templates" and now you are done.
NEXT STEP
Login to your blogger dashboard and go to Desing --&-- Page Elements.
.Click on 'Add a Gadget' on the sidebar.
Select 'HTML/Javascript' and add the one of code given below
<ul class="nice-menu">
<li class="orange"><a href="">Home</a></li>
<li class="red"><a href="">About</a></li>
<li class="green"><a href="">Portfolio</a></li>
<li class="blue"><a href="">Blog</a></li>
<li class="bright"><a href="">Contact</a></li>
<li class="dark"><a href="">What not?</a></li>
</ul>