Advertise Here

Announcement:

  Hello, We Are Now Designing Blogger Awesome Template. Check Out At Netzspot.Blogspot.

Sunday, April 21, 2013

Awesome CSS Fan-Shout Web-Bar For Blog And Website

This Article Was Live On: Sunday, April 21, 2013 And Till Now Have8 comments.
Awesome CSS Fan-Shout Web-Bar For Blog And Website

Nice to see your here again, After a great time, i am again here with a new Web-Bar that is based upon CSS. After me previous post of Free CSS Hello Bar, the new one is here with new ghraphics and changing of position with a cool style. Many guy's want this to see his news on his blog but tirent of Sticky Simple Bars and want something new so here it is for him.

It has the same function as the previous one like Close/Hide with a button and without <script> tag that means there is no load time, it even does not have JQuery because many guy's are using JQuries earlie that will dirtrubeded by new one and the prefare to no use any other JQuery so they can also use it freely. It's acctually based upon HTML, CSS with DOM effect, It's preety fast to load and also in graphics.

So without any further delay, add this bar to your bloag and show your latest news or testimonial or anything you want freely on this bar to attract your visitor, Juat proceed to the code but going through the Full Features of this bar as listed in below.

Features:

1.) Fixed Floating Bar All Over The Web-Page.
2.) No <script> Tag, All Jusat Because Of HTML, CSS, DOM Effect.
3.) Awesome And Stylish In Look.
4.) Easy o Add And Simple To Use.
5.) Show And Hide Option On Click.
6.) You Can Add Anything Inti It Like HTML, Script Text Or What Wou Want.
7.) Visible Via "Fan-Shout" Logo.
8.) Quick To LOad And Better In View.
9.) Only Two Images And Rest Over CSS.
10.) Work With Wide Screen Also.
11.) The Text Will Remain Sliding/Scrolling.
12.) You Can Also Make It Static.
13.) Sliding Text Effect By MARQUEE Tag.
14.) Attractive Style With Small Code.
15.) 100% Free Code With HTML Comment.


How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Layout.
4.) Click "Add A Gadget" Where You Want To Add It.
5.) Now Scroll To "HTML-JAVASCRIPT"
6.) Click "+" Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.

How To Add In Website?

1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.

<!-- This Is A CopyRight Code Of EXEIdeas International.It Is Free To Use But With HTML Design Code. If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->
/***********************************************
* Fan-Shout Web-Bar- © EXEIdeas (www.exeideas.com)
* This notice must stay intact for use.
* Visit http://www.exeideas.com/ for full source code.
***********************************************/
<style type="text/css"> #exebar{width:100%;height:0px;position:fixed;bottom:0%}#exebarshow{position:absolute;bottom:0px;left:0px;width:100px;height:50px;cursor:pointer;margin-left:-8px}#exebardiv{overflow:none;width:100%;height:50px;position:fixed;bottom:0%;margin-left:-5px}#exebardivinside{overflow:none;width:93%;height:30px;position:fixed;bottom:0%;background-color:#3f0b4d;margin-left:70px;color:white}#exebardivhide{position:absolute;bottom:0px;right:0px;width:30px;height:22px;cursor:pointer}</style><div id="exebar"><div id="exebarshow"onmouseup="document.getElementById('exebardiv').style.display='block'"><img src="https://lh5.googleusercontent.com/-jifw1PghjiY/UOUrX1f0V4I/AAAAAAAAEZk/gxUvHeWeyHw/s100/FanShout.png"/></div><div id="exebardiv"><div id="exebardivinside"><div style="padding:5px;"><b>Latest News:</b><marquee><i>Welcome To My World,Feel Free To Visit And Just Leave Your Precious Comments.</i></marquee></div><center id="exebardivhide"onmouseup="document.getElementById('exebardiv').style.display='none'"><img src="https://lh3.googleusercontent.com/-r7fV-I3BRLg/UOUrX2Dm9oI/AAAAAAAAEZg/aBwxkS8zk_o/s14/LeftArrow.png"/></center></div></div></div><!-- This Is A CopyRight Code.It Is Free To Use But With HTML Design Code. If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->

Customization:

1.) Change The Bold Text Only With HTML Entities.
2.) If You Have Any Trouble While Installing, Just Shout A Comment Here.
3.) Save And Done.

You Like It, Please Share This Article Using...




Don't Forget To Read This Also...



8 comments :

  1. Thanxxx, I want to tell you that this widget needs to be placed in the center not in the sidebar bcoz if placed in sidebar this widget will apply in that direction only.. for ex.- if placed in right sidebar it would align to right..
    My blog:
    WWW.FAADUGAMES.BLOGSPOT.COM

    ReplyDelete
    Replies
    1. If You Have Any Trouble In Installing, Just Find < /body> Tag And Add The Above Before It.

      Delete
  2. Sir, please tell me, How can I add Live TV in my blog.

    ReplyDelete
    Replies
    1. There Are Two Option To Add Live TV, First Add Server iframe Or Embed The rtsp Link
      Which Channel You Want To Add?

      Delete
  3. I embedded an server iframe but it was loading with ads. And it displayed an error like(it contained this text): xxxxrtspxxxxx not found..I don't no clearly what was not return inplace of xxxxx.
    You can check it here:
    faadugames.blogspot.com/p/free-tv.html

    ReplyDelete
    Replies
    1. The Given Frame Is Too Heavy, Please Use Single TV At A Time. It's Also Against SEO.

      Delete
  4. help please. how to add it here : gadgethub.webs.com

    ReplyDelete
    Replies
    1. Just Add It Before Closing Body(</body) Tag...

      Delete

Speak Your Mind:



Please Read The Rules Before Commenting:-

1.) Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
2.) Make sure to click the "Notify me" link below the comment to be notified of follow up comments and replies.
3.) Please "Do Not Spam".
4.) Please "Do Not Add Links" to the body of your comment as they will not be published. If the quires contain link then never add HTML tag to it.
5.) Only "English" comments shall be approved and answered.
6.) If you have a problem check first the comments, maybe you will find the solution there.
7.) Your comments must contain 100+ characters to remain accepted.
8.) Never Use Keywords In The Name Section Otherwise Your Comment Will Be Deleted.
9.) All comment will be deleted if it will not fulfil the requirements.