Light box image viewer Блогтоо хийх

Юуны өмнө Манай сайт өөрийн гэсэн баннертэй болов. http://2-day-n-nite.blogspot.com/ гэсэг блогыг янзалз өгөөд нэг баннертай боллоо.  Тэгээд бусад блог сайт уудтай баннер солилцоно шүү. За одоо үндсэн хичээлдээ орий  Light Box image viewer нь жижиг зургийг блог дээр чинь ачааллуулж харуулна.

Туршилт үзэх: http://demo-hicheel.blogspot.com/

2 зураг байгаа Тэрэн дээр дараад томруулан хараад үзээрэй.  Яг тэрэн шигийг одоо хэрхэн хийх талаар зааж өгье. хэхэ Өөрийнхөө сайт дээр хийх гэсэн болдоггүй. :wallbash_tb:  Блоггер бас Gogo дээр болдог юм шүү. Банжиг дээр болдог үгүйг мэдэхгүй

За энэ image viewer ийг хэрэглэж байгаа Блогууд ороод үзээрэй.

http://www.itismovie.mn/2010/07/transformers-3.html < — Blogger

http://anime.blog.gogo.mn/read/entry135841 <— Gogo blog

1. Blogger.com–> Өөрийн блог–> Design–>Edit HTML

Доорх кодыг хайж ол. (CTRL+F дарж хайвал амар)

1
</head>

Доорх код оор сольж бич.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!--Light Box Code Starts  Hicheel.info-->
<style>
#lightbox{    position: absolute;    left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer&gt;#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://lh5.ggpht.com/_u4gySN2ZgqE/SnWk89-4azI/AAAAAAAAAj8/hM0MqnVouCQ/prevlabel%5B3%5D.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://lh6.ggpht.com/_u4gySN2ZgqE/SnWk9-mNiQI/AAAAAAAAAkA/Zg1jXV9xnQM/nextlabel%5B6%5D.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%    ; }

#imageData{    padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold;    }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;    }        
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}      

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }
lute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js' type='text/javascript'/>
<script src='http://files.bloggerplugins.org/lbox/js/scriptaculous.js' type='text/javascript'/>
<script src='http://blogergadgets.googlecode.com/files/lightbox.js' type='text/javascript'/>
<!--Light Box Code Ends Hicheel.info-->
</head>

[stextbox id=”alert”]За анхаарах зүйлүүд Мөн хэрэглэх заавар[/stextbox]
Бичлэгтээ хэрэглэх.
Blogger-т Post нэмэх дээрээ Өөрийнх нь Uploader ашиглан зургаа Upload хийнэ.
Post ийнхоо HTML руу нь ор. Доорх зургын дагуу хий. Дээр нь дарж томруулан харж болно.

s1600 гэдэг нь зургын дээд өргөн юм.
Ганц зургын код

1
rel="lightbox" title="Зургын нэр"

Бүлэг зургын код (Альбом гэсэн үг)

1
rel="lightbox[Альбомны нэр]" title="Зургын нэр"

Gogo blog-т тохируулан хэрэглэж болно.

[stextbox id=”alert”]Бичлэг таалагдсан бол. Хажуу талын Сурталчилгаа дээр Нэг дарж тусална уу?[/stextbox]


My twitter @itsaku Facebook: fb.com/itsaku Yahoo IM : saku_tip

5 сэтгэгдэлтэй

  1. hello says:

    ажилө бган бишу хо

  2. hello says:

    ajilahgui bna ho zasad taviad uguuch,,, bas blogspotin comment bichih hesgiig yaj tanaih shig bolgoh ve?

  3. оюу says:

    ajilkui l bna sh dee eswel buruu oilgood bgaamuu dahiad jhom delgeruulaad ogooch dee

Сэтгэгдэл бичих

*

Таныг илтгэгч аватар зураг GrAvatar.com (Хэрхэн ашиглах вэ?)

© 2010-2012 Hicheel.inFo .
Wordpress дээр суурьлаж Theme Junkie ашиглан SaKu бүтээв. HOSTED BY DUSAL HOSTING
Read previous post:
Read more хялбар аргаар хийх

Blogger дээр хэрхэн хялбар аргаар хийх тухай зааж өгье! Мөн HTML дотор ямарч өөрчлөлт оруулахгүй юм. Зурган тайлбартай учир ойлгоход...

Close