Ở những bài trước mình đã giới thiệu một số style sharing box chèn bên dưới bài đăng trong Blogger. Bài này mình sẽ chia sẻ một style nữa mà mình gọi là '3 trong 1' như hình trên. Sau đây là các bước thực hiện thủ thuật:
Bước 1: Tại trang quản trị blog, các bạn vào Mẫu -> Chỉnh sửa HTML, nhấn Ctrl + F tìm dòng <data:post.body/>.
Bước 2: Chèn đoạn code sau vào bên dưới nó:
<!--Socializer Widget by kjmagic.blogspot.com--> <b:if cond='data:blog.pageType == "item"'> <style> #kjsocializer { width: 500px; height: 240px; border: 1px solid #ddd; -webkit-box-shadow0px 7px 9px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75); box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75); background: #f1f1f1; -transition: background 0.50s; -webkit-transition: background 0.50s; -moz-transition: background 0.50s; margin-bottom: 10px; overflow: hidden; } #kjsocializer:hover { background: #fff; } #kjsocializer-title { text-align: center; border: 1px solid #2aa4cf; font-size: 20px; background: #2aa4cf; font-weight: 2000; font-family: oswald; padding: 5px; color: #fff; } #SocializeIt { float: left; border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; margin-left: -10px; margin-top: 10px; } .tweet, .like, .plusone, .stumbleit { float: left; border-left: 1px solid #eaeaea; padding-left: 18px; padding-top: 15px; padding-bottom: 10px; } .g-plusones { margin-left: 20px; } .heading { float: left; padding-right: 20px; padding-top: 15px; text-transform: uppercase; font-weight: bold; margin: 0px; padding-left: 30px; font-family: oswald; } #followus, #share { float: left; border-bottom: 1px solid #eaeaea; margin-left: -10px; } .likeonfb, .followontwitter, .sharing { float: left; border-left: 1px solid #eaeaea; padding-left: 10px; padding-bottom: 10px; padding-top: 15px; } #sw-credits { float: right; padding: 3px; font-size: 10px; margin-right: 10px; } </style> <script type='text/javascript'> (function (_0x2162x1, _0x2162x2, _0x2162x3) { var _0x2162x4 = _0x2162x1['getElementsByTagName'](_0x2162x2)[0]; if (!_0x2162x1['getElementById'](_0x2162x3)) { _0x2162x1 = _0x2162x1['createElement'](_0x2162x2); _0x2162x1['id'] = _0x2162x3; _0x2162x1['src'] = '//platform.twitter.com/widgets.js'; _0x2162x4['parentNode']['insertBefore'](_0x2162x1, _0x2162x4); }; })(document, 'script', 'twitter-wjs'); </script> <script type='text/javascript'> var switchTo5x = false; </script> <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/> <script type='text/javascript'> stLight.options({ publisher: " ede9503f - 57ea - 4698 - a245 - 17187b93fa50 ", doNotHash: false, doNotCopy: false, hashAddressBar: false }); </script> <center> <div id='kjsocializer'> <div id='kjsocializer-title'> Socializer Widget by kjmagic.blogspot.com </div> <div id='SocializeIt'> <font class='heading'>SOCIALIZE IT →</font> <div class='tweet'> <a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a> </div> <div class='like'> <iframe allowtransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/> </div> <div class='plusone'> <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/> </div> </div> <div id='followus'> <font class='heading'>FOLLOW US →</font> <div class='likeonfb'> <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fmrjan.tk&send=false&layout=button_count&width=77&show_faces=false&font&colorscheme=light&action=like&height=21' style='border:none; overflow:hidden; width:77px; height:21px;'/> </div> <div class='followontwitter'> <a class='twitter-follow-button' data-button='grey' data-link-color='#289728' href='http://twitter.com/quocdoantrinh' rel='nofollow'/> <script src='http://platform.twitter.com/widgets.js' type='text/javascript'/> </div> </div> <div id='share'> <font class='heading'>SHARE IT →</font> <div class='sharing'> <span class='st_facebook_large' displaytext='Facebook'/> <span class='st_twitter_large' displaytext='Tweet'/> <span class='st_googleplus_large' displaytext='Google +'/> <span class='st_pinterest_large' displaytext='Pinterest'/> <span class='st_linkedin_large' displaytext='LinkedIn'/> <span class='st_stumbleupon_large' displaytext='StumbleUpon'/> <span class='st_email_large' displaytext='Email'/> <span class='st_sharethis_large' displaytext='ShareThis'/> </div> </div> </div> </center> </b:if> <!--/Socializer Widget by kjmagic.blogspot.com-->
Những chỗ mình đánh dấu màu xanh là ID Facebook Fanpage và Twitter của bạn.
Chúc các bạn thành công !
Xem thêm thủ thuật: kjmagic.blogspot.com
Nhận xét
mình làm theo nhưng báo lỗi chỗ này bạn ạ?
Trả lờiXóa<iframe allowtransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send" lỗi chỗ này"=fal
Bạn sửa đoạn &send thành:
Xóa&send
Nhờ anh kiếm tra đoạn :
Trả lờiXóa<!-- Bat dau -->
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta content='uoQr0Bkf3zSjJVGNJfeEH4R0hwnMlPeQuxGMEDVGgdg' name='google-site-verification'/>
<title>
<b:if cond='data:blog.pageType == "index"'>
<data:blog.pageTitle/>
<b:else/>
<b:if cond='data:blog.pageType != "error_page"'>
<data:blog.pageName/> | <data:blog.title/>
<b:else/>
404 | <data:blog.title/>
</b:if>
</b:if>
</title>
<!--đoạn này học theo namkna-->
<meta content='tin tức, giải trí, hài hước' name='description'/>
<!--end đoạn này học theo namkna-->
<b:if cond='data:blog.metaDescription == ""'>
<meta expr:content='data:blog.pageName + " - " + data:blog.title' name='description'/>
<b:else/>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
<!-- Ket thuc -->
trong site : http://tinnet3s.blogspot.com/
có bị gì không - tại sao phần miêu tả lúc nào cũng chỉ hiieenr duy nhất một đoạn mô ta một
Em chú ý đoạn này:
Xóa<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
là đoạn a dùng để thay thế cho đoạn code không chuẩn hóa w3c bên dưới:
<b:include data='blog' name='all-head-content'/>
Do vậy nó sẽ hiển thị như e nói. E có thể kiểm tra trang của anh hay trang của bất cứ ai chuẩn hóa HTML5 đều như thế.
Minh tâm : Vậy bây giờ em nên làm như thế nào được anh
Trả lờiXóaảnh giúp em cách giải quyết với
Trả lờiXóaEm có thể dùng đoạn này nếu muốn chuẩn hóa theo HTML5:
Xóa<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta content='uoQr0Bkf3zSjJVGNJfeEH4R0hwnMlPeQuxGMEDVGgdg' name='google-site-verification'/>
<title>
<b:if cond='data:blog.pageType == "index"'>
<data:blog.pageTitle/>
<b:else/>
<b:if cond='data:blog.pageType != "error_page"'>
<data:blog.pageName/> | <data:blog.title/>
<b:else/>
404 | <data:blog.title/>
</b:if>
</b:if>
</title>
<b:if cond='data:blog.metaDescription == ""'>
<meta expr:content='data:blog.pageName + " - " + data:blog.title' name='description'/>
<b:else/>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
Tất nhiên nó sẽ không được như đoạn all-head-content
Hoặc em co thể sử dụng đoạn bên dưới. Tuy nhiên nó sẽ không chuẩn hóa Valid HTML5.
Xóa<b:include data='blog' name='all-head-content'/>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta content='uoQr0Bkf3zSjJVGNJfeEH4R0hwnMlPeQuxGMEDVGgdg' name='google-site-verification'/>
<title>
<b:if cond='data:blog.pageType == "index"'>
<data:blog.pageTitle/>
<b:else/>
<b:if cond='data:blog.pageType != "error_page"'>
<data:blog.pageName/> | <data:blog.title/>
<b:else/>
404 | <data:blog.title/>
</b:if>
</b:if>
</title>
<b:if cond='data:blog.metaDescription == ""'>
<meta expr:content='data:blog.pageName + " - " + data:blog.title' name='description'/>
<b:else/>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
Về cơ bản 2 đoạn trên không có gì khác nhau mấy, nội dung hiển thị vẫn như nhau.
sao làm không duoc bạn ơi, mình đã chỉnh
Trả lờiXóa&send thành &send, lại báo lổi
The reference to entity "layout" must end with the ';' delimiter.
giúp mình với
Mình đã cập nhật lại toàn bộ code ở phần inframe rồi bạn làm lại đi nha.
XóaCám ơn bạn nhiều.
XóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaThis was a very helpful post.
Trả lờiXóaBlogger tutorial