博客园添加页首导航菜单

123

123

1111111111111111

123123

45678

<script>
addNag("GitHUB","http://www.cnblogs.com/",3);
addNag("友情链接","http://www.cnblogs.com/",3);

function addNag(linkName,linkHref,linkLocation){
                //获得导航DOM对象
                var _navigator = document.getElementsByTagName("ul")[0];
                //创建导航无序列表中的li
                var _link = document.createElement("li");
                var _a = document.createElement("a");
                _a.class="menu";
                _a.href= linkHref;
                var _text = document.createTextNode(linkName);
                _a.appendChild(_text);
                _link.appendChild(_a);
                //添加至指定的位置
                var _lis = _navigator.getElementsByTagName("li");
                if(linkLocation > _lis.length && linkLocation > 0){
                    _navigator.appendChild(_link);
                }else{
                    _navigator.insertBefore(_link,_lis[linkLocation-1]);
                }
            }
</script>

也叫

<script type="text/javascript">
var head=$("#header");
head.prepend('<canvas id="bubble-canvas" style="position: absolute; left: 0px; top: 0px;"></canvas>');
var _width, _height, largeHeader, _canvas, _ctx, _circles, _target, animateHeader = true;
function initHeader() {
    largeHeader = document.getElementById('header');
    _width = largeHeader.offsetWidth;
    _height = largeHeader.offsetHeight;
    _target = {x: 0, y: _height};
    _canvas = document.getElementById('bubble-canvas');
    _canvas.width = _width;
    _canvas.height = _height;
    _ctx = _canvas.getContext('2d');
    _circles = [];
    for(var x = 0; x < _width*0.5; x++) {
        var c = new Circle();
        _circles.push(c);
    }
    animate();
};
function addListeners() {
    window.addEventListener('scroll', scrollCheck);
    window.addEventListener('resize', resize);
};
function scrollCheck() {
    if(document.body.scrollTop > _height) animateHeader = false;
    else animateHeader = true;
};
function resize() {
    _width = largeHeader.offsetWidth;
    _height = largeHeader.offsetHeight;
    _canvas.width = _width;
    _canvas.height = _height;
};
function animate() {
    if(animateHeader) {
        _ctx.clearRect(0,0,_width,_height);
        for(var i in _circles) {
            _circles[i].draw();
        }
    };
    requestAnimationFrame(animate);
};
function Circle() {
    var _this = this;
    (function() {
        _this.pos = {};
        init();
    })();
    function init() {
        _this.pos.x = Math.random()*_width;
        _this.pos.y = _height+Math.random()*100;
        _this.alpha = 0.1+Math.random()*0.3;
        _this.scale = 0.1+Math.random()*0.3;
        _this.velocity = Math.random();
    };
    this.draw = function() {
        if(_this.alpha <= 0) {
            init();
        };
        _this.pos.y -= _this.velocity;
        _this.alpha -= 0.0005;
        _ctx.beginPath();
        _ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * Math.PI, false);
        _ctx.fillStyle = 'rgba(255,255,255,'+ _this.alpha+')';
        _ctx.fill();
    };
};
addListeners();
initHeader();
function breakSameDayArticles(article_list){
    var _i=0;
    while(_i<article_list.length) {
        var dayTitle=article_list[_i].getElementsByClassName('dayTitle')[0];
        var postTitle=article_list[_i].getElementsByClassName('postTitle');
        var postCon=article_list[_i].getElementsByClassName('postCon');
        var postDesc=article_list[_i].getElementsByClassName('postDesc');
        if(postTitle.length>1) {

            for (var _j = 0; _j < postTitle.length; _j++) {
                var day=document.createElement('div');
                day.className='day';
                day.appendChild(dayTitle.cloneNode(true));
                day.appendChild(postTitle[_j].cloneNode(true));
                day.appendChild(postCon[_j].cloneNode(true));
                day.appendChild(postDesc[_j].cloneNode(true));
                article_list[_i].parentNode.insertBefore(day,article_list[_i]);
                _i++;
            }
            article_list[_i].parentNode.removeChild(article_list[_i]);
            _i--;
        }
        _i++;
    }
};
function parseToDOM(str){
   var div = document.createElement("div");
   if(typeof str == "string")
       div.innerHTML = str;
   return div.childNodes[0];
};
function beautyArticles(article_list){
    for (var i = 0; i <article_list.length; i++) {
        var desc_img=article_list[i].getElementsByClassName('desc_img')[0];
        if(desc_img != undefined)
        {
            article_list[i].className+=' have-img';
            var url=desc_img.src;
            var title=article_list[i].getElementsByClassName('postTitle2');
            desc_img.parentNode.removeChild(desc_img);
            article_list[i].appendChild(parseToDOM('<a href="' + title[0].href + '" class="post-link"></a>'));
            article_list[i].appendChild(parseToDOM('<div class="img-layer"></div>'));
            article_list[i].getElementsByClassName('img-layer')[0].style.backgroundImage= 'url('+url+')';
        }
    }
};
function initBeauty(){
    var article_list=document.getElementsByClassName('day');
    breakSameDayArticles(article_list);
    beautyArticles(article_list);
};
if(window.location.pathname.search(//p//ig)==-1)
{
    initBeauty();
}
</script>
/*
* CodingLife模板优化
* author stumpx
*/

/*手机外壳,参考Framework7官网 */
@media (min-430px) {
	.phone {
	position:relative;
	background:#111;
	border-radius:55px;
	box-shadow:0px 0px 0px 2px #aaa;
	320px;
	height:568px;
	padding:100px 25px 105px;
	display:inline-block;
}
.phone:before {
	content:'';
	60px;
	height:10px;
	border-radius:10px;
	position:absolute;
	left:50%;
	margin-left:-30px;
	background:#333;
	top:50px;
}
.phone:after {
	content:'';
	position:absolute;
	60px;
	height:60px;
	left:50%;
	margin-left:-30px;
	bottom:20px;
	border-radius:100%;
	box-sizing:border-box;
	border:5px solid #333;
}
.phone img {
	100%
}
}@media (min-460px) {
	.phone.phone-android {
	border-radius:20px;
	360px;
	padding:60px 20px;
	height:640px;
	margin-top:9px;
}
.phone.phone-android:before {
	14px;
	height:14px;
	border-radius:50%;
	position:absolute;
	left:50%;
	margin-left:-7px;
	background:#666;
	top:25px;
}
.phone.phone-android:after {
	content:'';
	8px;
	height:8px;
	border-radius:50%;
	position:absolute;
	left:50px;
	background:#444;
	top:30px;
	margin-left:0;
}
#sidebar_toptags {
	display:block;
}
#sidebar_toptags li {
	display:none;
}
#sidebar_toptags li:hover {
	background-color:transparent;
}
#sidebar_toptags li:hover a {
	color:#777;
}
#sidebar_toptags li:last-child {
	display:block;
}
#sidebar_recentcomments {
	display:none;
}
#blog-calendar {
	display:none !important;
}
#sidebar_topcommentedposts {
	display:none;
}
#blog_nav_sitehome {
	display:none;
}
#blog_nav_rss {
	display:none !important;
}
#sidebar_shortcut {
	display:none;
}
}/*/手机外壳*/

.catListTitle {
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	background-color:#f6f8fa;
	border:none;
	border-bottom:1px solid #eee;
	font-size:16px;
	color:#555;
}
/*大屏*/

@media (min-769px) {
	#blog_post_info {
	border:1px dashed #dedede;
}
#green_channel {
	display:inline-block;
	border:none;
}
#author_profile {
	display:none;
}
.cnblogs_code {
	border:none;
	border-left:5px solid #dedede;
	padding-left:10px;
}
/*翻页*/
    #nav_next_page {
	/*text-align:center;
	*/
}
.pager {
	font-size:44px;
	margin:10px 0;
	text-align:center;
	color:#999;
	line-height:30px;
}
.pager a {
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
	border:none !important;
	color:#ffffff;
	margin:0 1px;
	padding:7px 10px;
	text-decoration:none;
	height:19px;
	line-height:19px;
	font-size:12px;
	background-color:#ea6f5a;
}
.pager a:hover {
	border:none !important;
	color:#ffffff !important;
	margin:0 1px !important;
	padding:5px 10px !important;
	text-decoration:none;
	height:19px !important;
	line-height:19px !important;
	font-size:12px !important;
	background-color:#ea6f5a !important;
}
#nav_next_page a {
	background-color:#ea6f5a;
	height:33px;
	line-height:33px;
	font-size:14px;
}
.topicListFooter {
	height:89px;
}
.topicListFooter:empty {
	display:none;
}
#nav_next_page a:hover {
	background-color:#ea6f5a;
}
/*/翻页*/
    #navigator {
	min-1200px;
	/*border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	*/
        background-color:#24292e;
	border:none;
	box-shadow:0 1px 3px #bebebe;
}
#blog-calendar .CalTitle td,#blog-calendar .CalTitle td a {
	text-align:center;
	line-height:30px;
	background-color:transparent;
	color:black;
}
#blogCalendar:not(.CalTitle) a {
	display:block;
	background:#ea6f5a;
	color:white;
	border-left:1px solid #f0eef5;
	calc(100% - 1px);
}
div.commentform textarea {
	100%;
	calc(100% - 15px);
	height:80px;
	padding:5px;
}
.commentbox_title {
	line-height:22px;
}
div.commentform input.author {
	background-color:transparent;
	border:none;
	border-bottom:1px solid #dedede;
	margin-bottom:5px;
	padding-bottom:2px;
	200px;
}
#under_post_news {
	auto;
}
#comment_nav {
	padding:0 20px;
}
#sidebar_search_box input {
	border-radius:0;
	box-shadow:none;
}
#sidebar_search_box input.input_my_zzk {
	border-top-left-radius:3px;
	border-bottom-left-radius:3px;
}
#sidebar_search_box input.btn_my_zzk {
	background:#ea6f5a;
	margin-left:-6px;
	border-top-right-radius:3px;
	border-bottom-right-radius:3px;
}
#blog-comments-placeholder:empty {
	display:none;
}
#taglist_main {
	margin-top:0;
	background:white;
	padding:20px;
	border-radius:5px;
	border:none;
	box-shadow:0 0 5px #dedede;
}
#taglist_main:hover {
	box-shadow:0 0 5px #bebebe;
}
#taglist_title {
	font-size:18px;
}
#taglist_title_wrap {
	text-align:center;
	font-size:18px;
	line-height:35px;
}
#MyTag1_dtTagList {
	100%;
}
.catListTag ul li a:hover {
	color:#fff;
}
#under_post_news,#under_post_kb {
	margin-top:20px;
}
#mainContent .day:first-of-type {
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	margin-bottom:20px;
}
#mainContent .day:nth-first-child(2) {
	border-top-left-radius:5px;
	border-top-right-radius:5px;
}
#mainContent .day:nth-first-child(1) {
	border-top-left-radius:5px;
	border-top-right-radius:5px;
}
#mainContent .day:nth-last-child(2) {
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
}
#mainContent .day:nth-last-child(1) {
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
}
#mainContent .day {
	border-radius:5px;
	margin-bottom:20px;
	border:none;
	box-shadow:0 0 5px #dedede;
}
#mainContent .day:hover {
	border:none;
	box-shadow:0 0 5px #00f;
}
.newsItem .catListTitle {
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	background-color:#f6f8fa;
	border:none;
	border-bottom:1px solid #eee;
	font-size:16px;
	color:#555;
}
.newsItem #profile_block {
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	border:none;
	font-size:14px;
}
.newsItem #profile_block:hover {
	border-color:#dedede;
}
.newsItem #p_b_follow {
	text-align:center;
}
.newsItem #p_b_follow a {
	border:1px solid #ea6f5a;
	border-radius:3px;
	padding:5px 15px;
}
#profile_block a {
	font-size:14px;
}
#profile_block a:first-child {
	color:#ea6f5a;
	font-size:16px;
}
.sidebar-block {
	border-radius:5px;
	overflow:hidden;
	box-shadow:0 0 5px #dedede;
}
.sidebar-block:hover {
	box-shadow:0 0 5px #00f;
}
.catListView,.catListFeedback {
	margin-top:0;
}
.sidebar-block ul {
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	border:none;
}
.sidebar-block h3 {
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	background-color:#f6f8fa;
	border:none;
	border-bottom:1px solid #eee;
	font-size:16px;
	color:#555;
}
.div_my_zzk {
	border:none !important;
}
#widget_my_google {
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
}
#topics,#comment_form_container,#under_post_news,#under_post_kb {
	border-radius:5px;
	border:none;
	box-shadow:0 0 5px #dedede;
}
#topics:hover,#comment_form_container:hover,#under_post_news:hover,#under_post_kb:hover {
	border-radius:5px;
	border:none;
	box-shadow:0 0 5px #00f;
}
#myposts .PostList {
	border-radius:5px;
}
#sideBar .newsItem {
	box-shadow:0 0 5px #dedede;
	border-radius:5px;
	overflow:hidden;
}
#blog-news {
	margin-bottom:0;
}
#sideBar .newsItem:hover {
	box-shadow:0 0 5px #00f;
}
.sidebar-block ul li:last-child {
	border-bottom:none;
}
.postSeparator {
	border-radius:5px;
	border-top:1px dashed #bebebe;
}
.day:hover .postSeparator {
	border-top:1px dashed #ea6f5a !important;
}
.entrylistItem {
	border-radius:5px;
	border:none;
	box-shadow:0 0 5px #dedede;
}
.entrylistItem:hover {
	border:none;
}
.entrylistTitle,.myposts_title {
	padding:0 20px;
}
.day .postTitle:hover a {
	color:#ea6f5a;
}
#comment_form [id^="cnblogs_c"],#comment_form [id^="ad_t"] {
	display:none !important;
}
body {
	background-size:auto 197px;
	background:none !important;
	background:#fafafa !important;
}
#blogTitle {
	100%;
	background-size:800px;
	background-position:0px 20px;
	height:197px;
	background:none;
	display:none !important;
}
#navList li a:link {
	text-shadow:none;
}
#navList li:hover a {
	color:#24292e;
	text-shadow:none;
}
.dayTitle {
	background-color:#ea6f5a;
	border-radius:3px;
	display:none;
}
.day .postTitle {
	font-size:20px;
}
.sidebar-block ul li {
	padding:12px 10px 12px 20px;
	border-bottom:1px solid #eee;
}
}/*/大屏*/

/*小屏*/

@media (max-768px) {
	.dayTitle {
	background-color:#ea6f5a;
	display:none;
}
#topics {
	border-left:none;
	border-right:none;
}
#blog-comments-placeholder {
	border-left:none;
	border-right:none;
}
#blog-comments-placeholder:empty {
	display:none;
}
#navigator {
	min-auto;
	background:#24292e;
	border:none;
}
body {
	background-size:auto 197px;
	background:none !important;
}
#blogTitle {
	100%;
	background-size:800px;
	background-position:0px 20px;
	height:197px;
	background:none;
	display:none !important;
}
#blogTitle h1 {
	300px;
	left:0;
	top:33px;
}
#blogTitle h2 {
	display:none;
}
#navList {
	100%;
}
#navList li:hover a {
	color:#24292e;
	text-shadow:none;
}
#mainContent .day {
	border-left:none;
	border-right:none;
}
#mainContent .day:hover {
	border-color:#ea6f5a;
}
#mainContent .day:hover .postSeparator {
	border-top:1px dashed #ea6f5a;
	margin:20px 0;
	clear:both;
}
#mainContent .topicListFooter {
	height:50px;
	line-height:0;
	font-size:16px;
	margin:20px 0;
	padding:0 20px;
}
#mainContent .topicListFooter:empty {
	display:none;
}
#sideBar {
	100%;
	margin-left:0;
}
#blog-calendar {
	display:none !important;
	padding:10px 15px;
	border:1px solid #dedede;
	border-left:none;
	border-right:none;
	background-color:white;
}
#profile_block,#widget_my_zzk,#widget_my_google,.div_my_zzk {
	border-left:none;
	border-right:none;
}
#blog-calendar .CalTitle td,#blog-calendar .CalTitle td a {
	text-align:center;
	line-height:30px;
	background-color:white;
	color:black;
}
#sidebar_search_box input {
	border-radius:0;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	box-shadow:none;
}
#sidebar_search_box input[type=text] {
	188px !important;
	calc(100% - 115px) !important;
	border-radius:0;
}
#sideBar .sidebar-block ul {
	border:none;
}
#sideBar .sidebar-block ul li {
	padding:10px 20px;
}
#comment_form_container {
	border-left:none;
	border-right:none;
}
div.commentform input.author,div.commentform input.email,div.commentform input.url {
	244px;
	calc(100% - 35px);
}
div.commentform textarea.comment_textarea {
	100% !important;
	max-100%;
}
#under_post_news {
	100%;
	height:auto;
	padding:15px 0;
	border-left:none;
	border-right:none;
	margin-top:20px;
}
#cnblogs_c1 {
	/*padding:0;
	*/
}
#cnblogs_c1 a,#cnblogs_c1 img,#cnblogs_c2 a,#cnblogs_c2 img {
	display:block;
	max-100% !important;
	100% !important;
	height:auto !important;
}
#under_post_kb {
	border-left:none;
	border-right:none;
}
#ad_t2 {
	margin-top:20px;
	padding:0 20px;
}
.c_ad_block {
	margin-top:15px;
	padding:0 15px;
}
#commentbox_opt .comment_btn {
	50%;
	border:none;
	display:inline-block;
	line-height:30px;
	text-align:center;
}
#commentbox_opt a {
	45%;
	display:inline-block;
	padding-left:0;
	text-align:center;
}
#comment_nav {
	padding:5px 20px;
}
#green_channel {
	100% !important;
	padding-left:2px;
}
#green_channel a {
	margin-right:4px;
}
#green_channel a:last-child {
	margin-right:0;
}
#div_digg {
	margin-right:0;
	100%;
}
#div_digg .buryit {
	margin-left:0;
	margin-right:20px;
}
#div_digg .diggit {
	margin-left:0;
	margin-left:20px;
}
.sidebar-block h3 {
	font-size:16px;
	background-color:#f6f8fa;
	border:#bebebe;
	color:#333;
}
#cnblogs_post_body img {
	max-100% !important;
}
.day .postTitle {
	font-size:18px;
	line-height:31px;
}
.day .postTitle:hover a {
	color:#ea6f5a;
}
#topics .postTitle {
	font-size:18px;
	margin:0 -20px 20px;
	padding:0 20px;
	line-height:30px;
}
#myposts {
	margin-left:0;
}
#myposts .myposts_title {
	font-size:20px !important;
	padding:0 20px;
}
#myposts .Pager:only-child {
	display:none;
}
.pager {
	font-size:44px;
	margin:10px 0;
	text-align:center;
	color:#333;
	line-height:30px;
}
.pager a {
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
	border:1px solid #ea6f5a;
	color:#ffffff;
	margin:0 1px;
	padding:7px 10px;
	text-decoration:none;
	height:19px;
	line-height:19px;
	font-size:12px;
	background-color:#ea6f5a;
}
.pager a:hover {
	border:1px solid #ea6f5a !important;
	color:#ffffff !important;
	margin:0 1px !important;
	padding:8px 10px !important;
	text-decoration:none;
	height:12px !important;
	line-height:12px !important;
	font-size:12px !important;
	background-color:#ea6f5a !important;
}
#nav_next_page a {
	background-color:#ea6f5a;
	height:37px;
	line-height:37px;
	font-size:14px;
}
#nav_next_page a:hover {
	background-color:#ea6f5a;
}
#myposts .pager {
	margin-left:10px;
}
#myposts .PostList {
	border-left:none;
	border-right:none;
}
#kb_block {
	padding:0;
}
.c_ad_block a {
	border-bottom:1px dashed #dedede;
}
#mainContent {
	margin-bottom:20px;
}
#myposts .pager:empty {
	height:0;
}
#blogCalendar:not(.CalTitle) a {
	display:block;
	background:#ea6f5a;
	color:white;
	border-left:1px solid white;
	calc(100% - 1px);
}
#post_next_prev a.p_n_p_prefix {
	display:none;
}
#taglist_main {
	margin-top:20px;
	background:white;
}
#taglist_title_wrap {
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	line-height:45px;
	background:#169fe6;
	color:white;
	font-size:16px;
}
#taglist td {
	padding:5px;
	font-size:10px;
	line-height:20px;
}
#taglist {
	padding:0 10px 10px;
}
#MyTag1_dtTagList {
	100%;
}
.catListTag ul li a:hover {
	color:#fff;
}
#footer {
	padding:5px 0 20px;
	margin:0;
}
.newsItem,#under_post_news,#under_post_kb,#sidebar_search,#sidebar_recentcomments,/*#sidebar_topviewedposts,*/
    #sidebar_topcommentedposts,#sidebar_categories,#sidebar_topdiggedposts,#comment_form [id^="cnblogs_c"],#sidebar_toptags {
	display:none;
}
#sidebar_topviewedposts {
	display:block !important;
}
}@media (min-470px) and (max-1200px) {
	#div_digg {
	margin-right:-20px;
	150px;
}
}/*/小屏*/



/*/自定义优化*/
#sidebar_search .div_my_zzk {
	height:49px;
}
.day .postDesc {
	display:none;
}
.postTitle a:link {
	color:#131315;
}
.comment_textarea {
	855px;
	height:188px;
}
#under_post_kb {
	display:none;
}
#under_post_news {
	display:none;
}
#HistoryToday,.recomm-block {
	display:none;
}
#post_next_prev {
	display:none;
}
#topics .postDesc {
	display:none;
}
.postBody #blog_post_info_block{
display:none;
}
#comment_form #comment_form_container{
display:none;
}
#comment_form #ad_t2{
display:none;
}
原文地址:https://www.cnblogs.com/csnd/p/13495777.html