Hướng Dẫn Tạo Widget Theo Dõi Bài Viết Blogger

   Hôm nay mình sẽ hướng dẫn cho các bạn cách tạo một widget theo dõi bài viết cùng các mạng xã hội, khi các bạn vào trang thegioitinhoconline.com thì các bạn thấy cái widget như hình trên, khi bạn nhập địa chỉ mail của mình vào và enter các bạn có thể đăng ký nhận tin tức các bài viết mới nhất từ thegioitinhoconline.com tức là khi có bài viết mới sẽ được gửi tự động đến mail đăng ký.

để làm được điều này thì các bạn hãy thao tác như sau:

Bước 1: đăng nhập blogger.

Bước 2: các bạn vào Bố cục >> Thêm tiện ích >>chọn HTML/Javascript vầ paste đoạn code dưới đây vào như hình mình đã chụp.

Đây là đoạn mã code đó các bạn có thể copy về mà thực hiện.

<style type='text/css'>

.social a{color: #6e6e6e;font: bold 12px Calibri,Helvetica, Arial, sans-serif;text-decoration: none;padding: 3px 5px 2px;position: relative;display: inline-block;text-shadow: 0 1px 0 #fff;-webkit-transition: border-color .218s;-moz-transition: border .218s;-o-transition: border-color .218s;transition: border-color .218s; background: #f3f3f3;border: solid 1px #dcdcdc;}

.social a:hover {color: #333;border-color: #999;-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);}

.social a:active{color:#000;border-color: #444;}

.sub-box{width:300px;background:();padding: 2px 5px 7px 2px;font-family:Droid Sans,Helvetica,Arial;}

.emailform{margin:16px 0 0; display:block; clear:both;}

.emailtext{margin:10px 0 0;background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtWswpLPuZjAS5J1r6KsMZZSSC2vet4HR7pmIOw6FV3jpgTfV4L5Lh9F4fogj6mMgyBoCz0P0fVojb4EcCgT6kgvGuEZmwVBWgnK0SgX1Sg6EuZeHOE3f8okhbdLpdHUrhrWfgfbcgXLU/s1600/email.png) no-repeat scroll 4px center;padding:6px 5px 6px 34px;color:#444;font-weight:bold; text-decoration:none;border:1px solid #ccc;width:175px;}

.emailtext:hover{background: #f3f3f3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtWswpLPuZjAS5J1r6KsMZZSSC2vet4HR7pmIOw6FV3jpgTfV4L5Lh9F4fogj6mMgyBoCz0P0fVojb4EcCgT6kgvGuEZmwVBWgnK0SgX1Sg6EuZeHOE3f8okhbdLpdHUrhrWfgfbcgXLU/s1600/email.png) no-repeat scroll 4px center;border-color:#999;}

.emailtext:focus{outline:none;}

.sub-button{color:#eee;font-weight:bold; text-decoration:none;padding:5px 10px; border:1px solid #666;cursor:pointer;background:#999}

.sub-button:hover{color:#444;border-color: #999;background:#ccc}

</style>

<center><div class="social" style="padding: 0pt 0pt 0pt 5px;">

<table><tbody><tr><td>

<a href='http://feedburner.google.com/fb/a/mailverify?uri=TheGioiTinHocOnline' rel="nofollow"target='_blank'><img alt='newsletters' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwFJoRfeu5YUD3tIQQD0cG840qm8LKpce4NBL7mR3CoQC8KQuwmpdPRQrJoPjb2wHL7OWnwCC4a8r3Tpg1xem83MQ5t0b0R1Pq9XaG6-fYiDz3LSqvctKbUJjhNNj0aMuHGPXgd2pfK8c/s1600/mail.png" border="0" title='newsletters'/></a> </td>

<td> <a href='http://feeds.feedburner.com/TheGioiTinHocOnline' target='_blank'><img alt='rss' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_12tHoeMwz2xYv2fMHUUakx7kZzA53LxGP8fRe7vtfLcEydYJWsaxvP3L0zeReSDnoRvBAa5wNw-Hc-hcT3Ye21eY1IgjBohhuzyXlXQCqnbpI82p7LY_42ZtetMlGLKSV2262JEBXDI/s1600/rss.png" border="0" title='rss'/></a> </td>

<td> <a href='https://twitter.com/TheGioiTinHocOn' target='_blank'><img alt='twitter' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsY1og5mxw3lyBoNanbdCLRJvMkWj-mKibdIxQ-Sh0nPjulD94Q9RQgRoR2y1-POEODeHhGJnXywNNms1GELAcyyZzDFvJBUNBR64VFC8bbCnWVMNSJrVw6nYI-Fd-zRSnC-Tu6GoVVwg/s1600/twitter.png"  border="0" title='twitter'/></a> </td>

<td> <a href='https://www.facebook.com/thegioitinhoconline' target='_blank'><img alt='facebook' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHRKazyvBdSXQyET_NTz0LY_4UdikaSSmFGXAV85_4UWoBt0r3SuAmBdhSeLkAC_nEoFO5UAZsgMe07P5Ul6HoBI2oeMKwqCtmdayszh-m5_hknbHgPblEFwr1llzXOwujfSxJi__YvC4/s1600/facebook.png"  border="0" title='facebook'/></a> </td>

<td> <a href='http://www.youtube.com/' target='_blank'><img alt=' youtube' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfABMPWqJsqOcr6bI2pZHXX0mkAJanhyRybu07mAIBCAACbrjy0Itreh7KFHAiv_3iAE5O8CN4UW0OhUou7zMO9WuZpLJGwU9a8LUzw4zb6meNSiXcz3TPkwZwFh1LxeNE6Nb8HSQqOXQ/s1600/youtube.png"  border="0" title='youtube'/></a>

</td>

</tr></tbody></table> </div></center>

<center>

<div class='sub-box'>

<div style="text-align: left; display: inline-block;">

<h8 style="display:block;font-family:'calibri';font-size:15px;font-weight:bold;">Subscribe via RSS Feed</h8>

<small><i>If you enjoyed this article just <a href='http://feeds.feedburner.com/TheGioiTinHocOnline' rel="nofollow" target='_blank' title='feedburner'>

<b>click here</b></a>, or subscribe to receive more great content just like it.</i></small>

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=TheGioiTinHocOnline', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

<input type="hidden" value="Thegioitinhoconline" name="uri"/>

<input type="hidden" name="loc" value="fr_FR" />

<input type="text" 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;}" value="Enter your email..." name="email" class="emailtext" />

<input type="submit" class="sub-button" value="Enter" title='' alt='' />

</form></div></div></center>

Lưu ý:  các bạn hãy lần lượt thay địa chỉ face, twitter, youtube, feeds.feedburner các dòng màu đỏ tương ứng với địa chỉ các mạng xã hội của mình, về facebook, twitter, youtube, thì chắc không có gì lạ đối với các bạn còn feedburner thì các bạn có thể đămg ký địa chỉ của mình tương ứng với địa chỉ http://feedburner.google.com/fb/a/mailverify?uri=TheGioiTinHocOnline

Để đăng ký thì các bạn có thể tham khảo bài viết Đăng Ký Nhận Bài Viết Thông Qua Feedburner rồi thay thế vào địa chỉ widget của mình.

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

Bài viết thuộc bản quyền thegioitinhoconline.com. Bạn nào copy cho blogger/website thì hãy ghi rõ nguồn bài viết bên dưới để thể hiện nhân cách của mình nha.

Share: