Tuesday, February 2, 2016

Blogger customized CSS and HTML examples

This article shows the examples of customized CSS and HTML used by this blog.

1. "Older Posts" and "Newer Posts" pager

CSS:
 #blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 18px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}
a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}
#blog-pager .pages{border:none;background: none;}
Example:

2. Navigation bar

CSS:
#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a{padding:0;margin:0;line-height:1;font-family:'Capriola',sans-serif}#cssmenu:before,#cssmenu:after,#cssmenu > ul:before,#cssmenu > ul:after{content:'';display:table}#cssmenu:after,#cssmenu > ul:after{clear:both}#cssmenu{zoom:1;height:69px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhODRGIXGY8dX3UeAaVPr128kY-a7ujp9ls8E5yCN66_FJTXppBswuFwpoOf3TbOq_uPpcIibW9uqQbGb2qaKoJg6fYfg7usVs3ql9JjaXeFcpBSOk4zLgVd4a-PsU1tTu1dydOhnqNd0by/s1600/bottom-bg.png) repeat-x center bottom;border-radius:2px;width:auto}#cssmenu ul{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWA3SdKAjODuTKIrUU-FStxhDYEGtY1Af312SRq_r_NNe5MPjXgkIZVKM69Ou_ew10aQEmcqDi4vZCfAYA6-qqghVoeQshG5c8Q0D_rhM3cDfjDVztBZqO6ZhVStf-AdEMhlICcuIqPdOg/s1600/nav-bg.png) repeat-x 0 4px;height:69px}#cssmenu ul li{float:left;list-style:none}#cssmenu ul li a{display:block;height:37px;padding:22px 30px 0;margin:4px 2px 0;border-radius:2px 2px 0 0;text-decoration:none;font-size:15px;color:white;text-shadow:0 1px 1px rgba(0,0,0,0.75);font-weight:400;opacity:.9}#cssmenu ul li:first-child a{margin:4px 2px 0 0}#cssmenu ul li a:hover,#cssmenu ul li.active a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7B5gDnP7-pikaCprtTlxVja6SuyeU70dhuSBxtF-VhUvXh29QnKcICOiqN6TLTrrXUOJ6dQ5u_Qi2PKQdLJ1f9A6r9RaVYyD9f4t1YuAMxVswVK-uqR3JnRv6QEB6Iw8lSeyZ-FjKZ5i1/s1600/color.png) center bottom;display:block;height:37px;margin-top:0;padding-top:26px;color:#9b4106;text-shadow:0 1px 1px rgba(255,255,255,0.35);opacity:1}
HTML:
<!-- customize your menus Links -->
<div id="cssmenu">
<ul>
<li class="last"><a href="http://www.openkb.info"><span>Home</span></a></li>
<li class="last"><a href="http://www.openkb.info/search/label/Hadoop"><span>Hadoop</span></a></li>
<li class="last"><a href="http://www.openkb.info/search/label/MapR"><span>MapR</span></a></li>
<li class="last"><a href="http://www.openkb.info/search/label/drill"><span>Apache Drill</span></a></li>
<li class="last"><a href="http://www.openkb.info/search/label/Spark"><span>Apache Spark</span></a></li>
<li class="last"><a href="http://www.openkb.info/search/label/Impala"><span>Impala</span></a></li>
<li class="last"><a href="http://www.openkb.info/search/label/JAVA"><span>JAVA</span></a></li>
<li class="last"><a href="http://www.openkb.info/search/label/OS"><span>OS</span></a></li>
<li class="last"><a href="http://www.openkb.info/search/label/cheat%20sheet"><span>cheat sheet</span></a></li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul></div>
Example:

3. Copyright notice

HTML:
<div style='text-align: center;'>© 2016 <a href="http://www.openkb.info">OPENKB.INFO</a> ALL RIGHTS RESERVED.</div>
Example:

4. Search inside OpenKB.info

HTML:
<style>
#searchbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIqcwtSlBC6D_vwikse2NGhiZKKhiKOQQXTKOoaiQRn5EPGb8-63N8OGYWXMgZ7lDobdl7uzgCRksASMz__K9g1K6XRyh0K5CUX1rwJj9KGdgoeWq9aYbTRZBhtD6BCeuu-7p_Gni6QHWC/s1600/search-box1.png) no-repeat;
    width: 250px;
    height: 65px;
}

input:focus::-webkit-input-placeholder {
color: transparent;
}

input:focus:-moz-placeholder {
color: transparent;
}

input:focus::-moz-placeholder {
color: transparent;
}

#searchbox input {
    outline: none;
}

#searchbox input[type="text"] {
    background: transparent;
    padding: 5px 0px 5px 20px;
    margin: 10px 15px 0px 0px;
    border-width: 0px;
    font-family: "Arial";
    font-size: 12px;
    color: #595959;
    width: 65%;
    font-weight: bold;
    display: inline-table;
    vertical-align: top;
}

#button-submit {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3x79CRJVinQ4A299aPLlw4vjTWnEYYQxt4u_KQS7bTJN1WbA0O_QZoMgKYubjQ8Owd0_q2znk_2j_FmKtZ0DaCNcU-0i8fUaw18PZnlLQAYeBc-qhzclEIxJZbMgxBsyNLnL_7qwdk3Am/s1600/magnifier.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    margin-top: 10px;
    width: 19px;
    height: 25px;
}

#button-submit:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOJrVukiAgIefxQSSAYwHei_X5T_cAIbmSDayZSJe0FqIYi_XvERZWzmMsmLRw6rRfSXkXmRqcVsjgc7xYCoPID51tJOoFsdthtbhgimeDU7e1lR8ClCFmjm-zGEhzCBPnKSrFdu8LvC3I/s1600/magnifier-hover.png) no-repeat;
}

#button-submit:active {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOJrVukiAgIefxQSSAYwHei_X5T_cAIbmSDayZSJe0FqIYi_XvERZWzmMsmLRw6rRfSXkXmRqcVsjgc7xYCoPID51tJOoFsdthtbhgimeDU7e1lR8ClCFmjm-zGEhzCBPnKSrFdu8LvC3I/s1600/magnifier-hover.png) no-repeat;
    outline: none;
}

#button-submit::-moz-focus-inner {
    border: 0;
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
    <input class="textarea" name="q" type="text" size="15" placeholder="Search here..." />
    <input id="button-submit" type="submit" value="" />
</form>
Example:

5. World Clocks

HTML:
San Jose,US :<iframe src="http://free.timeanddate.com/clock/i51uxb20/n283/fn7/fc00f/tt0/tw1/tm3/td2/th1/ta1" frameborder="0" width="234" height="21"></iframe><br />
Beijing,China:<iframe src="http://free.timeanddate.com/clock/i51uxb20/n33/fn7/fc00f/tt0/tw1/tm3/td2/th1/ta1" frameborder="0" width="235" height="21"></iframe>
Example:

==

No comments:

Post a Comment