Thứ Bảy, 25 tháng 1, 2014

Code hay cho Blogger

1/25/2014 10:50:00 SA Unknown

CODE HAY CHO BLOG.

                               

                      Scrip tạo hiệu ứng chạy chữ theo 2 lớp 


Với Blog thì không chỉ giao diện đẹp, nội dung phong phú mà bên cạnh đó các trình bày câu, chữ cũng rất quan trọng, nó giúp khách thăm blog có cái nhìn thiện cảm với blog của chúng ta.Hôm nay mình giới thiệu các tạo chữ chạy theo 2 lớp hoàn toàn khác với các cách trước sử dụng file Scrip. Bạn có thể thêm vào một tiện ích HTML/Javarscrip (Chọn Thiết kế > Thêm tiện ích HTML/Javacript) hoặc trong bài viết của bạn. 
                 code

<script language="JavaScript1.2">
var message="CHào mừng các bạn đến với blog anhcuatoianh968.blogspot.com!"
var neonbasecolor="yellow"
var neontextcolor="Red"
var flashspeed=100  //in milliseconds
var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)

function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
} 
function neon(){
if (n==0){
for (m=0;m<message.length;m++)
//eval("document.all.neonlight"+m).style.color=neonbasecolor
crossref(m).style.color=neonbasecolor
}

//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor

if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",1500)
return
}
}

function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()
</script>

Trong đó bạn có thể thay các thông số sau:
  • Thay chữ màu xanh bằng chữ bạn muốn.
  • var neonbasecolor="yellow" là màu chữ nền (Ở đây là màu vàng: yellow).
  • var neontextcolor="Red" là màu chữ chạy bên trên chữ nền.(Ở đây là màu đỏ: Red)
Bạn thay thành các màu bạn muốn như: gray (Đen), blue (xanh), Orange (Cam),...
Chúc thành công!

                                                     

                       Menu DropDown 1 cấp cho blogspot Style 7.

                            CSS Horizontal Navigation Menu For Bloggers/Websites - Menu DropDown 1 cấp cho blogspot Style7
       ☼ Cách tiến hành:


   1- Đăng nhập vào Blog
   2- Vào thiết kế
   3- Chọn Chỉnh sử HTML (Không cần mở rộng tiện ích mẫu)
   4- Thêm đoạn code sau vào trước thẻ  ]]></b:skin> .
#foxmenucontainer{
height:29px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsvMJZ3sNx_DIV2XlKFXgC4VTNkTWXDfJbhBXAQkaFieqQ0Ecs8TjCJ0tl-cYtLRtSujrrstlpDARxjLN4DrfOIlqVwOUfbocmawUs6-3SiCUUZmuNVtbjqK5n8ySWfTLHqYK8_aBBRnIa/s1600/menu-namkna-blogspot.jpg) repeat-x;
display:block;
padding:0px 0 0px 0px;
border-top:1px solid #474747;
font: 14px &quot;Century gothic&quot;,verdana, Arial, sans-serif;
font-weight:normal;
}

#menu ,#menu ul {
margin: 0px 5px;
padding: 0px;
list-style: none;
height:29px;
}

#menu a {
color: #B3DBEF;
display: block;
font-weight: normal;
padding: 4px 10px 6px 10px;
}

#menu a:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaHiagyBMQsf6MBVI6q74QLQH8HinbStQwVSHMZtu6PjHkcmsAUI6tYzD-K4dV-iOOWkfDZuwQv8GjjWEtD_KJJUIfIR6kjUuk1_MbfWp7B8Ef9Xa38M1r9XlaLDG9i5eMbhDdUhyphenhyphenFTvzq/s1600/menuhov-namkna-blogspot.jpg) repeat-x;
color: #fff;
display: block;
text-decoration: none;
}

#menu li {
float: left;
margin: 0px 0 0px 0;
padding: 0px;
}

#menu li li {
float: left;
margin: px 0px 0px 5px;
padding: 0px;
width: 130px;
}

#menu li li a, #menu li li a:link, #menu li li a:visited {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsvMJZ3sNx_DIV2XlKFXgC4VTNkTWXDfJbhBXAQkaFieqQ0Ecs8TjCJ0tl-cYtLRtSujrrstlpDARxjLN4DrfOIlqVwOUfbocmawUs6-3SiCUUZmuNVtbjqK5n8ySWfTLHqYK8_aBBRnIa/s1600/menu-namkna-blogspot.jpg) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#fff;
}

#menu li li a:hover, #menu li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaHiagyBMQsf6MBVI6q74QLQH8HinbStQwVSHMZtu6PjHkcmsAUI6tYzD-K4dV-iOOWkfDZuwQv8GjjWEtD_KJJUIfIR6kjUuk1_MbfWp7B8Ef9Xa38M1r9XlaLDG9i5eMbhDdUhyphenhyphenFTvzq/s1600/menuhov-namkna-blogspot.jpg) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#06415F;
}

#menu li ul {
position: absolute;
width: 10em;
left: -999em;
z-index:1;
}

#menu li:hover ul {
left: auto;
display: block;
}

#menu li:hover ul, #menu li.sfhover ul {
left: auto;
}
Sau đó bấm Lưu .
                                                       
                                            

                  Menu Drop Down 1 cấp cho blogspot Style 4.



            ☼ Cách tiến hành:

   1- Đăng nhập vào Blog
   2- Vào thiết kế
   3- Chọn Chỉnh sử HTML (Không cần mở rộng tiện ích mẫu)
   4- Thêm đoạn code sau vào trước thẻ  ]]></b:skin> .



.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
.menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHs1oODyO8WGQgCeMx_C8tSuW44KT638JgXEVFKsgfZKcRGahMJrufjmzPLUeR_3ebcNqEEpuL_x3c9TaHdZJXEmDoz5h-zvh3KQUZ03QiTqLGLRFc9LQ_mClKshmC1Ze5hv1GAOgvWYhP/h120/seperator-namkna-blogspot.gif") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGL8xqjLoyluDc8JFTbEx3d3enuLJ01teiWKBf4B_J-3Kuq1R6Ie3YXGgkTpWkhretkRPDd36Md5__76kz-jH4J3fhyphenhyphenjLWod4Ry0Frx0ak9GdiSa402qBVhIbiNyreGrP1odENWBa34Evt/h120/hover-namkna-blogspot.gif") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIgUuRDkl-Spgb5vY5NCxaiFtCT-sSnK2304l441OcP7jm_4o432XvaqFECa7mjv74msHT0ieUGcZ_qNi5-vfi2fAuq4bQFEXMwsy_-Raz9moLZbxFAVqhUn_pYOz0oFaKJdI7HJwWPcvt/h120/sub_sep-namkna-blogspot.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFCXGB1OLK-O7OmfMI6ufzx5SYX3ourUyLN_DTKPgT-ztzbpWCRTbvLq9ZKTxy5hKzM3jPLYf_A81z4Ot6-izjsN92KxqSLtqS25sOo0smvsBzKBV-OWdkC7kWHo-pGcIiHc5lykNbQk2v/h120/hover_sub-namkna-blogspot.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}

6- Click chọn  Lưu mẫu
7- Thêm đoạn code bên dưới vào trước thẻ  </header> . (hoặc thêm 1 HTML/Javarscrip và dán vào)
<div class="menu">
<ul>
<li><a href="/" >Home</a></li>
<li><a href="#" id="current">Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="#">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>


- Trong đó:  
  • Thay dấu # (màu đỏ)bằng liên kết tới nhãn, bài viết
  • Thay dấu # (màu cam) thành liên kết tới nhãn bài đăng thuộc Menu con.
  • Thay chữ màu xanh đậm thành tên nhãn, bài viết thuộc menu chính.
  • Thay chữ màu xanh nhạt thành tên bài viết nhãn thuộc menu con.
8. Lưu tiện ích lại. Nếu ở bước 7 không hiển thị thì bạn vào Phần tử trang Thêm 1 tiện íchHTML/Javarscrip trên phần header và thêm đoạn code ở bước 7 vao:
Chúc thành công!

                                                 

         Tạo số đếm nhận xét cho bài viết trên 200 nhận xét.

Blog của bạn sẽ trở nên đẹp và bắt mắt hơn nếu bạn thêm số đếm cho phần nhận xét thay vì chỉ để các nhận xét bình thường. Do mặc định  khi số nhận xét quá 200 thì sẽ tự động phân trang (mỗi trang gồm 200 nhận xét), script đếm nhận xét cơ bản chỉ dành cho trang đầu tiên, sang trang thứ 2 (nhận xét số 201 đến số 400) sẽ bắt đầu đếm lại từ số 1, tương tự đến trang thứ 3, 4, 5… cũng lặp lại như vậy.

Với các thủ thuật tạo số đếm thông thường thì sẽ không thể đếm được. Do vậy hôm nay mình sẽ giới thiệu cách khác. 
          » Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn Chỉnh sửa HTML
4. Chọn Mở rộng tiện ích .
5. Thêm đoạn mã trước đây trước thẻ ]]></b:skin>:
.comment-number {
float: right;
background: url(URL hình ảnh) no-repeat;
width:50px;
height:50px;
margin-right: 15px;
margin-top: -35px; /*comments-counter position*/
text-align: center;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 18px;
font-weight: bold;
}
/*since the numbers are actually links, we need to force the color properties*/
.comment-number a:link, .comment-number a:visited {
color: #445566 !important;
text-decoration: none !important;
}
.comment-number a:hover, .comment-number a:active {
color: #FF9933 !important;
text-decoration: none !important;
}

Trong đó: Bạn có thể thay hình nền cho số đếm nhận xét theo URL hình ảnh màu đỏ. Nếu vị trí số đếm không cân xứng với hình nền thì bạn điều chỉnh thông số ở 2 dòng màu xanh.margin-right: 15px; margin-top: -35px;
- Code này áp dụng cho tất cả các mẫu bên dưới
6. Tìm cho mình 2 đoạn code sau:. 
          Đoạn (1):
  <b:loop values='data:post.comments' var='comment'>
          Đoạn (2):
<data:commentPostedByMsg/>

Sau đây mình sẽ giới thiệu cho ác bạn một số phương pháp tạo số đếm comment từ nhiều tác giả khác nhau:

PHƯƠNG PHÁP 1. MẪU CỦA BLOGTRUYEN.COM:

- Đặt trước đoạn (1) bằng script bên dưới:
 <script type='text/javascript'>//<![CDATA[
var cmPage = (location.href.match("commentPage=")) ? location.href.split("commentPage=")[1].split("#")[0] : 1;
var cm_show_num = (cmPage - 1)*200;
function showcomnumber(){ cm_show_num++; document.write(cm_show_num); }
//]]>
</script>
-  Đặt sau đoạn (2) bằng đoạn code bên dưới:

<span class='comment-number'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>showcomnumber()</script>
</a>
</span>

PHƯƠNG PHÁP  2: MẪU CỦA FANDUNG.COM:

Đặt đoạn code sau vào trước thẻ </head>
<script type='text/javascript'>
//<![CDATA[
String.prototype.GetValue= function(para) {
var reg = new RegExp("(^|&)"+ para +"=([^&]*)(&|$)");
var r = this.substr(this.indexOf("\?")+1).match(reg);
if (r!=null) return unescape(r[2]); return null;
}
//]]>
</script>

- Đặt trước đoạn (1) bằng script bên dưới:
<script type='text/javascript'>
//<![CDATA[
var urlcm = location.href;
var pagecm = urlcm.GetValue("commentPage");
if (pagecm==undefined) { pagecm = 1; }
var CommentsCounter =(pagecm - 1)*200; ;
//]]>
</script>
Đặt sau đoạn (2) bằng script bên dưới:
<span class='comment-number'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

PHƯƠNG PHÁP 3: PHƯƠNG PHÁP CỦA CÁC BLOGSPOT TIẾNG ANH TRÊN THẾ GIỚI:

- Đặt trước đoạn (1) bằng script bên dưới:
<script type='text/javascript'>
//<![CDATA[
var regexpatt = new RegExp('commentPage=([0-9]*)');
var results = regexpatt.exec( window.location.href );
if(results == null)
{
var CommentsCounter = 0;
}
else
{
var CommentsCounter = (results[1] - 1) * 200;
}
//]]>
</script>
Đặt sau đoạn (2) bằng script bên dưới:
- See more at: http://anhcuatoianh968.blogspot.com/p/code.html#sthash.m3AfmPsT.dpuf
Posted in

3 nhận xét :

Đăng ký: Đăng Nhận xét ( Atom )
Twitter Delicious Facebook Digg Stumbleupon Favorites More
RSS Feed Subscribe to Our RSS feed!
Follow Us on Twitter! Follow Us on Twitter!