Tuesday, May 28, 2013

Thêm Slide bài viết mới chạy ngang cho Blogspot

Làm thế nào để thêm jquery chạy ảnh bài viết mới nhất cho blogger?
Nhiều Blogger rất muốn thêm những bài viết ở 1 nhãn cố định hoặc những bài viết mới đăng gần đây nhất làm nổi nên trên. Có nhiều thủ thuật blogspot được chia sẻ.
Hôm nay Thủ thuật blog chia sẻ thủ thuật thêm Slide chạy bài viết mới hoặc bài viết ở 1 nhãn (Label) cố định với hiệu ứng trượt ngang tự động rất đẹp

- Hướng dẫn thủ thuật
1. Vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
2. (Ctrl + F )Tìm đến ]]> và dán Code dưới đây ngay trên nó
Code:

#carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}
#carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmhS5jVQqtTJ-1wVWV7dwQV_hx9iofU4GQ0VvtTZBqc61AzxJ-IUAkiUUutseJN4DxtHro1daM0-g2GELtLz2XpCH30-wpOmtyvxIxyz7thXK233gY3fq2Re2X_Ldcyb_DbIK742QXDJs/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifbipHWmdcVtxXlo9vqYmgOAQUazaOZgAl_X9KXsi_RAkDjr6nP5CbqrlxQ7GfVclIn9y-HsUOWz1E5MjMj2B9cWlpG7W6gx6AfqXjyXgC42qUJ15eVK1svI2XS1UQDNwkTYJ-fBriRyg/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
#carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6KxERn9PsclfwW3jU8WBNv2auXMPyDs8Dub8XXLibbZfzArL1B9PHhqUZUH-P46yMJ5sSWbknWTipzNs0Zqqi2Uyn1T9sAwEt_J7Hdwt6glCWheSyPLL4vADxWzerWJFbdY99bb6OQaA/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg18WJNqTFh-X8Q2_zJatcyKEH9saQAUSJB7ElXq1nzOCI2p_xkq6-jvQgbes9lyAr9Z4xbP-CidmBQT_bDW6L-p8eha-o5q9l7qkM_3Wlvm6T6QH4aCxqm36lcoiOnAxTTU7AsDpd6L94/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
#carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuFYII2Om82LAPSAisbhe1kE6nWi1y6Xwuc7KmQSoP7RI-5JhIFOSOz07yCH3f105qY0IVJ2HRONQTGT8rPfILN7IUHREN2snASt3lszTDFkJ5rlJwHEF1BpY9Pl0K4hEvFyAD26ftD8Y/s1600/next.png) center}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0x71G3-O-WmW4XyCpWBdoyH9Z5H7E3J06DiqHyGEXPQhBOVOrLvYVZ6T5wEx496QWHWQreRJ-eUR8a1Owi8NoXqSNz0A1xEm1ED9LNPjsK3F4XG9HoUrBKwMYQv83AlA5DqKPtQmphw0/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
#carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
#carousel ul li a.slider_title:hover{color:#cd1713}
#carousel a img{display:block;background:#fff;margin-top:0}

3. Tìm tới và dán code dưới đây ngay trên nó
Code:


» Tùy chỉnh theo ý bạn:
numposts1 = 15; là số bài sẽ được gọi từ feed..
label1 = "news"; là tên của nhãn muốn gọi.
summaryPost = 140; là số ký tự mô tả
summaryTitle = 25; là số ký tự phần tiêu đề ngay bên dưới hình ảnh.
width="145" height="100" là chiều rộng và chiều cao của ảnh thumbnail.
showRandomImg = true; là lấy ảnh thumbnail ngẫu nhiên trong bài viết. Nếu muốn lấy ảnh đầu tiên thì hãy sửa true thành false.
4. Tìm đến 
 và dán code dưới đây ngay dưới nó
Code: