Chèn khung đăng kí,theo dõi,like box,like facebook bên dưới bài đăng cho blogspot

Bài viết này mình sẽ chia sẻ tới các bạn cách tạo khung Social Sharing & Subscription vào cuối bài viết. Widget gồm có 3 thành phần là box subscribe, box sharing và box fanpage. Các bạn có thể xem hình dưới

Các bước thực hiện

Bước 1: Tại trang quản trị blog, các bạn vào Mẫu -> Chỉnh sửa HTML. Tìm thẻ <data:post.body/>

Bước 2: Chèn đoạn code sau vào bên dưới nó

<!-- Social Subscription Widget by http://vietmkt360.blogspot.com --> <b:if cond='data:blog.pageType == &quot;item&quot;'> <style> .tbibox { background: #fff; border: 1px solid #ddd; height: 360px; margin: 10px auto; padding: 10px; width: 572px; -webkit-border-radius: 10px; border-radius: 10px; } .tbisubscribe { border: 1px solid #D3D3D3; padding: 8px; width: 300px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tbisubscribe:hover { -moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1); -webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1); box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1); } .tbimailbox { border: 1px solid #D3D3D3; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset; -webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset; box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset; color: #666; font: 14px "trebuchet ms", sans-serif; padding: 7px 15px; width: 160px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tbimailbox:hover { -webkit-box-shadow: none; box-shadow: none; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tbisubmit { font: bold 12px Tahoma, Geneva, sans-serif; font-style: normal; color: #ffffff; background: #ff5714; border: 0px solid #ffffff; text-shadow: 0px -1px 1px #222222; box-shadow: 2px 2px 5px #000000; -moz-box-shadow: 2px 2px 5px #000000; -webkit-box-shadow: 2px 2px 5px #000000; border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; padding: 8px 15px; cursor: pointer; margin: 0 auto; } .tbisubmit:active { cursor: pointer; position: relative; top: 2px; } .tbisubmit::-moz-focus-inner { border: 0; padding: 0; margin: 0; } .tbisharebox { border: 1px solid #D3D3D3; margin: -157px 0 0 330px; padding: 8px; width: 225px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tbisharebox:hover { -moz-box-shadow: 1px 1px 2px #CCC inset; -webkit-box-shadow: inset 1px 1px 55px 1px rgba(249, 215, 126, 1); box-shadow: inset 1px 1px 55px 1px rgba(249, 215, 126, 1); -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } </style> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' /> <div class='tbibox'> <div class='tbisubscribe'> <div style='color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;'>Đăng ký nhận tin mới</div> <div style='margin: 10px 0 0 6px;'> <form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=tntbystc&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'> <input name='uri' type='hidden' value='tntbystc' /> <input name='loc' type='hidden' value='en_US' /> <input class='tbimailbox' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email...' /> <input alt='' class='tbisubmit' title='' type='submit' value='Subscribe'/> </form> </div> <div style='border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;'>Follow us on:</div> <div style='margin: -32px 0 0 120px;'> <a href='FACEBOOK URL' target='_blank' title='Join us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyZBBawBfmdwg5LH5w-JypM4ndzlmIPeJsgrZuepWgFFc5pHbkM3T1fskn7vl64RGd-959lW74Tl8SenZ89cocHDSkJaHkXeOwdrCC7hJrRzUwmHySETLogtya1SULatw_krGQknM_ICU/s32/facebook500.png' alt='facebook'/></a> <a href='TWITTER URL' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQw0XoO0NKeCMY5dT4WEykmVP_OmydiVo2gb68WyuVi9-x47wZXIlWYdJzZVO3Frqqc-w0tYHz1Uqrmg3YXAR2JsHUd6EBPBMuJPRzfPQxbVfQBTcs-Hjo80tgiKqToBN3Mfv2FrRarSs/s32/twitter.png' alt='twitter'/></a> <a href='GOOGLE+ URL' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyqVoAxxAy9yY-RjEXlhSFq4_xtUzPB_4t-xHob_KVSostmnSItNeSb7JR7GS85LebghD9iLLQMdDiY427NpAI8KtrLCPU4qT7rRwAe5kGTxg3RaF0xeAbaEMH7xCxd9ojYZzw8rHCjGI/s32/googleplus-revised.png' alt='gplus'/></a> <a href='PINTEREST URL' rel='nofollow' target='_blank' title='Follow us on Pinterest'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVgOQDMnjMUd-0grxwM4Nx-oufKRvITaACXmEXarx8MQfZpWjHExyWVldBJwrrs_1STMYxlaCfYinIj167F4wk3Btiqrv2KFx4l41gGdRQhjqroj6cypb7rH18MAmKEIljnXGYoH6VnJk/s32/pinterest.png' alt='pinterest'/></a> <a href='RSS URL' rel='nofollow' target='_blank' title='Subscribe to RSS'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjAU6pX4lcjjLyFzayQsrzu9lM-Um9qeUaNZ2U5jIk1i9xSiJB-JGju8Qqy5Ezd-2Orybj9G1p31Q4nOApuXMEAybcPi4nZ8wY7t0eE22odnlc5JpqE05HvmVm0Mp9PUPNtyjLQUR6Rtc/s32/rss.png' alt='rss'/></a> </div> </div> <div class='tbisharebox'> <script type='text/javascript'> var switchTo5x = true; </script> <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/> <script type='text/javascript'> stLight.options({ onhover: false }); </script> <div style='margin: 5px 5px;'> <span class='st_fblike_hcount' displaytext=''></span> </div> <div style='margin: -30px -20px 0 0; float: right;'> <a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button' expr:data-url='data:post.canonicalUrl' expr:data-text='data:post.title' data-count='horizontal' data-lang='en'></a> <b:if cond='data:post.isFirstPost'> <script type='text/javascript' src='http://platform.twitter.com/widgets.js'></script> </b:if> </div> <div class='addthis_toolbox addthis_default_style' style='margin: 10px 0 12px 85px;'> <a class='addthis_counter'></a> <script type='text/javascript' src='http://s7.addthis.com/js/250/addthis_widget.js'></script> </div> <div style='margin: 5px 5px;'> <su:badge layout='1'></su:badge> <script type='text/javascript'> (function () { var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true; li.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + '//platform.stumbleupon.com/1/widgets.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s); })(); </script> </div> </div> <div style='float: right; margin: -40px -5px 0 0;'> <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'></div> <script type='text/javascript'> (function () { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> </div> <div style='margin-top: 20px;'> <iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Viettin365&amp;width=570&amp;colorscheme=light&amp; show_faces=true&amp;stream=false&amp;header=false&amp;height=180' style='border:none; overflow:hidden; width:570px; height:180px;' /> </div> </div> </b:if> <!-- End Social Subscription Widget by http://vietmkt360.blogspot.com/ -->

Điều chỉnh lại các thông số cho phù hợp với Blog/Website

Bước 3: Lưu lại 

Chúc các bạn thành công

Nguồn vietmkt360.com

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..