Share a personal blog skin "compatible mobile side"

I've really started blogging for a year, and remember that the first thing I did before I started blogging was to customize the skin style, and I wrote a blog post, "Blogging garden Page Setup." Of course, from now on I look at that time I was such a dish, perhaps a year later to see now I will be the same idea (in fact, it is very good, to prove that their progress ). Why Custom skin styles? Of course, in order to write out of the blog to make people more reading, their own look comfortable. Many times the absence of a good skin style can also be an excuse for not blogging, "Why should we keep blogging?"

In fact, many times I am very lazy. I'm not going to be able to see it. Generally I will not move the original style. The impulse to write this blog is long overdue, because lazy has been dragged to the present. Now cold weekend lie in quilt inside really don't want to get up, take a mobile phone stroll blog Park. Unfortunately the reading experience is very bad ( I did not install the client ), and some can not even read. Really can't stand, today decided to write this article, everyone has time to make their own blog compatible mobile Bar. In fact, I think a lot of garden friends are not not, also just because lazy is not compatible ( minutes of things, for your readers.) ). The main purpose of this article is to launch everyone to use custom styles to be compatible with the mobile side, and to share some of their other customizations.

One, compatible mobile End (IMG Auto scroll bar)

Compatible with mobile, in fact, it is very simple, there are not many things to do. Develop your own blog in one step. NET version of the chapter (6, responsive layout and custom style) in the text I have analyzed, and today to analyze it again.

• Add a meta in the head

Students who have used Bootstrap know that the head tag must be added  < Span style= "color: #800000;" >meta name = "viewport" content = "Width=device-width, initial-scale=1" >   (), but our blog Park does not have this meta added by default. So, we can only add to it through JavaScript dynamics.

$ ("Head"). Prepend ("<namecontentinitial-scale =1 ' >");

• Add a mobile-side media to the CSS

/* when the screen width is less than 992px (assuming the mobile side) */  {/     *            The style defined here will only function when the screen is 992px and can be           defined here, the style that should be set on the mobile side.      */}

• Set a large or fixed-width container in a style to scroll left and right

The biggest problem on the mobile side is that the screen is too small, and some content is not fully displayed. We can let it roll around.

{    overflow: auto; /* overflow Content Auto-scrolling */     word-wrap: hyphenate;}

Direct violence to deny, any element as long as overflow all let automatic scrolling.

This is a simple two-step implementation of mobile compatibility, easy bar. So, comrades are here to be compatible with the mobile side. Here we go:

1. First in my background page http://i.cnblogs.com/Configure.aspx

2.javascript part of the code

$ ("head"). Prepend ("<meta name= ' viewport ' content= ' width=device-width, initial-scale=1 ' >");

3.CSS part of the code

/*Mobile Side*/@media (max-width:992px){. footer {margin-right:5px; }. Divyoulian, #footer{Margin-right:5px;Padding-bottom:5px; }#mymainContent{margin:8px; }#mainContent{Margin-right:5px;Margin-left:5px; }. Forflow{margin:0px; }/*#sideBar, #header {display:none; }*/#sideBar, #div_digg{position:Initial; }    * {Overflow:Auto;Word-wrap:hyphenate; }#sideBar Li{text-indent:Initial; }/*#cnblogs_post_body p, #cnblogs_post_body li {font-size:33px; }*/. Myadd_left{Display:None; }. Myadd_right{float:None;width:100%; }. Myadd_right Div{Line-height:50px; }. Myadd{margin:0px; }/*. Myadd_right div a {font-size:10px; }*/}

View Code

：

Ii. Historical commentary record the movement effect

：

In 1.http://i.cnblogs.com/preferences.aspx

Try to select the number of comments to display as many points.

2. Fix the area size of the latest comment and let its overflow content be hidden.

{    max-height: 400px;     Overflow: hidden;}

3. Dynamically change the scroll bar position with JavaScript.

//move a unit commentfunctionNextrectop () {varREC = $ ("#RecentCommentsBlock"); if(rec.length) {vartop =Rec.scrolltop (); Top++;        Rec.scrolltop (top); if(Top! =rec.scrolltop ()) Rec.scrolltop (0); }}//Mobile Reviewsfunctionmobilecomment () {varReccommenttime = 30;//time interval    varRecintervalid = SetInterval (function() {nextrectop ();    }, Reccommenttime); //when the mouse moves$ ("#RecentCommentsBlock"). Hover (function() {//Move inclearinterval (recintervalid); }, function() {//Move outRecintervalid = SetInterval (function() {nextrectop ();    }, Reccommenttime); });}

Iii. Comment Area 1. Show Avatar

A lot of people ask me how to come out of the head, in fact, you know that careful observation will find that the default has loaded the image, but did not show it. Take Dudu's blog comment as an example:

Then we are using JavaScript to dynamically assemble it.

2. Comment Area "Warm tips"

In fact, this is just a picture, hiding the background image when the focus of the textarea is taken.

1. Set the class style (background map)

{    background: url (' http://images2015.cnblogs.com/blog/208266/201510/ 208266-20151018182003319-279061587.png ') No-repeat;}

2.javascript Add Class

functionFocusoutcommentbody_bg () {$ ("#tbCommentBody"). Focusout (function() {ADDTBCOMMENTBODY_BG ();});//Add a comment area backgroundfunctionAddtbcommentbody_bg () {varTbcomment = $ ("#tbCommentBody"); if(!tbcomment.hasclass ("TBCOMMENTBODY_BG") {Tbcomment.addclass ("TBCOMMENTBODY_BG"); Tbcomment.focus (function() {REMOVETBCOMMENTBODY_BG ();    }); }}//Remove a comment area backgroundfunctionRemovetbcommentbody_bg () {!$ (". Tbcommentbody_bg"). Removeclass ("TBCOMMENTBODY_BG").); $("#tbCommentBody"). Unbind ("Focus");}

Four, label search

Over time, you can search for tags if we write too many posts that are inconvenient to find.

1. Hidden fields exist by reading all the labels Http://www.cnblogs.com/zhaopei/tag the page.

//Reading LabelsfunctionGettag () {$.ajax ({type:"Get", DataType:' HTML ', URL:"Http://www.cnblogs.com/zhaopei/tag", data: {}, Beforesend:function(XMLHttpRequest) {//triggered when an AJAX request starts. }, Complete:function(JQXHR, status, ResponseText) {//This event is triggered when the request completes}, Success:function(data) {//Set Width consistency$ (". Select_list_tag"). CSS ("width", $ (". Text_select_tag"). CSS ("width")); $(". Hidden_tag"). Val (""); varA = $ (data). Find ("#MyTag1_dtTagList TD a"); varspan = $ (data). Find ("#MyTag1_dtTagList TD Span.small");  for(vari = 0; i < a.length; i++) {                               $(". Hidden_tag"). Append (a[i].innerhtml + "&"); }            //YUNTAGF ();Get_list_tag (); }, Error:function(msg) {}});}

2. Auto-pass control added to HTML5

Usage (example):

<input list= "Pasta" ><datalist id= "Pasta" ><option>Bavette</option><option> Cannelloni</option> ..... </datalist>

We can also use the Bing site search: Http://cn.bing.com/search?q=js+site:cnblogs.com/zhaopei To change the last Zhaopei to your own blog ID.

There are some custom things here will not be analyzed, as long as the effect of their own to try to try naturally can slowly fix. such as: Page top recommended article three, automatically load reading directory, popup box and execute Code area box.

Here is a download of my style code.

Note:

1. I modified it on the basis of the following skin. If you want to use my style, first select this default skin.

2. Please do not try to quote the new Jqeruy in, or your blog will have your unexpected problems. (because there are jquery-based plugins in the blog Park).

(Of course, you can also share your custom style in the comments section.) ）

Share a personal blog skin "compatible mobile side"