Showing posts with label Widgets. Show all posts
Showing posts with label Widgets. Show all posts

Saturday, September 10, 2011

Ẩn nội dung widget bằng password (Update)

Thỉnh thoảng có những nội dung trên widget (tiện ích) mà bạn chỉ muốn một vài người xem và bạn muốn đặt mặt khẩu cho widget đó. Có cách nào để hiện thực hóa vấn đề này không? Câu trả lời là có. Xem DEMO. Password: password

Các bạn chỉ cần làm theo hướng dẫn nho nhỏ dưới đây:

1. Đầu tiên các bạn vào trang này.



2. Nhập mật mã vào khung Key.

3. Chép nội dung bạn muốn ẩn vào khung Plain Text.

4. Bấm vào nút Encrypt và copy code trong khung HTML Code được tạo ra.

5. Bây giờ bạn chỉ cần vào Blogger thêm một tiện ích và paste code bạn đã copy.

6. Bạn tìm thẻ </head> và đặt trước nó đoạn code sau:

<script type="text/javascript" src="http://www.vincentcheung.ca/jsencryption/jsencryption.js"></script>

Như vậy là bạn đã hoàn thành thủ thuật này.

Vậy thủ thuật này có thể áp dụng cho bài đăng trên blog hay không? Câu trả lời là có. Bạn chỉ cần copy nội dung của bài đăng rồi làm theo các bước hướng dẫn tương tự như trong widget.

Hy vọng thủ thuật này sẽ giúp các bạn được phần nào trong quá trình viết blog.

Friday, August 12, 2011

Thêm tiện ích Add to circles vào blog

Bạn đã có một tài khoản Google+1 cho riêng mình và muốn kết nối với tất cả mọi người trên đó. Thủ thuật sau sẽ giúp bạn tạo ra tiện ích "Add to circles" để đưa vào blog của mình.

Các bạn có thể xem DEMO tại đây.

Chúng ta sẽ từng bước để tạo ra tiện ích này:

- Bước 1: Các bạn hãy truy cập vào trang này.

- Bước 2: Bấm vào nút:


Bước 3: Các bạn điền thông tin vào hình bên dưới:


Bước 4: Làm sao các bạn có được Google+ID, bạn chỉ cần đăng nhập vào trang profile của mình tại đây.

- Bước 5: Các bạn bấm vào hình hiển thị theo chỉ dẫn bên dưới:


- Bước 6: Các bạn copy ID theo chỉ dẫn của hình bên dưới để điền thông tin ở bước 3:


- Bước 7: Các bạn bấm vào nút Get Code:


- Bước 8: Copy code vừa được tạo ra và dán vào một tiện ích trong blog của bạn là xong.

Bây giờ bạn có thể vào trang của mình để tận hưởng thành quả.

Tuesday, July 5, 2011

Tiện ích Blogroll tiết kiệm không gian web

Tiện ích Blogroll đối với blogspot dùng để liệt kê danh sách các liên kết blogspot, đó là một phần trong việc trao đổi liên kết giúp kết nối cộng đồng blogspot đồng thời tăng lượng truy cập cho blogspot của bạn. Blogger vốn đã có sẵn tiện ích này nhưng ở dạng cơ bản. Qua bài viết này mình giới thiệu một kiểu Blogroll theo dạng menu đóng mở giúp tiết kiệm không gian web, đặt các liên kết blogpsot phân loại theo chủ đề, như bạn có thể thấy trên phần sidebar của Bloggerism vậy. Ưu điểm của tiện ích này là dễ cài đặt, dễ tùy biến, gọn nhẹ, load nhanh, dễ quản lý các nhóm liên kết, có thể áp dụng cho blogspot, wordpress, nền tảng web khác.

Hướng dẫn cài đặt:

Bước 1. Đăng nhập Blogger >> Design >> Edit HTML. Đặt code CSS vào trước thẻ ]]></b:skin>.

#downmenu{padding-left:3px}
#downmenu ul li {list-style: disc url(…/iconslist.gif) inside; vertical-align: top; padding-left: 20px;margin: 0;}
#downmenu ul li:hover {list-style: disc url(…/iconslisthover.png) inside; vertical-align: top;padding-left: 20px;margin: 0;}
a.levelmenu{line-height:20px;color:#111;background:url(…/vista.gif) left center;background-repeat:no-repeat;padding-left:10px;font-weight:normal;font-size:110%}
a.levelmenu:hover{line-height:20px;color:#111;background:url(…/plus.png) left center;background-repeat:no-repeat;padding-left:47px;z-index:100;font-weight:normal;font-size:110%}

Tải các file ảnh bên dưới về rồi upload lên Blogspot của bạn, lấy URL rồi đặt đúng thứ tự vào cấu trúc CSS ở trên. Sau đó lưu Template.

iconlist
iconlisthover
vista
plus

Bước 2. Vào Page Elements. Thêm một tiện ích HTML/Javascript và đặt đoạn code bên dưới vào phần nội dung tiện ích.

<script type="text/javascript">
var desplegable = 0

function menudesplegable(id)
{
if (desplegable != 0 && desplegable != id) document.getElementById(desplegable).style.display = 'none'
if (document.getElementById(id).style.display == 'none')
document.getElementById(id).style.display = 'block'
else
document.getElementById(id).style.display = 'none'
desplegable = id
}
</script>
<div id="downmenu" style=" width: 100%;">
<a href="#" class="levelmenu" onclick="menudesplegable('topic1');return false">Chủ đề 1:</a><br />
<ul id="topic1" style="display:block">
<li><a href="#" target="_blank">Topic1 Text Link 1</a></li>
<li><a href="#" target="_blank"> Topic1 Text Link 2</a></li>
</ul>

<a href="#" class="levelmenu" onclick="menudesplegable('topic2');return false">Chủ đề 2:</a><br />
<ul id="topic2" style="display:block">
<li><a href="#" target="_blank"> Topic2 Text Link 1</a></li>
<li><a href="#" target="_blank"> Topic2 Text Link 2</a></li>
</ul>

<a href="#" class="levelmenu" onclick="menudesplegable('topic3');return false">Chủ đề 3:</a><br />
<ul id="topic3" style="display:block">
<li><a href="#" target="_blank"> Topic3 Text Link 1</a></li>
<li><a href="#" target="_blank"> Topic3 Text Link 2</a></li>
</ul>

<a href="#" class="levelmenu" onclick="menudesplegable('topic4');return false">Chủ đề 4:</a><br />

<ul id="topic4" style="display:none">
<li><a href="#" target="_blank"> Topic4 Text Link 1</a></li>
<li><a href="#" target="_blank"> Topic4 Text Link 2</a></li>
<li><a href="#" target="_blank"> Topic4 Text Link 3</a></li>
<li><a href="#" target="_blank"> Topic4 Text Link 4</a></li>
</ul>

</div>

Công việc của bạn là liệt kê các liên kết blogspot của bạn rồi phân loại theo chủ đề để dễ quản lý, sau đó tùy biến theo cấu trúc HTML ở trên sao cho phù hợp.

Tuesday, April 12, 2011

Tiện ích Tìm bài viết theo ngày

Có nhiều cách để tìm bài viết trên một blogspot, chẳng hạn như tìm bằng từ khóa trên công cụ tìm kiếm, tìm bài viết tại trang lưu trữ, tìm theo nhãn, tìm bài viết theo ngày tháng. Bài viết này sẽ hướng dẫn bạn cách tạo tiện ích Tìm bài viết theo ngày, một tiện ích cũng rất cần thiết cho blogspot. Bạn có thể xem Demo bên dưới.



Tìm bài viết theo ngày

Để cài đặt tiện ích này, bạn hãy thực hiện như sau.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Đặt đoạn code bên dưới vào trước thẻ </head>.

<style type="text/css">
#findXdate {
background-color: #243240;
border: 1px solid #4D5B68;
margin: 0 auto;
padding: 5px 0 10px;
text-align: center;
width: 250px;
}
#findXdate span {
color: #FFFFFF;
display:block;
margin-bottom: 5px;
}
#findXdate select {
background-color: #CCC;
border: 2px solid #8D9BA8;
color: #000;
font-size: 11px;
width: 60px;
}
#findXdate input {
background-color: #CCC;
border: 2px solid #8D9BA8;
color: #000;
cursor: pointer;
font-size: 10px;
font-weight: bold;
}
</style>

<script type="text/javascript">
home_page = "http://huynh-nhat-ha.blogspot.com/";
timezone = "+07:00";
function submitdate(){
year = document.selectdate.year.options[document.selectdate.year.selectedIndex].value;month = document.selectdate.month.options[document.selectdate.month.selectedIndex].value;day = document.selectdate.day.options[document.selectdate.day.selectedIndex].value;tmax = year+"-"+month+"-"+day+"T23:59:59"+timezone;
tmin = year+"-"+month+"-"+day+"T00:00:00"+timezone;
tlink = home_page+"search?updated-max="+encodeURIComponent(tmax)+"&updated-min="+encodeURIComponent(tmin)+"&max-results=20";
if(year=="" || month=="" || day=="") {
alert("Vui lòng chọn ngày chính xác!"); return false;
} else {
self.location.href=tlink;
}
}
</script>

Trong đoạn code trên, bạn cần thay huynh-nhat-ha bằng tên blogspot của bạn, lưu ý timezone tại Việt Nam chọn là +07:00.

Lưu Template.

Bước 2. Vào Page Elements, thêm một tiện ích HTML/Javascript và đặt đoạn code sau đây vào phần nội dung tiện ích.

<form id="findXdate" name="selectdate"><span>Tìm bài viết theo ngày</span>
<select name="day"><option value="" selected="selected">Ngày</option><option value="01">1</option><option value="02">2</option><option value="03">3</option><option value="04">4</option><option value="05">5</option><option value="06">6</option><option value="07">7</option><option value="08">8</option><option value="09">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select> <select name="month"><option value="" selected="selected">Tháng</option><option value="01">01</option><option value="02">02</option><option value="03">03</option><option value="04">04</option><option value="05">05</option><option value="06">06</option><option value="07">07</option><option value="08">08</option><option value="09">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select> <select name="year"><option value="" selected="selected">Năm</option><option value="2010">2010</option><option value="2011">2011</option></select> <input type="button" onclick="submitdate()" value="TÌM"/></form>

Tip Package Download:
searchpostbydate.txt