Thứ Sáu, 13 tháng 4, 2018

Code Menu cuộn ngang
XEM BÀI VIÊT
TOÀN MÀN HÌNH


Đầu tiên các bạn chèn css vào trước </b:skin>


div.scrollmenu {
    background-color: #333;
    overflow: auto;
    white-space: nowrap;
}

div.scrollmenu a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}

div.scrollmenu a:hover {
    background-color: #777;
}


Tiếp đến đoạn code hiển thị menu chèn chỗ cần hiển thị:

<div class="scrollmenu">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="#support">Support</a>
  <a href="#blog">Blog</a>
  <a href="#tools">Tools</a> 
  <a href="#base">Base</a>
  <a href="#custom">Custom</a>
  <a href="#more">More</a>
  <a href="#logo">Logo</a>
  <a href="#friends">Friends</a>
  <a href="#partners">Partners</a>
  <a href="#people">People</a>
  <a href="#work">Work</a>
</div>

Thứ Sáu, 23 tháng 3, 2018

Tăng chất lượng ảnh thumbnail của Youtube bằng jQuery cho Blogger
XEM BÀI VIÊT
TOÀN MÀN HÌNH


Rất tương tự với cách thức làm ở bài viết tăng chất lượng ảnh thumbnail, đầu tiên bạn tìm đến thể </body> (thưởng thì nó ở cuối một template bất kì) sau đó thêm đoạn jQuery này lên trên


<script type='text/javascript'>                 
function changeYThumbSize(id){
    var c = document.getElementById(id),
        d = c.getElementsByTagName("img");
    for (var a = 0; a < d.length; a++) {
        d[a].src = d[a].src.replace("default.jpg", "sddefault.jpg");
    }
}
changeYThumbSize(&quot;Blog1&quot;);                 
</script>

Ở đoan jQuery trên, Blog1 là id của thẻ chứa toàn bộ bài viết, bạn có thể thay đổi thành id của thẻ nào đó khác mà bạn muốn, ví dụ PopularPosts1 là id của bài đăng phổ biến. Còn 150 là kích thước tính theo px, bạn có thể tùy chỉnh sao cho phù hợp với blog của mình.
Chèn quảng cáo dưới bài viết bất kì tại trang chủ cho Blogger
XEM BÀI VIÊT
TOÀN MÀN HÌNH
Đăng nhập vào trang chủ Blogger chọn blog của bạn và chỉnh sửa template của blog đó.



Tiếp tục bạn tìm điến đoạn mã sau
<b:loop values='data:posts' var='post'>
thêm thuộc tính index='i' cho thẻ đó
<b:loop values='data:posts' var='post' index='i'>
Kế đến lại tìm đến thẻ sau
<b:include data='post' name='post'/>
chèn đoạn mã sau đây dưới đoạn mã đó
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:i == 2'>
Mã quảng cáo của bạn
</b:if>
</b:if>
Bạn thấy bước này khá tương tự với chèn quảng cáo xuống bài viết đầu tiên, nhưng ở đây chúng ta có thể xác định được vi trí của các bài viết trên trang chủ, ở đây data:i == 2 nội dung bạn chèn vào sẽ dứng ở bài viết thứ 3 (do dãy số bắt đầu từ số 0), cứ như thế bạn chèn mã quảng cáo của bạn vào và thay đổi số i bằng vị trí mà bạn muốn chèn quảng cáo của mình vào.
Hiện địa chỉ liên kết khi rê chuột vào link bằng CSS
XEM BÀI VIÊT
TOÀN MÀN HÌNH


Hiện địa chỉ liên kết khi rê chuột vào link
Để thêm hiệu ứng nhỏ này vào Blogger / Blogspot thì khá đơn giản bạn chỉ cần chèn đoạn mã này lên trên thẻ ]]></b:skin> là xong


.post-body a { position:relative; }
.post-body a::before {
content:attr(href);
font-size:11px;
line-height:11px;
font-family:Arial,sans-serif;
text-transform:none;
padding:8px 12px;
top:-34px;
right:0px;
transition:.3s ease-out;
background:#222;
color:#fff;
border-radius:5px;
position:absolute;
opacity:0;
visibility:hidden;
}
.post-body a::after {
content:" ";
width:0;
height:0;
right:10px;
top:-7px;
transition:.3s ease-out;
border-color:#222 transparent transparent;
border-style:solid;
border-width:6px 6px 0;
position:absolute;
opacity:0;
visibility:hidden;
}
.post-body a:hover::before, .post-body a:hover::after {
opacity:1.5;
visibility:visible;
}

Bạn nào biết css thì có thể tự chỉnh lại cho đẹp hơn nhé tại mình thấy nó vẫn chưa được đẹp lắm.
Hướng dẫn tạo link thu gọn bằng Javascript
XEM BÀI VIÊT
TOÀN MÀN HÌNH


Đây tiên đây là đoạn Javascript sẽ thực hiện công việc thu gọn liên kết, hay nói chính xác hơn là chuyển hướng liên kết được định sẵn qua liên kết khác. Bạn hãy chèn nó lên trên thẻ </head>
<script language='javascript'>
//<![CDATA[
var key = window.location.href.split("go/")[1].replace("/","")
var urls={
    'fb':'https://www.facebook.com/beohoavinh',
    'gplus':"https://plus.google.com/+beohoavinh",
    'twitter':"https://twitter.com/beohoavinh",
    'hosting':"https://tenmien.com/?rel=beohoavinh" /* 'ký tự thu gọn' : "liên kết chuyển hướng" */
}
if(key){
    if(urls[key]){
        window.location.href=urls[key]
    }else{
        document.write("'"+key+"' not found :(");
    }
}
//]]>
</script>


bạn có thể sửa hoặc thêm bằng cách đổi các ký tự thu gọn kèm theo địa chỉ sẽ được chuyển hướng, và nhớ là mỗi lần liên kết được khai báo được cách nhau bởi dấu "," bạn nhìn trên script trên chắc cũng rõ rồi.

Sau khi hoàn thành xong như đoạn script trên mà mình đã chia sẽ thì mình ví dụ một liên kết
http://www.chiase78.blogspot.com/go/fb

sẽ được chuyển hướng đến

https://www.facebook.com/beohoavinh
đơn giản phải không.