If you are willing to develop a good website using blogger.com. use the following code. You may follow the options in blogger and add the code at respective place. It will change the look and feel of blog.
| CSS Code: CSS Code to change Layout of Block. Add CSS code at the following steps. Options: Theme->Customise->Advance->Add CSS. |
:root{
--h1-bg-color:lightblue;--h1-color:red;--font-h1-size:60px;--h1-shadow:blue;
--h2-bg-color:lightblue;--h2-color:red;--font-h2-size:14px;--h2-shadow:blue;--h2-style:italic !important;
--h3-bg-color:blue;--h3-color:red;--font-h3-size:25px;--h3-shadow:blue;--h3-style:italic !important;
--td-bg-color:lightblue;--td-color:black;--td-border:1px solid lightgrey;
--menubar-bg-color:lightblue;--mainbar-color:black;
--menubaroptions-bg-color:white;--menubaroptions-color:black; --menubaroptions-border:1px solid gray;
--options-bg-ul-color:lightgrey;--options-ul-color:black;--options-ul-border:none;
--options-bg-li-color:lightblue;--options-color:black;--options-li-border:1px solid gray;
--font-lb-size:14px;
--font-text-size:16px;
--font1: Algerian ;
--text-shadow:darkblue;
--font2: fantasy;
--font3:Comic Sans MS;
--font:monospaced;//Trebuchet MS;//century gothic;//papyrus;//monospaced;//script;//impact;
--ul-bg-color:yellow;--ul-color:black;
--li-bg-color:yellow;--li-color:black;
}
body, h1, h2, h3{
font-family: var(--font)!important;
}
#fb {width:60%;background-color:var(--td-bg-color);color:var(--td-color);font-size:var(--font-text-size) !important;}
#sb {width:40%;background-color:var(--td-bg-color);color:var(--td-color);vertical-align:top;font-size:var(--font-text-size) !important;text-align:justify !important;}
#tb {width:700px;height:200px;border:1 px solid blue;background-color:var(--td-bg-color);}
td{border:var(--td-border);}
h1{font-size:var(--font-h1-size) !important;margin:-20px;padding:5px;height:70px;text-align:center;border-radius:5px;background-color:var(--h1-bg-color); box-shadow: 5px 5px 10px black;color:var(--h1-color) !important;text-shadow: 3px 3px 10px var(--h1-shadow) !important}
h2{margin:-10px;align-vertical:10px;height:30px;text-align:center;border-radius:4px;background-color:var(--h2-bg-color);box-shadow: 5px 5px 10px black;color:var(--h2-color) !important;font-size:var(--font-lb-size) !important;font-size:var(--font-h2-size) !important;}
h3{margin:5px;height:40px;text-align:center;border-radius:4px;background-color:var(--h3-bg-color);color:var(--h3-color) !important;box-shadow: 5px 5px 10px black;font-size:var(--font-h3-size) !important;}
.widget-content li {border-radius: 5px;margin-left:-30px;width:155px;background-color:var(--options-bg-li-color) !important;border-bottom:var(--options-li-border) !important; color:red !important;box-shadow: 3px 3px 10px black;margin-bottom:5px;padding-left:5px;}
.widget-content ul {border-radius: 5px;margin:2px;background-color:var(--options-bg-ul-color) !important;border: var(--options-ul-border) !important; }
.widget-content a{color:var(--options-color) !important;}
#PageList1 .widget-content li {border-radius: 5px;margin:5px;width:100px;;background-color:var(--menubaroptions-bg-color) !important;border-bottom: var(--menubaroptions-border) !important; color:red !important;box-shadow: 2px 2px 12px blue;}
#PageList1.widget.PageList{width:70%;float:left; padding:10px;z-index:1;margin-top:35px;}
#PageList1 .widget-content ul {border-radius: 5px;background-color:var(--menubar-bg-color) !important;border: 1px solid black; margin-left:1px;}
#PageList1 .widget-content a{color:var(--menubaroptions-color) !important;}
.titlewrapper{border: 10px; solid green; margin-bottom:-55px;padding:10px;}
#header-inner .descriptionwrapper {background-color:var(--h2-bg-color);height:50px;margin:5px;margin-top:30px;border-radius:5px; !important;font-size:var(--font-h2-size) !important;color:green !important;}
#header-inner .description {color:var(--h2-color) !important;text-shadow: 1px 1px 1px var(--h2-shadow) !important;font-style:var(--h2-style) !important;}
.columns-inner {margin-left:-25px;margin-right:-40px;}
.column-center-outer {margin-top:-40px;right:-25px;}
.column-right-outer {margin-top:-25px;}
.column-left-outer {margin-top:-20px;margin:-180px;margin-left:-160px !important;margin-top:-20px;}
.header-outer {background-color:var(--h2-bg-color) !important;}
.tabs-outer {margin:-20px;padding:10px;vertical-align:center;}
.widget.Image{float:left;margin-left:-20px; width:100px;height:100px;vertical-align:bottom;margin-top:10px;}
.widget.HTML{float:right;z-index:1;margin-top:60px;}
table {table-layout:fixed;width:100% !important;}
.columns-outer {background-color:red;padding:0px;margin:10px;}
.column-left-outer {background-color:var(--options-bg-ul-color); border-radius:5px;}
button, input {
background: #4E9CAF;
padding: 1px;
padding-left:4px; padding-right:4px;
text-align: center;
border-radius: 5px;
color: black !important;
border: 1px solid blue;
}
..quickedit{display:none;}
|
HTML Code: This will enable to change color of Blog dynamically. Options: Layout->Add a Gadget->HTML/JavaScript-> Add below code. |
| <input type="radio" name="changestyle" onclick=fn_blue() />Blue <input type="radio" name="changestyle" onclick=fn_green() />Green <input type="radio" name="changestyle" onclick=fn_red() default/>Red <input type="radio" name="changestyle" onclick=fn_white() default/>White <input type="radio" name="changestyle" onclick=fn_gray() default/>Gray <script > var sheet = document.createElement('style') function fn_blue() { sheet.innerHTML = ":root{--h1-bg-color:blue;--h1-color:white;--font-h1-size:60px;--h1-shadow:black;--h2-bg-color:lightblue;--h2-color:red;--font-h2-size:14px;--h2-shadow:blue;--h2-style:italic !important;--h3-bg-color:lightblue;--h3-color:white;--td-bg-color:white;--td-color:black !important;--td-border:none;--menubar-bg-color:white;--mainbar-color:blue;--menubaroptions-bg-color:white;--menubaroptions-color:blue; --options-bg-ul-color:lightblue;--options-ul-color:black;--options-ul-border:blue;--options-bg-li-color:lightgrey;--options-color:black;--font-lb-size:14px;--font-tx-size:12px;--font1: Algerian ; --text-shadow:darkblue;--font2: fantasy;--font3:Comic Sans MS;--font:monospaced;--ul-bg-color:yellow;--ul-color:black;--li-bg-color:yellow;--li-color:black;}" } function fn_green() { sheet.innerHTML = ":root{--h1-bg-color: #98fb98;--h1-color:#2d4b2d !important ;--font-h1-size:60px;--h1-shadow:blue;--h2-bg-color: #c1fcc1;--h2-color: #330000;--font-h2-size:14px;--h2-shadow:blue;--h2-style:italic !important;--h3-bg-color:#c1fcc1;--h3-color:#330000;--td-bg-color: #c1fcc1;--td-color: black;--td-border:1px solid #ffcccc;--menubar-bg-color: #c1fcc1;--mainbar-color:black;--menubaroptions-bg-color: #c1fcc1;--menubaroptions-color:green;--options-bg-ul-color:#c1fcc1;--options-ul-color:green;--options-bg-li-color: #c1fcc1;--options-color:green !important;--font-lb-size:14px;--font-tx-size:12px;--font1: Algerian ; --text-shadow:darkblue;--font2: fantasy;--font3:Comic Sans MS;--font:monospaced;--ul-bg-color:yellow;--ul-color:black;--li-bg-color:yellow;--li-color:black;}" } function fn_red() { sheet.innerHTML = ":root{--h1-bg-color: #ffe6e6;--h1-color:red !important;--font-h1-size:60px;--h1-shadow:blue;--h2-bg-color: #ffcccc;--h2-color: #330000;--font-h2-size:14px;--h2-shadow:blue;--h2-style:italic !important;--td-bg-color: #ffe6e6;--td-color: #330000;--h3-bg-color:#ffcccc;--h3-color:#330000;--td-border:1px solid #ffcccc;--menubar-bg-color: #ffe6e6;--mainbar-color:black;--menubaroptions-bg-color: #ffe6e6;--menubaroptions-color:red; --options-bg-ul-color:#ffcccc;--options-ul-color:black;--options-ul-border:none;--options-bg-li-color:#ffcccc;--options-color:red;--font-lb-size:14px;--font-tx-size:12px;--font1: Algerian ; --text-shadow:darkblue;--font2: fantasy;--font3:Comic Sans MS;--font:monospaced;--ul-bg-color:yellow;--ul-color:black;--li-bg-color:yellow;--li-color:black;}" } function fn_white() { sheet.innerHTML = ":root{--h1-bg-color: white;--h1-color:white !important;--font-h1-size:60px;--h1-shadow:blue;--h2-bg-color: white;--h2-color: gray;--font-h2-size:14px;--h2-shadow:blue;--h2-style:italic !important;--td-bg-color: white;--td-color: black;--h3-bg-color:white;--h3-color:gray;--td-border:1px solid lightgrey;--menubar-bg-color: white;--mainbar-color:black;--menubaroptions-bg-color: white;--menubaroptions-color:gray; --options-bg-ul-color:white;--options-ul-color:black;--options-ul-border:black;--options-bg-li-color:white;--options-color:gray;--font-lb-size:14px;--font-tx-size:12px;--font1: Algerian ; --text-shadow:darkblue;--font2: fantasy;--font3:Comic Sans MS;--font:monospaced;--ul-bg-color:yellow;--ul-color:black;--li-bg-color:yellow;--li-color:black;}" } function fn_gray() { sheet.innerHTML = ":root{--h1-bg-color: lightgrey;--h1-color:lightgrey !important;--font-h1-size:60px;--h1-shadow:blue;--h2-bg-color: lightgrey;--h2-color: gray;--font-h2-size:14px;--h2-shadow:blue;--h2-style:italic !important;--td-bg-color: white;--td-color: black;--h3-bg-color:lightgrey;--h3-color:gray;--td-border:1px solid lightgrey;--menubar-bg-color: lightgrey;--mainbar-color:black;--menubaroptions-bg-color: lightgrey;--menubaroptions-color:gray; --options-bg-ul-color:lightgrey;--options-ul-color:black;--options-ul-border:none;--options-bg-li-color:lightgrey;--options-color:gray;--font-lb-size:14px;--font-tx-size:12px;--font1: Algerian ; --text-shadow:darkblue;--font2: fantasy;--font3:Comic Sans MS;--font:monospaced;--ul-bg-color:yellow;--ul-color:black;--li-bg-color:yellow;--li-color:black;}" } document.body.appendChild(sheet); </script> |
Java Script Code: If you want to move Pages to Previous or Next. Add the following code. Options: Layout->Add a Gadget->HTML/JavaScript-> Add below code. |
| <input type="button" value="Previous" onclick="fn_prev()" /> <input type="button" value="Next" onclick="fn_next()" /> <script> if (i==undefined) {var i=0; } i_val=document.cookie.split("="); i=i_val[1]; //alert(i); var data = document.getElementById('PageList2'); var pagelist = data.getElementsByTagName('LI'); function fn_disp() { if (i >= pagelist.length ) {i=pagelist.length-1;} if (i<0) {i=0;} //alert("value"+i); aa=pagelist[i].innerHTML.split("\""); //alert(i+aa); window.location=aa[1]; document.cookie="i="+i; //alert("save"+i) } function fn_next() { i++;fn_disp();} function fn_prev() {--i; fn_disp();} </script> |
No comments:
Post a Comment