Юуны өмнө Манай сайт өөрийн гэсэн баннертэй болов. 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>#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]
ажилө бган бишу хо
Ajilj bna. BI dahin turshij uzlee l dee . uuruu zuw hiih heregtei bh.
ajilahgui bna ho zasad taviad uguuch,,, bas blogspotin comment bichih hesgiig yaj tanaih shig bolgoh ve?
manaih Blogspot bishee 😛
ajilkui l bna sh dee eswel buruu oilgood bgaamuu dahiad jhom delgeruulaad ogooch dee