August 2012 ~ ေလးဝတီ

ဘေလာ့အေဟာင္းမွ ဘေလာ့အသစ္ကိုခ်ိတ္ေပးနည္း

စာဖတ္သူမ်ား မိမိ ဘေလာ့အေဟာင္းကို ၀င္ေရာက္ဖတ္ေနခ်ိန္မွာ မိမိျပဳလုပ္ထားေသာ ဘေလာ့ အသစ္ကို
၀င္ေရာက္ ဖတ္ေစခ်င္ ၀င္ေရာက္ေရာက္ေစခ်င္လွ်င္ ေအာက္ပါနည္းအတိုင္း ျပဳလုပ္ထားျခင္းျဖင့္ မိမိ၏
ဘေလာ့အသစ္ကို ဒါရိုက္ ၀င္ေရာက္ျပီးသား ျဖစ္ေနမွာပါ....။
1.မိမိ၏ ဘေလာ့ အေဟာင္းကို Login အရင္ဆံုး၀င္ေရာက္လိုက္ပါ

2. ျပီးရင္ Design >>Edit HTML>> Expand Widget Templates မွာ အမွတ္ေလးေပးလို္က္ပါ။
ျပီးရင္ေတာ့ ဒီ <head> ကုဒ္ေလးကိုရွာလိုက္ပါ...။
3. <head>.ကို ေတြ႔ျပီဆိုလွ်င္ ေအာက္မွာေပးထားတဲ့ ကုဒ္ကို <head>ရဲ႕ ေအာက္မွာထည့္လိုက္ပါ။

4. ဥပမာေအာက္မွာျပထားပါတယ္။

<head>

ဆက္လက္ဖတ္ရႈရန္

Animated recent post widget ထည့္နည္း

5:13 PM blogging, ဘေလာ့နည္းပညာ

1. www.blogger.com မွာ မိမိဘေလာ့မွာLog in ၀င္လိုက္ပါ။ > Page Elements>
> add a gadget > HTML/Javascript ကိုသြားလိုက္ပါ။

2. ျပီးရင္ေတာ့ ေအာက္မွာ ေပးထားတဲ့ကုဒ္ေလးေတြကို HTML/Javascript မွာ Paste လုပ္လိုက္ပါ။

<style type="text/css">

#rp_plus_img{height:377px;}

#rp_plus_img li {height:60px;padding:5px;list-style:none;

background-color:#ffffff;

border:solid 1px #000000;}

#rp_plus_img a{color:#00000;}

#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;

text-align:justify;

-moz-border-radius: 5px;}

#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}

</style>

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

<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/recentpost.js"></script>

<script type="text/javascript">

var speed = 1500;

var pause = 3500;

$(document).ready(function(){

rpnewsticker();

interval = setInterval(rpnewsticker, pause);

});

</script>

<ul id="rp_plus_img">

<script style="text/javascript">

var numposts = 5;

var numchars = 0;

</script>

<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>

</ul><small><a href="http://walkerindark.blogspot.com/2012/08/animated-recent-post-widget.html" target="_blank">get this widget here</a></small>

3. Preview နဲ႔ အရင္ၾကည့္လိုက္ပါ။ Ok ...အဆင္ေျပရင္ေတာ့ Save လိုက္ပါ။ ေအာက္မွာ DEMO အေနနဲ႔ ျပထားပါတယ္ အားလံုးအဆင္ေျပၾကပါေစ။

get this widget here

ဆက္လက္ဖတ္ရႈရန္

post တဲ့ အခါမွာ စာပိုဒ္ေလးေတြ ပံုေလးေလးေတြကို Hide လုပ္ျပီးေရး ၾကမယ္

1:31 AM blogging, ဘေလာ့နည္းပညာ

၁။ ေအာက္မွာေပးထားတဲ့ ကုဒ္ေလးေတြကို Design>>Template Designer>>Advenced>>Add CSS ကိုသြားလိုက္ပါ။

၂။ ေအာက္မွာေပးထားတဲ့ ကုဒ္ေလးေတြကို ေကာ္ပီ(copy)ယူျပီး css box မွာ (paste) ထည့္လိုက္ပါ။

.posthidden {display:none}
.postshown {display:inline}

၃။ ေနာက္တစ္ဆင့္အေနနဲ႔ ေအာက္မွာေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူျပီး</head> အေပၚက ထည့္လိုက္ပါ။

<script type="text/Javascript">

function expandcollapse (postid) {

   whichpost = document.getElementById(postid);

   if (whichpost.className=="postshown") {
      whichpost.className="posthidden";
   }
   else {
      whichpost.className="postshown";
   }
}
</script>

၄။ မိမိ၏တိန္းပလိတ္(template) ကို နမူနာ(preview) နဲ႔ ၾကည့္လိုက္ပါ။ Error မတက္ဘူးဆိုရင္ တိန္းပလိတ္ ကို သိမ္း(Save) လိုက္ပါ။

မွတ္ခ်က္။ ။ မိမိ post တင္ခ်ိန္မွာေတာ့ မိမိ ေဖ်ာက္(Hide) ျပီးေရးခ်င္တဲ့ အေၾကာင္းအရာေလးေတြကို ေအာက္မွာျပထားတဲ့ အတိုင္းေရးရမွာျဖစ္ပါတယ္။
ေအာက္ကအတိုင္းမေရးရင္ေတာ့ (Hide) ျဖစ္မွာ မဟုတ္ပါဘူး။
ဥမမာ ၁။ဒါကေတာ့ မိမိ (Hide)လုပ္ျပီးေရးခ်င္တဲ့ စာပိုဒ္ေလးကိုေဖ်ာက္ျပီးေရးတာပါ။

<a href="javascript:expandcollapse('subtopic0001')">
<h4>ေခါင္းစဥ္ထည့္ပါ</h4></a>
<span class="posthidden" id="subtopic0001">
မိမိ ေဖ်ာက္(Hide) ျပီးေရးခ်င္တဲ့ အေၾကာင္းအရာကို ဒီေနရာမွာေရးပါ</span>

ဥပမာ ၂။ ဒါကေတာ့ အေၾကာင္းအရာ စာသားႏွင့့္ ပံု ကို ေဖ်ာက္ျပီးေရးနည္းပါ။

<a href="javascript:expandcollapse('subtopic0002')">
<h4>ေခါင္းစဥ္ထည့္ပါ</h4></a>
<span class="posthidden" id="subtopic0002">
<img SRC="ဒီေနရာေလးမွာ မိမိပံု၏ လင့္ ကို ထည့္ပါ"border="0">
မိမိ ေဖ်ာက္(Hide) ျပီးေရးခ်င္တဲ့ အေၾကာင္းအရာကို ဒီေနရာမွာေရးပါ</span>

ဥပမာ ၃။ ဒါကေတာ့ စားသားႏွင့္ ပံု ၁ ပံု (သို႔)၂/၃ ပံုကို ေဖ်ာက္ျပီးေရးတာပါ။

<a href="javascript:expandcollapse('subtopic0003')">
<h4>ေခါင္းစဥ္ေရးပါ</h4></a>
<span class="posthidden" id="subtopic0003">
<img SRC="ဒီေနရာေလးမွာ မိမိပံု၏ လင့္ ကို ထည့္ပါ"border="0">
<img SRC="ဒီေနရာေလးမွာ မိမိပံု၏ လင့္ ကို ထည့္ပါ"border="0">
အေၾကာင္းအရာ ကို ဒီေနရာမွာ ထည့္ပါ</span>

ဥပမာ ၁၊၂၊၃ အားလံုးကိုလဲ ထည့္ေရးလို႔ ရပါတယ္....။

အားလံုးအဆင္ေျပၾကပါေစ။ ေအာက္မွာ နမူနာ ထည့္ျပထားပါတယ္။
ေလးစားစြာျဖင့္ WiD(walkerindark)

ဒီမွာႏိႈက္ၾကည့္ပါ

နမူနာပံုေလးေတြပါ အားလံုးအဆင္ၾကပါေစ....။

ဆက္လက္ဖတ္ရႈရန္

ဘေလာ့ဂါ Post မွာ ပံုေလးေတြလွ်ိဳ႕တင္နည္

9:58 PM blogging, ဘေလာ့နည္းပညာ

မိမိရဲ႕ post မွာ screen shot ပံုေလးေတြျဖစ္ျဖစ္ မိမိတင္ခ်င္တဲ့ ဘယ္ပံုျဖစ္ျဖစ္ မိမိေရးသားထားတဲ့
infomation ေလးကိုဖတ္ျပီးမွ ပံုေလးကို လွ်ိဳ႕၀ွက္တင္ခ်င္ရင္ေတာ့ ဒီနည္းေလးကေတာ္ေတာ္လဲကို
လန္းမယ္ထင္ပါတယ္။
နည္းလမ္းေလးကို မေျပာခင္မွာ စကားနည္းနည္းေလာက္ ေျပာခ်င္ပါတယ္။
က်ေနာ္သည္ ဘာမွ မတတ္ေသပါဘူး ေလ့လာေနသူဆဲသာျဖစ္ပါသည္။ က်ေနာ္ေလ့လာေနေသာ
ေလ့လာျဖစ္ေသာ အေၾကာင္းအရာမ်ားကိုသာ ျပန္္လည္မွ်ေ၀ျခင္းသာျဖစ္ပါသည္။က်ေနာ္၏ဘေလာ့
တြင္ေရးသားထားေသာအေၾကာင္းအရာ (ကုဒ္) မ်ားသည္ က်ေနာ္ကိုယ္တိုင္ေရးသားထားျခင္မဟုတ္ပါ
က်ေနာ့္ေလ့လာခဲ့ေသာ သူမ်ားေရးသားထားေသာ ကုဒ္ မ်ားကို က်ေနာ္သိသေလာက္ ျပန္လည္ျပငဆင္္
ေရးသားျခင္းသာ ျဖစ္ပါေၾကာင္း၀န္ခံအပ္ပါသည္။
ကဲနည္းလမ္းေလးစလိုက္ၾကရေအာင္ေနာ္.......။
post အသစ္တစ္ခုကို တင္ရန္ျပင္ဆင္လိုက္ပါ....။မိမိတင္မယ့္ post အေၾကာင္းအရာေတြေရးျပီးသြားျပီဆိုပါေတာ့..။
အေၾကာင္းအရာ ေအာက္မွာ Screen Shot ပံုေလးပါတင္ေပးမယ္ေပါ့။ဒါေပမယ့္ အဲဒီပံုေလးကို မိမိဘာသာစကား(စာေပ)
နားလည္သူအတြက္ အလြယ္တကူုၾကည့္လို႔ရေအာင္ ေအာက္ကနည္းအတိုင္းတင္ပါ။
၁။ Html ကို ကလစ္ပါ။ျပီးရင္ ေအာက္က ကုဒ္ေလးေတြကို ေကာ္ပီ ယူျပီး မိမိပံုထည့္ခ်င္တဲ့ေနရာမွာ ထည့္လိုက္ပါ။
၂။ ကုဒ္မွာ ျပင္စရာေလးေတြ ျပင္ပါ။ျပင္မယ့္ေနရာေတြမွာ ျမန္မာလိုေရးထားပါတယ္။

<h4>
<u>ေအာက္မွာပံုေဖ်ာက္၍တင္ထားပါသည္</u></h4>
<script language="javascript" type="text/javascript">
function hideImage() {
if (document.getElementById) {
document.getElementById('div').style.visibility = 'hidden';
}
}
function showImage() {
if (document.getElementById) {
document.getElementById('div').style.visibility = 'visible';
}
}
</script>

<button onclick="javascript:hideImage()"><blink><span style="color: red;">၀ွက္ထားမယ္</span></blink></button>
<button onclick="javascript:showImage()"><blink><span style="color: green;">ၾကည့္မယ္</span></blink></button>
<div id="div">
<center>
<img border="0" src="ဒီေနရာေလးမွာ မိမိပံု၏ လင့္ ကို ထည့္ပါ" /> </center>
</div>

၃။ ပံုလွ်ိဳ႕၀ွက္တင္နည္းေလး ျပီးစီးသြားပါျပီ။
ေအာက္မွာ ဥပမာ အေနနဲ႔ တင္ျပထားပါတယ္။အားလံုးအဆင္ေျပမယ္လို႔ေမွ်ာ္လင့္ပါတယ္။
အဆင္မေျပခဲ့ရင္ေတာ့ ကြန္႔မက္ေလးေပးသြားၾကပါေနာ္။က်ေနာ္လို blogger ေပါက္စေလးေတြ
အတြက္သာ ရည္ရြယ္ပါတယ္....။blogger ဆရာမ်ားေသးခံေပးပါေနာ္။ သင္ဆရာ ျမင္ဆရာမ်ားအား
အစဥ္ထာ၀ရ ဦးထိပ္ပန္ဆင္လွ်က္ WiD(walkerindark)

ေအာက္မွာပံုေဖ်ာက္၍တင္ထားပါသည္

စာကိုၾကည့္မယ္

ဒီမွာ ၀ွက္ထားတဲ့ စာပိုဒ္ေလ....

ပံုကိုၾကည့္မယ္

က်ေနာ္ ၾကိဳက္တဲ့ ပံုေလးပါ ေက်းဇူးတင္ပါတယ္.

အားလံုးကိုေက်းဇူးတင္ပါတယ္

ဆက္လက္ေလ့လာ မွ်ေ၀သြားပါဦးမယ္ WiD(walkindark)

ဆက္လက္ဖတ္ရႈရန္

How To Add Slide Out Navigation Menu In Blogger

12:10 PM blogging, ဘေလာ့နည္းပညာ

Blogger Dashboard --> Design --> Edit HTML သြားပါ။
မိမိရဲ႕Template ကို Backup လပ္ထားေပးပါ။
Expand Widget Templates မွာ အမွန္မွတ္ေလးေပးလိုက္
ေအာက္မွာေပးထားတဲ့ ကုဒ္ေလးကို [ctrl+F] အကူနဲ႔ ရွိလို္ကပါ။
]]></b:skin>
ေတြျပီဆိုရင္ေအာက္မွာေပးထားကုဒ္ကို ]]></b:skin> ရဲ႕အေပၚက ထည့္လိုက္ပါ

ul#navigation {

    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 10px;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#navigation li {
    width: 100px;
}
ul#navigation li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    /*-moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
    */
    opacity: 0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation .home a{
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiczq43svrxt1xZyBfskIJW3NVRVPwTu79fUFRKyTBX1fqUcCIjyqhdLR0_pf0WEjsnzFQ4meLklxYiLP8iEKEcHNM1vMHBxEFaXX0VHUnhfc4Tb7aOXVHiKaolA3-Pa04b-uDS7BCmxec/s1600/home.png);
}
ul#navigation .about a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipCYhVJhaomRjXNZ71RRaegLHKeYz1s_cFhYRbmS-Lyfk3pYcSEwd8ptZvU1fvKh2OpRhgXaZgIxMi_N0EQAt_jrygC4nq0ahGodIC7LShT1nHPW3_xuVm71CbEt9rzDajXx0J9ShtnM4/s1600/idcard.png);
}
ul#navigation .search a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm74vARwKF2ggu8XTgrOI3XrI4VkQDx-ALQccJUeWrHHYPACnXCKGac2dfDcdSF2E5o-AsKi1RHYTQs6IOiu0u1pTthIVoWavoPuDS9Q2BOVR8CeplA3p4148XSc-80Of5vkYXc3ymlG0/s1600/search.png);
}
ul#navigation .podcasts a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPNb-HCi1mOCa35Um8zJAcQpN72X1VK0vClgRr9Q5PjHWau3C8_O9mXJHI5gZKGPwudkH2XGwCxk6cW_9171Z6XO8Q1Fmg8c0bsnIOTqTqpwG3n123diCiuAUkazBxiY0YY4wmjqNq3nA/s1600/ipod.png);
}
ul#navigation .rssfeed a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ0LgJwp6K1bmhf97RySvT3yeg9d4CFQrsO5iCR_vKNKn-M6YRkkNLHtHzDQ4Vt_F4oR1zaJnzHKEgGRTqh-cS_oci4ZfMmn5WW3knVktqKR0BDws2y2Q5Tqz9P1eEiIVMpuebIR8bV4Y/s1600/rss.png);
}
ul#navigation .photos a     {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU4BhCmI3f0_npjhr73D5yhuT5jCPMP3YvVq84hfE3zKsUMiyJt7SDmpLz1x_CocVpc47MdVRScyBPEHyw2hkY0OBJ_P56FcrPSZcmPCBFQsJXJUD7JiVH_eJDmZp9C4Owr7jP-i3YcV8/s1600/camera.png);
}
ul#navigation .contact a    {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxaXMMWKJs9qr8YJagMYN9jsAuqy1p0u7qvn_vcA4IjOgKgYWsMMX4vXkxLiaBa-DaD4dEpE_0DbT0iWQeYvCtY1G1D7ug2CX8UmQug0lTVPTtvFkwDNvrMKAA6l07keBKYCi-eiwuKzo/s1600/mail.png);
}

မိမိ Template Preview နဲ႔ ၾကည့္လိုက္ပါ Error မတက္ရင္ မိမိ၏တိန္းပလိတ္ကို Save လိုက္ပါ။

ေအာက္မွာေပးထားတဲ့ ကုဒ္ေတြကို Page Elements က Add a Gadget ကို HTML/JavaScript

မွာ ထည့္လိုက္ပါ။

<script type="text/javascript">
            $(function() {
                $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);

                $('#navigation > li').hover(
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
                    },
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
                    }
                );
            });
        </script>
</head>
<body>
<p style="display:none;"> Navigation Menu by<a href="http://www.latesthack.com">Latest Hack</a></p>
<ul id="navigation">

            <li class="home"><a href="" title="မူလစာမ်က္ႏွာ"></a></li>

            <li class="about"><a href="linlkထည့္ပါ" title="ေခါင္းစဥ္ထည့္ပါ"></a></li>

            <li class="search"><a href="linlkထည့္ပါ" title="ေခါင္းစဥ္ထည့္ပါ"></a></li>

            <li class="photos"><a href="linlkထည့္ပါ" title="ေခါင္းစဥ္ထည့္ပါ"></a></li>

            <li class="rssfeed"><a href="linlkထည့္ပါ" title="ေခါင္းစဥ္ထည့္ပါ"></a></li>

            <li class="podcasts"><a href="linlkထည့္ပါ" title="ေခါင္းစဥ္ထည့္ပါ"></a></li>

            <li class="contact"><a href="linlkထည့္ပါ" title="ေခါင္းစဥ္ထည့္ပါ"></a></li>

        </ul>

template Save လိုက္ပါ။ လုပ္ေဆာင္ခ်က္ျပီးဆံုးသြားပါျပီ။

ျပင္ဆင္ရန္။ ။ျမန္မာေရးထားတဲ့ ေနရာေတြကို မိမိ စိတ္ၾကိဳက္ ျပင္ဆင္ ႏိုင္ပါတယ္

ျပင္ဆင္ရန္။ ။
ul#navigation .home a{
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiczq43svrxt1xZyBfskIJW3NVRVPwTu79fUFRKyTBX1fqUcCIjyqhdLR0_pf0WEjsnzFQ4meLklxYiLP8iEKEcHNM1vMHBxEFaXX0VHUnhfc4Tb7aOXVHiKaolA3-Pa04b-uDS7BCmxec/s1600/home.png);
}
ul#navigation .about a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipCYhVJhaomRjXNZ71RRaegLHKeYz1s_cFhYRbmS-Lyfk3pYcSEwd8ptZvU1fvKh2OpRhgXaZgIxMi_N0EQAt_jrygC4nq0ahGodIC7LShT1nHPW3_xuVm71CbEt9rzDajXx0J9ShtnM4/s1600/idcard.png);
}
ul#navigation .search a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm74vARwKF2ggu8XTgrOI3XrI4VkQDx-ALQccJUeWrHHYPACnXCKGac2dfDcdSF2E5o-AsKi1RHYTQs6IOiu0u1pTthIVoWavoPuDS9Q2BOVR8CeplA3p4148XSc-80Of5vkYXc3ymlG0/s1600/search.png);
}
ul#navigation .podcasts a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPNb-HCi1mOCa35Um8zJAcQpN72X1VK0vClgRr9Q5PjHWau3C8_O9mXJHI5gZKGPwudkH2XGwCxk6cW_9171Z6XO8Q1Fmg8c0bsnIOTqTqpwG3n123diCiuAUkazBxiY0YY4wmjqNq3nA/s1600/ipod.png);
}
ul#navigation .rssfeed a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ0LgJwp6K1bmhf97RySvT3yeg9d4CFQrsO5iCR_vKNKn-M6YRkkNLHtHzDQ4Vt_F4oR1zaJnzHKEgGRTqh-cS_oci4ZfMmn5WW3knVktqKR0BDws2y2Q5Tqz9P1eEiIVMpuebIR8bV4Y/s1600/rss.png);
}
ul#navigation .photos a     {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU4BhCmI3f0_npjhr73D5yhuT5jCPMP3YvVq84hfE3zKsUMiyJt7SDmpLz1x_CocVpc47MdVRScyBPEHyw2hkY0OBJ_P56FcrPSZcmPCBFQsJXJUD7JiVH_eJDmZp9C4Owr7jP-i3YcV8/s1600/camera.png);
}
ul#navigation .contact a    {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxaXMMWKJs9qr8YJagMYN9jsAuqy1p0u7qvn_vcA4IjOgKgYWsMMX4vXkxLiaBa-DaD4dEpE_0DbT0iWQeYvCtY1G1D7ug2CX8UmQug0lTVPTtvFkwDNvrMKAA6l07keBKYCi-eiwuKzo/s1600/mail.png);
}

အနီေရာင္ နဲ႔ ျပထားတဲ့ ပံုေတြကို အကိုယ္ပိုင္ image URL နဲ႔ အစားထိုး အသံုးျပဳပါ။

နမူနာ အေနနဲ႔ က်ေနာ္ ဘေလာ့ရဲ႕ ဘယ္ဘက္မွာ menu ေလးကို ၾကည့္ႏိုင္ပါတယ္။

ဆက္လက္ဖတ္ရႈရန္

Add Blockquote To Blogger with bg image& hover image

9:39 PM blogging, ဘေလာ့နည္းပညာ

၁။ ]]></b:skin> ကို Ctrl+F အကူနဲ႔ ရွာလိုက္ပါ ။
၂။ေတြ႔ျပီဆိုရင္ ေအာက္မွာေပးထားတဲ့ CSS code ေလးေတြကို ]]></b:skin> အေပၚက ကပ္ျပီးထည့္လိုက္ပါ။

blockquote {
background: #000 url(ဒီေရာေလးမွာ ပံုမွန္ျမင္ေနရမယ္ပံု၏ URL ကိုထည့္ပါ) no-repeat right bottom ;
margin: 0 20px;
padding: 20px 70px 20px 20px;
color:#595959;
font: bold 0.9em "comic sans ms", "Times New Roman", Times, serif;
border:1px solid #DDD;
}
blockquote:hover {
background: #000 url(ဒီေနရာေလးမွာ mouse နဲ႔ေထာက္လိုက္လွ်င္ ေပၚခ်င္ပံု၏ URL ကိုထည့္ပါ) no-repeat right bottom ;
color:#E0E089;
}

blockquote p {
margin: 0;
padding-top:10px;
}

လုပ္ေဆာင္ခ်က္ျပီးဆံုးသြားပါျပီ။ သင့္၏ Template ကို Preview နဲ႔ ၾကည့္လိုက္ပါ Error မတက္ဘူးဆိုလွ်င္
Template ကို Save လိုက္ပါ။
NOTE: အေရးၾကီးပါသည္
မိမိ ဘေလာ့မွာ Post တင္တဲ့အခါမွာ Code ေတြကို ထည့္တဲ့ေနရာမွာ ေအာက္မွာျပထားတဲ့အတိုင္း ေရးမွသာ
Code ရဲ႕ေနာက္ခံ Image နဲ႔ Hover ေနာက္ခံ Image ေတြ ေပၚမွာျဖစ္ပါတယ္

<blockquote> ကုဒ္ေတြကိုဒီမွာေရးပါ</blockquote>

ဆက္လက္ဖတ္ရႈရန္

Simple CSS Blockquotes and Pullquotes

9:04 PM blogging, ဘေလာ့နည္းပညာ

.blockquote { background-image: url(images/open-quote.gif); background-repeat: no-repeat; background-position: left 5px; padding-left: 30px; font-style: italic; } .blockquote span { background-image: url(images/close-quote.gif); background-repeat: no-repeat; background-position: right bottom; display: block; padding-right: 30px; }

ဆက္လက္ဖတ္ရႈရန္

Hover Effect To Authors Comments On Blogger

8:38 PM blogging, ဘေလာ့နည္းပညာ

Step 1. In your Blogger dashboard click > Design > Edit Html > Tick The Expand Widget Templates Box :

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - More Info)

]]></b:skin>

Step 3. Copy and Paste the following code directly Above / Before ]]></b:skin>

.comment-body-author {
-moz-border-radius: 15px;
border-radius: 15px;
background: #000000; /* BG color*/
color: #ffffff; /* Font color*/
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;
margin:0;
padding:0 0 0 20px;
}

.comment-body-author:hover {
-moz-border-radius: 15px;
border-radius: 15px;
background: #cccccc; /* BG Hover color*/
color: #000000; /* Font Hover color*/
border-top: 1px solid #990000;border-bottom: 1px solid #990000;border-left: 1px solid #990000;border-right: 1px solid #990000;
margin:0;
padding:0 0 0 20px;
}

Note - The colors (Hex) are highlighted in red above and can be changed.To get the Hex code for the colors you want go to this chart - Hex Code Color Chart.

Step 4. Save Your Template, But we are not finished.

In the next step you need to find a section of code in your template and add two extra snippets of code to it.When testing this i found older and custom Blogger templates are different to templates from the Blogger templates designer.For that reason i have two separate methods.The first is for people with Blogger templates that are not from the template designer the second is for templates from the template designer....Got It ....

Users With Custom And Older Blogger Templates Follow These Steps

Step 1. Now we need to edit the following section of code in your template.Finding a section of code can be hard so the best way is to find the first line (Use The Ctrl F Search Method) and work from there.If you cant find the first line look for the second line, remember Blogger templates can have different code so it might not look exactly the same.

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

Step 2. OK you have located the section of code, we now add two snippets of code to it.You can see the two snippets and were i have added them below in red.

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Step 3. Once your happy you have the code in the right place you can save your template and check it out.

ဆက္လက္ဖတ္ရႈရန္

Change Author Comments Color Style In Blogger

9:56 AM blogging, ဘေလာ့နည္းပညာ

Highlighting and customizing author comments differently from visitor comments is a very important step that you must take as soon as possible because this will make author comments more prominent to the visitors and will therefore encourage visitors to take part in the discussion and better communicate with the author. The blogger comment block consists of three important sections which are,

Comment-author
Comment-body
Comment-footer

Our tutorial today is on how to style the Comment-Body section of Author. So lets get to work!

Highlight and Customize Comments in Blogger

Go To Blogger > Design > Edit HTML
Backup your template
Check "Expand widget templates" Box
Search for this.

]]></b:skin>

5. Just above it paste the CSS code below,

.mbt-comment-body {
background: #FFFFFF;
color: #008000;
border: 1px solid #008000;
margin:0;
padding:0 0 0 10px;
width:520px;
}

Make these changes:

To Change the background color of author comments change #FFFFFF
To change font color change #008000
To change border size change 1px, to change border style change to solid, dashed or dotted and to change the color of the border change #008000
To change the width of the comment body change 520px

Tip: Use our color generator for making these changes
6. Next search carefully for this code in your template,
Tip: Press Crtl +F and search for one line at a time

      <data:commentPostedByMsg/>
          </dt>

          <dd class='comment-body'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></p>
            </b:if>
          </dd>

7. Replace it with the following code,

      <data:commentPostedByMsg/>
          </dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='mbt-comment-body'>
<p><data:comment.body/></p>
</dd>
<b:else/>
          <dd class='comment-body'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></p>
            </b:if>
          </dd>
</b:if>

8. Save your template and you are done!

ဆက္လက္ဖတ္ရႈရန္

Free Download Blogger Template Hacker Terbaru Terkeren

3:24 AM blogger template

Template Blogspot Hacker ini tidak sengaja saya temukan dan untuk mengabadikannya saya posting aja disini ya. Tapi memang postingan ini agak jauh dari Cheat Game tapi yang namanya share kan gak mengenal topik.

Sebelumnya baca juga ya All hair Style + All In Shop Update New April 2012 Ninja Saga Cheat dan silahkan dilihat dulu screencutnya :

Template Blogger Hacker Cracker Terbaru

Demo | Download

Mohon maaf kalau gambarnya gelap gelap kayak mati lampu,karena memang begitu adanya Free Download Blogger Template Hacker Terbaru Terkeren,semoga bermanfaat.

ဆက္လက္ဖတ္ရႈရန္

ဘူးေရမ်က္ရြာ (နည္းပညာႏွင့္အေထြေထြျပန္လည္မွ်ေဝျခင္း)

This is default featured slide 2 title

This is default featured slide 3 title

This is default featured slide 4 title

This is default featured slide 5 title

ဘေလာ့အေဟာင္းမွ ဘေလာ့အသစ္ကိုခ်ိတ္ေပးနည္း

Animated recent post widget ထည့္နည္း

post တဲ့ အခါမွာ စာပိုဒ္ေလးေတြ ပံုေလးေလးေတြကို Hide လုပ္ျပီးေရး ၾကမယ္

ဒီမွာႏိႈက္ၾကည့္ပါ