Tạo ngày tháng, tác giả, chia sẻ liên kết giống Facebook cho Blogspot

Thủ thuật tạo thông tin tác giả chia sẻ liên kết và ngày tháng năm giống như trên facebook. Thông tin tương đối gọn gàn và đầy đủ chi tiết để có thể áp dụng được cho Blogspot. Chúng ta có 4 bước để thực hiện.

Điều đầu tiên trước khi thực hiện thủ thuật này là bạn cần xóa bỏ đi code cũ có trong blogspot từ trước để tránh trùng lặp.

Các thư viện cần có trong Blog:

Bạn có thể chèn trên </body> hoặc </head>. Nếu đã có sẳn thì bạn không cần sử dụng nữa

1. Fonts Awesome: Hiện các Icon

2. Code tạo nút Like, Share của Facebook

<div id="fb-root"></div>
<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/sdk.js#xfbml=1&version=v2.10&appId=309376869532794";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

1. CODE HTML

Chèn Code HTML và dưới tiêu đều trong bài viết. Bạn cần xác định ID hoặc Class của tiêu đề để chèn cho thích hợp.

Tương ứng với Class trên bạn tìm dòng post-title entry-title và code sau vào bên dưới đoạn code vừa tìm:

<div class='post-meta'>
<div class='post-info'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<img class='authoravatar' expr:src='data:post.authorPhoto.url' itemprop='image'/>
<a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a> đã chia sẻ một <a onclick='CopyLink()' style='color: #365899;' title='Copy liên kết này'>liên kết</a>.
</span>
<div class='spinner' style='float: right; padding: 1px 0px 2px 6px;'>
<div class='dropdown'>
<a class='dropdown-link' href='javascript:void(0);' title='Chia sẻ'><i aria-hidden='true' class='fa fa-ellipsis-h'/></a>
<ul class='dropdown-container' style='right:10px!important'>
<li>
<div class='fb-like' data-action='like' data-layout='button_count' data-share='true' data-show-faces='false' data-size='small'/>
</li>

</ul>
</div>
</div>
<b:else/>
<span class='author-info'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'><data:post.author/></span>
</span>
</span>
</b:if>
</b:if><br/>
<span class='adminhp'>Thành viên <b>VIP</b> <i class='fa fa-check-circle'/></span>
<span style='color: #90949c;font-size:90%'><span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<b:if cond='data:post.url'>
<meta expr:content='data:post.canonicalUrl' itemprop='url'/>
<span class='published'><data:post.dateHeader/></span>
</b:if>
</b:if>

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'> <span class='post-timestamp'>
<meta expr:content='data:post.timestamp' itemprop='datePublished'/>
<meta expr:content='data:post.lastUpdatedISO8601' itemprop='dateModified'/>
<b:if cond='data:top.showTimestamp'>
<b:if cond='data:post.url'>
<meta expr:content='data:post.canonicalUrl' itemprop='url mainEntityOfPage'/>
lúc <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished dateModified'><span class='updated'><data:post.timestamp/></span></abbr></a>
</b:if>
</b:if>
</span>
</b:if>
</b:if>

</b:if> </span> · Thành phố Hồ Chí Minh · <i aria-hidden='true' class='fa fa-globe'/>
<i aria-hidden='true' class='fa fa-sort-desc'/>
</span>
</span>
</div>
</div>

2. CODE CSS

Chèn đoạn code sau trên thẻ /b:skin

.avatar-author{border-radius:50%}
.post-meta{color:#000;display:block;font-size:12px;font-weight:400;margin:10px 0 10px;padding:0}.g-profile{margin-left:0px}
.post-info {
}.post-author{font-size:14px}.post-info img {
clear: none;
width: 42px;
border-radius: 50%;
float: left;
margin: 3px 10px 0px 0px;
}.post-info a {
color: #365899;
font-weight: 600;
}span.adminhp {
word-wrap: break-word;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
background-color: #65af35;
color: #FFF;
font: 100 13px segoe ui;
margin: 0;
padding: 0 5px 1px 5px;
border-radius: 3px;
}.dropdown-link:active{-webkit-animation-duration:0.3s;animation-duration:0.3s;background:#ddd;border-radius:100%;-webkit-animation:ripple-effect 0.4s linear;animation:ripple-effect 0.4s linear}
.dropdown-container{background:#fff;z-index:999;position:absolute;background:#FFF;box-shadow:0 3px 8px rgba(0,0,0,.3);margin:5px 0 0 17px !important;max-height:400px;width:170px;overflow:auto;padding:10px!important;padding-bottom:10px!important;display:none}
.dropdown-container li i{border-radius:50%;margin-right:5px}
.dropdown-container li{list-style:none}.dropdown-container li a{font-size:13px;list-style:none;color:#262626;display:block;font-weight:400;padding:6px 5px;text-transform:none}.dropdown-container li a:hover{background-color:#edf4ff}

3. CODE Javascript

Code javascript sau bạn có thể chèn trên </body> hoặc trên </head> đều được

<script>
$(document).ready(function(){
$('.dropdown').each(function() {
var $dropdown = $(this);
$(".dropdown-link", $dropdown).click(function(e) {
e.preventDefault();
$div = $(".dropdown-container", $dropdown);
$div.toggle();
$(".dropdown-container").not($div).hide();
return false;
});
});

$('html').click(function(){
$(".dropdown-container").hide();
});

});
function copyTextToClipboard(text) {
var textArea = document.createElement("textarea");
textArea.style.position = 'fixed';
textArea.style.top = 0;
textArea.style.left = 0;
textArea.style.width = '2em';
textArea.style.height = '2em';
textArea.style.padding = 0;
textArea.style.border = 'none';
textArea.style.outline = 'none';
textArea.style.boxShadow = 'none';
textArea.style.background = 'transparent';
textArea.value = text;
document.body.appendChild(textArea);
textArea.select();
try {
var successful = document.execCommand('copy');
var msg = alert("Đã sao chép liên kết, sẳn sàng chia sẻ liên kết này ngay bây giờ!");
} catch (err) {
var msg = alert("Không thể sao chép liên kết!");
}
document.body.removeChild(textArea);
}
function CopyLink() {
copyTextToClipboard(location.href);
}
</script>