Monday, 5 August 2013
Simple Side Bar


----------------------------------------------------------------------------------------------
FIND B SKIN TAG AND REPLACE BELOW CODE
]]></b:skin>
------------------------------------------------------------------------------------------------
/* Sidebar Content
----------------------------------------------- */
#sidebar-wrapper { float: left; margin-top: 5px; width: 200px; height 200px;}
.sidebar .widget {
float:left;
height:210px;
width:210px;
background-color:#009AFA;
border:2px solid #9AFA00;
margin-bottom:17px;
margin-right:17px;
padding:9px;
}
.sidebar ul {float: left;line-height: 24px;}
.sidebar li {}
.sidebar li a{
background-color: #252C33;
border: 1px solid #2D363E;
color: #FFFFFF;
display: block;
margin-bottom: 5px;
padding: 3px 3px 3px 10px;
width: 200px;
}
.sidebar li a:hover{
background-color: #2D363E;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifLF8TsKT5tMQ00g8WLlyj6V17hZsncOTogwUtVzllUZMVNydCHP2yunMlhhK_6xnVKrZWQmzFBE9X00ROOKd0OCglTkC7cLet-Ej_Mpg2lI5hsfb3YfZOsb7Ybk_ut30_Gcm4YTEa4kPR/s13/sidebar-hover.gif);
background-position: 170px 8px;
background-repeat: no-repeat;
border: 1px solid #333D47;
}
h2 {
color: #fff;
display: block;
float: left;
font-family: Trebuchet MS;
font-size: 13px;
font-weight: normal;
margin: 4px 0 10px;
padding-left: 10px;
text-transform: lowercase;
width: 200px;
}
---------------------------------------------------------------------------------------
FIND END CONTENT WRAPPER DIV AND REPLACE BELOW CODE
--------------------------------------------------------------------------------------
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's 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'/>
</b:includable>
</b:widget>
<b:widget id='HTML3' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's 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'/>
</b:includable>
</b:widget>
<b:widget id='HTML2' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's 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'/>
</b:includable>
</b:widget>
</b:section>
</div>
<div class='clear'/>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>
</div> <!-- end content-wrapper -->
Related movie you might like to see :

RADIO BUTTON SLIDER TO KEY FRAME SL...

BODY JS FILE LINK IN MAGENTO

CSS SYNTAX HIGHLIGHT CHANGE IN NOT...

GOOGLE CUSTOM SEARCH BOX

RELATED POST WIDGET LIST WITHOUT TH...

FLASH PLAYER SWF FILE DOWNLOAD ARCH...

WHACK A RAT CSS GAME

CSS SLIDER WITHOUT JS

FLICKITY SLIDER SCROLL WITH RADIO N...

FLICKITY JS CSS SLIDER
?
+
X
Recommended for you
Loading..
Related Post for Simple Side Bar
IMAGE UPLOAD WITH JAVA WITH PHP CODE ------------------------------------------------------------------------------------------------------ CREATE FOLDER AND CREATE AND SAVE FILES ONE BY ONE IN THIS FOLDER &nbā¦
SHARING WIDGET Add To Any For Blogger Share button for Blogger To place under every post in Blogger To place under every post in Bloggerhttps://codepen.io/sunnysingh/pen/OPxbgq<!DOCTYPE html><html lanā¦
Magento Hello World Module (Extension) -------------------------------------------------------------------------------------------------------------- READ MORE: http://inchoo.net/magento/programming-magento/magento-ā¦
RELATED POST WIDGET LIST WITHOUT THUMBNAIL ------------------------------------------------------------------------------------------------------- FIND HEAD </head> TAG AND PASTE BELOW CODE WHEN Wā¦
SEO SCORE TOOLS SEO Audit Tool Reasons to be a Professional Member 1. Generate more SEO leads from your website 2. Increase SEO sales with personalized audits 3. Get email notifications oā¦
ARROW BUTTON ------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE ---------------------------------------------ā¦
Search Engine Optimization Toolkit UN USED CSS IN GOOGLE Free SEO Toolkit Start with the free download, review your website, and make changes fast. The SEO Toolkit with its detailed analysis and search engine friendly suggestionā¦
IMAGE UPLOAD WITH JAVA WITHOUT PHP CODE ------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE IN NOTE PAD AND SAVE IN HTML FILE -----------ā¦
SCREEN TO GIF ------------------------------------------------------------------------------------------------------------------ Read More: 3:30 PDF HTML IMAGE CONVERTER HDā¦
FLASH PLAYER SWF FILE DOWNLOAD ARCHIVES ---------------------------------------------------------------------------------------------------------------- FLASH PLAYER DOWNLOAD FROM ARCHIVES https://helpx.adobe.com/flaā¦
FLASH 8 DOWNLOAD DIRECT LINKS TO YOUR FILES ON GOOGLE DRIVE - YouTube ā¶ 5:17 https://www.youtube.com/watch?v=ehue47G5ayc 14 hours ago - Uploaded by SAVE MONEY DIRECT LINKS&nā¦
JS IMAGE SCROLLER -------------------------------------------------------------------------------------------------------------- JS IMAGE SCROLLER CODE image scroller https://amazingcarousel.comā¦
NOTEPAD++ REMOVE UNWANTED LINES ------------------------------------------------------------------------------------------------------------------------------------------------------------ STEP NO : 1 1- CTā¦
BOOTSNIPP LOGIN SIGNUP FORM ----------------------------------------------------------------------------------------------------------- READ MORE: http://bootsnipp.com/tags/login http://bootsnipp.com/sā¦
HTML CSS GREEN COMMENTS NOTEPAD++ ------------------------------------------------------------------------------------------------------------------------- READ MORE: https://www.youtube.com/watch?v=Abqwpg5mp_Uā¦
GOOGLE CUSTOM SEARCH BOX ------------------------------------------------------------------------------------------------------------------ GOOGLE CUSTOM SEARCH BOX -----------------------------------ā¦
CSS SYNTAX HIGHLIGHT CHANGE IN NOTEPAD++ SYNTAX HIGHLIGHTER ------------------------------------------------------------------------------------------------------------------- SYNTAX HIGHLIGHTER LINKS -----------------------------------ā¦
CSS SLIDER WITHOUT JS ----------------------------------------------------------------------------------------------------------- ReadMore: http://cssslider.com/non-jquery-carousel-7.html SAVE ā¦
WHACK A RAT CSS GAME ----------------------------------------------------------------------------------------------------------------- ReadMore: https://dzone.com/articles/css3-games-collection httā¦
Labels:
S
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment
Click to see the code!
To insert emoticon you must added at least one space before the code.