Among the many blog sites, one of the highlights of the blog garden is that you can design your own home page. You can design your own personal home page through your own preferences, highlighting your own uniqueness~ So how do we set it up? The general steps are as follows:
1. First, we click on the settings options of our blog management, as shown below:
2. Select a time zone and country (this does not affect subsequent design...), and choose a theme style you like in the blog skin.
3. Settings for the theme section of the personal home page
There is a "page custom CSS code" under the blog skin, here is our main battlefield, because the general framework of your personal homepage is implemented here, and the way to achieve it is to fill in the CSS code in the box below, Coordinate control through various attributes. This is mainly implemented by yourself, because everyone has different preferences and styles, but if you really can't write it, you can go to the Internet to search for other people's code, and then modify the properties. (below is my code)
1 #site_nav_under { 2 display: none; 3 } 4 .c_ad_block, .ad_text_commentbox { 5 display: none; 6 margin: 0; 7 padding: 0; 8 } 9 #ad_under_google { 10 height: 0; 11 overflow: hidden; 12 } 13 #ad_under_google a { 14 display: none; 15 } 16 #home { 17 margin: 0 auto; 18 width: 65%; 19 min-width: 950px; 20 background-color: #fff; 21 padding: 30px; 22 margin-top: 30px; 23 margin-bottom: 50px; 24 box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3); 25 } 26 #blogTitle { 27 height: 60px; 28 clear: both; 29 } 30 #navigator { 31 font-size: 13px; 32 border-bottom: 1px solid #ededed; 33 border-top: 1px solid #ededed; 34 height: 50px; 35 clear: both; 36 margin-top: 25px; 37 } 38 #blogTitle h2 { 39 font-weight: normal; 40 font-size: 18px; 41 font-size: 1.18571429rem; 42 line-height: 2.546153846; 43 color: #757575; 44 float: left; 45 } 46 47 body{ 48 background-image:url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1519917822425&di=588e6805714d43b991fb54c928fad76e&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F6%2F53bb63533c313.jpg"); 49 background-repeat:no-repeat; 50 background-size:100%; 51 background-attachment: fixed; 52 filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity: 0.7; opacity: 0.7; 53 }
The string of background-image:url in ps.body is the URL code of the image you choose, and you can change mine to the URL code of your favorite image~ Remember to check Disable Template Default CSS Oh~
4. Bulletin Board
First, apply for support for JS code (although I don't know what this is for...), and then enter the code you want. For those who don't, let me give a few suggestions. After adding <pre> in front, the words you enter after the line of <pre> will be displayed on your bulletin board~ (send some dry goods)
Hamster's:
1 <object type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&up_feetColor=D4C898&up_eyeColor=000567&up_wheelSpokeColor=DEDEDE&up_wheelColor=FFFFFF&up_waterColor=E0EFFF&up_earColor=b0c4de&up_wheelOuterColor=FF4D4D&up_snoutColor=F7F4E9&up_bgColor=F0E4E4&up_foodColor=cba920&up_wheelCenterColor=E4EB2F&up_tailColor=E6DEBE&" width="200" height="160"> 2 <param name="movie" value="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&up_feetColor=D4C898&up_eyeColor=000567&up_wheelSpokeColor=DEDEDE&up_wheelColor=FFFFFF&up_waterColor=E0EFFF&up_earColor=b0c4de&up_wheelOuterColor=FF4D4D&up_snoutColor=F7F4E9&up_bgColor=F0E4E4&up_foodColor=cba920&up_wheelCenterColor=E4EB2E&up_tailColor=E6DEBE&"> 3 <param name="AllowScriptAccess" value="always"> 4 <param name="wmode" value="opaque"></object> 5 <span style="color: #3E8BD6;font-size: 9pt;"> Please feed~ (click on the picture) </ span >
clock:
1 <object id="honehoneclock" width="200" height="100" align="middle" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"> 2 <param value="always" name="allowScriptAccess"> 3 <param value="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf" name="movie"> 4 <param value="high" name="quality"> 5 <param value="#ffffff" name="bgcolor"> 6 <param value="transparent" name="wmode"> 7 <embed width="200" height="100" align="middle" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowscriptaccess="always" name="honehoneclock" bgcolor="#ffffff" quality="high" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf" wmode="transparent"> 8 </object></pre></pre></pre></pre>
5. Header and Footer
This part of the content is on my own, and I don't have any good questions...
6. Statistics of visitor volume
There is a special webpage responsible for statistics. I recommend two here ( style 1 and style 2 ). After registering at the top, it will automatically generate html code, and then you can copy it over. As for the location, you can freely , the first page and the end of the page can be used, and the bulletin board can also be used~
That's about it~ I hope my blog can help you and let you design your favorite personal homepage~