Blog တြင္ Recent Post Animation Widget ထည့္သြင္းျခင္း

အာလုံးမဂၤလာပါခင္ဗ်ာ..။ ကၽြန္ေတာ္ အခုေဖာ္ျပေပးမွာကေတာ့ မိမိတုိ႔ရဲ႕ ဘေလာ့ဂ္မွာ Recent Post ေတြကုိ Animation Widget အေနနဲ႔ ထည့္သြင္းနည္းေလးပဲျဖစ္ပါတယ္။ ကၽြန္ေတာ့ရဲ႕ စီေဘာက္မွာေရာ ကြန္မန္႔မွာပါ ေတာင္းဆုိထားတဲ့အတြက္ ေဖာ္ျပေပးလုိက္ရျခင္းျဖစ္ပါတယ္။ ကၽြန္ေတာ္ကုိယ္တုိင္လည္း ဘေလာ့ဂ္နဲ႔ သက္ဆုိင္တဲ့ အေၾကာင္းအရာေလးေတြကုိ ေလ့လာရတာ အရမ္း၀ါသနာပါ ပါတယ္။ ေနာင္ကုိလည္း အလ်ဥ္း သင့္သလုိ မိမိ ဖတ္မွတ္ေလ့လာထားတဲ့ အေၾကာင္းအရာေတြကုိ ေဖာ္ျပေပးသြားပါ့မယ္။ စိတ္၀င္စားသူမ်ား ေအာက္ကအဆင့္မ်ားအတုိင္း လုိက္လုပ္ၾကည့္ပါခင္ဗ်ာ..။

၁။     မိမိဘေလာ့ဂ္မွာ Sing in လုပ္ၿပီး Layout ကုိသြားပါ။

၂။     Add a Gadget ကုိ ကလစ္လုပ္ၿပီး HTML/JavaScript ကုိ ေရြးပါ။

၃။     ၿပီးရင္ ေအာက္မွာေပးထားတဲ့ Code ေတြကုိ Copy ယူၿပီး HTML/JavaScript မွာ Paste လုပ္လုိက္ပါ။

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <style media="screen" type="text/css">
    <!--

    #spylist {
    overflow:hidden;
    margin-top:5px;
    padding:0px 0px;
    height:210px;
    }
    #spylist ul{
    width:235px;
    overflow:hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin:0px 0px;
    }
    #spylist li {
    width:208px;
    padding: 5px 5px;
    margin:0px 0px 5px 0px;
    list-style-type:none;
    float:none;
    height:200px;
    overflow: hidden;
    background:#fff url(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x;
    border:1px solid #ddd;
    }

    #spylist li a {
    text-decoration:none;
    color:#4B545B;
    font-size:11px;
    height:18px;
    overflow:hidden;
    margin:0px 0px;
    padding:0px 0px 2px 0px;
    }
    #spylist li img {
    float:left;
    margin-right:5px;
    background:#EFEFEF;
    border:0;
    }
    .spydate{
    overflow:hidden;
    font-size:10px;
    color:#0284C2;
    padding:2px 0px;
    margin:1px 0px 0px 0px;
    height:15px;
    font-family:Tahoma,Arial,verdana, sans-serif;
    }

    .spycomment{
    overflow:hidden;
    font-family:Tahoma,Arial,verdana, sans-serif;
    font-size:10px;
    color:#262B2F;
    padding:0px 0px;
    margin:0px 0px;
    }

    -->
    </style>

        <script language="JavaScript">

    imgr = new Array();

    imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

    imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

    imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

    imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

    imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
    showRandomImg = true;

    boxwidth = 255;

    cellspacing = 6;

    borderColor = "#232c35";

    bgTD = "#000000";

    thumbwidth = 70;

    thumbheight = 70;

    fntsize = 12;

    acolor = "#666";

    aBold = true;

    icon = " ";

    text = "comments";

    showPostDate = true;

    summaryPost = 40;

    summaryFontsize = 10;

    summaryColor = "#666";

    icon2 = " ";

    numposts = 10;

    home_page = "http://www.it-traveller.blogspot.com/";

    limitspy=4
    intervalspy=4000

    </script>

    <div id="spylist">
        <script src="http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/recentpostthumbspy-min.js" type="text/javascript"></script>
    </div>

၄။     ဒါဆုိရင္ Code ေတြထည့္တဲ့အဆင့္ၿပီးသြားပါၿပီး ဒါေပမယ့္ Save မလုပ္လုိက္ပါနဲ႔အုံး။ အေပၚက Code ေတြထဲမွာ အျပာေရာင္ နဲ႔ ျပထားတာေတြကုိ ျပင္ေပးဖုိ႔လုိပါတယ္။       

•  thumbwidth = 70 မွာ မိမိဘေလာ့ Sidebar Width နဲ႔ကုိက္ညီေအာင္ ေျပာင္းေပးလုိက္ပါ။
• thumbheight = 70 ဆုိတဲ့ေနရာမွာေတာ့ မိမိထားခ်င္တဲ့အျမင့္ကုိ ေျပာင္းေပးလုိက္ပါ (ဥပမာ... 80, 90, 100... စသည္ျဖင့္)။ 
• numposts = 10 မွာ မိမိေဖာ္ျပလုိတဲ့ Recent Post အေရအတြက္ကုိ ေဖာ္ျပရမွာျဖစ္ပါတယ္။
• home_page = "http://www.it-traveller.blogspot.com/" မွာေတာ့ မိမိဘေလာ့ဂ္ရဲ႕ လိပ္စာ (URL) ကုိ ထည့္ေပးရမွာျဖစ္ပါတယ္။

၅။    ၿပီးရင္ေတာ့ Save လုပ္လုိက္လုိ႔ရပါၿပီ။ အားလုံးအဆင္ေျပၾကပါေစဗ်ာ..။ အကယ္၍ တစ္စုံတစ္ရာ အဆင္မေျပမႈမ်ား ရွိခဲ့ပါက စီေဘာက္/ကြန္မန္႔မွာ ေဆြးေႏြးေပးခဲ့ၾကပါရန္...။