kp3နည္းပညာ၊၂၅၅၊ဘေလာ့မွာ Subscribe Section ကိုလွလွေလးထည့္နည္း (၁)

အခုတင္မယ့္ Post ေလးကေတာ့အခုတေလာအလုပ္ေတြေၾကာင့္အသစ္ေတြမတင္ျဖစ္လို႕ ဘေလာ့ မိတ္ေဆြ ေတြအတြက္ Subscribe Sectionလွလွေလးတခုထပ္တင္ေပးလိုက္ပါတယ္။ ဒီ Subscribe Section က အခုတင္ တာနဲ႕ဆိုရင္ႏွစ္မ်ိဳးရွိျပီေပါ့ေနာ္။ေအာက္မွာပံုနဲ႕တကြျပထားပါတယ္။ပထမတင္ ထားဒါေလးကေတာ့ kp-3နည္းပညာ၊၁၇၃၊  မွာရွိပါတယ္။ပထမနဲ႕ဒုတိယကြာျခားခ်က္ကေတာ့ ပထမမွာ HTML Code ကိုထည့္ရ တယ္၊ အခုဟာကေတာ့ CSS Code ထဲကိုထည့္ရတယ္ထာပါဘဲ။ ႏွစ္ခုစလံုးကေတာ့အတူတူပါဘဲ။

ပထမရဲ႕ DEMO ကိုဒီမွာသြားၾကည့္လို႕ရပါတယ္။

အခုတင္တဲ့ DEMO ကေတာ့ဒီမွာသြားၾကည့္လိုက္ပါ။

ပထမအဆင့္>>>

၁။Dashboard

၂။Layout

၃။Edit HTML

ေအာက္က Code ကိုရွာပါ၊

]]></b:skin>

ေတြ႕ျပီဆိုရင္အေပၚမွာေအာက္က Code ကိုထည့္လိုက္ပါ။

#subscribe{list-style:none; margin:0px}
#subscribe li{padding:10px 5px; position:relative; margin-top:0; margin-right:0; margin-bottom:5px; margin-left:0; height:64px; opacity:0.75; -moz-opacity:0.75}
#subscribe li:hover{ background-color:#f4f4f4; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -khtml-border-radius:5px; opacity:1; -moz-opacity:1; -webkit-transition:opacity 1s ease-out}
#subscribe li img{float:left; position:relative; padding:0px; margin:0px 10px 0px 0px}
#subscribe li h4{margin:-6px 0 3px 83px; font-size:15px; line-height:26px; color:#23a69d; text-shadow:1px 1px 0px #fff; font-family:Helvetica,Arial,sans-serif; font-weight:bold; clear:none}
#subscribe li p{margin:0 0 0 0; font-family:Trebuchet MS,sans-serif; font-size:13px; letter-spacing:-0.02em; clear:none; text-indent:0px}
#subscribe li a.linkblock{background:none; border:none; top:0; left:0; right:0; bottom:0; width:100%; height:100%; position:absolute; z-index:50}

၄။Save Template ကိုႏိုပ္ပါ။မျပီးေသးပါဘူးေနာက္တဆင့္က်န္ပါေသးတယ္ေအာက္မွာ>>>>

ဒုတိယအဆင့္>>>

၁။Layout

၂။Page Element

၃။Add a gadget သြားမယ္၊ေအာက္က

၄။Html/java script မွာေအာက္က Code ကိုထည့္လိုက္ပါ။

<ul id="subscribe">
<li>
<a class="linkblock" href="မိမိရဲ  ့-FEED-URLကိုဒီမွာထည့္ေပးလိုက္ပါ"></a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOIUl1krTVCzknRvGv6w3INQvKoNqPo2X7qeDmcsygNfTzT3yq4QxmuzcRdWGwThE8wb_kRl-JHVdnzoGnY9QWRNB8VFIJ6f1Sq-0PIPrWdyWNSWFAWXZ452mnmQ1qMWC34alMakdqbMw3/" alt="RSS Feed" />
<h4>RSS Feed</h4>
<p>Subscribe To RSS Feed</p>
</li>
<li>
<a class="linkblock" href="မိမိရဲ  ့-EMAIl-FEED-URLကိုဒီမွာထည့္ေပးလိုက္ပါ"></a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtsqAVXa60h2DdrhTYrZJVnyII1kXdf0uy7cj4q8JKciGQvV3XxVYxaULLlnyJ5_Oq0Gq1hZM8-ZbicM_kP7dlkilMYWPEh9FtwKPDqunPYJvnzNRFGp0WAddzAerPwIBjgoRdpfRtkCVz/" alt="E-Mail Delivery" />
<h4>E-Mail Delivery</h4>
<p>Subscribe To Email</p>
</li>
<li>
<a class="linkblock" href="မိမိရဲ  ့-TWITTER-URLကိုဒီမွာထည့္ေပးလိုက္ပါ" title="Follow us on Twitter"></a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCrFivYNXGUvn5ldF9PdxiVBdyyMyDc6GXYWQDUTIxhsjdDhh0JNHHCmKWetuw05fV-aKvW1fwoD2KDSbRkuZKMdIvGJUnEnKw5WzLRTgHajm4JCXSWAAr12Vk3McIMvnOHNa6jvHpXMlB/" alt="E-Mail Delivery" />
<h4>Twitter</h4>
<p>Follow Us On Twitter.</p>
</li>
</ul> 

၅။Save ကိုႏိုပ္လိုက္ပါ။ျပီးပါျပီ။။

မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစခ်င္ပါတယ္၊
ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ kp3မိသားစု

Related Post

Posted in: FEED