Expandable Post Effect  

Tuesday, February 19, 2008

Blogspot မွာ Post ေလးေတြကိုေခါက္သိမ္းဖို႔ hackosphere blog ရဲ႔ Peekoboo Effect ေလးေတြကို ကၽြန္ေနာ္တို႔ အားလံုး သံုးေနၾကပါတယ္။ ဒါေပမဲ႔ တစ္ခါတေလ တစ္ခ်ိဳ႔ Templates ေတြမွာ Peekoboo Effect ထဲ႔ဖို႔ေနရာကို ရွာမရတဲ႔ အခါ Peekoboo Effect အစား ဒီ Expandable Post Effect ေလးကိုသံုးလို႔ရပါတယ္ ။
၁) ပထမဆံုးအေနနဲ႔ ဒီ Java Script
<script type="text/Javascript">

function togglecomments (postid) {

var whichpost = document.getElementById(postid);

if (whichpost.className=="commentshown")

{ whichpost.className="commenthidden"; }

else { whichpost.className="commentshown"; }

} </script>
ေလးကို Blog template ရဲ႔ Layout >> Edit HTML မွ </head> မတိုင္ခင္မွာထည္႔လိုက္ပါ။
၂)ျပီးရင္ ဒီ CSS Code
.commenthidden {display:none} .commentshown {display:inline}
ကို အေေပၚပိုင္းက CSS Code ေတြရွိတဲ႔ေနရာမွာ ထားလိုက္ပါ။
၃)ေနာက္ဆံုးအေနနဲ႔ ဒီ HTML Code
<a aiotitle="click to expand" href="javascript:togglecomments('Number')">Link1</a>
<div class="commenthidden" id="Number">Write Text To Hide</div>
ကို Settings >> Formatting ရဲ႔ ေအာက္ဆံုးမွာရွိတဲ႔ Post Template ဆိုတဲ႔ Box ေလးမွာထည္႔႔ျပီး Save Settings ကိုႏွိပ္လိုက္ပါ။ ဒီေနရာမွာ Peekoboo Effect နဲ႔မတူတာက Expandable Effect တစ္ခထဲ႔တိုင္း Number ဆိုတဲ႔ေနရာမွာ ဂဏန္းတစ္ခုကို တူေအာင္ ထဲ႔ေပးရမွာျဖစ္ပါတယ္။ ဆိုလိုတာက ပထမ Effect အတြက္ Number ေနရာမွာ 1 ကိုအသံုးျပဳထားရင္ ဒုတိယ Effect အတြက္ တစ္ျခားဂဏန္း ကို အသံုးျပဳရမွာပါ။ Number ေနရာမွာ Charater ကိုသံုးရင္လဲရပါတယ္။ Expandable Effect တစ္ခုအတြက္ Number/Charater /Number+Charater ကိုတူေအာင္ ႏွစ္ခါထည္႔ေပး ဖို႔လိုတာပါ ။

AddThis Social Bookmark Button

Email this post


0 comments: to “ Expandable Post Effect