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
RADIO BUTTON SLIDER TO KEY FRAME SLIDER ------------------------------------------------------------------------------------------------------------ Read More: https://codepen.io/macbobbitt_/pen/jmEBL https://codepe…
WHITE SPACE REMOVER CODE --------------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE IN POST HTML SECTION COPY CODE …
HOW TO GET MALWARE ADD POPUP WITHOUT SOFTWARE --------------------------------------------------------------------------------------------------------- STEP 1: GO TO WINDOW TASK MANAGER STEP 2: OPEN FILE LOCATION AND DE…
SYNTAX HIGHLIGHTER BLOGGER TEMPLATE ========================================================================= COPY AND PASTE BELOW CODE IN BLOGGER TEMPLATE http://fbgadgets.blogspot.co.uk/2014/08/syntax-h…
RELATED POST WIDGET LIST SHAPE ---------------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.uk/2013/12/n-relate-pos…
SEARCH BOX EXCELENCIA ----------------------------------------------------------------------------------------------------- FIND B SKIN TAG AND REPLACE WITH BELOW CODE ]]></b:skin> --…
FLICKITY SLIDER SCROLL WITH RADIO NEXT PREV BUTTON ----------------------------------------------------------------------------------------------------------- ReadMore: http://codepen.io/desandro/pen/bNLGNZ view-source:http://s…
WORD PRESS PARTS -------------------------------------------------------------------------------------------------------- Read More: ----------------------------------…
CONVERT FILE PATH TO A URL LINK -------------------------------------------------------------------------------------------------------- ANY LIST TO SCROLLER CODE: http://accordionslider.com/ http://anroots.…
LABEL WIDGET RAINBOW/MULTI COLOUR STYLE ------------------------------------------------------------------------------------------------- FIRST ADD LABEL WIDGET AND SET LIST OPTION REPLACE YOUR B SKIN TAG WITH BELO…
RECENT OR FEATURED POST SLIDER AFTER FOOTER ------------------------------------------------------------------------------------------------------------- COPY AND POST CODE READ MORE: http://fbgadgets.blogspot.co.uk/2…
HTML SYNTAX HIGHLIGHTER ----------------------------------------------------------------------------------------------------------------- CODE: -------------------------------------------------------…
SEARCH YOUR VIDEO IN GOOGLE ----------------------------------------------------------------------------------------------- 1) CLICK SEAACH TOOLS TAB 2) CLICK 24 HOUR PAST OPTION ------------------------…
White Space Remover /************************************BODY************************************/ body { background-color: #eee; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; fo…
SYNTAX HIGHLIGHTER BLOGGER TEMPLATE --------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.uk/2014/08/syntax-highlight…
BODY JS FILE LINK IN MAGENTO ------------------------------------------------------------------------------------------------------------- SEARCH IN GOOGLE file content software https://www.google.co.uk/s…
SYNTAX HIGHLIGHTER BLOGGER TEMPLATE ----------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.uk/2014/08/syntax-highl…
SEARCH BOX WITHOUT JAVA CODE ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE <input id='input' name='q' placeholde…
RECAPTCHA KEY CONTCAT FORM FOR BLOGGER ------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE READMORE: http://kontactr.com/ https…
EDIT IMAGE IN NOTEPAD++ ---------------------------------------------------------------------------------------------------------------------- https://www.google.co.uk/search?q=edit+picture+in+no…
BLOG FILE HOSTING GOOGLE PROJECT WITH TORTOISE SVN SOFTWARE EDIT HTML PAGE IN GOOGLE - YouTube ▶ 4:19 https://www.youtube.com/watch?v=Q4yfMqPFSYE 16 mins ago - Uploaded by SAVE MONEY http://fbgadgets.blogspot.co.uk/2016/09/…
Recommended Post Slide out for Blogger ---------------------------------------------------------------------------------------------------- RECOMMENDED POST SLIDE OUT FOR BLOG - YouTube ▶ 2:50 https:/…
INTENSO MAGENTO QUICK VIEW BUTTON ---------------------------------------------------------------------------------------------------------------- 6:01 REMOVE QUICK VIEW BUTTON IN MAGE…
AUTOMATION ANY WEBSITES ------------------------------------------------------------------------------------------------------ READ MORE: https://www.automationanywhere.com/webdataext?r=google&w=…
INSTALL WORD PRESS TEMPLATE Plugins are tools which provide additional functionality to your application. To install a plugin you generally just need to put the plugin file into your 'wp-content/plugins' di…
SYNTAX HIGHLIGHTER ON LINE FOR BLOGGER ---------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.u…
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.