botton css code

TEXT HERE TEXT HERE TEXT HERE TEXT HERE
TEXT HERE TEXT HERE TEXT HERE TEXT HERE
TEXT HERE TEXT HERE TEXT HERE TEXT HERE
TEXT HERE TEXT HERE TEXT HERE TEXT HERE

.button {
    font: 15px Calibri, Arial, sans-serif;
/* A semi-transparent text shadow */
    text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
/* Overriding the default underline styling of the links */
    text-decoration: none !important;
    white-space: nowrap;
    display: inline-block;
    vertical-align: baseline;
    position: relative;
    cursor: pointer;
    padding: 10px 20px;
    background-repeat: no-repeat;
/* The following two rules are fallbacks, in case
the browser does not support multiple backgrounds. */
    background-position: bottom left;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtswUgFtyc1qz-tXeNexaqNdhSdsk3t5R30oh7v33jVQ8biaPxdU0xwjNuDqMG4GWmuDWPN9i9cS2BMwUwjBuZKa6O4m38DhF2Revy2eey14V3DmFJZyB3Gf4fQ7RAZZRPyDism28IgLw/s1600/helperblogger-button_bg.png');
/* Multiple backgrounds version. The background images
are defined individually in color classes */
    background-position: bottom left, top right, 0 0, 0 0;
    background-clip: border-box;
/* Applying a default border raidus of 8px */
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
/* A 1px highlight inside of the button */
    -moz-box-shadow: 0 0 1px #fff inset;
    -webkit-box-shadow: 0 0 1px #fff inset;
    box-shadow: 0 0 1px #fff inset;
/* Animating the background positions with CSS3 */
/* Currently works only in Safari/Chrome */
    -webkit-transition: background-position 1s;
    -moz-transition: background-position 1s;
    transition: background-position 1s;
}

.button:hover {
/* The first rule is a fallback, in case the browser
does not support multiple backgrounds
*/
    background-position: top left;
    background-position: top left, bottom right, 0 0, 0 0;
}

.button:active {
/* Moving the button 1px to the bottom when clicked */
    bottom: -1px;
}
/* The three buttons sizes */
.button.big {
    font-size: 30px;
}

.button.medium {
    font-size: 18px;
}

.button.small {
    font-size: 13px;
}
/* A more rounded button */
.button.rounded {
    -moz-border-radius: 4em;
    -webkit-border-radius: 4em;
    border-radius: 4em;
}
/* Defining four button colors */
/* BlueButton */
.blue.button {
    color: #0f4b6d !important;
    border: 1px solid #84acc3 !important;
/* A fallback background color */
    background-color: #48b5f2;
/* Specifying a version with gradients according to */
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtswUgFtyc1qz-tXeNexaqNdhSdsk3t5R30oh7v33jVQ8biaPxdU0xwjNuDqMG4GWmuDWPN9i9cS2BMwUwjBuZKa6O4m38DhF2Revy2eey14V3DmFJZyB3Gf4fQ7RAZZRPyDism28IgLw/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtswUgFtyc1qz-tXeNexaqNdhSdsk3t5R30oh7v33jVQ8biaPxdU0xwjNuDqMG4GWmuDWPN9i9cS2BMwUwjBuZKa6O4m38DhF2Revy2eey14V3DmFJZyB3Gf4fQ7RAZZRPyDism28IgLw/s1600/helperblogger-button_bg.png'),
-moz-radial-gradient(    center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtswUgFtyc1qz-tXeNexaqNdhSdsk3t5R30oh7v33jVQ8biaPxdU0xwjNuDqMG4GWmuDWPN9i9cS2BMwUwjBuZKa6O4m38DhF2Revy2eey14V3DmFJZyB3Gf4fQ7RAZZRPyDism28IgLw/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtswUgFtyc1qz-tXeNexaqNdhSdsk3t5R30oh7v33jVQ8biaPxdU0xwjNuDqMG4GWmuDWPN9i9cS2BMwUwjBuZKa6O4m38DhF2Revy2eey14V3DmFJZyB3Gf4fQ7RAZZRPyDism28IgLw/s1600/helperblogger-button_bg.png'),
-webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}

.blue.button:hover {
    background-color: #63c7fe;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtswUgFtyc1qz-tXeNexaqNdhSdsk3t5R30oh7v33jVQ8biaPxdU0xwjNuDqMG4GWmuDWPN9i9cS2BMwUwjBuZKa6O4m38DhF2Revy2eey14V3DmFJZyB3Gf4fQ7RAZZRPyDism28IgLw/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtswUgFtyc1qz-tXeNexaqNdhSdsk3t5R30oh7v33jVQ8biaPxdU0xwjNuDqMG4GWmuDWPN9i9cS2BMwUwjBuZKa6O4m38DhF2Revy2eey14V3DmFJZyB3Gf4fQ7RAZZRPyDism28IgLw/s1600/helperblogger-button_bg.png'),
-moz-radial-gradient(    center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtswUgFtyc1qz-tXeNexaqNdhSdsk3t5R30oh7v33jVQ8biaPxdU0xwjNuDqMG4GWmuDWPN9i9cS2BMwUwjBuZKa6O4m38DhF2Revy2eey14V3DmFJZyB3Gf4fQ7RAZZRPyDism28IgLw/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtswUgFtyc1qz-tXeNexaqNdhSdsk3t5R30oh7v33jVQ8biaPxdU0xwjNuDqMG4GWmuDWPN9i9cS2BMwUwjBuZKa6O4m38DhF2Revy2eey14V3DmFJZyB3Gf4fQ7RAZZRPyDism28IgLw/s1600/helperblogger-button_bg.png'),
-webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
/* Green Button */
.green.button {
    color: #345903 !important;
    border: 1px solid #96a37b !important;
    background-color: #79be1e;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtswUgFtyc1qz-tXeNexaqNdhSdsk3t5R30oh7v33jVQ8biaPxdU0xwjNuDqMG4GWmuDWPN9i9cS2BMwUwjBuZKa6O4m38DhF2Revy2eey14V3DmFJZyB3Gf4fQ7RAZZRPyDism28IgLw/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtswUgFtyc1qz-tXeNexaqNdhSdsk3t5R30oh7v33jVQ8biaPxdU0xwjNuDqMG4GWmuDWPN9i9cS2BMwUwjBuZKa6O4m38DhF2Revy2eey14V3DmFJZyB3Gf4fQ7RAZZRPyDism28IgLw/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtswUgFtyc1qz-tXeNexaqNdhSdsk3t5R30oh7v33jVQ8biaPxdU0xwjNuDqMG4GWmuDWPN9i9cS2BMwUwjBuZKa6O4m38DhF2Revy2eey14V3DmFJZyB3Gf4fQ7RAZZRPyDism28IgLw/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtswUgFtyc1qz-tXeNexaqNdhSdsk3t5R30oh7v33jVQ8biaPxdU0xwjNuDqMG4GWmuDWPN9i9cS2BMwUwjBuZKa6O4m38DhF2Revy2eey14V3DmFJZyB3Gf4fQ7RAZZRPyDism28IgLw/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}

.green.button:hover {
    background-color: #89d228;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtswUgFtyc1qz-tXeNexaqNdhSdsk3t5R30oh7v33jVQ8biaPxdU0xwjNuDqMG4GWmuDWPN9i9cS2BMwUwjBuZKa6O4m38DhF2Revy2eey14V3DmFJZyB3Gf4fQ7RAZZRPyDism28IgLw/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtswUgFtyc1qz-tXeNexaqNdhSdsk3t5R30oh7v33jVQ8biaPxdU0xwjNuDqMG4GWmuDWPN9i9cS2BMwUwjBuZKa6O4m38DhF2Revy2eey14V3DmFJZyB3Gf4fQ7RAZZRPyDism28IgLw/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtswUgFtyc1qz-tXeNexaqNdhSdsk3t5R30oh7v33jVQ8biaPxdU0xwjNuDqMG4GWmuDWPN9i9cS2BMwUwjBuZKa6O4m38DhF2Revy2eey14V3DmFJZyB3Gf4fQ7RAZZRPyDism28IgLw/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtswUgFtyc1qz-tXeNexaqNdhSdsk3t5R30oh7v33jVQ8biaPxdU0xwjNuDqMG4GWmuDWPN9i9cS2BMwUwjBuZKa6O4m38DhF2Revy2eey14V3DmFJZyB3Gf4fQ7RAZZRPyDism28IgLw/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}
/* Orange Button */
.orange.button {
    color: #693e0a !important;
    border: 1px solid #bea280 !important;
    background-color: #e38d27;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtswUgFtyc1qz-tXeNexaqNdhSdsk3t5R30oh7v33jVQ8biaPxdU0xwjNuDqMG4GWmuDWPN9i9cS2BMwUwjBuZKa6O4m38DhF2Revy2eey14V3DmFJZyB3Gf4fQ7RAZZRPyDism28IgLw/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtswUgFtyc1qz-tXeNexaqNdhSdsk3t5R30oh7v33jVQ8biaPxdU0xwjNuDqMG4GWmuDWPN9i9cS2BMwUwjBuZKa6O4m38DhF2Revy2eey14V3DmFJZyB3Gf4fQ7RAZZRPyDism28IgLw/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtswUgFtyc1qz-tXeNexaqNdhSdsk3t5R30oh7v33jVQ8biaPxdU0xwjNuDqMG4GWmuDWPN9i9cS2BMwUwjBuZKa6O4m38DhF2Revy2eey14V3DmFJZyB3Gf4fQ7RAZZRPyDism28IgLw/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtswUgFtyc1qz-tXeNexaqNdhSdsk3t5R30oh7v33jVQ8biaPxdU0xwjNuDqMG4GWmuDWPN9i9cS2BMwUwjBuZKa6O4m38DhF2Revy2eey14V3DmFJZyB3Gf4fQ7RAZZRPyDism28IgLw/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}

.orange.button:hover {
    background-color: #ec9732;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtswUgFtyc1qz-tXeNexaqNdhSdsk3t5R30oh7v33jVQ8biaPxdU0xwjNuDqMG4GWmuDWPN9i9cS2BMwUwjBuZKa6O4m38DhF2Revy2eey14V3DmFJZyB3Gf4fQ7RAZZRPyDism28IgLw/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtswUgFtyc1qz-tXeNexaqNdhSdsk3t5R30oh7v33jVQ8biaPxdU0xwjNuDqMG4GWmuDWPN9i9cS2BMwUwjBuZKa6O4m38DhF2Revy2eey14V3DmFJZyB3Gf4fQ7RAZZRPyDism28IgLw/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtswUgFtyc1qz-tXeNexaqNdhSdsk3t5R30oh7v33jVQ8biaPxdU0xwjNuDqMG4GWmuDWPN9i9cS2BMwUwjBuZKa6O4m38DhF2Revy2eey14V3DmFJZyB3Gf4fQ7RAZZRPyDism28IgLw/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtswUgFtyc1qz-tXeNexaqNdhSdsk3t5R30oh7v33jVQ8biaPxdU0xwjNuDqMG4GWmuDWPN9i9cS2BMwUwjBuZKa6O4m38DhF2Revy2eey14V3DmFJZyB3Gf4fQ7RAZZRPyDism28IgLw/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}

.gray.button {
    color: #525252 !important;
    border: 1px solid #a5a5a5 !important;
    background-color: #a9adb1;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtswUgFtyc1qz-tXeNexaqNdhSdsk3t5R30oh7v33jVQ8biaPxdU0xwjNuDqMG4GWmuDWPN9i9cS2BMwUwjBuZKa6O4m38DhF2Revy2eey14V3DmFJZyB3Gf4fQ7RAZZRPyDism28IgLw/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtswUgFtyc1qz-tXeNexaqNdhSdsk3t5R30oh7v33jVQ8biaPxdU0xwjNuDqMG4GWmuDWPN9i9cS2BMwUwjBuZKa6O4m38DhF2Revy2eey14V3DmFJZyB3Gf4fQ7RAZZRPyDism28IgLw/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtswUgFtyc1qz-tXeNexaqNdhSdsk3t5R30oh7v33jVQ8biaPxdU0xwjNuDqMG4GWmuDWPN9i9cS2BMwUwjBuZKa6O4m38DhF2Revy2eey14V3DmFJZyB3Gf4fQ7RAZZRPyDism28IgLw/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtswUgFtyc1qz-tXeNexaqNdhSdsk3t5R30oh7v33jVQ8biaPxdU0xwjNuDqMG4GWmuDWPN9i9cS2BMwUwjBuZKa6O4m38DhF2Revy2eey14V3DmFJZyB3Gf4fQ7RAZZRPyDism28IgLw/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}

.gray.button:hover {
    background-color: #b6bbc0;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtswUgFtyc1qz-tXeNexaqNdhSdsk3t5R30oh7v33jVQ8biaPxdU0xwjNuDqMG4GWmuDWPN9i9cS2BMwUwjBuZKa6O4m38DhF2Revy2eey14V3DmFJZyB3Gf4fQ7RAZZRPyDism28IgLw/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtswUgFtyc1qz-tXeNexaqNdhSdsk3t5R30oh7v33jVQ8biaPxdU0xwjNuDqMG4GWmuDWPN9i9cS2BMwUwjBuZKa6O4m38DhF2Revy2eey14V3DmFJZyB3Gf4fQ7RAZZRPyDism28IgLw/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtswUgFtyc1qz-tXeNexaqNdhSdsk3t5R30oh7v33jVQ8biaPxdU0xwjNuDqMG4GWmuDWPN9i9cS2BMwUwjBuZKa6O4m38DhF2Revy2eey14V3DmFJZyB3Gf4fQ7RAZZRPyDism28IgLw/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtswUgFtyc1qz-tXeNexaqNdhSdsk3t5R30oh7v33jVQ8biaPxdU0xwjNuDqMG4GWmuDWPN9i9cS2BMwUwjBuZKa6O4m38DhF2Revy2eey14V3DmFJZyB3Gf4fQ7RAZZRPyDism28IgLw/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}    

<a class="button big blue" href="http://www.blogger.com/LINK%20HERE">TEXT HERE</a>
<a class="button big green" href="http://www.blogger.com/LINK%20HERE">TEXT HERE</a>
<a class="button big orange" href="http://www.blogger.com/LINK%20HERE">TEXT HERE</a>
<a class="button big gray" href="http://www.blogger.com/LINK%20HERE">TEXT HERE</a>



<a class="button blue medium" href="http://www.blogger.com/LINK%20HERE">TEXT HERE</a>
<a class="button green medium" href="http://www.blogger.com/LINK%20HERE">TEXT HERE</a>
<a class="button orange medium" href="http://www.blogger.com/LINK%20HERE">TEXT HERE</a>
<a class="button gray medium" href="http://www.blogger.com/LINK%20HERE">TEXT HERE</a>


<a class="button small blue" href="http://www.blogger.com/LINK%20HERE">TEXT HERE</a>
<a class="button small green" href="http://www.blogger.com/LINK%20HERE">TEXT HERE</a>
<a class="button small orange" href="http://www.blogger.com/LINK%20HERE">TEXT HERE</a>
<a class="button small gray" href="http://www.blogger.com/LINK%20HERE">TEXT HERE</a>


<a class="button small blue rounded" href="http://www.blogger.com/LINK%20HERE">TEXT HERE</a>
<a class="button small green rounded" href="http://www.blogger.com/LINK%20HERE">TEXT HERE</a>
<a class="button small orange rounded" href="http://www.blogger.com/LINK%20HERE">TEXT HERE</a>
<a class="button small gray rounded" href="http://www.blogger.com/LINK%20HERE">TEXT HERE</a>

ဒါေလးကို ဖတ္ေပးပါဒီဘေလာ့ေလးသည္ ဘူးေရမ်က္ရြာ (wall.fm) ဆိုဒ္ေလးမွ တည္ေထာင္ထားပါသည္ ဘာေၾကာင့္လဲဆိုေတာ့ wall.fm ဆိုဒ္မ်ား free မရေတာ့လွ်င္ ယၡဳဘေလာ့တြင္ ဆက္လက္မွ်ေဝသြားႏိုင္ရန္ စီစဥ္ထားျခင္းျဖစ္ပါသည္

Adding zoom effect to Post title

• ဘေလာ့အလွဆင္နည္းေလးေတြ ႏွင့္ မိမိ blogspot ေလးကို အလွ ဆင္လိုသူ သူငယ္ခ်င္းအတြက္ Post Title အကို အလွဆင္နည္းေလး တင္ျပလိုက္ပါတယ္ခင္ဗ်ာ။ ဒီနည္းေလးကေတာ့ Post Title ကို ေဘာင္ေလးထည့္ျပီး Zoom အထြက္စတုိင္ေလး ထည့္နည္းေလးပါ။ အခု က်ေနာ္ ဆိုဒ္ေလးမွာလဲ ထည့္ထားပါတယ္ခင္ဗ်ာ။ ဥမမာအေနနဲ႔ ၾကည့္လို႔ ရတာေပါ့ေနာ္ ဟီးဟီး :P။
• အဲဒီလို ဒီဇိုင္းေလးထည့္ခ်င္တယ္ဆိုရင္ေတာ့ စလုပ္ၾကည့္ရေအာင္ဗ်ာ။
• Css ကို ထည့္ေတာ့မယ္ဆိုရင္ေတာ့ ထံုးစံ အတိုင္းေပါ့ေနာ္..။ 
• Template>>
• Customize
• Advenced
• Add Css ကို သြားလိုက္ပါ။ ျပီးရင္ေတာ့ ေအာက္မွာေပးထားတဲ့ css code ေလးေတြကို copy ယူျပီး Paste လုပ္လိုက္ပါ။ ျပီးရင္ေတာ့ ေအာက္ကို scroll down ဆင္းျပီး မိမိ template ကို ၾကည့္လိုက္ပါ Ok ျပီ ဆိုရင္ေတာ့ template ကို Apply to Blog ကို click ျပီး Save လိုက္ပါ။

.post-title{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
border-radius:25px;
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;

}
.post-title:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
background:#FAFAFA;
}

ဖတ္ေပးပါအဆင္မေျပတာေလးေတြ ရွိခဲ့ရင္ comment ေလးေရးထားခဲ့ေပးပါေနာ္

• မိမိ ဘေလာ့ ႏွင့္ အဆင္ေျပမယ္ အေရာင္ ေလးေတြကို ျပန္လည္ျပင္ဆင္ႏိုင္ပါတယ္ background:#FAFAFA; တို႕ opacity: 1; ႏွင့္ margin: 0 10px 5px 0;  တို႔အား မိမိ၏ ဘေလာ့ႏွင့္ အဆင္ေအာင္ ျပင္ဆင္ပါ။ အားလံုးပဲ အဆင္ေျပမယ္ ေမွ်ာ္လင့္ပါတယ္။ ဆက္လက္မွ်ေဝပါဦးမည္။ အားလံုးေသာ သူငယ္ခ်င္းမ်ားအား အစဥ္ေလးစားလွ်က္။

ဒါေလးကို ဖတ္ေပးပါဒီဘေလာ့ေလးသည္ ဘူးေရမ်က္ရြာ (wall.fm) ဆိုဒ္ေလးမွ တည္ေထာင္ထားပါသည္ ဘာေၾကာင့္လဲဆိုေတာ့ wall.fm ဆိုဒ္မ်ား free မရေတာ့လွ်င္ ယၡဳဘေလာ့တြင္ ဆက္လက္မွ်ေဝသြားႏိုင္ရန္ စီစဥ္ထားျခင္းျဖစ္ပါသည္

photo css effect for blogger

ဓါတ္ပံု effect

4wadi.blogspot.com

မိမိ၏ ဘေလာ့တြင္ ဓါတ္ပံုေလးေတြကို Effect လွလွေလးႏွင့္ တင္လိုသူမ်ားအတြက္ တင္ေပးလိုက္ပါတယ္။နမူနာ အား ယၡဳပံုတြင္ ၾကည့္ရႈႏိုင္ပါတယ္

CSS code

@import url(http://fonts.googleapis.com/css?family=Neucha);

@import url(http://fonts.googleapis.com/css?family=Medula+One);

.photo_container.turn {
  perspective: 800px;
  position: relative;
}

.photo_container.turn{
  background: #084138;
  border: 10px solid #000;
  border-radius: 6px;
  height: 500px;
  margin: 0 auto;
  overflow: hidden;
  width: 500px;
}

.photo_container.turn .label {
  color: #fff;
  font-family: 'Neucha', sans-serif;
  font-size: 28px;
  left: 20px;
  letter-spacing: 6px;
  opacity: 1;
  position: absolute;
  text-shadow: 0 0 10px #000;
  top: 14px;
  z-index: 9999;
}

.photo_container.turn img {
  height: 520px;
  margin: -10px 0 0 -10px;
  width: 520px;
}

.photo_container.turn .front,
.photo_container.turn .back{
  left: 0;
  position: absolute;
  top: 0;
}

.photo_container.turn .front{
  backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-transition: all 0.8s;
  -ms-transition: all 0.8s;
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
  z-index: 999;
}

.photo_container.turn .back{
  opacity: 1;
  position: relative;
  -moz-transition: all 0.8s;
  -ms-transition: all 0.8s;
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
}

.photo_container.turn .description_container {
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.photo_container.turn.hover .front,
.photo_container.turn:hover .front{
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.photo_container.turn.hover .back,
.photo_container.turn:hover .back{
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.photo_container.turn .description {
  color: #fff;
  text-align: left;
}

.photo_container.turn .description .photo_title{
  border-bottom: 4px solid #fff;
  font-family: 'Medula One', serif;
  font-size: 48px;
  margin: 100px 20px 10px 20px;
  padding-bottom: 10px;
}

.photo_container.turn .description p{
  font-family: 'Medula One', serif;
  font-size: 24px;
  margin: 0;
  padding: 20px;
}

html code

<div class="photo_container turn">
  <div class="label">အေၾကာင္းအရာ</div>
  <img src="http://ibrahimjabbari.com/images/stories/effect3.jpg" class="front" />
  <div class="description back">
    <div class="description_container">
      <div class="photo_title">အေၾကာင္းအရာ ေခါင္းစဥ္</div>
      <p>အေၾကာင္းအရာ စာကို ထည့္ပါ </p>
    </div>
  </div>
</div>

မိမိ ဘေလာ့မွာ အလွဆင္လိုသူမ်ား အလွဆင္ႏိုင္ေအာင္ တင္ေပးလိုက္ပါတယ္။
Css code  ကို္ေတာ့ Template>>customize>> add css မွာ ထည့္ရမွာပါ။
Html ကိုေတာ့ ကိုယ္ Post တင္တဲ့ အခ်ိန္မွာ အသံုးျပဳရမွာ ျဖစ္ပါတယ္ ခင္ဗ်ာ.။

Mouse Hover Rounded image Css code

ပံုေလးေတြကို css code ႏွင့္ကစားလိုသူမ်ားအတြက္ ေနာက္ထပ္ကုဒ္ေလး တစ္ခု ထပ္တင္လိုက္ပါတယ္ က်ေနာ္ကိုယ္တိုင္စမ္းျပီးေတာ့ မွ တင္ေပးလိုက္ပါတယ္ခင္ဗ်ာ။

/* Solve problem where border size changes on hover */
.hover-4wadi-reounded img{
border: 0px solid black;
}
.hover-4wadi-reounded img:hover {
border: 0px solid #BADA55;
margin: 0;
padding: 0;
border-radius: 900px;
-moz-border-radius: 900px;
}

• ဒီကုဒ္လးေတြကေတာ့ အေပၚမွာ ျပထားတဲ့ ပံုေလးလိုေပါ့ Mouse ကိုေရြ႕လိုက္ရင္ ပံုေလးက ဝုိုင္းသြားမွာ ျဖစ္ပါတယ္။ စက္ဝိုင္းပံု အညီျဖစ္ဖို႔ အတြက္ကေတာ့ မိမိ တင္တဲ့ပံုေလးဟာ ေလးေထာင့္ညီ စတုရန္းေလး ျဖစ္ဖို႔ေတာ့ လိုပါမယ္ ဒါမွမဟုတ္ရင္ေတာ့ စက္ဝိုင္းပံု အညီ ထြက္မွာ မဟုတ္ပါဘူးခင္ဗ်ာ။


• ေအာက္မွာ ကေတာ့ Posting တြင္ အသံုးျပဳ ရန္ ကုဒ္ေတြျဖစ္ပါတယ္ခင္ဗ်ာ။

<center>
 <div class="hover-4wadi-reounded">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfceqOnllzWd4hlwmFBymN-KUTu1CDNMyIP9wTN6xmLskfz2HMdYHkyhNVRAHJMXhitozlgdeaqQUaO4bz3wNUxaxtylHrCpMa7jDLm_aHsAcqafLo1QAAvwPb7b3_V58PJClihUHMYSd0/s200/ardae4.png" /></div>
</center>

HOW TO ADD CSScss ကို ဘယ္မွာထည့္ရတယ္ဆိုတာ မသိေသးေသာ သူငယ္ခ်င္းမ်ား ဒီေအာက္က how to add css ဆိုတဲ့ေနရာမွာ click ျပီးၾကည့္ႏိုင္ပါတယ္။

• အဆင္ေျပၾကလိမ့္မယ္လို႔ ေမွ်ာ္လင့္ပါတယ္ ခင္ဗ်ာ။


• အဆင္မေျပတာရွိရင္ ေကာ့မက္ေလးျဖစ္ျဖစ္ ခ်န္ထားခဲ့ေပးပါ။

ဒါေလးကို ဖတ္ေပးပါဒီဘေလာ့ေလးသည္ ဘူးေရမ်က္ရြာ (wall.fm) ဆိုဒ္ေလးမွ တည္ေထာင္ထားပါသည္ ဘာေၾကာင့္လဲဆိုေတာ့ wall.fm ဆိုဒ္မ်ား free မရေတာ့လွ်င္ ယၡဳဘေလာ့တြင္ ဆက္လက္မွ်ေဝသြားႏိုင္ရန္ စီစဥ္ထားျခင္းျဖစ္ပါသည္

blogger မွာ css ကုဒ္ေလးေတြကစားၾကမယ္

ပံု(၁) မူလပံုစံ အတိုင္း

ပံု(၂)

ပံု(၃)

ဒီတစ္ခါေတာ blogger မွာ css ကုဒ္ေလးေတြ ကစားၾကည့္ၾကမယ္ေလ။ သိတဲ့သူငယ္ခ်င္းေတြ ေက်ာ္ဖတ္ေပးပါ။ က်ေနာ္ အခုေျပာခ်င္တာေလးက blogger မွာ css code ေလးေတြႏွင့္ ပံုေလးေတြကို ဒီဇိုင္းေလးေတြ ေျပာင္းျပီး ကစားၾကည့္တာ ကိုေျပာျပခ်င္ပါတယ္။ အရင္ကလဲ css ႏွင့္ ပံုေလးေတြ တင္တဲ့ နည္းေလးေတြကို ေျပာခဲ့ပါတယ္...။ အခုေျပာမယ္ နည္းလမ္းေလးကေတာ့ ပံုေလးေတြကို rounded ေလးေတြ လုပ္တဲ့ နည္းေလးေတြပါ။

က်ေနာ္တို႔ blogger မွာ css ကုဒ္ေတြကို ထည့္တဲ့ အခါ ေနရာကို သတ္မွတ္ထားလို႔ ရပါတယ္။

Css လို႔ ျမင္လိုက္တာနဲ႔ [></:b:skin> အေပၚက ထည့္ရမယ္ဆိုတာ နားလည္ျပီးသားျဖစ္မယ္လို႔ ေမွ်ာ္လင့္ပါတယ္။ ဒါမွ မဟုတ္ရင္လဲ Template>>Customize>>Add Css>>Add Custom Css မွာ ထည့္ရပါမယ္။ ျပီးရင္ေတာ့ Css code ကို Posting ပိုင္းမွာ ခ်ိတ္ဆက္မိေအာင္ <div class="CSS name"> ဆိုျပီး ခ်ိတ္ဆက္ရပါမယ္။ ကိုယ္ဖာသာ css code ေလးေတြ ကို ဆက္ျပီး ကလိႏိုင္ေအာင္ က်ေနာ္ သိသေလာက္လဲ ပဲ ေျပာျပတာပါ။ ျပည့္စံုမႈ ရွိမ်ာ မဟုတ္ပါ။ ဆရာမ်ားအေနႏွင့္လဲ အျပဳသေဘာျဖင့္ ဝင္ေရာက္ေဆြးေႏြးေပးေစလိုပါတယ္။

ေအာက္မွာ css code ေလးေတြ ေပးလိုက္ပါတယ္။ ဒါကေတာ့ ပံု(img) ေလးရဲ႕ အနားစြန္းေလး(corners) ေတြကို Rounded လုပ္မွာ ျဖစ္လို႔  .roundedcorners img လို႔ေပးထားလိုက္ပါတယ္။

ပံု(၂) ကို သံုးထားေသာကုဒ္

.roundedcorners2 img {
border: 2px solid #BADA55;
margin: 0;
padding: 0;
border-radius: 45px;
-moz-border-radius: 45px;
}

ပံု(၃)ကို ကစာထားေသာ ကုဒ္

.roundedcorners img {
border: 2px solid #BADA55;
margin: 0;
padding: 0;
border-radius: 900px;
-moz-border-radius: 900px;
}

ဒီေနရာမွာ က်ေနာ္တို႔ ကစားႏိုင္တာေတြကေတာ့
border: 2px solid #BADA55;
margin: 0;
padding: 0;
border-radius: 900px;
-moz-border-radius: 900px;
ေတြမွာ px (Pixel) ေတြကို ကိုလိုခ်င္သလို ေျပာင္းျပီးကစားႏိုင္ပါတယ္။ D အပိုင္းကေတာ့ css ပိုင္းမွာ ကိုယ္သလို ေျပာင္းျပီး Template ကို Save လိုက္ပါ။
ေနာက္အပိုင္းကေတာ့ က်ေနာ္တို႔ Post တင္ရာမွာ ျပင္ဆင္ရမွာပါ။
မိမိ Post တင္ရာမွာ ဒီလိုမ်ိဳး ပံုေလးေတြကို ဒီဇိုင္ႏွင့္ တင္မယ္ဆိုရင္ေတာ့ Setting>>Post and Comment>> Comment Form Message ဆိုတာမွာ အျမဲ သံုးလို႔ ရေအာင္ထည့္ထားလို႔ ရပါတယ္။
ေအာက္က code ေလးေတြကိုေပါ့။ ေအာက္မွာ က်ေနာ္ စမ္းေရးျပပါမယ္။
Post တင္ရာမွာ HTML ကို ေရြးပါမယ္။


<div class="roundedcorners"><img src="ပံု၏URL ကို ထည့္ပါ"/></div>

<div class="roundedcorners2"><img src="ပံု၏URL ကို ထည့္ပါ"/></div>
လို႔ ေရးရင္ က်ေနာ္ ဒီပို႔စ္မွာ တင္ထားတဲ့ ပံုေလးေတြ လို မိမိ၏ Post မွာ ျမင္ေတြ႕ႏိုင္မွာ ျဖစ္ပါတယ္ ခင္ဗ်ာ။
အားလံုးပဲ အဆင္ေျပမယ့္ေမွ်ာ္လင့္ပါတယ္ အဆင္ မေျပတာေလးေတြ ရွိပါက ေကာ့မက္ေရးထားခဲ့ေပးပါ။ က်ေနာ္ သိသေလာက္ေလးကို အစြမ္းကုန္ေျပာျပပါမယ္ခင္ဗ်ာ။ ေပ်ာ္ရႊင္ခ်မ္းေျမ့ၾကပါေစ။

Pop up Enlarge image css code

css ကုဒ္ေလးေတြနဲ႔ Bolgger မွာ ကစားလိုသူမ်ား အတြက္ပါ

• 
  ဘူးေရမ်က္ရြာ
• 
  css code မ်ား စမ္းၾကည့္ျခင္း
• 
  မ်က္စိေနာက္ေအာင္လုပ္တာ

css code

ul.enlarge{ list-style-type:none; /*remove the bullet point*/ margin-left:0; } ul.enlarge li{ display:inline-block; /*places the images in a line*/ position: relative; z-index: 0; /*resets the stack order of the list items - later we'll increase this*/ margin:10px 40px 0 20px; } ul.enlarge img{ background-color:#eae9d4; padding: 6px; -webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75); -moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75); box-shadow: 0 0 6px rgba(132, 132, 132, .75); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } ul.enlarge span{ position:absolute; left: -9999px; background-color:#eae9d4; padding: 10px; font-family: 'Droid Sans', sans-serif; font-size:.9em; text-align: center; color: #495a62; -webkit-box-shadow: 0 0 20px rgba(0,0,0, .75)); -moz-box-shadow: 0 0 20px rgba(0,0,0, .75); box-shadow: 0 0 20px rgba(0,0,0, .75); -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius:8px; } ul.enlarge li:hover{ z-index: 50; cursor:pointer; } ul.enlarge span img{ padding:2px; background:#ccc; } ul.enlarge li:hover span{ top: -300px; /*the distance from the bottom of the thumbnail to the top of the popup image*/ left: -20px; /*distance from the left of the thumbnail to the left of the popup image*/ } ul.enlarge li:hover:nth-child(2) span{ left: -100px; } ul.enlarge li:hover:nth-child(3) span{ left: -200px; } /**IE Hacks - see http://css3pie.com/ for more info on how to use CS3Pie and to download the latest version**/ ul.enlarge img, ul.enlarge span{ behavior: url(pie/PIE.htc); }

html code

<ul class="enlarge">
    <li><img src="assets/image-enlarge01-sml.jpg" width="150px" height="100px" alt="4Wadi" /><span><img src="ဒီမွာ ပံု၏ URL ကိုထည့္" alt="Deckchairs" /><br />ဒီမွာ အေၾကာင္းအရာ စာထည့္</span></li>
    <li><img src="assets/image-enlarge02-sml.jpg" width="150px" height="100px" alt="4Wadi" /><span><img src="ဒီမွာ ပံု၏ URL ကိုထည့္" alt="Blackpool sunset" /><br />ဒီမွာ အေၾကာင္းအရာ စာထည့္</span></li>
    <li><img src="assets/image-enlarge03-sml.jpg" width="150px" height="100px" alt="4Wadi" /><span><img src="ဒီမွာ ပံု၏ URL ကိုထည့္" /><br />ဒီမွာ အေၾကာင္းအရာ စာထည့္</span></li>
    </ul>