Featured Content Slider for Blogger Using jQuery

            သူငယ္ခ်င္းတို႕ရဲ႕ဘေလာ့စ္မွာ ေၾကာ္ျငာပံုပဲျဖစ္ျဖစ္ အလွပံုပဲျဖစ္ျဖစ္ ပုံေလးေတြစလိုက္ရိႈးလုပ္ခ်င္တယ္
ဆိုရင္ေအာက္မွာလုပ္ပံုလုပ္နည္း ေသခ်ာရွင္းျပထားတယ္။ ပံုေနရာမွာ ကိုယ္ၾကိဳက္တဲ့ပံုျပီးေတာ့
စာေတြကိုလိုသလို ထည့္လို႔ရပါတယ္။   က်ြန္ေတာ္လုပ္ထားတာ   ဒီေနရာမွာ၀င္ၾကည့္  လိုက္ပါါ။
ၾကိဳက္ႏွစ္သက္လို႔ လုပ္ခ်င္တယ္ဆိုရင္ ေအာက္မွာအေသးစိတ္ရွင္းျပထားပါတယ္။
ပထမဆံုး မိမိဘေလာ့စ္ရဲ႕ Design >> Templates >> Edit HTML ကို၀င္လိုက္ပါ။ အရင္ဆံုး Backup လုပ္ထား
ဖို႔မေမ့နဲ႔ေနာ္။

Ctrl + F နဲ႔   ]]>< /b:skin> ဒီကုဒ္ေလးကိုရွာလိုက္ပါ။
တစ္ခ်ိဳ႕ Templates ေတြမွာ ဒီလိုျဖစ္ေနတတ္ပါတယ္ </b:skin>...</b:skin>  ဒီလိုျဖစ္ေနရင္ အဲ့ဒီ့ 2ခုၾကားမွာ
ကလစ္တစ္ခ်က္ႏွိပ္လိုက္ပါ။ ဖြက္ထားတဲ့ DATA ေတြေပၚလာပါလိမ့္မယ္။

ခုနကရွာမေတြ႔တဲ့   ]]>< /b:skin> ကုဒ္ေလးေပၚလာပါျပီ။ အဲ့ဒီ့ကုဒ္ေလးရဲ႕အေပၚမွာေအာက္ကကုဒ္
ကိုကူးျပီး Paste လုပ္လိုက္ပါ။

.#featured{ width:400px; padding-right:250px; position:relative; height:250px; background:#fff; border:5px solid #ccc; } #featured ul.ui-tabs-nav{ position:absolute; top:0; left:400px; list-style:none; padding:0; margin:0; width:250px; } #featured ul.ui-tabs-nav li{ padding:1px 0; padding-left:13px; font-size:12px; color:#666; } #featured ul.ui-tabs-nav li span{ font-size:11px; font-family:Verdana; line-height:18px; } #featured .ui-tabs-panel{ width:400px; height:250px; background:#999; position:relative; overflow:hidden; } #featured .ui-tabs-hide{ display:none; } #featured li.ui-tabs-nav-item a{/*On Hover Style*/ display:block; height:60px; color:#333; background:#fff; line-height:20px; outline:none; } #featured li.ui-tabs-nav-item a:hover{ background:#f2f2f2; } #featured li.ui-tabs-selected{ /*Selected tab style*/ background:url('selected-item.gif') top left no-repeat; } #featured ul.ui-tabs-nav li.ui-tabs-selected a{ background:#ccc; } #featured ul.ui-tabs-nav li img{ float:left; margin:2px 5px; background:#fff; padding:2px; border:1px solid #eee; } #featured .ui-tabs-panel .info{ position:absolute; top:180px; left:0; height:70px; width: 400px; background: url('transparent-bg.png'); } #featured .info h2{ font-size:18px; font-family:Georgia, serif; color:#fff; padding:5px; margin:0; overflow:hidden; } #featured .info p{ margin:0 5px; font-family:Verdana; font-size:11px; line-height:15px; color:#f0f0f0; } #featured .info a{ text-decoration:none; color:#fff; } #featured .info a:hover{ text-decoration:underline; }

ျပီးရင္ </head> ဆိုတဲ့ကုဒ္ကိုထပ္ရွာပါ။အဲ့ဒီ့ ေအာက္မွာပဲရွိပါတယ္။

မျမင္ရရင္ပံုႏွိပ္ျပီးၾကည့္ပါ။
ေတြ႔ရင္အဲ့ဒီ့ ကုဒ္ရဲ႕အေပၚမွာပဲေအာက္ကကုဒ္ကိုကူးျပီး Paste လုပ္လိုက္ပါ။
အေပၚမွာေနရာမရွိရင္လည္း</head>  ေရွ႔မွာ Enter ေခါက္ျပီး ေနာက္တစ္ေၾကာင္းဆင္းလိုက္ပါ။
 

. <a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/jquery-1.3.2.min.js' type='text/javascript'/> <script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/jquery-1.5.3-ui.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function(){ $(&quot;#featured &gt; ul&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 5000, true); }); </script>

 ျပီးရင္ Save Template 
ေနာက္ျပီး က်ြန္ေတာ္တို႔ Layout -ကေန ပိုစ့္အေပၚဘားမွာရွိတဲ့ Add a Gadget ကိုႏွိပ္ျပီး
'HTML/Javascript'  ကိုယူလိုက္ျပီး ေအာက္ကကုဒ္ကို ကူးထည့္ေပးလိုက္ပါ။

. <div id='featured'> <ul class='ui-tabs-nav'> <li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#fragment-1'><img alt='pic1' src='http://i49.tinypic.com/e1aohv.jpg'/><span>ရန္ကုန္သားနည္းပညာ</span></a></li> <li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-2'><img alt='blogger' src='http://i438.photobucket.com/albums/qq108/fooble11/image2-small.jpg'/><span>ရန္ကုန္သားနည္းပညာ</span></a></li> <li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-3'><img alt='buzz' src='http://i438.photobucket.com/albums/qq108/fooble11/new1.jpg'/><span>ရန္ကုန္သားနည္းပညာ</span></a></li> <li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-4'><img alt='chat' src='http://i50.tinypic.com/34xfg4m.jpg'/><span>ရန္ကုန္သားနည္းပညာ</span></a></li> </ul> <!-- First Content --> <div class='ui-tabs-panel' id='fragment-1' style=''> <img alt='mac' src='http://i47.tinypic.com/rsbi80.jpg'/> <div class='info'> <h3><a href='#'>ရန္ကုန္သားနည္းပညာ</a></h3> <p>Description goes here, this is just a test description....<a href='http://bdlab.blogspot.com/'>read more</a></p> </div> </div> <!-- Second Content --> <div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''> <img alt='' src='http://i50.tinypic.com/33kprh5.jpg'/> <div class='info'> <h3><a href='#'>ရန္ကုန္သားနည္းပညာ</a></h3> <p>Description goes here, this is just a test description....<a href='#'>read more</a></p> </div> </div> <!-- Third Content --> <div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''> <img alt='' src='http://i47.tinypic.com/2191lqt.jpg'/> <div class='info'> <h3><a href='#'>ရန္ကုန္သားနည္းပညာ</a></h3> <p>Description goes here, this is just a test description....<a href='#'>read more</a></p> </div> </div> <!-- Fourth Content --> <div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''> <img alt='' src='http://i48.tinypic.com/10pwp3o.jpg'/> <div class='info'> <h3><a href='#'>ရန္ကုန္သားနည္းပညာ</a></h3> <p>Description goes here, this is just a test description....<a href='#'>read more</a></p> </div> </div> </div>

ရန္ကုန္သားနည္းပညာ ဆိုတဲ့ေနရာမွာ မိမိၾကိဳက္ရာေရးနိုင္ပါတယ္။ မိမိၾကိဳက္ရာဓါတ္ပံုေတြ
ထည့္မယ္ဆိုရင္ေတာ့ အရင္ဆံုး Hosting Image Upload ဆိုဒ္မွာဓါတ္ပံုကို Upload လုပ္ျပီး
သူ႔ရဲ႕ Link/URL ကိုယူလာျပီး နဂိုရွိေနတဲ့ ဓါတ္ပံုလင့္မွာအစားထိုးလိုက္ပါ။ ဓါတ္ပံုေတြကို
Hosting Image Upload ဆိုဒ္မွာဘယ္လိုလုပ္ရတယ္ဆိုတာ ေနာက္ပိုင္းေျပာျပသြားပါမယ္။
အကုန္လံုးထည့္ျပီးသြားရင္ SAVE လုပ္ဖို႔မေမ့နဲ႔ေနာ္။
                                       post  by  နည္းပညာျမိဳ႕ေတာ္  http://mm-knowledge.blogspot.com 

အားလံုးအဆင္ေျပမွာပါ။ ေနာက္ထပ္ Blog နဲ႔ပတ္သက္တဲ့ဒီလိုပို႔မ်ားကို က်ြန္ေတာ့္

ဘေလာ့စ္ရဲ႕ လိုခ်င္တာဒီမွာရွာ ဆိုတဲ့ Lable မွာ BLOG နည္းပညာ လို႔ေရးထားပါတယ္ ၀င္ေမႊလို႔ရပါတယ္။