【原】为选择Skin 为 KJC 的同仁快马加鞭，美化您的博客——提高访问量，附送一个签名^_^——可以说是立竿见影【有代码】

再次声明：本文只针对选择Skin 为 KJC 的同仁有效，如果你不是选择 KJC，就请不要参考了。

各位博客园的博友，大家好，做任何事情不能做到专业，但是务必做到完美。 最近我访问很多博客园内的很多博客，发觉很少有人在排版上下功夫，都是选择默认的排版，很少下功夫修改，这样无形中减少了博客的访问量。

开始我也是选择了很多个模板，但感觉大多数都比较花哨，最终挑选了KJC，我选择KJC的目的是因为KJC的布局很好，也不失专业风范。

起初我做了修改页头和页尾的测试，感觉无论如何配置，都找不到最佳效果。为此我把心思都放在了“公告”上。我测试了“公告”的长度【其实也可以看源文件中的CSS】，经过测试，我个人认为长度为168px为最佳效果。

知道长度后，接下来就是如何在狭小的空间内安排内容了。

我的方案是：

1. 放些自己认为是对.NET程序员【以我的观察，我们这边大多数都是做.NET技术的】比较有帮助的书【利用网上常见的效果显示推荐的书本，见边导航条】；

2. 放些自己推荐的文章，不管是自己的还是别人的，只要是好的，就可以放，目前我放了4个我自己的文章；

3. 其他我就放写图片来配色；

4. 还有一个小技巧，先看看下面一行CSS：

border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #DDDDDD;

上面一行CSS的目的是为了在每一个栏位下画上一条灰色的线条来区分个个板块。

好了，就写到这了，其实还有好多小技巧，具体可参考如下代码，目前你看到的代码就是我右边导航条的代码，不知道效果是否还可以，

<div style="text-align: center; width: 168px;">
        <!-- 舍那大佛 开始 -->
        <div style="border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #DDDDDD;
            text-align: center;">
            <img src="http://www.cnblogs.com/images/cnblogs_com/OceanChen/172889/o_snBuddha.png"
                alt="每天进步一点点！昔日寒山问拾得曰：世间谤我、欺我、辱我、笑我、轻我、贱我、恶我、骗我、如何处治乎？ 　　拾得云：只是忍他、让他、由他、避他、耐他、敬他、不要理他、再待几年你且看他。舍那大佛【SheNa Great Buddha】" />
        </div>
        <!-- 舍那大佛 结束 -->
        <!-- MSN联系 开始 -->
        <div style="font-size: 9px; text-align: center;">
            msn:muhan2008@hotmail.com
        </div>
        <!-- MSN联系 结束 -->
        <!-- Google 搜索引擎 开始 -->
        <div style="border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #DDDDDD;">

            <script type="text/javascript"><!--
                google_ad_client = "pub-2842587781886262";
                google_ad_format = "configurable_sdo";
                google_link_target = 1;
                google_color_bg = "ffffff";
                google_color_link = "000000";
                google_color_text = "000000";
                google_encoding = "GB2312";
                google_ad_channel = "7922828062";
                google_box_len = 15;
                google_logo_pos = "above";
                google_rs_pos = "below";
                google_ad_height = 90;
                google_ad_width = 170;
//-->
            </script>

            <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_sdo.js">
            </script>

        </div>
        <!-- Google 搜索引擎 结束 -->
        <!-- 好书推荐 开始 -->
        <div>
            <h3 style="text-align: left;">
                好书推荐</h3>

            <script language="javascript" type="text/javascript">
                var widths = 160;
                var heights = 210;
                var counts = 6;
                img1 = new Image(); img1.src = 'http://www.cnblogs.com/images/cnblogs_com/OceanChen/172889/o_Design-Guidelines.png';
                img2 = new Image(); img2.src = 'http://www.cnblogs.com/images/cnblogs_com/OceanChen/172889/o_ajaxinaction.jpg';
                img3 = new Image(); img3.src = 'http://www.cnblogs.com/images/cnblogs_com/OceanChen/172889/o_linqbook.jpg';
                img4 = new Image(); img4.src = 'http://www.cnblogs.com/images/cnblogs_com/OceanChen/172889/o_scotthabook.jpg';
                img5 = new Image(); img5.src = 'http://www.cnblogs.com/images/cnblogs_com/OceanChen/172889/o_csharp3book.png';
                img6 = new Image(); img6.src = 'http://www.cnblogs.com/images/cnblogs_com/OceanChen/172889/o_bookCLR_.gif';
                url1 = new Image(); url1.src = 'http://www.amazon.com/Framework-Design-Guidelines-Conventions-Development/dp/0321246756';
                url2 = new Image(); url2.src = 'http://www.amazon.com/gp/product/1933988142/104-9219624-7383145?ie=UTF8&tag=scoblo04-20&linkCode=xm2&camp=1789&creativeASIN=1933988142';
                url3 = new Image(); url3.src = 'http://www.amazon.com/gp/product/1933988169?ie=UTF8&tag=scoblo04-20&linkCode=xm2&camp=1789&creativeASIN=1933988169';
                url4 = new Image(); url4.src = 'http://www.amazon.com/gp/product/0470187573/104-4617720-5654313?ie=UTF8&tag=scoblo04-20&linkCode=xm2&camp=1789&creativeASIN=0470187573';
                url5 = new Image(); url5.src = 'http://www.amazon.com/gp/product/0596527578/002-5242737-1614454?ie=UTF8&tag=scoblo04-20&linkCode=xm2&camp=1789&creativeASIN=0596527578';
                url6 = new Image(); url6.src = 'http://www.amazon.com/CLR-via-Second-Pro-Developer/dp/0735621632/ref=pd_sim_b_25';
                var nn = 1;
                var key = 0;
                function change_img() {
                    if (key == 0) { key = 1; }
                    else if (document.all)
                    { document.getElementById("pic").filters[0].Apply(); document.getElementById("pic").filters[0].Play(duration = 2); }
                    eval('document.getElementById("pic").src=img' + nn + '.src');
                    eval('document.getElementById("url").href=url' + nn + '.src');
                    for (var i = 1; i <= counts; i++) { document.getElementById("xxjdjj" + i).className = 'axx'; }
                    document.getElementById("xxjdjj" + nn).className = 'bxx';
                    nn++; if (nn > counts) { nn = 1; }
                    tt = setTimeout('change_img()', 4000);
                }
                function changeimg(n) { nn = n; window.clearInterval(tt); change_img(); }
                document.write('<style>');
                document.write('.axx{padding:1px 7px;border-left:#cccccc 1px solid;}');
                document.write('a.axx:link,a.axx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#666;}');
                document.write('a.axx:active,a.axx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#999;}');
                document.write('.bxx{padding:1px 7px;border-left:#cccccc 1px solid;}');
                document.write('a.bxx:link,a.bxx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');
                document.write('a.bxx:active,a.bxx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');
                document.write('</style>');
                document.write('<div style="width:' + widths + 'px;height:' + heights + 'px;overflow:hidden;text-overflow:clip;">');
                document.write('<div><a id="url"><img id="pic" style="border:0px;filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward)" width=' + widths + ' height=' + heights + ' /></a></div>');
                document.write('<div style="filter:alpha(style=1,opacity=10,finishOpacity=80);background: #888888;width:100%-2px;text-align:right;top:-12px;position:relative;margin:1px;height:12px;padding:0px;margin:0px;border:0px;">');
                for (var i = 1; i < counts + 1; i++) { document.write('<a href="javascript:changeimg(' + i + ');" id="xxjdjj' + i + '" class="axx" target="_self">' + i + '</a>'); }
                document.write('</div></div>');
                change_img();
            </script>

        </div>
        <!-- 好书推荐 结束 -->
        <!-- Google 图片广告 开始 -->
        <div>

            <script type="text/javascript"><!--
                google_ad_client = "pub-2842587781886262";
                /* 160x600, 创建于 09-2-9 */
                google_ad_slot = "9325621257";
                google_ad_width = 160;
                google_ad_height = 600;
//-->
            </script>

            <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
            </script>

        </div>
        <!--  Google 图片广告 结束 -->
        <!-- 海纳百川 开始 -->
        <div style="text-align: center; border-bottom-style: solid; border-bottom-width: 1px;
            border-bottom-color: #DDDDDD;">
            <img src="http://www.cnblogs.com/images/cnblogs_com/OceanChen/172889/o_hnbc.png"
                alt="" />
        </div>
        <!-- 海纳百川 结束 -->
        <!-- 博主推荐 开始 -->
        <div style="border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #DDDDDD;
            text-align: left;">
            <h3 style="text-align: left;">
                推荐文章：</h3>
            <ul>
                <li><a href="http://www.cnblogs.com/OceanChen/archive/2009/02/04/1384162.html">【转载】徐小平：不做人生规划，你离挨饿只有三天
                    —— 靠自己的劳动赢得生存就是成功【强烈推荐】</a></li>
                <li style="color: Green;"><a href="http://www.cnblogs.com/OceanChen/archive/2009/02/07/1386054.html">
                    【原】谈谈我们自以为是的软件技术和坏习惯【就最近开博一个月来的个人看法】</a></li>
                <li style="color: Green;"><a href="http://www.cnblogs.com/OceanChen/archive/2009/02/03/1383333.html">
                    【原】在线订餐系统，可商业化！订单系统共享啦！！应用技术： AJAX, LINQ, MASTERPAGE, ASP.NET</a></li>
                <li style="color: Green;"><a href="http://www.cnblogs.com/OceanChen/archive/2009/02/04/1383794.html">
                    【原】基于文件驱动的网站开发，易于维护，且使用简单，所见即所得！ </a></li>
            </ul>
        </div>
        <!-- 博主推荐 结束 -->
        <!-- 网站计数器 开始 -->
        <div style="text-align: center; border-bottom-style: solid; border-bottom-width: 1px;
            border-bottom-color: #DDDDDD;">
            网站当前访问数为
            <img border="0" alt="网站计数器" src="http://xyz.freelogs.com/counter/index.php?u=oceanchen&s=ainv"
                align="middle" hspace="4" vspace="2" /><script language="javascript" type="text/javascript"
                    src="http://xyz.freelogs.com/counter/script.php?u=oceanchen"></script>

        </div>
        <!-- 网站计数器 结束 -->
        <!-- Google 大厦广告 开始 -->
        <div style="border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #DDDDDD;
            background-color: #ffffff; text-align: center;">

            <script type="text/javascript"><!--
                google_ad_client = "pub-2842587781886262";
                /* 160x600, 创建于 09-1-31 */
                google_ad_slot = "2282214786";
                google_ad_width = 160;
                google_ad_height = 600;
//-->
            </script>

            <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
            </script>

        </div>
        <!-- Google 大厦广告 结束 -->
        <!-- 博客园新闻频道引用代码 num-显示条数 开始 -->
        <div style="border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #DDDDDD;
            background-color: #ffffff; text-align: left;">
            <div>
                <label style="font-weight: bold;">
                    IT新闻:</label>

                <script type='text/javascript' src='http://news.cnblogs.com/n/widget?uid=81829020090293052&num=20'></script>

            </div>
            <div style="text-align: right;">
                <a href='http://news.cnblogs.com' style="margin-right: 0px; text-align: left;">更多新闻
                </a>
            </div>
        </div>
        <!-- 博客园新闻频道引用代码 num-显示条数 结束 -->
        <!-- Google 链接广告 开始 -->
        <div style="border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #DDDDDD;
            height: 90px;">

            <script type="text/javascript"><!--
                google_ad_client = "pub-2842587781886262";
                /* 160x90, 创建于 09-2-6 */
                google_ad_slot = "7219371324";
                google_ad_width = 160;
                google_ad_height = 90;
//-->
            </script>

            <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
            </script>

        </div>
        <!-- Google 链接广告 结束 -->
    </div>

 

附加送一个——签名设计：

 

Signature

 

 

由于对UI方面设计的太少，也不知道写的好不好。如果您有更好的建议，请告之，谢谢了先。

posted @ 2009-02-09 21:50  海洋——海纳百川,有容乃大.  阅读(1639)  评论(7)  编辑  收藏  举报