Showing posts with label widget. Show all posts
Showing posts with label widget. Show all posts

2012/09/11

Томоохон сайтуудын цаг агаарыг блогтоо ашиглах

- 1 Comment
Халуун намрын цагаар хүйтэний эрч чангарчих юм аа. Энэ жил эхнээсээ л бороо, хуртай жил байлаа. Зун ч олигтой нар гараагүй, намрын налгар өдрүүд ч хайчив гэмээр л байна дөө. За за хичээлдээ ороё байз. Энэ удаагийн хичээлийг бэлдэх болсон шалтгаан нь блогчид маань болон ер нь хүн бүр энэ тэнгэрийн байгаа байдлыг эртхэн шиг мэдэж байхгүй бол хувцсаа тааруулж өмсөж чадахгүй балрах үе хэн хүнд бишгүй тохиолдоод байдаг шүү. Иймээс блогтоо цаг агаар оруулцгаая, хэхэ бодуул өглөө бүр өөрийнхөө блогыг хэдэн хүн орж, хэн сэтгэгдэл бичиж гээд шалгадаг л байлгүй, тэгэж явахдаа цаг агаараа харчаад, тэнгэрийн байдлыг мэдсэн юм чинь тохируулж харьцана шүү дээ. За ингээд хичээлээ эхлэе. Энэ их амархан гэж байгаа.

1. Blogger.com, blog.gogo.mn, bblog.mn, miniih.com гээд өөрсдийн блог хөтөлдөг аль сайтруугаа хэрэглэгчийнхээ эрхээр нэвтрэн ороорой.

2. Блог платформ(Blogger, Gogo Blog, Banjig Blog, Miniih.com, Delhii.net... гэх мэт) бүрт виджет нэмэх хэсэг байгаа тэндээс HTML нэмэх гэснийг сонгоод доорхи кодуудаас аль дуртайгаа хуулж тавиад хадгалаад болно доо.

Масс.мн сайтын цаг агаарын код:
<iframe scrolling="no" frameborder="0" src="http://mass.mn/modules/massweather/index.html" style=" margin:0px 0px 5px 0px; border:none; width: 140px; height: 105px;"></iframe>

Гого.мн сайтын цаг агаарын код:
<iframe frameborder="0" src="http://news.gogo.mn/weather/today/weather.html" width="155" style="height: 104px;" scrolling="no"></iframe>

weather.az.mn сайтын цаг агаарын код:
<iframe src="http://weather.az.mn/iframe.php?c=MGXX0003&ln=en" style="width:100px; overflow:hidden; height:200px; border:0px; padding:0px;" ></iframe>

Жич: Блогтоо тохируулаад width хэсэгт өргөн, height хэсэгт өндрийн хэмжээг тохируулаарай. Ингээд боллоо, Амжилт

Масс.мн сайтын цаг агаарыг ашигласан жишээ блог үзэхийг хүсвэл энд дар.
[Continue reading...]

2012/05/02

Хөндлөн байрлах нуугддаг гоёмсог Share Bar нэмэх

- 2 Comment

Блогдоо хөдөлгөөнтэй(нуугддаг) хөндлөн Share bar нэмэх хичээлийг энэ удаагийн бичлэгээрээ орууллаа. Блогоо сошиал медиа сайтуудтай хялбархан холбох, мөн блогийг тань үзсэн хүмүүс өөрийн фэйсбүүк, твийтер хуудсаараа бусдад түгээх боломжыг олгох зорилгоор энэхүү Bar-г блогынхоо дээд хэсэгт нэмэх хэрэгтэй. Өнгө дизайны хувьд ч таны блогт тээргүй байх болно.
Блогтоо суулгахын тулд:
Blogger дээр:
1. Blogger.com - Dashboard > Template 
2. Блогынхоо кодон дотроос </head> тагыг хайж олно.
3. </head> тагын өмнө дараах кодыг хуулж тавина.
<div class="rtcv">
&lt;script type=&quot;text/javascript&quot;&gt;
var addthis_config = {
    bar_show_below : 150 }
&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;http://s7.addthis.com/js/300/addthis_widget.js&quot;&gt;&lt;/script&gt;
</div>

4. Дээрхи кодыг хуулж тавьсаны дараа </body> тагыг хайж олно.
5. Яг өмнө нь дараах кодыг хуулж тавина.
<div class="addthis_bar addthis_bar_medium"> <label>Share This Page:</label> <div class="addthis_toolbox addthis_default_style addthis_32x32_style"> <span><a class="addthis_button_preferred_1"></a></span> <span><a class="addthis_button_preferred_2"></a></span> <span><a class="addthis_button_preferred_3"></a></span> <span><a class="addthis_button_preferred_4"></a></span> <span><a class="addthis_button_compact"></a></span> <span><a class="addthis_counter addthis_bubble_style"></a></span> </div> </div>

6. Дээрхи бүх алхамыг хийж дуусаад хадгалаад өөрийн блог руугаа ороод хараарай гоёмсог Share bar таныг угтах болно.

Demo Blog үзэхийг хүсвэл энд дараарай.
[Continue reading...]

2012/03/31

Блогын холбоосуудад солонгордог эффект оруулах /Rainbow Color Effect/

- 5 Comment
Блог дээр солонгордог холбоос оруулах хичээл энэ удаад бэлдлээ. Энэ их хялбар байх болно. Та аль ч платформ дээр блог хөтөлдөг байлаа ч доорхи кодыг блогтоо виджет хэлбэрээр нэмж өгсөнөөр таны блог дээрхи холбоосууд хулганы заагч очсон үед солонгорч харагдах юм. За ингээд хичээлдээ орцгооё.

1. draft.Blogger.com - хаягаар блогруугаа нэвтрэнэ.
2. Blogger Dashboard - Design - Edit/Page Layout хэсэг рүү ороод
3. Add a Gadget хэсгээс HTML/Javascript -г сонгоод доорхи кодыг нэмж хадгалаад болно.

<script src="http://helperblogger.webs.com/files/rainbow-colors-helper-blogger.js" type="text/javascript"></script>
[Continue reading...]

2012/03/20

Блогтоо хөдөлгөөнтэй флаш цаг нэмэх - Add Animated Flash Clock to Your Blog

- 4 Comment

Блог болон вэб сайтаа гоёмсог болгох дуртай хүмүүст зориулж Хөдөлгөөнтэй флаш цаг/Animated Flash Clock/ нэмэх талаар бичлэг орууллаа. 14 ширхэг гоёмсог флаш цагнаас сонголтоо хийгээд өөрсдийн блогтоо орууллаарай.

Хэрхэн нэмэх вэ?

1. Blogger.com - Нэвтрэн орно

2. Design -> Page Elements.

3. Add Gadget -> HTML/Javascript сонгоно.

Дараах цагнуудаас дуртайгаа сонгоод доорхи кодыг нь хуулж тавиад болно. Gadget - ээ нэмчээд хадгалахаа мартваа.

1. Clicking Digital Clock



<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-33.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-33.swf" width="150" height="150" wmode="transparent"> </embed></object>

2. Black Outline Clock



<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-24.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-24.swf" width="150" height="150" wmode="transparent"> </embed></object>

3. Simple Clock



<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-23.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-23.swf" width="150" height="150" wmode="transparent"> </embed></object>

4. Analogue Plus Digital



<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-28.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-28.swf" width="150" height="150" wmode="transparent"> </embed></object>

5. A Clock with a Lively touch to it



<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-8.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-8.swf" width="150" height="150" wmode="transparent"> </embed></object>

6. Wooden Clock




<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-15.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-15.swf" width="150" height="150" wmode="transparent"> </embed></object>

7. An Open space Clock



<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-63.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-63.swf" width="150" height="150" wmode="transparent"> </embed></object>

8. A rotating Red belt Round the Clock



<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-58.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-58.swf" width="150" height="150" wmode="transparent"></embed></object>

9. A rotating Silver Clock



<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-11.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-11.swf" width="150" height="150" wmode="transparent"> </embed></object>

10. A Clock plus a Calendar



<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-1.swf"> <embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-1.swf" width="150" height="250" wmode="transparent"></object>

11. White Clock



<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-175.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

12. Black Cool Clock



<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-165.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

13. House Clock



<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-150.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

14. Black Clock



<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-179.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

Блогынхоо загвартаа тохирсон цагыг сонгоод мөн цагныхаа хэмжээг өөрчилөе гэвэл цаг тус бүр дээр байгаа /width-өргөн, height-өндөр/ хэсэгт тохируулна.
Ингээд боллоо. Гоёмсог хөдөлгөөнт цаг блогыг чинь гоёх болноо. Амжилт

Цаг хугацааг битгий дэмий үрээрэй залуусаа!!! Цаг хугацаа бол алт.
[Continue reading...]

2012/02/14

Блогтоо нисдэг Twitter виджет нэмэх /Animated Flying Twitter Bird Widget for Blogger/

- 4 Comment
Та бидний сайн мэдэх Twitter.com бол алдартай Social networking сайт юм. Өнөөдөр Twitter-ийг өдөр тутмынхаа амьдралд ашигладаггүй хүн ховор байх. Микро блогын нэг хэлбэр ч гэж хэлэгдээд байгаа Twitter-ээ хэрхэн блогдоо холбох талаар энэ удаагийн хичээлээр орууллаа. Ингээд хичээлдээ орцгооё!

Scrol дээш доош гүйхэд автоматаар дагаж нисдэг Twitter шувуу маань өөрөө товч болох бөгөөд таны твийтэр хаягтай холбогдох юм.

1. Дараах замын дагуу орно. Login To Blogger Go To > Design > Edit HTML.
Expand Widget Templates гэснийг сонгох ёстой.

2. (CTRL+F) дараад </body> -г хайж ол.

3. </body> -гийн өмнө нь дараах кодыг хуулж тавина.

<!-- By iBlogsClub.blogspot.com -->
<script type="text/javascript" src="http://yourjavascript.com/10116102250/royaltutor.net-twitterbird.js">
</script>
<script type="text/javascript">
var twitterAccount = "iblogsclub";
var tweetThisText = " <data:blog.pageTitle/> : <data:blog.url/> ";
tripleflapInit();
</script>
<span style="position:absolute;"><a title='Blogger Widget by iBlogsClub' href="http://iblogsclub.blogspot.com" target='_blank'>Blogger Widgets</a></span>
<!-- By iBlogsClub.blogspot.com -->

4. iblogsclub - гэсэн твийтэр хаягыг өөрийнхөө твийтэр хаягаар солиорой.

5. Save Template. Хадгалаад гарна. Ok!
Асуух зүйл байвал сэтгэгдэл бичээрэй.
[Continue reading...]

2012/02/12

Блоггер дээр санамсаргүй мэдээ гаргадаг виджет /Random Posts Widget in Blogger/

- 0 Comment
Блогын тань мэдээ, мэдээлэл олон болоод ирсэн үед энэхүү виджетийг хэрэглэх нь тохиромжтой. Ажиллах зарчим нь их энгийн блогын бүх мэдээллээс санамсаргүйгээр хэрэглэгчдэд харуулдаг.

1. Blogger.com - Нэвтрэн орно.

2. Design - Page Elements хэсгийн Add a Gadget буюу шинэ виджет нэмэх сонголтоос HTML/Javascript гэснийг сонгоно.

3. Доорхи кодыг хуулж тавь. Гарчиг нь ямар ч байж болно. Жишээ нь: Random Post, Top post гэх мэт.

<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=6; function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>

4. var numofpost=6; Хичнээн мэдээллийг санамсаргүйгээр хэрэглэгчдэд харуулах вэ гэдгийг энэ хэсэгт тохируулна.

5. Хамгийн сүүлд хадгалаад гарна. Ok!

Асуух зүйл байвал сэтгэгдэл бичээрэй. Амжилт

Жишээ:

Thank you! It is Greating :D
[Continue reading...]
 
Copyright © . iBlogsClub - Mongolian Blogs Guide - Posts · Comments
· Powered by Blogger