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