วิธีติดตั้ง Facebook Style Footer Admin Panel บน Blogger

สอนวิธีทำ blogger (เครดิตรูปจาก sohtanaka.com)


บทความนี้ต้นฉบับเป็นเครดิตของ sohtanaka.com ซึ่งกล่าวถึงการสร้าง Facebook Style Footer Admin Panel เหมือนแถบเครื่องมือใน facebook ซึ่งถ้าใครใช้งาน facebook เป็นประจำก็คงจะคุ้นเคยกันเป็นอย่างดี

บทความนี้ผมก็จะนำมาขยายความต่อ โดย 1. ทำให้ติดตั้งใน blogger ได้ และทำได้ง่ายขึ้น  2. ดัดแปลงให้ใช้งานได้จริงและเหมาะสมกับรูปแบบการทำงานของ blogger

ตัวอย่างของผลลัพธ์เมื่อติดตั้งใน blogger แล้วคุณสามารถดูได้จากบล็อกของผม หรือ ดูได้จาก Link ด้านล่าง





วิธีติดตั้ง

Login เข้าไปที่ blogger

ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML >> ไม่ต้องขยายแม่แบบเครื่องมือ



ขั้นที่ 1 ติดตั้ง CSS โดยค้นหาโค้ด ]]></b:skin> และวางโค้ดต่อไปนี้ก่อนหน้าโค้ดดังกล่าว

#footpanel {
  font: 10px normal Verdana, Arial, Helvetica, sans-serif;
    position: fixed;
    bottom: 0; left: 0;
    z-index: 9999; /*--Keeps the panel on top of all other elements--*/
    background: #e3e2e2;
    border: 1px solid #c3c3c3;
    border-bottom: none;
    width: 94%;
    margin: 0 3%;
}
*html #footpanel { /*--IE6 Hack - Fixed Positioning to the Bottom--*/
    margin-top: -1px; /*--prevents IE6 from having an infinity scroll bar - due to 1px border on #footpanel--*/
    position: absolute;
    top:expression(eval(document.compatMode &&document.compatMode=='CSS1Compat') ?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
}
#footpanel ul {
    padding: 0; margin: 0;
    float: left;
    width: 100%;
    list-style: none;
    border-top: 1px solid #fff; /*--Gives the bevel feel on the panel--*/
    font-size: 1.1em;
}
#footpanel ul li{
    padding: 0; margin: 0;
    float: left;
    position: relative;
}
#footpanel ul li a{
    padding: 5px;
    float: left;
    text-indent: -9999px;
    height: 16px; width: 16px;
    text-decoration: none;
    color: #333;
    position: relative;
}
html #footpanel ul li a:hover{    background-color: #fff; }
html #footpanel ul li a.active { /*--Active state when subpanel is open--*/
    background-color: #fff;
    height: 17px;
    margin-top: -2px; /*--Push it up 2px to attach the active button to subpanel--*/
    border: 1px solid #555;
    border-top: none;
    z-index: 200; /*--Keeps the active area on top of the subpanel--*/
    position: relative;
}
#footpanel a.home{   
    background: url(http://upic.me/i/z0/bhome.png) no-repeat 15px center;
    width: 50px;
    padding-left: 40px;
    border-right: 1px solid #bbb;
    text-indent: 0; /*--Reset text indent--*/
}
a.profile{    background: url(http://upic.me/i/9i/duser.png) no-repeat center center;  }
a.contacts{    background: url(http://upic.me/i/1y/address_book.png) no-repeat center center; }
a.playlist{    background: url(http://upic.me/i/xm/document_music_playlist.png) no-repeat center center; }
a.videos{    background: url(http://upic.me/i/9b/ffilm.png) no-repeat center center; }
a.messages{    background: url(http://upic.me/i/b6/dmail.png) no-repeat center center; }
a.editprofile{    background: url(http://upic.me/i/f8/wrench_screwdriver.png) no-repeat center center; }
#footpanel a.chat{   
    background: url(http://upic.me/i/a9/balloon.png) no-repeat 15px center;
    width: 126px;
    border-left: 1px solid #bbb;
    border-right: 1px solid #bbb;
    padding-left: 40px;
    text-indent: 0; /*--Reset text indent--*/
}
a.alerts{    background: url(http://upic.me/i/5i/newspaper.png) no-repeat center center;     }
#footpanel li#chatpanel, #footpanel li#alertpanel {    float: right; }  /*--Right align the chat and alert panels--*/
#footpanel a small {  /*--panel tool tip styles--*/
    text-align: center;
    width: 70px;
    background: url(http://upic.me/i/9e/pop_arrow.gif) no-repeat center bottom;
    padding: 5px 5px 11px;
    display: none; /*--Hide by default--*/
    color: #fff;
    font-size: 1em;
    text-indent: 0;
}
#footpanel a:hover small{
    display: block; /*--Show on hover--*/
    position: absolute;
    top: -35px; /*--Position tooltip 35px above the list item--*/
    left: 50%;
    margin-left: -40px; /*--Center the tooltip--*/
    z-index: 9999;
}
#footpanel ul li div a { /*--Reset link style for subpanel links--*/
    text-indent: 0;
    width: auto;
    height: auto;
    padding: 0;
    float: none;
    color: #00629a;
    position: static;
}
#footpanel ul li div a:hover {    text-decoration: underline; } /*--Reset link style for subpanel links--*/
#footpanel .subpanel {
    position: absolute;
    left: 0; bottom: 27px;
    display: none;    /*--Hide by default--*/
    width: 198px;
    border: 1px solid #555;
    background: #fff;
    overflow: hidden;
    padding-bottom: 2px;
}
#footpanel .subpanel img {width:22px; height;22px; border:none;} /* ถ้าไม่ต้องการกำหนดขนาดรูปให้ลบบรรทัดนี้ทิ้ง*/
#footpanel h3 {
    background: #526ea6;
    padding: 5px 10px;
    color: #fff;
    font-size: 1.1em;
    cursor: pointer;
}
#footpanel h3 span {
    font-size: 1.5em;
    float: right;
    line-height: 0.6em;   
    font-weight: normal;
}
#footpanel .subpanel ul{
    padding: 0; margin: 0;
    background: #fff;
    width: 100%;
    overflow: auto;
}
#footpanel .subpanel li{
    float: none; /*--Reset float--*/
    display: block;
    padding: 0; margin: 0;
    overflow: hidden;
    clear: both;
    background: #fff;
    position: static;  /*--Reset relative positioning--*/
    font-size: 0.9em;
}
#chatpanel .subpanel li { background: url(http://upic.me/i/sr/adash.gif) repeat-x left center; }
#chatpanel .subpanel li span {
    padding: 5px;
    background: #fff;
    color: #777;
    float: left;
}
#chatpanel .subpanel li a img {
    float: left;
    margin: 0 5px;
}
#chatpanel .subpanel li a{
    padding: 3px 0;    margin: 0;
    line-height: 22px;
    height: 22px;
    background: #fff;
    display: block;
}
#chatpanel .subpanel li a:hover {
    background: #3b5998;
    color: #fff;
    text-decoration: none;
}
#alertpanel .subpanel { right: 0; left: auto; /*--Reset left positioning and make it right positioned--*/ }
#alertpanel .subpanel li {
    border-top: 1px solid #f0f0f0;
    display: block;
}
#alertpanel .subpanel li p {padding: 5px 10px;}
#alertpanel .subpanel li a.delete{
    background: url(http://upic.me/i/hp/delete_x.gif) no-repeat;
    float: right;
    width: 13px; height: 14px;
    margin: 5px;
    text-indent: -9999px;
    visibility: hidden; /*--Hides by default but still takes up space (not completely gone like display:none;)--*/
}
#alertpanel .subpanel li a.delete:hover { background-position: left bottom; }
#footpanel #alertpanel li.view {
    text-align: right;
    padding: 5px 10px 5px 0;
}



CSS ในขั้นที่ 1 ผมได้ทำการปรับแต่งไว้แล้ว หากคุณต้องการปรับแต่งเพิ่มเติมสามารถดูแนวทางการปรับแต่งได้จาก

sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1
และ
sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-2




ขั้นที่ 2 ต่อเนื่องจากขั้นที่ 1 ขั้นนี้เป็นการติดตั้ง Java Script ซึ่งทำโดยค้นหาโค้ด </head> แล้ววางโค้ดต่อไปนี้ก่อนหน้าโค้ดดังกล่าว

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
//Adjust panel height
$.fn.adjustPanel = function(){
    $(this).find(&quot;ul, .subpanel&quot;).css({ &#39;height&#39; : &#39;auto&#39;}); //Reset sub-panel and ul height
    var windowHeight = $(window).height(); //Get the height of the browser viewport
    var panelsub = $(this).find(&quot;.subpanel&quot;).height(); //Get the height of sub-panel
    var panelAdjust = windowHeight - 250; //Viewport height - 100px (Sets max height of sub-panel)
    var ulAdjust =  panelAdjust - 25; //Calculate ul size after adjusting sub-panel
    if ( panelsub &gt;= panelAdjust ) {     //If sub-panel is taller than max height...
        $(this).find(&quot;.subpanel&quot;).css({ &#39;height&#39; : panelAdjust }); //Adjust sub-panel to max height
        $(this).find(&quot;ul&quot;).css({ &#39;height&#39; : panelAdjust}); ////Adjust subpanel ul to new size
    }
    else if ( panelsub &lt; panelAdjust ) { //If sub-panel is smaller than max height...
        $(this).find(&quot;ul&quot;).css({ &#39;height&#39; : &#39;auto&#39;}); //Set sub-panel ul to auto (default size)
    }
};
//Execute function on load
$(&quot;#chatpanel&quot;).adjustPanel(); //Run the adjustPanel function on #chatpanel
$(&quot;#alertpanel&quot;).adjustPanel(); //Run the adjustPanel function on #alertpanel
//Each time the viewport is adjusted/resized, execute the function
$(window).resize(function () {
    $(&quot;#chatpanel&quot;).adjustPanel();
    $(&quot;#alertpanel&quot;).adjustPanel();
});
//Click event on Chat Panel and Alert Panel   
$(&quot;#chatpanel a:first, #alertpanel a:first&quot;).click(function() { //If clicked on the first link of #chatpanel and #alertpanel...
    if($(this).next(&quot;.subpanel&quot;).is(&#39;:visible&#39;)){ //If subpanel is already active...
        $(this).next(&quot;.subpanel&quot;).hide(); //Hide active subpanel
        $(&quot;#footpanel li a&quot;).removeClass(&#39;active&#39;); //Remove active class on the subpanel trigger
    }
    else { //if subpanel is not active...
        $(&quot;.subpanel&quot;).hide(); //Hide all subpanels
        $(this).next(&quot;.subpanel&quot;).toggle(); //Toggle the subpanel to make active
        $(&quot;#footpanel li a&quot;).removeClass(&#39;active&#39;); //Remove active class on all subpanel trigger
        $(this).toggleClass(&#39;active&#39;); //Toggle the active class on the subpanel trigger
    }
    return false; //Prevent browser jump to link anchor
});
//Click event outside of subpanel
$(document).click(function() { //Click anywhere and...
    $(&quot;.subpanel&quot;).hide(); //hide subpanel
    $(&quot;#footpanel li a&quot;).removeClass(&#39;active&#39;); //remove active class on subpanel trigger
});
$(&#39;.subpanel ul&#39;).click(function(e) {
    e.stopPropagation(); //Prevents the subpanel ul from closing on click
});
//Show/Hide delete icons on Alert Panel
$(&quot;#alertpanel li&quot;).hover(function() {
    $(this).find(&quot;a.delete&quot;).css({&#39;visibility&#39;: &#39;visible&#39;}); //Show delete icon on hover
},function() {
    $(this).find(&quot;a.delete&quot;).css({&#39;visibility&#39;: &#39;hidden&#39;}); //Hide delete icon on hover out
});
});
</script>


สำหรับในขั้นที่ 2 นี้ ถ้า templates ของคุณมีการติดตั้ง jquery 1.3.2 แล้วก็ไม่ต้องติดตั้งซ้ำเข้าไปอีก นั่นคือ คุณสามารถลบโค้ด

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

ในขั้นที่ 2 ทิ้งไปได้เลยครับ




ขั้นที่ 3 และต่อเนื่องจากขั้นที่ 2 อีกเช่นกัน ให้ค้นหาโค้ด  </body> แล้ววางโค้ดต่อไปนี้ไว้ก่อนหน้าโค้ดดังกล่าว

<div id="footpanel">
    <ul id="mainpanel">       
        <li><a href="ใส่ Link" class="home">Inspiration <small>Hackublog</small></a></li>
        <li><a href="ใส่ Link" class="profile">View Profile <small>View Profile</small></a></li>
        <li><a href="ใส่ Link" class="editprofile">Edit Profile <small>Edit Profile</small></a></li>
        <li><a href="ใส่ Link" class="contacts">Contacts <small>Contacts</small></a></li>
        <li><a href="ใส่ Link" class="messages">Messages (10) <small>Messages</small></a></li>
        <li><a href="ใส่ Link" class="playlist">Play List <small>Play List</small></a></li>
        <li><a href="ใส่ Link" class="videos">Videos <small>Videos</small></a></li>
        <li id="alertpanel">
             <a href="#" class="alerts" title='คลิกเพื่อดูข่าวสาร'>Alerts</a>
             <div class="subpanel">
             <h3><span> - </span>Notifications</h3>
             <ul>
                <li class="view"><a href="#">View All</a></li>
                <li><a href="#" class="delete">X</a><p><a href="#">Hackublog</a>วิธีติดตั้ง Facebook footer admin panel<a href="#">  อ่านต่อ</a>.</p></li>
                <li><a href="#" class="delete">X</a><p><a href="ใส่ Link">ชื่อเจ้าของข่าวสาร</a> ใส่พาดหัวข่าว<a href="Link ยังข่าวสารฉบับเต็ม">ที่มาของข่าวสาร</a>.</p></li>
                <li><a href="#" class="delete">X</a><p><a href="ใส่ Link">ชื่อเจ้าของข่าวสาร</a> ใส่พาดหัวข่าว<a href="Link ยังข่าวสารฉบับเต็ม">ที่มาของข่าวสาร</a>.</p></li>
                <li><a href="#" class="delete">X</a><p><a href="ใส่ Link">ชื่อเจ้าของข่าวสาร</a> ใส่พาดหัวข่าว<a href="Link ยังข่าวสารฉบับเต็ม">ที่มาของข่าวสาร</a>.</p></li>
                <li><a href="#" class="delete">X</a><p><a href="ใส่ Link">ชื่อเจ้าของข่าวสาร</a> ใส่พาดหัวข่าว<a href="Link ยังข่าวสารฉบับเต็ม">ที่มาของข่าวสาร</a>.</p></li>
                <li><a href="#" class="delete">X</a><p><a href="ใส่ Link">ชื่อเจ้าของข่าวสาร</a> ใส่พาดหัวข่าว<a href="Link ยังข่าวสารฉบับเต็ม">ที่มาของข่าวสาร</a>.</p></li>                
            </ul>
            </div>
        </li>
       
        <li id="chatpanel">
            <a href="#" class="chat" title='คลิกเพื่อดูเพื่อนของคุณ'>Friends (<strong>15</strong>) </a>
            <div class="subpanel">
            <h3><span> - </span>Friends Online</h3>
            <ul>
                 <li><span>Family Members</span></li>
                <li><a href="ใส่ Link(ไปที่ facebook ก็ได้)"><img src="ใส่ URL รูปเพื่อนของคุณ" alt="" /> ใส่ชื่อเพื่อนของคุณ</a></li>
                <li><a href="#"><img src="http://upic.me/i/lg/chatthumb.gif" alt="" /> Your Friend</a></li>
                <li><a href="#"><img src="http://upic.me/i/lg/chatthumb.gif" alt="" /> Your Friend</a></li>
                <li><a href="#"><img src="http://upic.me/i/lg/chatthumb.gif" alt="" /> Your Friend</a></li>
                <li><a href="#"><img src="http://upic.me/i/lg/chatthumb.gif" alt="" /> Your Friend</a></li>
               
                <li><span>Other Friends</span></li>
                <li><a href="#"><img src="http://upic.me/i/lg/chatthumb.gif" alt="" /> Your Friend</a></li>
                <li><a href="#"><img src="http://upic.me/i/lg/chatthumb.gif" alt="" /> Your Friend</a></li>
                <li><a href="#"><img src="http://upic.me/i/lg/chatthumb.gif" alt="" /> Your Friend</a></li>
                <li><a href="#"><img src="http://upic.me/i/lg/chatthumb.gif" alt="" /> Your Friend</a></li>
                <li><a href="#"><img src="http://upic.me/i/lg/chatthumb.gif" alt="" /> Your Friend</a></li>
                <li><a href="#"><img src="http://upic.me/i/lg/chatthumb.gif" alt="" /> Your Friend</a></li>

                <li><a href="#"><img src="http://upic.me/i/lg/chatthumb.gif" alt="" /> Your Friend</a></li>
                <li><a href="#"><img src="http://upic.me/i/lg/chatthumb.gif" alt="" /> Your Friend</a></li>
                <li><a href="#"><img src="http://upic.me/i/lg/chatthumb.gif" alt="" /> Your Friend</a></li>
                <li><a href="#"><img src="http://upic.me/i/lg/chatthumb.gif" alt="" /> Your Friend</a></li>

            </ul>
            </div>
        </li>
    </ul>
</div>


หากปรับแก้โค้ด และแสดงผลเป็นที่น่าพอใจแล้วก็ทำการบันทึกแม่แบบ ถือว่าจบขั้นตอนการติดตั้งแล้วครับ


แนวทางการปรับแก้โค้ดในขั้นที่ 3  ให้ทำตามข้อความที่ได้ระบุไว้เป็นแนวทาง และดูองค์ประกอบต่าง ๆ จากรูปต่อไปนี้เพื่อความเข้าใจ


สอนทำ blogspot

สอนสร้าง blogger
CSS3

สอน blogspot




ขั้นที่ 4 การดัดแปลงและประยุกต์ให้เหมาะกับ blogger

เนื่องจากเราสามารถลอกเลียน รูปแบบ Admin Panel ของ facebook ได้เพียงหน้าตาเท่านั้น ไม่สามารถสร้างระบบสมาชิกได้เหมือน facebook ดังนั้นผมจึงได้ดัดแปลงโค้ดในขั้นที่ 3 ให้ใช้งานเหมาะกับ blogger มากขึ้น โดยใส่ Recent Comments เข้าไปแทนที่ Friend และ ใส่ Recent Posts เข้าไปแทนที่ News Alert ซึ่งจะได้โค้ดสำหรับติดตั้ง และใช้แทนโค้ดในขั้นที่ 3 ดังนี้

<div id='footpanel'>
<ul id='mainpanel'>       
          <li><a class='home' href='http://hackublog.blogspot.com/'>Inspiration <small>Hackublog</small></a></li>
        <li><a class='profile' href='http://hackublog.blogspot.com/'>View Profile <small>View Profile</small></a></li>
        <li><a class='editprofile' href='http://hackublog.blogspot.com/'>Edit Profile <small>Edit Profile</small></a></li>
        <li><a class='contacts' href='http://hackublog.blogspot.com/'>Contacts <small>Contacts</small></a></li>
        <li><a class='messages' href='http://hackublog.blogspot.com/'>Messages (10) <small>Messages</small></a></li>
        <li><a class='playlist' href='http://hackublog.blogspot.com/'>Play List <small>Play List</small></a></li>
        <li><a class='videos' href='http://hackublog.blogspot.com/'>Videos <small>Videos</small></a></li>
        <li id='alertpanel'>
             <a class='alerts' href='#' title='คลิกเพื่อดูรายการบทความล่าสุด'>RECENT POSTS</a>
             <div class='subpanel'>
             <h3><span> - </span>RECENT POSTS</h3>
             <ul>

<script language='javascript'>

imgr = new Array();

imgr[0] = &quot;http://sites.google.com/site/nuthawud/Home/icontext.png&quot;;

imgr[1] = &quot;http://sites.google.com/site/nuthawud/Home/icontext.png&quot;;

imgr[2] = &quot;http://sites.google.com/site/nuthawud/Home/icontext.png&quot;;

imgr[3] = &quot;http://sites.google.com/site/nuthawud/Home/icontext.png&quot;;

imgr[4] = &quot;http://sites.google.com/site/nuthawud/Home/icontext.png&quot;;

showRandomImg = true;

boxwidth = 198;

cellspacing = 8;

borderColor = &quot;#EDEEEF&quot;;

bgTD = &quot;#000000&quot;;

thumbwidth = 30;

thumbheight = 30;

fntsize = 8;

acolor = &quot;#5B5B5B&quot;;

aBold = false;

icon = &quot;&quot;;

text = &quot;comments&quot;;

showPostDate = false;

summaryPost = 40;

summaryFontsize = 8;

summaryColor = &quot;#666&quot;;

icon2 = &quot;&quot;;

numposts = 5;

home_page = &quot;http://hackublog.blogspot.com/&quot;;

</script>

<script src='http://hackublog.googlecode.com/files/recentposts_thumbnail.js' type='text/javascript'/>
            </ul>
            </div>
        </li>
        <li id='chatpanel'>
            <a class='chat' href='#' title='คลิกเพื่อดู comments ล่าสุด'>RECENT COMMENTS</a>
            <div class='subpanel'>
            <h3><span> - </span>RECENT COMMENTS</h3>
            <ul>
<script src='http://hackublog.googlecode.com/files/recent-comments-edit1.js'/>
<script>var numposts = 8; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src='http://hackublog.blogspot.com/feeds/comments/default?orderby=published&amp;alt=json-in-script&amp;callback=rp'>
</script>
           </ul>
           </div>
        </li>
</ul>
</div>



ทำการแก้ไขโค้ดสีแดงเป็นชื่อบล็อกของคุณ และบันทึกแม่แบบ ก็จะได้ผลลัพธ์เช่นเดียวกับบล็อกของผมครับ




สอนแต่งบล็อก
หากท่านใดมีปัญหาในการติดตั้งโปรดสอบถามที่กล่อง Comments ด้านล่างบทความนี้ได้เลยครับ และผมขอจบบทความสอนเทคนิควิธีทำ blogger อีกหนึ่งบทความเพียงเท่านี้ครับ

เครดิต : sohtanaka.com
Hack and Edit for Blogger : Hackublog

ตอนนี้มีความคิดเห็น : 3 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. อยากรู้วิธีใส่ gadget เพิ่มเหมือนของ Hackublog ด้านล่างพอจะแนะแนวทางได้ใหมครับ
    ขอบคุณล่วงหน้า

  1. @ ardulb : ใช้ wibiya toolbar และปรับแต่งมันนิดหน่อยครับ

  1. คุณ HackuBlog ครับ หยากรู้วิทีใส่ Beceome a Fan แบบคุณอะต้องทำไงบ้าง ฝากเวับ WeloveCashFiesta.Blogspot.com

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel