Các bài viết tự động trượt Mootools vào Blogger

Hướng dẫn này sẽ cho bạn thấy làm thế nào để tạo các bài viết trượt thêm Mootools vào blogger hay web site. Bạn có thể ghé qua  trang DEMO  của Mootools để xem các bài viết Slider . Nếu bạn muốn thêm thanh trượt này trên trang web của bạn, hãy làm theo các bước dưới đây.

Lưu ý: Hướng dẫn này đã được cập nhật. Nếu nó không làm việc, hãy thử một lần nữa. Nó sẽ làm việc tốt.

1. Đăng nhập vào tài khoản Blogger của bạn và đi đến "Chỉnh sửa HTML" blog của bạn.

2. Cuộn xuống đến nơi mà bạn nhìn thấy tag </ head> .

3. Copy mã dưới đây và dán nó ngay trước các tag </ head> .

<Script src = " https://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js "> </ script>
<Script type = "text / javascript" src = " http://yourjavascript.com/9414412155/mootool-trượt-custom.js "> </ script>

<Style type = 'text / css ">
#myGallery, #myGallerySet {width: 515px; height: 250px; z-index: 0; font-family: Georgia, Tahoma, Arial, Helvetica, Sans-serif;}
.jdGallery một {outline: 0;}
.jdGallery {overflow: hidden; vị trí: tương đối;}
.jdGallery img {border: 0; margin: 0;}
.jdGallery .slideElement
{Width: 100%; height: 100%; background-color: # 000; background-repeat: không lặp lại; background-vị trí: trung tâm trung tâm; background-image: url ('');}
.jdGallery .slideInfoZone
{Position: absolute; z-index: 10; width: 100%; margin: 0px; trái: 0; bottom: 0; height: 90px; background: # 363.636; màu: #fff; text-indent: 0; tràn: ẩn;}
* Html .jdGallery .slideInfoZone {bottom: -1px;}
.jdGallery .slideInfoZone h2
{Padding: 0; font-size: 16px; text-decoration: none; margin: 0; margin: 5px 6px 2px 5px; font-weight: bình thường; color: # FF9000 quan trọng;}
.jdGallery .slideInfoZone h2 một
{Padding: 0; font-size: 16px; text-decoration: none; margin: 0; font-weight: bình thường, màu: # FF9000 quan trọng;}
.jdGallery .slideInfoZone p
{Padding: 0; font-size: 14px; margin: 2px 5px; màu: #eee;}
</ Style>

Chú ý: Bạn có thể Download HOST mootool-trượt-custom.js được lưu trữ trong yourjavascript.com. Ngoài ra, bạn có thể thay đổi chiều rộng và chiều cao của thanh trượt này dễ dàng (mặc định chiều rộng: 515px và height: 250px; ).

4. Bây giờ lưu mẫu của bạn.

5. Đi đến "Giao diện" blog blogger của bạn.

6. Click vào "Thêm Tiện ích".

7. Lựa chọn 'HTML / Javascript' và thêm đoạn mã dưới đây và bấm vào lưu.

<script type="text/javascript">
function startGallery() {
 var myGallery = new gallery($('myGallery'), {
         timed: true,
         delay: 5000,
         slideInfoZoneOpacity: 0.8,
         showCarousel: false
 });
}
window.addEvent('domready', startGallery);
</script>

<div id="myGallery">

<div class="imageElement"><h3><a href="ENTER-YOUR-POST-1-LINK-HERE">THIS-IS-FEATURED-POST-1-TITLE</a></h3><p>FEATURED-POST-1-DESCRIPTION</p><a href="#" class="open"></a><img src="FEATURED-POST-1-IMAGE-ADDRESS" class="full" alt="" /></div>

<div class="imageElement"><h3><a href="ENTER-YOUR-POST-LINK-2-HERE">THIS-IS-FEATURED-POST-2-TITLE</a></h3><p>FEATURED-POST-2-DESCRIPTION</p><a href="#" class="open"></a><img src="FEATURED-POST-2-IMAGE-ADDRESS" class="full" alt="" /></div>

<div class="imageElement"><h3><a href="ENTER-YOUR-POST-3-LINK-HERE">THIS-IS-FEATURED-POST-3-TITLE</a></h3><p>FEATURED-POST-3-DESCRIPTION</p><a href="#" class="open"></a><img src="FEATURED-POST-3-IMAGE-ADDRESS" class="full" alt="" /></div>

<div class="imageElement"><h3><a href="ENTER-YOUR-POST-4-LINK-HERE">THIS-IS-FEATURED-POST-4-TITLE</a></h3><p>FEATURED-POST-4-DESCRIPTION</p><a href="#" class="open"></a><img src="FEATURED-POST-4-IMAGE-ADDRESS" class="full" alt="" /></div>

<div class="imageElement"><h3><a href="ENTER-YOUR-POST-5-LINK-HERE">THIS-IS-FEATURED-POST-5-TITLE</a></h3><p>FEATURED-POST-5-DESCRIPTION</p><a href="#" class="open"></a><img src="FEATURED-POST-5-IMAGE-ADDRESS" class="full" alt="" /></div>

</div>

Thay đổi tốc độ trượt 5000  .

Chú ý: Hãy nhớ thay thế ,

ENTER-YOUR-POST-X-LINK HERE- s với bạn liên kết bài thực sự.

NÀY-IS-BIỂU-POST-X-TITLE của bạn với tiêu đề bài viết thực sự.

BIỂU-POST-X-Mô tả s thiệu bài viết của bạn.

BIỂU-POST-X-IMAGE-CHỈ s với các địa chỉ hình ảnh thực sự của bạn.

Hãy xem ví dụ dưới đây.

<script type="text/javascript">
function startGallery() {
 var myGallery = new gallery($('myGallery'), {
         timed: true,
         delay: 5000,
         slideInfoZoneOpacity: 0.8,
         showCarousel: false
 });
}
window.addEvent('domready', startGallery);
</script>

<div id="myGallery">

<div class="imageElement"><h3><a href="ENTER-YOUR-POST-LINK-HERE">This is featured post 1 title</a></h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et...</p><a href="#" title="This is featured post 1" class="open"></a><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh71eFLhp9pixL0NSpLshdjYHYqMwLANuYVzUW9JZm2WD449vDfOS1hSaxL1AgpIZsIrsD6Yq3VY2bIniIRHv7dEbzBznhoHyPx5CpNnvU7_aXbNfJ2YLjGCuUMGkgw5HSI4JR_-kpCM3A/" class="full" alt="" /></div>

<div class="imageElement"><h3><a href="ENTER-YOUR-POST-LINK-HERE">This is featured post 2 title</a></h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et...</p><a href="#" title="This is featured post 2" class="open"></a><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnnjjNEsA_9zKB2fgmGAs0UWpjP903hWEkPyqWmYTB_5ll6_J2FkPmFNRhmaM8FJWBtHehFBVuhzTUqD3VMDQtLdTOPY1NBLJShuk3kEjKo6bxU0Fz1HNi-CMUQiKWKj5AETGERIi2GpU/" class="full" alt="" /></div>

<div class="imageElement"><h3><a href="ENTER-YOUR-POST-LINK-HERE">This is featured post 3 title</a></h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et...</p><a href="#" title="This is featured post 3" class="open"></a><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvMUQdHnhrvXCTbIOrU3ddu62EjcW1Nrd0mTqbVqz2pVTQ2WwSsvEdkBQwMwPuewKXZ8gEYvu5Yyzz5rK_KGpRWrhtuXrFChVkO64cGa2uy7ohi2fOwvhcDh7YTB89HILWqLlX9m3hC8E/" class="full" alt="" /></div>

<div class="imageElement"><h3><a href="ENTER-YOUR-POST-LINK-HERE">This is featured post 4 title</a></h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et...</p><a href="#" title="This is featured post 4" class="open"></a><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRvekGVISrFuSi3mt6uO6CljWS7rtyO3GJvf49voRaQOnFF0nqOxHDLk4dEU5lRzCIpseHjq6tf7APKolS-WNBMfDVnHLansfxCGYW4Wu26AT7OV86oDGLwZJneUTV65ZnuzOR5EHTIJk/" class="full" alt="" /></div>

<div class="imageElement"><h3><a href="ENTER-YOUR-POST-LINK-HERE">This is featured post 5 title</a></h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et...</p><a href="#" title="This is featured post 5" class="open"></a><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIKaOhR7nxws7EWUhP3DToC-ABslXEDWAn3mqSv4SgCMQ8W1qUcXL3NnIg6QmWBsjbdlrel1y9DGGBd5oeR6Ycgwdc8TVI5xHKjGrOkoxrAutQz98VSFbXc-etbY4Udjg3vW5RoRogbIw/" class="full" alt="" /></div>

</div>

Bạn đã làm xong.