Add floating notification bar to Blogspot | GIÁO XỨ LỘC THỦY
12 Thánh tông đồ Audio suy niệm Audio truyện Công giáo Âm nhạc Bài Giảng mp3 Bạn có biết bạn trẻ xa nhà Bảo vệ sự sống Blog tips Ca kịch công giáo Các bài giáo lý của ĐTC Phanxicô Các hội đoàn Các mục chính Các Thánh Các thánh địa Công giáo Các thánh khác Các Tuần Cửu Nhật Kính Đức Mẹ Các vấn nạn xã hội Cắm hoa nghệ thuật Câu chuyện Giáng Sinh Châm ngôn công giáo Chiêm ngắm Chúa Chuyện phiếm đạo đời Chuyện về Giáo Lý và Giáo Dục Công Giáo đó đây Cửu Nhật Kinh Nguyện Danh Danh bạ website các giáo xứ - giáo họ việt nam Danh bạ website công giáo Di sản thế giới Du Lịch Đẹp + Để sống đạo hôm nay Đôi nét về Giáo xứ Đời sống cầu nguyện Đức Mẹ Hằng Cứu Giúp Đức Mẹ Lama Đức Thánh Cha phanxico Đức Tin và Khoa Học Đường Hy Vọng Gia đình Giải đáp thắc mắc cuộc đời Giao hat Vang Mai Giáo hạt Vàng Mai Giáo Hội Đông Phương Giáo lý - dân ca Giáo lý - kinh thánh Giáo sử Giáo xứ Media góc học tập Góc khám phá Góc nghệ thuật Góc thư giãn Góp nhặt Hạt Giống Lời Chúa Hình ảnh cổ xưa Hình ảnh Giáo xứ Lộc Thủy học tiếng anh Hướng dẫn sử dụng webblog Kết nối websites Kiến thức phổ thông Kính Đức Mẹ Kinh thánh tiếng anh Lẽ sống Lịch sử các Dòng tu Lịch sử Giáo Hội Việt Nam Lịch sử hình thành Giáo xứ Lộc Thủy Lòng Thương xót Chúa Lộc Thủy Lời Chúa qua bài hát Lời chúa theo chủ đề Mùa Vọng - Advent Năm thánh Lòng Thương Xót Nghe và suy gẫm Nghệ thuật Công Giáo Nghệ thuật sống Ơn gọi-tận hiến Phim công giáo Quỳnh lưu Radio Công Giáo Sách Công giáo sách tháng đức bà Sắc màu cuộc sống Sổ tay sinh hoạt suy gẫm Suy gẫm và Cầu nguyện Suy niệm Lời Chúa Suy niệm Lời Chúa mùa Phục Sinh Suy niệm Lời Chúa mùa TN A Suy niệm Lời Chúa năm A Suy niệm mùa chay Sức khỏe - ẩm thực Tài liệu Công Giáo tổng hợp Tài liệu dạy Giáo Lý Tài liệu Tuần Thánh Thánh ca Thánh ca cầu nguyện Thánh Ca Hoàng Diệp Thánh Mẫu học Thánh Mẫu La vang Thế giới Công Giáo Thơ - Truyện Công Giáo Thơ Công Giáo Thơ và cuộc sống Thủ thuật blog Thủ thuật facebook Thủ thuật google + Thư Viện Công Giáo Tiếng anh qua Lời Chúa Tiêu điểm Tìm hiểu phụng vụ Tin Công Giáo Tin Giáo xứ Tin tức Giáo xứ Lộc Thủy Tin Việt Nam và Thế Giới Tổ chức kỳ thi Giáo lý Tông huấn Giáo hội Công giáo Trang Trí Giáng Sinh Trắc nghiệm Giáo lý Trắc nghiệm Kinh Thánh Trắc nghiệm năm đức tin Truyện Công Giáo Truyện về Mẹ Tư liệu Giáo hội Công giáo việt nam Tư liệu Giáo phận Vinh Tư liệu Giáo xứ Lộc Thủy Từ vựng công giáo Anh-việt Tv Công giáo TVs và Radios khắp nơi Vấn đáp đức tin công giáo Videos Đặc Sắc Vietnamese English Prayers Vinh Quang Đức Maria Website Công Giáo bổ ích

Add floating notification bar to Blogspot

10:11:00
You can Add floating notification bar to Blogspot or floating random messages box for blogger/floating random quotes bar for blogger by following this tip:

DEMO: For floaitngrandom quotes bar, you can look at my blog (the bottom bar will show random quotes when you open new pages)

Adding a  floating notification bar to your blogspot theme is very helpful as it can easily get the attention of your visitors to a particular post or to a particular affiliate link thereby increasing the number of views and maximizing the affiliate sales using the affiliate links.By using a connect link like google + in your fixed notification bar,you can also grow your followers in that particular social media.This bar can be added by using plugins like sticky bar  in Self hosted WordPress Blogs but for blogspot we have to add the code manually.In this post ,i have made a tutorial on how to add floating notification bar similar to shoutmeloud to your blogspot template.

Adding a floating notification bar to blogger.com:

Here is a screenshot of how the floating bar would look like after adding it to your blogspot template.This floating bar is transparent black colour with a blinking(only in Firefox) yellow colour text link arranged in the center.
floating bar blogger
1.Login to your  new blogger dashboard and click on more options to the right side of your blog  for which you want t o add the floating bar and choose  Template>Edit HTML.
Blogger-template
Note:Backup your blogger template file using the download template option before editing the code.
2.Find the below code in your template file using the Ctrl+f  function of the browser.
]]></b:skin>
3.Now paste the following code right before the above code mentioned in step 2 in your blogspot template
#stickybar{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT-f49PRwW4f6ilkFYLjGMIXt_XMiQ1RgTPv5gMdTOMmtHhyabXeuDHVx_799r0gjJrKEUp-Cz4plzPPbluJOhdH17DMgbJ3I48CoSwof-iqAEXmbfYGI5xx4PvAD01vm27049prqNI_Um/s1600/headline-bg.png') repeat; color:#fff; margin:0 auto; border-top: 1px solid #000; height:30px; font-size:12px; position:fixed; bottom:0; z-index:1000; width:100%;border-top-left-radius:20px;border-top-right-radius:20px; display:block;}
#stickybar:hover{background:#333;} #stickybar a{ font-weight:700; text-decoration:blink; color:#fe0; border-bottom:1px dashed; } #stickybar p{line-height:30px; font-size:12px; text-align:center; width:95%; float:left;} #stickybar p a{ text-decoration:blink; color:#ffcc00; border-bottom:1px dashed;}
#stickybar li.widget, #stickybar li.widget p{margin:0; line-height:30px; list-style:none; font-size:12px; text-align:center;}
#If the floating bar is not extending its width to the entire page span or if you want to decrease the width and height, you can do it by changing the height,width and margin values in the code accordingly.
#The headline-bg.png image is uploaded to picasa via blogger.com which is used in the above code.For safety you can also download the image to your blog and use that URL instead.Even if that image is deleted,your design will not be affected.
4.Now find the <body> tag in your template code and add the following HTML code below/after the <body> tag .
<div id='stickybar'>
<li class='widget'>
<p>Join us on <a href='https://plus.google.com/107985922905821624339' rel='nofollow' target='_blank'>Google+</a></p>
</li>
</div>
Screenshot on how to add the above code
Blogger-sticky-bar-new
Note:You can change the text link according to your wish.To do that just replace the Link Url text in the above code with your own link and edit the Join us on and google + text.
5.Now save your template by clicking on the save template option.
That’s it.You did it :-)
Also look at
Note:If you are a thesis theme user,you can subscribe to us to receive updates for adding a floating top bar to thesis theme.
Hope you have added the transparent notification bar to your blogspot theme successfully.If you have any problems, do contact via comments,i will help you fix it.Thanks and Happy blogging:-)
TO MEET YOUR OWN PURPOSE: (I used this tourial to make my own floating random quotes bar) In the fouth step, If you want to add a randome messages/quotes or random nitifications instead of links, you can add the you own random messages/quotes...code 
<div id='stickybar'>
<li class='widget'>
Your own codes here
</li>
</div>
Labels:

Đăng nhận xét

[blogger][facebook][disqus]

Author Name

{picture#https://1.bp.blogspot.com/-E9BgdfTl7Ug/Xpa2B9OupwI/AAAAAAAAA1U/PnbaR3h3-jE-jQ5GwdNpEvZGUfRWCLz6gCLcBGAsYHQ/s1600/Ch%25C6%25B0a%2B%25C4%2591%25E1%25BA%25B7t%2Bt%25C3%25AAn-1.png} {facebook#https://www.facebook.com/giaoxulocthuygpvinh} {twitter#https://twitter.com/giaoxulocthuy} {youtube#https://www.youtube.com/@giaoxulocthuy}

Biểu mẫu liên hệ

Tên

Email *

Thông báo *

Được tạo bởi Blogger.