San Htaik Htar: Add A Attractive SlideShow Widget for Blogger Blog

Thursday, May 15, 2014

Add A Attractive SlideShow Widget for Blogger Blog

သူငယ္ခ်င္းတို႔ရဲ႕ Blog slidebar မွာေၾကာ္ျငာအျဖစ္ဓါတ္ပံုေလးေတြကိုစလိုက္ရႈိးအျဖစ္
တစ္ပံုျပီးတစ္ပံုေအာ္တိုေျပာင္းေပးေနတာမ်ိဳးလုပ္ခ်င္တယ္ဆိုရင္ေတာ့ေအာက္မွာေသခ်ာ
ရွင္းျပထားပါတယ္။ ပထမဆံုး ဒီေနရာမွာ နမူနာသြားၾကည့္ပါ။လြယ္လြယ္ေလးပါ။
ပထမဆံုး သူငယ္ခ်င္းတို႔ရဲ႕ဘေလာ့စ္က Add a Gadget ကိုသြားျပီး HTML / JavaScript

ကေနေအာက္ကုဒ္ကိုယူျပီးထည့္လိုက္ပါ။

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
   $('#btrix_slider3').s3Slider({
      timeOut: 3000
   });
});
</script>
<style>
#btrix_slider3 {
   width: 300px; /* Keep it 20px-40PX greater than ACTUAL Image size */
   height: 200px;
   position: relative;
   overflow: hidden;
   margin-left: 0;
}
#btrix_slider3Content {
   width: 300px;
   position: absolute;
   top: 0;
   margin-left: 0;
}
.btrix_slider3Image {
   float: left;
   position: relative;
   display: none; top: 0;
   border:1px solid #ddd;
}
.btrix_slider3Image span {
position: absolute;
    font: 10px/15px sans-serif,Arial, Helvetica;
    padding: 10px 10px;
    background-color: #000;
    color: #fff;
    filter:'alpha(opacity=70)';
    -moz-opacity: .5;
    -khtml-opacity: .5;
    opacity: .5;
    text-align:justify;
}
.btrix_slider3Image span a {
text-decoration:underline;
color:#FE6602;
}
.clear {
   clear: both;
}
.top {
    top: 0;
    left: 0;
    width: 300px !important;
    height: 70px;
}
.bottom {
    bottom: 0;
    left: 0;
    width: 300px !important;
    height:90px;
}
.left {
    left: 0;
    top: 0;
    width: 110px !important;
    height: 200px;
}
.right {
    right: 0;
    bottom: 0;
    width: 80px !important;
    height: 200px;
}
</style>

<br />
<div id="btrix_slider3">
<ul id="btrix_slider3Content">
<li class="btrix_slider3Image">
<img src="http://i1276.photobucket.com/albums/y464/yangonthar/c01249e4-c0d1-49ed-8950-1a76d16fe9d9_zps1e2b0131.jpg" />
<span class="left"><h3>
HEADING HERE</h3>
DESCRIPTION HERE</span>
</li>
<li class="btrix_slider3Image">
<img src="http://i1276.photobucket.com/albums/y464/yangonthar/9a50b795-b496-402a-8a78-b898bebc677f_zps8df10932.jpg" />
<span class="left"><h3>
HEADING HERE</h3>
DESCRIPTION HERE</span>
</li>
<li class="btrix_slider3Image">
<img src="http://i1276.photobucket.com/albums/y464/yangonthar/ec66ede8-2d1c-4049-acb8-b26ef6c39fd4_zps0e05e3e7.jpg" />
<span class="top"><h3>
HEADING HERE</h3>
DESCRIPTION HERE</span>
</li>
<li class="btrix_slider3Image">
<img src="http://i1276.photobucket.com/albums/y464/yangonthar/27243500-a660-4764-8a13-6d5cab9654c4_zpse545aa69.jpg" />
<span class="bottom"><h3>
HEADING HERE</h3>
DESCRIPTION HERE</span>
</li>
<li class="btrix_slider3Image">
<img src="http://i1276.photobucket.com/albums/y464/yangonthar/d132b815-6d7d-490a-b87b-3cc68d224697_zps0d47ae02.jpg" />
<span class="bottom"><h3>
HEADING HERE</h3>
DESCRIPTION HERE</span>

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

<br />

အနီ နဲ႔ေရးထားတဲ့ေနရာမွာအျမင့္အက်ယ္ကိုလိုသလိုခ်ိန္ပါ။
ခရမ္း နဲ႔ေရးထားတဲ့ေနရာမွာ ပိုစ့္နဲ႔ပတ္သက္တာ (or) ကိုယ္ေရးခ်င္တာေရးပါ။
အစိမ္း နဲ႔ေရးထားတဲ့ေနရာမွာ ကိုယ့္ထည့္မယ့္ဓါတ္ပံုရဲ႕ Link ကိုထည့္ေပးပါ။
အိုေကအားလံုးျပီးရင္ Save ျပီးျပန္ၾကည့္ၾကည့္ေပါ့ေနာ္။
ရန္ကုန္သား(နည္းပညာျမိဳ႕ေတာ္)

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)