Chia Sẻ Thủ Thuật

<script type='text/javascript'>
document.onkeyup = function(event)
{
if (document.activeElement.nodeName == 'TEXTAREA' || document.activeElement.nodeName == 'INPUT') return;
event = event || window.event;
switch(event.keyCode)
{
case 37:
var newerLink = document.getElementById('Blog1_blog-pager-newer-link');
if(newerLink !=null) window.location.href = newerLink.href;
break;
case 39:
var olderLink = document.getElementById('Blog1_blog-pager-older-link');
if(olderLink!=null) window.location.href = olderLink.href;
}
};
</script>

<a expr:name='data:post.id'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='box-info'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
&#187;
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<span typeof='v:Breadcrumb'>
<a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
<b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if>
</b:loop>
<b:else/>
&#187;Unlabelled
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</div>
<div class='thumbnail-info'>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
<b:else/>
<img alt='no image' class='post-thumbnail' src='https://googledrive.com/host/0Bz_65BAr9KCZMk5fWGQ5SDUzOUU'/>
</b:if>
</div>
<div class='info-box'>
<ul>
<li>Title : <data:post.title/></li>
<li>Author : <span class='post-author vcard'> <span class='fn'><data:post.author/></span></span></li>
<li>Date : <a class='updated timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='updated published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a></li>
<li>Labels : <span class='post-labels'>
        <b:if cond='data:post.labels'>       
          <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></li>
</ul>
</div>
</div>
</b:if>

]]></b:skin>

.box-info, .ndpost{border:1px solid #323232;background:#161616;background-image:-moz-linear-gradient(#161616,black);background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#161616),to(black));background-image:-webkit-linear-gradient(#161616,black);background-image:-o-linear-gradient(#161616,black);background-image:-ms-linear-gradient(#161616,black);-pie-background:linear-gradient(#161616,#000);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:10px;overflow:hidden}
.thumbnail-info{float:left;padding:5px;background-color:black}
.thumbnail-info img{border:0}
.info-box{float:left;color:white;width:560px}
.info-box ul{margin:0;padding:0}
.info-box li{list-style:none;padding:3px 10px}

/* 
 
Blogger Zoom Gallery  */
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;  /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://4.bp.
 
blogspot.com/_p4Te9Li52fs/So9a2fSh2jI/AAAAAAAAAAc/VX0mAW1oYHc/thumb_bg.png) no-repeat center center;  /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}

<script src='http://code.
 
jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Larger thumbnail preview

$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);

} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});

//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {

var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });
return false;
});

});
</script>

<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/vi_VN/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>[code]
[B][B][B]Bước 3:[/B] Tích hợp phần quản trị Blogspot bằng cách thêm ID của người quản trị (tài khoản Facebook)[/B][/B]

Bạn vào địa chỉ: [B]https://developers.facebook.com/[/B]
Chọn [B]My Apps[/B] chọn tiếp [B]Add a New App[/B]

Chọn tiếp Skip and Create App IDgóc bên phải, rồi nhập các nội dung cần nhập. Ví Dụ:
[ATTACH=full]43758[/ATTACH] 
Rồi điền những gì cần điền, sau đó lấy số App ID trên trang.

Tiếp đến, bạn sẽ COPY đoạn code sau vào Blogspot. Đưa vào trong thẻ [B]<head>[/B] . Kéo thanh cuộn lên đầu và thêm đoạn mã Code sau.
[code]<meta content='ID tài khoản Facebook của bạn' property='fb:admins'/>

<div class='fb-comments' data-num-posts='10' data-width='600' expr:href='data:Post.canonicalUrl'/>

https://totnhatvina.com

]]></b:skin>

.animated{-webkit-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;-o-animation-iteration-count:infinite;animation-iteration-count:infinite}.bounceIn{-webkit-animation-name:a;-o-animation-name:a;animation-name:a}.bounceInDown{-webkit-animation-name:b;-o-animation-name:b;animation-name:b}.pulse{-webkit-animation-name:c;-o-animation-name:c;animation-name:c}@-webkit-keyframes a{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}@-o-keyframes a{0%,20%,40%,60%,80%,to{-o-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:scale3d(.3,.3,.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(.9,.9,.9)}60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{transform:scale3d(.97,.97,.97)}to{opacity:1;transform:scaleX(1)}}@keyframes a{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);-o-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}@-webkit-keyframes b{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(215,610,355,1);animation-timing-function:cubic-bezier(215,610,355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:none;transform:none}}@-o-keyframes b{0%,60%,75%,90%,to{-o-animation-timing-function:cubic-bezier(215,610,355,1);animation-timing-function:cubic-bezier(215,610,355,1)}0%{opacity:0;transform:translate3d(0,-3000px,0)}60%{opacity:1;transform:translate3d(0,25px,0)}75%{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,5px,0)}to{-o-transform:none;transform:none}}@keyframes b{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(215,610,355,1);-o-animation-timing-function:cubic-bezier(215,610,355,1);animation-timing-function:cubic-bezier(215,610,355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:none;-o-transform:none;transform:none}}@-webkit-keyframes c{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.2,1.2,1.2);transform:scale3d(1.2,1.2,1.2)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@-o-keyframes c{0%{transform:scaleX(1)}50%{transform:scale3d(1.2,1.2,1.2)}to{transform:scaleX(1)}}@keyframes c{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.2,1.2,1.2);transform:scale3d(1.2,1.2,1.2)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@-webkit-keyframes d{0%{opacity:0;-webkit-transform:translate(-50%,6px);transform:translate(-50%,6px)}to{opacity:1;-webkit-transform:translate(-50%);transform:translate(-50%)}}@-o-keyframes d{0%{opacity:0;-o-transform:translate(-50%,6px);transform:translate(-50%,6px)}to{opacity:1;-o-transform:translate(-50%);transform:translate(-50%)}}@keyframes d{0%{opacity:0;-webkit-transform:translate(-50%,6px);-o-transform:translate(-50%,6px);transform:translate(-50%,6px)}to{opacity:1;-webkit-transform:translate(-50%);-o-transform:translate(-50%);transform:translate(-50%)}}@-webkit-keyframes e{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}40%{-webkit-transform:translateX(0);transform:translateX(0)}60%{-webkit-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@-o-keyframes e{0%{-o-transform:translateX(-100%);transform:translateX(-100%)}40%{-o-transform:translateX(0);transform:translateX(0)}60%{-o-transform:translateX(0);transform:translateX(0)}to{-o-transform:translateX(100%);transform:translateX(100%)}}@keyframes e{0%{-webkit-transform:translateX(-100%);-o-transform:translateX(-100%);transform:translateX(-100%)}40%{-webkit-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}60%{-webkit-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(100%);-o-transform:translateX(100%);transform:translateX(100%)}}

<i class="fa fa-heart animated infinite pulse" style="color:red"></i>