Hiển thị các bài đăng có nhãn Blogspot-tips. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Blogspot-tips. Hiển thị tất cả bài đăng

Chủ Nhật, 12 tháng 5, 2013

Test 2

Người đăng: vào lúc 1 nhận xét:
Nhãn:

Thứ Ba, 6 tháng 3, 2012

Mã màu 

Code
Người đăng: vào lúc Không có nhận xét nào:
Nhãn:

Thứ Bảy, 24 tháng 12, 2011

Convert Code

Gõ code cần chuyển đổi vào ô bên dưới nhấn Converter để chuyển đổi mã hóa:
Người đăng: vào lúc Không có nhận xét nào:
Nhãn:

Thứ Ba, 9 tháng 8, 2011

Sao lưu ( backup ) toàn bộ dữ liệu trong blog

Vì một lý do nào đó mà bạn lỡ tay xóa blog đi , hay bị xóa blog . Đừng lo , Google Blogger đã tích hợp chức năng sao lưu ( backup ) blog .

Trước tiên truy cập vào http://draft.blogger.com ( vào blogger.com không có tính năng này  ) .

Vào Bảng điều khiển > Cài đặt ( của blog cần backup ) > Cơ bản

Tại phần Công cụ Blog , bấm vào Xuất Blog ( hình dưới )
Sau đó xuất hiện trang khác , bấm vào chữ Xuất Blog
Cuối cùng là đợi để lưu lại toàn bộ dữ liệu trong blog của bạn .
Để nhập dữ liệu vào blog khác bạn cũng vào Bảng điều khiển > Cài đặt ( của blog cần nhập dữ liệu ) > Cơ bản
Tại phần Công cụ Blog , bấm vào Nhập Blog và làm theo hướng dẫn .
Đơn giản quá phải không nào , hãy làm ngay , để lỡ khi một ngày “đẹp trời” nào đó bạn lỡ tay xóa blog của mình thì chưa kịp backup lại thì khổ đấy (^_^)
Chúc thành công!
Người đăng: vào lúc 1 nhận xét:
Nhãn:

Bộ đếm lượt truy cập Blog có biểu tượng quốc kỳ của người viếng thăm

Thông thường các bộ đếm trong blog của bạn chỉ đơn giản là hiện ra số pageview , visitor… nhưng với flagcounter , bạn còn làm được nhiều hơn thế nữa , bên cạnh những tính năng của bộ đếm thông thường nó còn hiện lên quốc kỳ của những người truy cập vào blog của bạn , với bộ đếm này người ta sẽ biết blog của bạn phổ biến đến mức nào đấy nhé .
Để làm bộ đếm này , các bạn hãy truy cập vào trang www.flagcounter.com , để lấy code nhe
Trong đó :

 Maximum Flags to Show : chọn số lá cờ hiện ra trong bộ đếm , nếu muốn tất cả các lá cờ hiện ra thì chọn all

Columns of Flags : số cột hiện ra ( ví dụ trong hình bộ đếm được chia ra làm 2 cột )

Label on Top of Counter : đặt tên cho bộ đếm ( chọn những tên có sẵn hay tự mình đặt tên bằng cách chọn custom

Background Color : chọn màu nền cho bộ đếm

Text Color : màu chữ của bộ đếm

Border Color : màu đường viền của bộ đếm

Show Country Labels : nếu bạn check vào thì bộ đếm sẽ hiện ra tên viết tắt theo quốc tế của quốc gia đó

Show Pageview Count : check vào để hiện ra tổng số pageviews


Sau khi tùy chỉnh xong thì nhấp vào nút get my flag counter! , để lấy code chèn vào blog hoặc forum của mình .


Nếu bạn sử dụng một trong các dịch vụ tạo blog dưới đây thì hãy nhấp vào biểu tượng của dịch vụ đó để được tự động đưa code vào blog của mình
Sau đó điền thông tin trang web của mình vào đó để tự động Add vào hoặc copy COde dán vào Blog
Chúc bạn có được một bộ đếm như ý của mình .
Người đăng: vào lúc Không có nhận xét nào:
Nhãn:

Chèn Google Translate vào blog

Hiện nay Google Translate đã có hỗ trợ dịch từ các ngôn ngữ khác sang Tiếng Việt và ngược lại , mặc dù chưa được chính xác lắm , nhưng điều đó chứng tỏ Google đang bắt đầu quan tâm đến thị trường đầy tiềm năng là Việt Nam , nếu blog của bạn hoàn toàn bằng Tiếng Việt như blog của tôi thì bạn nên thêm một Widget là Google Translate để người nước ngoài có thể xem "sơ sơ" được nội dung blog của mình .

Vào Bố Cục > Phần Tử Trang > Thêm Tiện Ích > HTML/Javascript và past đoạn code phía dưới vào
Code:
<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=vi&w=160&h=60&title=&border=&output=js"></script>
Chúc thành công!
Người đăng: vào lúc 1 nhận xét:
Nhãn:

Chèn bộ gõ Tiếng Việt vào trong Blogger

Nhiều bạn thắc mắc hỏi mình cách chèn bộ gõ tiếng việt cho blog như các diễn đàn hay sử dụng do vậy hôm nay mình Post cho các bạn code các bạn có thể chèn vào blog của các bạn
Hình minh họa
Code: bạn có thể Download File JS TẠI ĐÂY sau đó Upload lên hots riêng
<script src="http://mudim.googlecode.com/files/mudim-0.8-r142.js" type="text/javascript"></script>
Các bươc thực hiện
- Vào Thiết kế --> Chỉnh sửa HTML 
-bạn có 2 cách để chèn vào Blog
+ Cách 1: Chèn sau thẻ <head>
+ Cách 2: Chèn trước thẻ </body>
Chúc thành công!
Người đăng: vào lúc Không có nhận xét nào:
Nhãn:

Widget hiển thị các comment gần đây không cần file js

Lần trước mình giới thiệu cho các bạn cách hiện thị các comment gần đây dùng File JS nhiều bạn không thích vì nó phụ thuộc vào Hotsting riêng và giao diện nhìn không được bắt mắt cho lắm hôm nay mình xẽ giới thiệu cho các bạn code khoogn sử dụng File JS mà tất cả là CSS giao diện nhìn cũng đẹp
Code của thủ thuật
<ul><script style="text/javascript">

function showrecentcomments(json) {

for (var i = 0; i < 10; i++) {

var entry = json.feed.entry[i];

var ctlink;



if (i == json.feed.entry.length) break;

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'alternate') {

ctlink = entry.link[k].href;

break;

}

}

ctlink = ctlink.replace("#", "#comment-");

var ptlink = ctlink.split("#");

ptlink = ptlink[0];

var txtlink = ptlink.split("/");

txtlink = txtlink[5];

txtlink = txtlink.split(".html");

txtlink = txtlink[0];

var pttitle = txtlink.replace(/-/g," ");

pttitle = pttitle.link(ptlink);

if ("content" in entry) {

var comment = entry.content.$t;}

else

if ("summary" in entry) {

var comment = entry.summary.$t;}

else var comment = "";

var re = /<\S[^>]*>/g;

comment = comment.replace(re, "");



document.write('<li>');

document.write('<a href="' + ctlink + '">' + entry.author[0].name.$t + '</a>');



document.write('<br/>');

if (comment.length < 100) {

document.write(comment);

}

else

{

comment = comment.substring(0, 100);

var quoteEnd = comment.lastIndexOf(" ");

comment = comment.substring(0, quoteEnd);

document.write(comment + '...<a href="' + ctlink + '">(xem thêm...)</a>');

}

}

document.write('</li>');



}

</script>

<script src="http://namkna.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">

</script></ul>
trong đó
+ i<10 là số comment hiển thị trên blog , ở đây tôi cho hiển thị 10 comment .Nếu muốn hiển thị nhiều hơn thì các bạn cứ chỉnh lại con số mà thôi .
+http://namkna.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments sửa lại thành tên blog của bạn .
Lưu ý , thủ thuật này chỉ áp dụng được với Google Blogger .
- Các bạn có thể xem Demo ở dưới đây

Chúc thành công!
Người đăng: vào lúc Không có nhận xét nào:
Nhãn:

Thứ Hai, 8 tháng 8, 2011

Widget hiển thị các comment gần đây dùng File JS

Trong một lần lang thang trên web ở mấy trang mạng của nước ngoài vô tình mình thấy nên Post lên cho các bạn coi thử. Cái này được rất nhiều blog sử dụng, để Post các nhận xét mới nhất lên blog của bạn

Các bạn vào Thiết Kế --> Thêm Tiện Ích --> HTML JavarScrip và dán Code sau vào
<font color="#00ff00" ><script style="text/javascript" src="http://ngoisaoxanh2605.googlepages.com/comments.js"></script><script style="text/javascript">var a_rc=10;var m_rc=true;var n_rc=false;var o_rc=100;</script><script src="http://namkna.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script></font>
trong đó
var a_rc=10 : là số comment xuất hiện , trong trường hợp này tôi muốn 10 comments xuất hiện
var o_rc=100 : số ký tự hiện ra đại diện cho một comment .
thay http://namkna.blogspot.com/feeds/comments/default
bằng http://diachiblogcuaban.blogspot.com/feeds/comments/default
Để dùng bạn nên Download File JS về và Uploand lên Hotsting riêng TẠI ĐÂY
Nếu thấy khó các bạn có thể xem  Widget hiển thị các comment gần đây không cần file js
Bạn có thể xem Demo ngay dưới đây
Chúc thành công!
Người đăng: vào lúc Không có nhận xét nào:
Nhãn:

Chủ Nhật, 7 tháng 8, 2011

Chèn flash cho nền blogspot và website

Đôi khi ghé thăm một số blog thấy có nền Flash tương đối đẹp nhưng nhiều bạn không biết cách áp dụng đối với Blog của mình thế nào. Hôm nay mình hướng dẫn cách lát flash cho nền Blog, thiết nghĩ chắc cũng có nhiều bạn quan tâm vấn đề này, nên mình viết luôn 1 bài hướng dẫn để mọi người dễ theo dõi hơn.
Với blogspot, bạn vào Thiết kế, chọn Chỉnh sửa HTML, Ctrl +F và tìm </b:template-skin>, sau đó paste đoạn code này dưới thẻ </head>
<div id="Layer1" style="left: 0pt; position: fixed; top: 0pt; z-index: 0;"> <embed align="right" height="500px" src="http://imgfree.21cn.com/free/flash/113.swf" width="1000px" wmode="transparent"></embed></div>
Thay đường link màu đỏ bằng link flash bạn thích -->Lưu mẫu và thưởng thức.
Dưới đây là một số link Flash đẹp các bạn có thể tham khảo
1/ Cảnh biển :


2/Chim cò, chuồn chuồn bay :
Nếu bạn nao muốn chèn vào bài viết thì tham khảo Cách lấy Code ở dưới đây 
Chúc các bạn vui!
Người đăng: vào lúc Không có nhận xét nào:
Nhãn:

Thủ thuật tạo link RSS nằm sau mỗi nhãn ở cuối bài viết


Lần trước mình đã giới thiệu Trang trí cho tab RSS Feed cho các bạn hôm nay mình sẽ giới thiệu một cách mới
- Bài viết này có thể xem là một ứng dụng nho nhỏ cho việc sử dụng các link RSS feed của mỗi nhãn(RSS by label). Với thủ thuật này ta sẽ tạo mộticon RSS nho nhỏ nằm ngay sau mỗi nhãn ở cuối mỗi bài viết.
Thủ thuật này rất đơn giản, bạn chỉ việc thêm một dòng code nho nhỏ vào code template của blog là xong.
☼ Bây giờ ta bắt đầu:
1. Đăng nhập blog
2. Vào bố cục (layout)
3. Vào chỉnh sửa code HTML (edit code HTML)
4. chọn Mở rộng mẫu tiện ích (Expand widget template)
5. Tìm đọan code sau: (hoặc tương tự)
<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a> 
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>

</span>
</div>
6. Chèn thêm đọan code màu đỏ như bên dưới:
<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><a expr:href='&quot;http://namkna.blogspot.com/feeds/posts/default/-/&quot; + data:label.name' target='_blank'><img src='http://www.feedburner.com/fb/images/pub/feed-icon16x16.png'/></a> 
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>

</span>
</div>
- Thay namkna.blogspot.com thành địa chỉ URL blog của bạn.

7.Save template.
Như vậy đã xong, chúc các bạn thành công.
Nguồn: Fandung
Người đăng: vào lúc Không có nhận xét nào:
Nhãn:

Thứ Bảy, 6 tháng 8, 2011

Tạo Banner quảng cáo với hiệu ứng trượt dọc 2 bên

Banner quảng cáo trượt dọc 2 bên trang web là hình thức quảng cáo rất phổ biến hiện nay trên các Forum\Website lớn. Không những giúp tận dụng “đất”, nó còn dễ dàng gây được sự chú ý của người đọc với hiệu ứng trượt theo khi trang được cuộn lên\xuống.

Tiện ích này trước đây đã được một số Blogger giới thiệu. Tuy nhiên có một số nhược điểm “chết người” như : không hiển thị tốt trên trình duyệt Firefox, hoặc nếu hiển thị thì khi click vào bất cứ liên kết nào trên Blog cũng không có tác dụng ( unclickable ).
Sau khi tham khảo code từ một số website tên tuổi, Namkna đã tìm được đoạn code ưng ý, có thể khắc phục được các lỗi nêu trên, đặc biệt là hiển thị tốt ngay cả trên trình duyệt “già nua xấu xí” IE6.
Và cũng theo yêu cầu của một số bạn trước đây, hôm nay Namkna sẽ hướng dẫn các bạn cách chèn tiện ích “Banner quảng cáo trượt dọc 2 bên” vào Blog, qua 2 bước rất đơn giản sau :

1. Vào Thiết kế > Phần tử trang

2. Tạo một widget HTML\JavaScript và chèn vào đoạn code bên dưới :
<div id="divAdRight" style="DISPLAY: none; POSITION: absolute; TOP: 0px">      
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglfUoTJgr7fKOSRZDRZYHh2NlxBJfkGx2tqXKUSR22JSnX1Hq6zwhEH4ILxsvK6AsW65mSsJ4B0nOP0GM8NF4S8Vt1Pk5tXifgf_6Z69wDOJhdb9xIB0xdr8aXlEb-ZKMHHtpuaJq11bM/s512/bannerfpt.jpg" width="125" /></a> 
</div>      
<div id="divAdLeft" style="DISPLAY: none; POSITION: absolute; TOP: 0px">       
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglfUoTJgr7fKOSRZDRZYHh2NlxBJfkGx2tqXKUSR22JSnX1Hq6zwhEH4ILxsvK6AsW65mSsJ4B0nOP0GM8NF4S8Vt1Pk5tXifgf_6Z69wDOJhdb9xIB0xdr8aXlEb-ZKMHHtpuaJq11bM/s512/bannerfpt.jpg" width="125" /></a>       
</div>       
<script>       
    function FloatTopDiv()      
    {      
        startLX = ((document.body.clientWidth -MainContentW)/2)-LeftBannerW-LeftAdjust , startLY = TopAdjust+80;      
        startRX = ((document.body.clientWidth -MainContentW)/2)+MainContentW+RightAdjust , startRY = TopAdjust+80;      
        var d = document;      
        function ml(id)      
        {      
            var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];      
            el.sP=function(x,y){this.style.left=x + 'px';this.style.top=y + 'px';};      
            el.x = startRX;      
            el.y = startRY;      
            return el;      
        }      
        function m2(id)      
        {      
            var e2=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];      
            e2.sP=function(x,y){this.style.left=x + 'px';this.style.top=y + 'px';};      
            e2.x = startLX;      
            e2.y = startLY;      
            return e2;      
        }      
        window.stayTopLeft=function()      
        {      
            if (document.documentElement && document.documentElement.scrollTop)      
                var pY =  document.documentElement.scrollTop;      
            else if (document.body)      
                var pY =  document.body.scrollTop;      
             if (document.body.scrollTop > 30){startLY = 3;startRY = 3;} else  {startLY = TopAdjust;startRY = TopAdjust;};      
            ftlObj.y += (pY+startRY-ftlObj.y)/16;      
            ftlObj.sP(ftlObj.x, ftlObj.y);      
            ftlObj2.y += (pY+startLY-ftlObj2.y)/16;      
            ftlObj2.sP(ftlObj2.x, ftlObj2.y);      
            setTimeout("stayTopLeft()", 1);      
        }      
        ftlObj = ml("divAdRight");      
        //stayTopLeft();      
        ftlObj2 = m2("divAdLeft");      
        stayTopLeft();      
    }      
    function ShowAdDiv()      
    {      
        var objAdDivRight = document.getElementById("divAdRight");      
        var objAdDivLeft = document.getElementById("divAdLeft");        
        if (document.body.clientWidth < 1000)      
        {      
            objAdDivRight.style.display = "none";      
            objAdDivLeft.style.display = "none";      
        }      
        else      
        {      
            objAdDivRight.style.display = "block";      
            objAdDivLeft.style.display = "block";      
            FloatTopDiv();      
        }      
    }  
</script>       
<script>       
document.write("<script type='text/javascript' language='javascript'>MainContentW = 1000;LeftBannerW = 125;RightBannerW = 125;LeftAdjust = 5;RightAdjust = 5;TopAdjust = 10;ShowAdDiv();window.onresize=ShowAdDiv;;<\/script>");      
</script>

Trong đoạn code trên :
  • <a href="#"> : liên kết đến khi người đọc click vào. Thay # bằng liên kết trang bạn cho phù hợp
  • <img src=”…”/> : banner bạn muốn hiển thị
  • width="125" : chiều rộng của banner. Có 2 giá trị được đánh dấu cùng màu đỏ
  • MainContentW = 1000 : chiều rộng trang web. Có 2 giá trị được đánh dấu cùng màu xanh lá
  • LeftAdjust = 5 : khoảng cách từ bìa trái trang web đến banner
  • RightAdjust = 5 : khoảng cách từ bìa phải trang web đến banner
  • TopAdjust = 10 : khoảng cách từ rìa trên trang web đến banner
Lưu ý : Do tiện ích sử dụng những giá trị xác định để điều chỉnh vị trí của banner so với trang web, do đó, tính thẩm mỹ của tiện ích sẽ phụ thuộc vào độ phân giải của màn hình máy tính.
3. Save and Done.
Các bạn có thể xem thêm Tạo banner quảng cáo dạng Popup TẠI ĐÂY
Chúc các bạn thành công !
Người đăng: vào lúc Không có nhận xét nào:
Nhãn:

Tạo banner quảng cáo dạng Popup

Ở các bài viết trước, iTechPlus đã giới thiệu đến các bạn 2 thủ thuật tạo và TẠO 4 BANNER QUẢNG CÁO 125X125 TRONG MỘT TIỆN ÍCH HTML/JAVACRIPT cho Blogspot.

Tiếp tục chủ đề trên, hôm nay iTechPlus xin giới thiệu tiếp một style khác, đó là tạo banner quảng cáo hiển thị dạng popup – nghĩa là mẫu quảng cáo sẽ bật lên khi người đọc ghé thăm website của bạn.
Cách thực hiện :

1. Vào Thiết kế > Phần tử trang

2. Tạo một widget HTML\JavaScripts và chèn vào code bên dưới :
<style type="text/css">      
        * html div#fl813691 {position: absolute; overflow:hidden;      
        top:expression(eval(document.compatMode &&      
        document.compatMode=='CSS1Compat') ?      
        documentElement.scrollTop      
        +(documentElement.clientHeight-this.clientHeight)      
        : document.body.scrollTop      
        +(document.body.clientHeight-this.clientHeight));}      
         #fl813691{font: 12px Arial, Helvetica, sans-serif; color:#666;  position:fixed; _position: absolute; right:0; bottom:0; height:150px; }       
        #eb951855{ width:279px; padding-right:7px; background:url(http://img98.imageshack.us/img98/9400/rightp.gif) no-repeat right top;}      
        #cob263512{background:url(http://img205.imageshack.us/img205/2176/fulld.gif) no-repeat left top; height:150px; padding-left:7px;}      
        #coh963846{color:#690;display:block; height:20px; line-height:20px; font-size:11px; width:277px;}      
        #coh963846 a{color:#690;text-decoration:none;}      
        #coc67178{float:right; padding:0; margin:0; list-style:none; overflow:hidden; height:15px;}      
                    #coc67178 li{display:inline;}      
                    #coc67178 li a{background-image:url(http://img205.imageshack.us/img205/9837/closebutton.gif); background-repeat:no-repeat; width:30px; height:0; padding-top:15px; overflow:hidden; float:left;}      
                        #coc67178 li a.close{background-position: 0 0;}      
                        #coc67178 li a.close:hover{background-position: 0 -15px;}      
                        #coc67178 li a.min{background-position: -30px 0;}      
                        #coc67178 li a.min:hover{background-position: -30px -15px;}      
                        #coc67178 li a.max{background-position: -60px 0;}      
                        #coc67178 li a.max:hover{background-position: -60px -15px;}      
         #co453569{display:block; margin:0; padding:0; height:123px;   border-style:solid; border-width:1px; border-color:#111 #999 #999 #111;  line-height:1.6em; overflow:hidden;}      
        </style>       
         <div id="fl813691" style="height: 152px;">       
            <div id="eb951855">       
            <div id="cob263512">       
                <div id="coh963846">       
                    <ul id="coc67178">       
                         <li id="pf204652hide"><a class="min"  href="javascript:pf204652clickhide();" title="&#7848;n  &#273;i">&#7848;n</a></li>       
                         <li id="pf204652show" style="display: none;"><a class="max"  href="javascript:pf204652clickshow();" title="Hi&#7879;n  l&#7841;i">Xem </a></li>       
                    </ul>       
                &nbsp;Namkna.blogspot-Thủ thuật Blog
               </div>       
                <div id="co453569">  
<!-- code ads -->       
<a target="_blank" href="http://namkna.blogspot.com/" rel="nofollow"> <img style="margin:3px 1px 1px 3px;" border="0" width="264" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaox6-v6p2CObKbbN7P6Qa56LhyphenhyphendeXgAXD24kC4vkMTzPamH5aQh1QFy6d2I4LaWKG3N8V5prMbC3BTTgBBPuEdHAh_xZr8GKQjpkhkNf46ovL11_cdfrBHN5x2XP7QwKNMtow2NN_Q3o/" height="115" title="Namkna | Kiến thức - Giải Trí - Thủ thuật - Giải pháp công nghệ"/></a>       
<!-- code ads -->       
                
</div>      
            </div></div></div>       
        <script>       
        pf204652bottomLayer = document.getElementById('fl813691');      
        var pf204652IntervalId = 0;      
        var pf204652maxHeight = 150;//Chieu cao khung quang cao      
        var pf204652minHeight = 20;      
        var pf204652curHeight = 0;      
        function pf204652show( ){      
          pf204652curHeight += 2;      
          if (pf204652curHeight > pf204652maxHeight){      
            clearInterval ( pf204652IntervalId );      
          }      
          pf204652bottomLayer.style.height = pf204652curHeight+'px';      
        }      
        function pf204652hide( ){      
          pf204652curHeight -= 3;      
          if (pf204652curHeight < pf204652minHeight){      
            clearInterval ( pf204652IntervalId );      
          }      
          pf204652bottomLayer.style.height = pf204652curHeight+'px';      
        }      
        pf204652IntervalId = setInterval ( 'pf204652show()', 5 );      
        function pf204652clickhide(){      
            document.getElementById('pf204652hide').style.display='none';      
            document.getElementById('pf204652show').style.display='inline';      
            pf204652IntervalId = setInterval ( 'pf204652hide()', 5 );      
        }      
        function pf204652clickshow(){      
            document.getElementById('pf204652hide').style.display='inline';      
            document.getElementById('pf204652show').style.display='none';      
            pf204652IntervalId = setInterval ( 'pf204652show()', 5 );      
        }      
        function pf204652clickclose(){      
            document.body.style.marginBottom = '0px';      
            pf204652bottomLayer.style.display = 'none';      
        }      
        </script>
Trong đoạn code trên :

  • Namkna.blogspot-Thủ thuật Blog : tiêu đề khung quảng cáo
  • http://namkna.blogspot.com/ : liên kết đến website nhà quảng cáo
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaox6-v6p2CObKbbN7P6Qa56LhyphenhyphendeXgAXD24kC4vkMTzPamH5aQh1QFy6d2I4LaWKG3N8V5prMbC3BTTgBBPuEdHAh_xZr8GKQjpkhkNf46ovL11_cdfrBHN5x2XP7QwKNMtow2NN_Q3o/ : hình ảnh quảng cáo

3. Save and Done.

Chúc các bạn thành công !
Người đăng: vào lúc 1 nhận xét:
Nhãn:

Rút ngăn tiêu đề bài viết cho tiện ích Recent Posts

Ở bài viết trước iTechPlus đã giới thiệu đến các bạn Tiện ích Recent Posts giống namkna.blogspot.com. Đây là tiện ích rất hữu ích, có tính thẩm mỹ cao và code đã được tối ưu để có thể đạt được tốc độ nhanh nhất.
Các bạn có thể sử dụng tiện ích này để trang trí cho Blog và biến giao diện Blog thành giao diện Web một cách dễ dàng. Tuy nhiên, có bạn thắc mắc rằng : nếu tiêu đề của bài viết quá dài thì sẽ ảnh hưởng đến tính thẩm mỹ của tiện ích, và làm sao để khi rê chuột vào tiêu đề bài viết ( đã được rút ngắn ) thì sẽ hiện thị đầy đủ tiêu đề vốn có của nó ? (Xem lại Tại đây)
Vì vậy, trong bài viết dưới đây, Namkna sẽ hướng dẫn các bạn tùy biến tiêu đề bài viết cho tiện ích Recent Posts, có thể áp dụng chung cho tất cả các tiện ích Recent Posts mà Namkna đã và sẽ giới thiệu trong các bài viết sắp tới một cách đơn giản nhất.
Cách thực hiện : ( ở đây Namkna sẽ làm mẫu với tiện ích Recent Posts giống Namkna)

1. Xem lại đoạn code tạo Recent Posts giống iTechPlus.info TẠI ĐÂY.

2. Tìm trong đoạn code đó bạn sẽ thấy đoạn code có dạng :
<a href="' + h + '"><b>' + g + '</b></a>
Code trên xuất hiện 2 lần.

3. Thay thế đoạn code trên thành đoạn code như bên dưới :
<a href="' + h + '" title="' + g + '"><b>' + removeHtmlTag(g, sumtitle) + '...</b></a>
4. Tiếp tục tìm đoạn code có dạng như sau :
<script type='text/javascript'>      
numposts = 5; list1 = 1; sumPosts = 168;      
</script>
và thay thế thành :
<script type='text/javascript'>      
numposts = 5; list1 = 1; sumPosts = 168; sumtitle = 36;      
</script>
với 36 là số ký tự sẽ lấy làm tiêu đề bài viết. Bạn có thể thay thành số khác nếu muốn.

5. Save and Done !

Như vậy là chúng ta đã hoàn tất việc rút gọn tiêu đề bài viết cho tiện ích Recent Posts và chỉ hiển thị đầy đủ khi rê chuột vào nó.

Chúc các bạn thành công !
Nguồn: itechplus
Người đăng: vào lúc Không có nhận xét nào:
Nhãn:

Tiện ích Recent Posts giống namkna.blogspot.com

Recent Posts là tiện ích giúp hiển thị những bài viết mới nhất theo từng trương mục hoặc cho toàn bộ Blog.

Đây là tiện ích được sử dụng rất phổ biến trên các WebBlog nhằm “hô biến” giao diện đơn giản thuần túy của Blogspot thành giao diện mang phong cách báo chí ( Magazine Template ), giúp Blog bạn trở nên “Pro” hơn trong mắt độc giả.
Tuy nhiên, việc ứng dụng nó cũng gây ra một số “tác dụng phụ” như : ảnh hưởng đến tốc độ load Blog, không tốt cho SEO,…do phải sử dụng JavaScript để lấy dữ liệu từ nguồn cấp Feed. Vì vậy, bạn hãy suy nghĩ thật kỹ trước khi áp dụng nó cho Blog của mình.
Và bắt đầu từ bài viết này, iTechPlus sẽ giới thiệu đến các bạn một số Style để các bạn lựa chọn, bắt đầu với tiện ích Recent Posts giống namkna.blogspot

* Cách thực hiện :

1. Vào Thiết kế > Phần tử trang

2. Tạo một widget HTML\JavaScript và dán vào đoạn code bên dưới :
<style type="text/css">    
#itechplus-rc {width:260px;margin:0;padding:10px;overflow:hidden;border:1px solid #ccc;background:#fff}     
.itechplus-rc h2{background:#39c;color:#fff;line-height:1.6em;margin:0 0 10px;padding:4px 10px;font-weight:bold}     
.itechplus-rc ul{list-style:none;margin:0;padding:0}     
.itechplus-rc li{text-indent:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr9tf-7QIai8Qvb-LlbpKPmuvoVXRMbgxd1kNJUsAaUIdj3oXl0pdGRpYjsazHd2qvEp0EL8x_cvlqOaXYUwMEyeJ2xgj9P_Jc1mZKhWqbQZF77JcPWnx97G3QU_l4KlZhD9_OM4BaIVOK/) no-repeat 0 7px;line-height:1.5em;margin:0;padding:2px 0 2px 15px}     
.itechplus-rc h2 a:link, .itechplus-rc h2 a:visited {color:#fff}     
</style>     
<div id="itechplus-rc" class="itechplus-rc">     
<h2><a href="http://namkna.blogspot.com/search/label/Blogspot-tips?&amp;max-results=8">Tin học văn phòng</a></h2>     
<script type='text/javascript'>     
numposts = 5; list1 = 1; sumPosts = 168;     
</script>     
<script type='text/javascript'>     
//<![CDATA[     
function removeHtmlTag(a, b) {     
    var s = a.split("<");     
    for (var i = 0; i < s.length; i++) {     
        if (s[i].indexOf(">") != -1) {     
            s[i] = s[i].substring(s[i].indexOf(">") + 1, s[i].length)     
        }     
    }     
    s = s.join("");     
    s = s.substring(0, b - 1);     
    return s     
}     
function showrecentposts(e) {     
    img = new Array();     
    for (var i = 0; i < numposts; i++) {     
        var f = e.feed.entry[i];     
        var g = f.title.$t;     
        var h;     
        if (i == e.feed.entry.length) break;     
        for (var k = 0; k < f.link.length; k++) {     
            if (f.link[k].rel == 'alternate') {     
                h = f.link[k].href;     
                break     
            }     
        }     
        if ("content" in f) {     
            var j = f.content.$t     
        } else if ("summary" in f) {     
            var j = f.summary.$t     
        } else     
        var j = "";     
        s = j;     
        a = s.indexOf("<img");     
        b = s.indexOf("src=\"", a);     
        c = s.indexOf("\"", b + 5);     
        d = s.substr(b + 5, c - b - 5);     
        if ((a != -1) && (b != -1) && (c != -1) && (d != "")) img[i] = d;     
       
 var l = '<table border="0" cellpadding="0" cellspacing="0" 
style="margin-bottom:5px;border-bottom:double 
#eee"><tr><td><img width="110" height="85" src="' + 
img[i] + '" align="left" border="0" title="' + g + '" alt="' + g + '" 
style="margin:5px 10px 0 0"><a href="' + h + '"><b>' + g +
 '</b></a><p style="margin:0;padding:5px 0 10px">' + 
removeHtmlTag(j, sumPosts) + ' 
...</p></td></tr></table>';     
        var m = '<li><a href="' + h + '">' + g + '</a></li>';     
        if ((i >= 0) && (i < list1)) {     
            var n = l     
        }     
        if (i == list1) {     
            var n = '<div class="itechplus-rc"><ul>' + m     
        }     
        if ((i > list1) && (i < numposts - 1)) {     
            var n = m     
        }     
        if (i == numposts - 1) {     
            var n = m + '</ul></div>'     
        }     
        document.write(n)     
    }     
}     
document.write("<script src=\"http://namkna.blogspot.com/feeds/posts/default/-/Blogspot-tips?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
     
//]]>     
</script>     
</div>
* Trong đoạn code trên :

  • numposts = 5; : tổng số bài viết được hiển thị
  • list1 = 1; : số bài viết hiển thị kèm ảnh thumbnail
  • sumPosts = 168; : số ký tự mô tả ( summary )
* Nếu bạn muốn hiển thị bài viết mới nhất cho cả Blog thì thay thế đoạn code sau : 
document.write("<script 
src=\"http://namkna.blogspot.com/feeds/posts/default/-/Blogspot-tips?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
thành 
document.write("<script 
src=\"http://namkna.blogspot.com/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
3. Save and Done.

* Update : một số bạn yêu cầu chèn thêm ảnh đại diện khi bài viết không có ảnh và tùy chọn để thay đổi màu chữ tiêu đề. Để làm điều này, bạn cần thay đoạn code chính của thủ thuật bằng đoạn code bên dưới :
<style type="text/css">  
#itechplus-rc {width:260px;margin:0;padding:10px;overflow:hidden;border:1px solid #ccc;background:#fff}  
.itechplus-rc
 h2{background:#39c;color:#fff;line-height:1.6em;margin:0 0 
10px;padding:4px 10px;font-size:12px;font-weight:bold}  
.itechplus-rc ul{list-style:none;margin:0;padding:0}  
.itechplus-rc
 
li{text-indent:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr9tf-7QIai8Qvb-LlbpKPmuvoVXRMbgxd1kNJUsAaUIdj3oXl0pdGRpYjsazHd2qvEp0EL8x_cvlqOaXYUwMEyeJ2xgj9P_Jc1mZKhWqbQZF77JcPWnx97G3QU_l4KlZhD9_OM4BaIVOK/)
 no-repeat 0 7px;line-height:1.5em;margin:0;padding:2px 0 2px 15px}  
.itechplus-rc h2 a:link, .itechplus-rc h2 a:visited {color:#fff}  
</style>     
<div id="itechplus-rc" class="itechplus-rc">  
<h2><a
 
href="http://www.itechplus.info/search/label/Office?&amp;max-results=8">Tin
 học văn phòng</a></h2>  
<script type='text/javascript'>  
numposts = 5;  
list1 = 1;  
sumPosts = 168;  
maintitle = "#f0c";      subtitle = "#39c";      </script>  
<script type='text/javascript'>  
//<![CDATA[  
function removeHtmlTag(a, b) {  
    var s = a.split("<");  
    for (var i = 0; i < s.length; i++) {  
        if (s[i].indexOf(">") != -1) {  
            s[i] = s[i].substring(s[i].indexOf(">") + 1, s[i].length)  
        }  
    }  
    s = s.join("");  
    s = s.substring(0, b - 1);  
    return s  
}  
function showrecentposts(e) {  
    img = new Array();  
    for (var i = 0; i < numposts; i++) {  
        var f = e.feed.entry[i];  
        var g = f.title.$t;  
        var h;  
        if (i == e.feed.entry.length) break;  
        for (var k = 0; k < f.link.length; k++) {  
            if (f.link[k].rel == 'alternate') {  
                h = f.link[k].href;  
                break  
            }  
        }  
        if ("content" in f) {  
            var j = f.content.$t  
        } else if ("summary" in f) {  
            var j = f.summary.$t  
        } else  
        var j = "";  
        s = j;  
        a = s.indexOf("<img");  
        b = s.indexOf("src=\"", a);  
        c = s.indexOf("\"", b + 5);  
        d = s.substr(b + 5, c - b - 5);  
       
 if ((a != -1) && (b != -1) && (c != -1) && (d 
!= ""))  {img[i] = d;} else 
{img[i]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnT6XRlCLZdsX2x9jWJw5jdkfDT4aGCQ9c9HOnzyJNYzFDRKHNsnyMSAYt-9quv8haMnIR5YbkpJGzvJkWhUB8kpkvYJpVnDdSVoXSWwd0GuP1-nrJHgAZ9feX5T2oiptGzkFV453_VCc/";} 
 
        var l = '<table border="0" cellpadding="0" 
cellspacing="0" style="margin-bottom:5px;border-bottom:double 
#eee"><tr><td><img width="110" height="85" src="' + 
img[i] + '" align="left" border="0" title="' + g + '" alt="' + g + '" 
style="margin:5px 10px 0 0"><a href="' + h + '" 
style="color:'+maintitle+'"><b>' + g + 
'</b></a><p style="margin:0;padding:5px 0 10px">' + 
removeHtmlTag(j, sumPosts) + ' 
...</p></td></tr></table>';  
        var m = '<li><a href="' + h + '" style="color:'+subtitle+'">' + g + '</a></li>';  
        if ((i >= 0) && (i < list1)) {  
            var n = l  
        }  
        if (i == list1) {  
            var n = '<div class="itechplus-rc"><ul>' + m  
        }  
        if ((i > list1) && (i < numposts - 1)) {  
            var n = m  
        }  
        if (i == numposts - 1) {  
            var n = m + '</ul></div>'  
        }  
        document.write(n)  
    }  
}  
document.write("<script
 
src=\"http://namkna.blogspot.com/feeds/posts/default/-/Blogspot-tips?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>"); 
 
//]]>  
</script>  
</div>
Trong đó :

  • maintitle = "#f0c"; : màu tiêu đề bài viết đầu tiên ( có ảnh và trích dẫn )
  • subtitle = "#39c"; : màu tiêu đề các bài viết tiếp theo

Các bạn có thể xem lại bài viết Bảng mã màu dành cho Blogger để chọn màu phù hợp. Ngoài ra, iTechPlus cũng đã có bài viết hướng dẫn rút gọn tiêu đề đối với những bài viết có tiêu đề quá dài, cũng như hiển thị đầy đủ mỗi khi rê chuột vào, các bạn có thể xem lại tại đây.

* Lưu ý : đoạn code trên có sử dụng một số hình ảnh mà iTechPlus.info sử dụng. Vì vậy, để tránh ảnh hưởng đến site này và blog bạn, vui lòng download về và upload lên host riêng để sử dụng.

Các bạn có thể xem thêm một số tùy biến mới cho ứng dụng này TẠI ĐÂY
Rất đơn giản phải không các bạn !
Chúc các bạn thành công !
Nguồn : itechplus
Người đăng: vào lúc 1 nhận xét:
Nhãn:

Chèn lịch phát sóng truyền hình vào blog

Các bạn thường thấy một số blog có một mục giới thiệu các chương trình truyền hình , đặc biệt là Sky.vn hầu như blog nào ở đó cũng có , đây là đoạn code Lịch phát sóng các chương trình truyền hình của họ

Bạn vào Thiết kế --> Thêm tiện ích --> HTML Javarscrip và Copy đoạn code này và dán vào đó
<iframe src="http://bongda.com.vn/truyenhinh.aspx" frameborder="1" width="170" height="250" scrolling="yes"></iframe>
Trong đó :
  •    height : là chiều cao của frame
  •    width : chiều rộng của frame
Dưới đây là Demo Cho lịch phát sóng:
Người đăng: vào lúc Không có nhận xét nào:
Nhãn:

Thứ Sáu, 5 tháng 8, 2011

Tổng hợp khung chứa Code đẹp cho Blogspot

Lần trước mình đã giới thiệu Đặt code trong khung trên bài viết của Blogger (Xem ở đây). Bài này mình sẽ giới thiệu cho các bạn các mẫu pre code ( Khung chèn code ) đẹp cho blogspot.
Bài viết này sẽ hướng dẫn các bạn một cách khá đơn giản nhưng cũng rất chuyên nghiệp để đặt đoạn code mình cần trích dẫn vào bài đăng trên blog. Với cách làm này đoạn mã hiển thị sẽ trông dễ nhìn hơn và người đọc dễ sao chép khi muốn sử dụng.
Chúng ta sử dụng CSS để cho hiện thị thuộc tính khung hiện code.
Đây là các mẫu khung code mà mình thu thập được từ Internet.
☼ Bây giờ ta bắt đầu thủ thuật :
1. Đăng nhập blog
2. Vào bố cục (layout)
3. Vào chỉnh sửa code HTML (edit code HMTL). Search 1 trong các đoạn code tương tự.

pre {....}
code {....}
pre, code {....}
Nếu có thì bạn thay toàn bộ code css đó  bằng các code sau. Nếu tìm không có thì bạn chèn thẳng 1 trong các mẫu sau vào trước thẻ đóng ]]></b:skin>. Chèn xong bạn Save lại.
Tiếp theo,muốn sử dụng thì trong bài post bạn làm như sau :
<pre> ....
Code của bạn
......</pre>
hoặc
<code> ......
Code của bạn
.....</code>
Nếu có thắc mắc bạn có thể để lại trong comment hoặc pm trực tiếp qua Yahoo: tadaa_happy@yahoo.com


Mẫu 1 :
Code :
pre, code {
display:block;
font: 1em 'Courier New', Fixed, monospace;
font-size : 100%;
color: #666666;
background : #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIzDyTS3HBmdZ6j1haBZp1gFaipch3yHx_tG_jQhicwyDwJq1FF-a31_B7sBE60xylOgBccChhwXhHve7W3db7vBUY1dcDEhhSGiik3dn7Un8NybOY-ToSu-Tznf7AeMb7uQP42nIQpGCO/s1600/prepb3.png) repeat;
overflow : auto;
text-align:left;
border : 1px solid #99cc66; 
padding : 0px 20px 0 30px;
margin:1em 0 1em 0;
line-height:17px;}
Mẫu 2 : (Mẫu này giới hạn 100 dòng thôi nhé )

Code : 
.pre, code {
display:block;
font: 1em 'Courier New', Fixed, monospace;
font-size : 100%;
color: #666666;
background : #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwk6L7aCeVrWXYCGPEucvaIy9iPa5nbxMwDgrheWRoPCiIIjvLb0Jt3bOEdQnM9bzDf5JhT32e218xC1qIoLmkKFkbyEF-4-rZhujkOyACDTUBs516eVz4GhrI_JRSwWDcywET6skkEgOg/s1600/prepb3.jpg) no-repeat left top;
overflow : auto;
text-align:left;
border : 1px solid #99cc66;
padding : 0px 20px 0 30px;
margin:1em 0 1em 0;
line-height:17px;}
Mẫu 3 :
Code :

.pre, code {
display:block;
margin:10px 0;
border:1px solid #E6DB55;
background:#FFFBCC url(http://lh5.ggpht.com/_u7a1IFxc4WI/TYhpXd5DUvI/AAAAAAAAA1c/lE_XTY6jV0E/pen.png) top left no-repeat;
padding:10px 10px 10px 40px;}
Mẫu 4 :
Code :

pre, code {
overflow:auto;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE5amwfKpLDxl6fytpkXiLUEPhkFDhQXTbIkClvkPgmncMCtWSIBYbE7Q8ktVjLzTyO0V5LZe1X7QZvwG9h05gMbf3Cx-PszySEoT2ddYQMKOYtPd2Qdz7SKZeCHGGUbII-G4QXsXMfRVP/s1600/Note.png);
background-color:#FFF77A;
background-repeat:no-repeat;
padding-top:50px;
padding-left:5px;
padding-right:5px;
padding-bottom:5px;
border:#FF9900 thin dashed;
color:#000;}
Mẫu 5 :
Code :
pre, code {
color:#281800;
font-family:Courier New;
font-size:13px;
line-height:17px;
background-image:URL(https://lh4.googleusercontent.com/_kck7-TEWM-M/TWtvurFWTlI/AAAAAAAAAlM/qNLb07OebIw/code_tag_bg.jpg);
display: block;
padding-left: 4px;
padding-right: 4px;
border: 1px #FC0 dashed;
overflow:auto;
word-wrap:break-word;}
Mẫu 6 :
Code :
pre, code {
background-image: url(http://4.bp.blogspot.com/-QEZVbB0Gtqo/TY37IwFN1DI/AAAAAAAAAwI/dEtek7FZbZw/s1600/cm_note.gif);
background-position: 15px 15px;
background-repeat: no-repeat;
background-color: #FDD;
width: 118%;
border: #C72B2C dashed thin;
padding: 15px;
padding-left: 70px;
color: #D24E50;}
Mẫu 7 :
Code :
pre, code {
-moz-box-shadow: 0 0 10px #DDDDDD;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKJLvxHddzFOhh1_Mku6JJUYWB09tqlAqkPa1q4wAIqPUk4KR-BTCKFo48LA4jz9hQ7hZ5iPo5fGUuFoD8mF6ex1dUcDG4qOaMkfBr7OiA1AWrzLNoSZtfwZqRx_Zch98XZMK_eHtv75SS/s1600/Svip4u.png) repeat scroll 0 0 #FFFFFF;
border: 2px solid #CCCCCC;
clear: both;
color: #333333;
display: block;
font-size: 12px;
line-height: 15px;
margin: 10px auto 10px 30px;
overflow: auto;
padding: 15px;
white-space: pre;
width: 85% !important;
word-wrap: break-word;}
Mẫu 8 :
Code :
pre, code {
background:#eee;border:1px solid #ddd;clear:both;
font-family:Consolas,Monaco,"Courier New",Courier,monospace;
overflow-x:auto;
padding:10px;
white-space:pre-wrap;
word-wrap:break-word;}
Mẫu 9 :
Code :
pre, code {
display:block;
font: 1em 'Courier New', Fixed, monospace;
font-size : 100%;
color: #666666;
background : #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9-1xpEkvJ_8dr3VcZA-T3ElHn5gf95q2zMD6UbsVTa36-YwEWXlqxDyqtALBR0gxd932kknKxJ-R0DKFAFFH_XaqUY-h8AMtiSSWvS0xiFZA3gdsv3fUMRtEFDXN_yxAMBGGGEdPAGH8/s1600/imgbg.png) repeat;
overflow : auto;
text-align:left;
border : 1px solid #99cc66; 
padding : 0px 20px 0 30px;
margin:1em 0 1em 0;
line-height:17px;}
Mẫu 10 :
Code :
pre, code {font-family:"Courier New",monospace;
font-size:16px;
display:block;
margin:10px 0 15px;
border:4px dotted #C9C9C9;
background:#E9E9E9 url(http://lh3.ggpht.com/_u7a1IFxc4WI/TYhpTf1J7bI/AAAAAAAAA1Y/h77P-jgZ0yA/code.png) top right no-repeat;padding:10px;overflow:auto;
}
Đây là các mẫu code mình thu thập được từ các blog,forum khác nhau. Do sử dụng công cụ Viewsource nên có thể đụng chạm với một số bạn. Chúc các bạn vui vẻ.
Người đăng: vào lúc Không có nhận xét nào:
Nhãn:
Đăng ký: Bài đăng (Atom)