မဂၤလာပါ ေအာင္ဟိန္း နည္းပညာမွ ႀကိဳဆိုပါတယ္...
Blog မွာေၾကာ္ျငာမ်ား Post မ်ား Label စသည္ျဖင့္ Link ခ်ိတ္ပီးေဖၚျပခ်င္တဲ့ဘေလာ့
သူငယ္ခ်င္းအတြက္တင္ေပးလုိက္ပါတယ္၊
အရင္ဆံုးကိုယ့္ရဲ႕ Blog ကို Sing in ၀င္ပါ
ေအာက္မွာျပထားတဲ့အတိုင္း Add a Gadget ကိုႏိုပ္ျပီး HTML/JAVA Script ကိုႏုိပ္ပါ
ေအာက္ပါ Code မ်ားကိုကူးထဲ့ျပီး Save ပါ။
<style type="text/css"> .container1 { width: 660px;padding: 0;margin: 0 auto; } .folio_block { position: absolute;left: 50%; top: 50%;margin: -140px 0 0 -395px;} .main_view {float: left;position: relative;} /*--Window/Masking Styles--*/ .window {-moz-box-shadow: 0px 0px 5px #303030; -webkit-box-shadow: 0px 0px 5px #303030; box-shadow: 0px 0px 5px #303030;border:1px solid #000000;height:240px; width: 660px; margin-top:15px;overflow: hidden; /*--Hides anything outside of the set width/height--*/ position: relative; } .image_reel { position: absolute;top: 0; left: 0; } .image_reel img {float: left;} .paging_btrix { position: absolute;bottom: 10px; right: -7px;width: 178px; height:47px;z-index: 100; /*--Assures the paging stays on the top layer--*/text-align: center; line-height: 40px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGHHJXgWgc9C2AGdGze8R3NKHQpI1CZ1llWAPvAF9OXrqWdvlfhVofnv67R5975kWRawZTV7FQoJiFj5mvJwG-S_eH159vqEZq05hu-6GJ9UfnqZpnamXcMxgpFlTaa_yLib5SKgc8bUQ/s1600/paging_btrix_bg2.png) no-repeat; display: none; } .paging_btrix a { padding: 5px;text-decoration: none;color: #fff; } .paging_btrix a.active { font-weight: bold; background: #920000; border: 1px solid #610000; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; } .paging_btrix a:hover {font-weight: bold;} </style> <!-- bof Automatic Image Slider w/ CSS & jQuery from Soh Tanaka --> <div class="container1"> <div class="main_view"> <div class="window"> <div class="image_reel"> <a href="(link ထဲ့ရန္)"><img src="(ပံု Link ထဲ့ရန္)" alt="" /></a> <a href="(link ထဲ့ရန္)"><img src="(ပံု Link ထဲ့ရန္)" alt="" /></a> <a href="(link ထဲ့ရန္)"><img src="(ပံု Link ထဲ့ရန္)" alt="" /></a> <a href="(link ထဲ့ရန္)"><img src="(ပံု Link ထဲ့ရန္)" alt="" /></a> </div> </div> <div class="paging_btrix"> <a href="#" rel="1">1</a> <a href="#" rel="2">2</a> <a href="#" rel="3">3</a> <a href="#" rel="4">4</a> </div> </div> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { //Set Default State of each portfolio piece $(".paging_btrix").show(); $(".paging_btrix a:first").addClass("active"); //Get size of images, how many there are, then determin the size of the image reel. var imageWidth = $(".window").width(); var imageSum = $(".image_reel img").size(); var imageReelWidth = imageWidth * imageSum; //Adjust the image reel to its new size $(".image_reel").css({'width' : imageReelWidth}); //paging_btrix + Slider Function rotate = function(){ var triggerID = $active.attr("rel") - 1; //Get number of times to slide var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide $(".paging_btrix a").removeClass('active'); //Remove all active class $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function) //Slider Animation $(".image_reel").animate({ left: -image_reelPosition }, 500 ); }; //Rotation + Timing Event rotateSwitch = function(){ play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds $active = $('.paging_btrix a.active').next(); if ( $active.length === 0) { //If paging_btrix reaches the end... $active = $('.paging_btrix a:first'); //go back to first } rotate(); //Trigger the paging_btrix and slider function }, 5000); //Timer speed in milliseconds (3 seconds) }; rotateSwitch(); //Run function on launch //On Hover $(".image_reel a").hover(function() { clearInterval(play); //Stop the rotation }, function() { rotateSwitch(); //Resume rotation }); //On Click $(".paging_btrix a").click(function() { $active = $(this); //Activate the clicked paging_btrix //Reset Timer clearInterval(play); //Stop the rotation rotate(); //Trigger rotation immediately rotateSwitch(); // Resume rotation return false; //Prevent browser jump to link anchor }); }); </script>
အစားထိုးရမဲ့ေနရာေတြမွာေဖၚျပမဲ့ Link နဲ႕ ပံုရဲ႕ Link ကိုအစားထိုးေပးပါ
<a href="(link ထဲ့ရန္)"><img src="(ပံု Link ထဲ့ရန္)" alt="" /></a>
ေဖၚျပစရာ ၄ ခုနဲ႕မလံုေလာက္ပါကအထက္ပါ Code ကိုေနာက္ထပ္ကူးပီးတပ္တိုးႏိုင္
ပါတယ္ဗ်ာ....
