WordPress’te “Yapışkan” Yüzen Altbilgi Çubuğu Nasıl Oluşturulur

65 yorumBir Cevap Bırakın

1. Syed Balkhi says

   Tem 3, 2024 2:24 pm'de

   Hey WPBeginner readers,
   Did you know you can win exciting prizes by commenting on WPBeginner?
   Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
   You can get more details about the contest from here.
   Start sharing your thoughts below to stand a chance to win!

2. Moinuddin Waheed says

   May 21, 2024 10:53 am'de

   Having a floating footer bar is very effective for marketing and lead generation.
   It gives a constant temptation in the users mind about the ongoing promotions and offers.
   I have made purchase in the past because of this constant reminder and a fomo that this offer would end up soon.
   Thanks for step by step breakdown of steps of how can we make one for our websites.

   Yanıtla

   • WPBeginner Support says

     May 23, 2024 9:07 am'de

     You’re welcome, glad our guide was helpful!

     Yanıtla

     Yönetici

3. Hajjalah says

   May 18, 2024 12:41 pm'de

   I use the OptinMonster plugin to add a floating footer bar with my social links which has drastically increased my social media audience, courtesy of this detailed step by step article .
   But if I may ask. Is it possible to add some code so that the OptinMonster plugin footer bar does not appear or appears after when a footer Ad like Google AdSense footer Ads is available?

   Yanıtla

   • WPBeginner Support says

     May 21, 2024 11:42 am'de

     You would want to reach out to OptinMonster’s support and they can help you look into and/or set up something like that

     Yanıtla

     Yönetici

4. Ahmed Omar says

   Kas 29, 2023 3:08 pm'de

   An excellent tutorial on creating a “sticky” floating footer bar in WordPress
   Your step-by-step guide, especially the first method is clear and effective.
   I use the first method for this floating footer
   Thanks for this practical solution

   Yanıtla

   • WPBeginner Support says

     Kas 30, 2023 9:17 am'de

     You’re welcome!

     Yanıtla

     Yönetici

5. Steve Alvi says

   May 21, 2021 6:03 am'de

   Please I want a close button with this footer floating bar.

   Yanıtla

   • WPBeginner Support says

     May 21, 2021 9:01 am'de

     OptinMonster would be the method that allows you to have a close button the easiest.

     Yanıtla

     Yönetici

   • Jiří Vaněk says

     Nis 14, 2024 6:48 pm'de

     I use Optin Monster where I can configure the closing and even measure the closing. That way I know how many people used the floating bar and how many closed it because they weren’t interested.

     Yanıtla

6. Trendy Avinash says

   Eki 13, 2020 11:45 pm'de

   Worked Like a Charm,Without any Plugins.
   Thanks

   Yanıtla

   • WPBeginner Support says

     Eki 14, 2020 10:23 am'de

     Glad our guide was helpful

     Yanıtla

     Yönetici

7. Alejandro Ferguson says

   Nis 10, 2019 6:06 pm'de

   The floating footer code really works. Thank u

   Yanıtla

   • WPBeginner Support says

     Nis 11, 2019 10:22 am'de

     Glad our guide could help set it up

     Yanıtla

     Yönetici

8. John SMith says

   Şub 23, 2019 1:09 am'de

   How to add a FB sharing button in a floating bar in the only mobile, not for desktop.

   Yanıtla

   • WPBeginner Support says

     Şub 25, 2019 2:47 pm'de

     You would want to take a look into option 2 in our social media plugins here: https://www.wpbeginner.com/plugins/best-social-media-plugins-for-wordpress/

     Yanıtla

     Yönetici

9. wlepcha says

   Şub 5, 2019 10:32 am'de

   How to add menus in the sticky footer instead of random ads.

   Yanıtla

   • WPBeginner Support says

     Şub 5, 2019 11:21 am'de

     You would want to take a look at our article here: https://www.wpbeginner.com/wp-themes/how-to-create-a-sticky-floating-navigation-menu-in-wordpress/

     Yanıtla

     Yönetici

10. Marius says

    Ara 9, 2018 2:56 am'de

    Very nice tutorial. I implemented the manual code and worked like a charm. Only one more feature I need… can we also have a X or close button to close the floatingbar and remain like this for the rest of the visit? I know, cookies are involved, but maybe you can give us a simple solution. Thank you!

    Yanıtla

11. Greg Guz says

    Eki 28, 2018 6:34 am'de

    Very clear and east to follow tutorial.
    Floating bar seem to work absolutely fine, but I’m getting following error in chrome console:
    Failed to load resource: the server responded with a status of 404 ()

    Any ideas?

    Yanıtla

12. Ankush jain says

    Nis 13, 2018 7:18 am'de

    Very helpful your website
    thank you very much

    Yanıtla

13. Mark Rowles says

    Nis 10, 2017 9:23 am'de

    Just a quick pointer CSS wont work for this.

    You’ve got fixedBar in the html as a class name (capital B) and you’ve got fixedbar in the css (lowercase b) so the css doesn’t apply.

    Can someone correct the code please to help others that discover this post?

    Yanıtla

    • WPBeginner Support says

      Nis 16, 2017 8:30 pm'de

      Hey Mark,

      Thanks for pointing this out. We have updated the code.

      Yanıtla

      Yönetici

    • Robi says

      Eki 25, 2017 12:02 am'de

      Dear WPBeginner, and Friends

      If I have specific section that I’ve created using Elementor Page Builder, How I can use it as a custom sticky footer? (It contains more than one column, some buttons and text). I want this type of sticky footer, Instead of simple text as explained in this tutorial.

      Thanks..

      Yanıtla

14. Daniel says

    Eki 11, 2016 2:22 pm'de

    1) Added code just before the tag in the footer.php from my theme dir /wp-content/themes/mytheme/

    2) Added code to my theme dir /wp-content/themes//mytheme/style.css not working deleted and then i try to added from the theme option to custom css menu same problem not working

    3) Added floatingbar.js with the code inside in /wp-content/themes/mytheme/js

    4) Added code to functions.php first not working.. tried with site-specific plugin also same thing

    I tried on both website different theme same problem not working just sit there it`s not floating

    Some help will be welcome… I really need this

    Yanıtla

    • WPBeginner Support says

      Eki 11, 2016 11:24 pm'de

      Hey Daniel, try using Inspect tool to troubleshoot any issue with CSS.

      Yanıtla

      Yönetici

      • Daniel says

        Eki 12, 2016 8:05 am'de

        Thanks for the replay but for me messing with css and js it`s like building a space ship… i will give a try to figure out whats rong

        Regards

        Daniel

        Yanıtla

      • Daniel says

        Eki 12, 2016 4:01 pm'de

        I used the inspector tools and i don`t see any read lines there….

        Yanıtla

      • Dueadla Framin says

        Ara 9, 2016 1:29 am'de

        I have the same issue! The code you posted isn’t even working on default twenty sixteen theme. It’s not floating it’s just stuck on the bottom of the webpage after you scroll all the way to the bottom.

        Yanıtla

        • Igor says

          Şub 4, 2017 6:36 am'de

          there is an error in the fixedBar reference in the css code (it is referencing as “.fixedbar” whereas it should be “.fixedBar”. Change that and see if it works.

15. henrykene says

    Nis 15, 2016 2:08 am'de

    WpBeginner please i will like to use it for displaying my Adsense ads on mobile views. How will i go about it and what are the code to make it show Adsense stick footer for mobile viewers?

    Yanıtla

16. Nawaf says

    Şub 28, 2016 11:39 pm'de

    Awesome.
    But there is a bug. When you open it in mobile. The ribbon gets cutted. And u can see only half of it

    Yanıtla

17. Tip says

    Ağu 18, 2015 1:07 am'de

    In my new theme, I have the option of using an infinite scroll feature. This is great except that the reader would have to scroll a long time to reach my old footer, which is where I put the legal disclosures, etc.

    With this floating footer bar, I was able to nicely put the links there and now I can use the infinite scroll feature without having to reposition a bunch of required links.

    Thanks for this tutorial. I learned a little bit more PHP and CSS too!

    Yanıtla

18. Sarah Noah says

    Nis 30, 2015 11:26 am'de

    I have a client who wants to have a link to REQUEST A QUOTE on every page so when I saw this sticky footer it seemed perfect until I read that somer users are annoyed by it. Do you guys think REQUEST A QUOTE stuck on the bottom of every page is annoying? Of course it is the most important thing the company wants the user to do.

    Yanıtla

19. Roy E says

    Nis 29, 2015 4:01 am'de

    Footer bar shows fine in FireFox but is not sticky in IE11 where I had to scroll down to see “About WPBeginner”, “Site Links”, and “Sites We Like” ??

    Yanıtla

    • Roy E says

      Nis 29, 2015 4:03 am'de

      Of course, when I pressed Enter on the previous comment ( IE issue), the sticky footer bar appeared. Not sure what happened but the problem went away. Please disregard this comment and the previous one.

      Yanıtla

20. yugishtha says

    Mar 12, 2015 10:21 am'de

    do we also have a floating top bar menu plugin for WP?

    Yanıtla

21. Hutzel says

    Oca 15, 2015 7:16 am'de

    I tried all, but it does not Show me the fixed footer. Can somebody help or assist me please? thanks

    Yanıtla

22. Devendra Meena says

    Ara 13, 2014 12:01 pm'de

    Is there any plug in, which can have some scripts on a floating box, and with a x button to close it.

    Yanıtla

23. Khushal Rao says

    Eyl 1, 2014 6:40 pm'de

    this can also be used to showing ads too..

    Yanıtla

24. Dick Sijtsma says

    Eyl 25, 2013 9:27 am'de

    Lowering the opacity to, for example 0.60 gives the visitor a glimps of the underlying content. I think that would be a nice effect. But changing the opacity of the bar, changes the opacity of the text too. And that ‘dilutes’ the message. Any trick to prevent that?
    Thanks.

    Yanıtla

25. Jan dB says

    Tem 22, 2013 4:47 am'de

    As mentioned earlier, this is a very easy tutorial and works like a charm on most computers.
    However, I also have issues regarding the mobile browsers.
    Have you already come up with a solution for that?
    Thanks and keep up the good work!

    Yanıtla

    • Editorial Staff says

      Tem 25, 2013 7:58 am'de

      For mobile browsers if you have a responsive design, then you can simply use media queries and display: none the entire footer bar.

      Yanıtla

      Yönetici

26. Theresa @DearCreatives says

    Tem 21, 2013 7:30 pm'de

    Nice. I am actually looking for a tutorial for adding script to top of post that is there every time I post for disclosure purposes. If you have one like that or know of a plugin can you send me an @DearCreatives on twitter or email me thanks!!

    Yanıtla

27. Dick Sijtsma says

    Tem 17, 2013 1:27 pm'de

    Hi, looks good, but i do understand the reasons some people dislike these kinds of footers very much. Nevertheless i’m trying to accomplish this effect too.
    In the source of this very page, i saw you externalized the javascript. You’ve put it in the main.js javascript file, and linked this main file to the page in the header.

    So far so good, i can manage that. But, i can’t find the place where the ‘randomtip’ function is called.

    In short my question is: how do i externalize the javascript? Hope to hear from you.

    Yanıtla

28. Matthew says

    May 29, 2013 7:12 pm'de

    Great tutorial. One issue that other might also run into – I only have one footer link (as opposed to having several in rotation) and this footer bar shows even on the page that I link to in the footer. Do you know of a quick way to not show this footer on particular pages? Or to, perhaps, only show it on the homepage?

    Yanıtla

    • Editorial Staff says

      Haz 16, 2013 2:56 pm'de

      Sure just wrap the text with the conditional statement is_front_page().

      Yanıtla

      Yönetici

      • Antonio says

        Haz 27, 2013 6:21 pm'de

        Here a true beginner. How do I actually do that? I totally new to WP and PHP. As far as I understand I have to put somewhere in the footer.php but I really have no idea where. Great article though. It managed to add it to my blog as well

        Yanıtla

29. Caio says

    May 27, 2013 11:49 pm'de

    I like it, but it is a bit too distracting. Maybe make it nice and light by turning down the opacity, and then adding a style statement on hover to turn the opacity back up to .9

    Yanıtla

30. Sopheak says

    Nis 16, 2013 11:24 pm'de

    Wow! It was a great tutorial.

    Yanıtla

31. Pawan says

    Nis 8, 2013 12:39 am'de

    Great, I was looking for same.

    Yanıtla

32. Sai Kumar says

    Mar 12, 2013 2:17 am'de

    Hi, this sticky floating footer bar is really awesome! I am going to add it in my blog for sure. Thanks a lot for Sharing!!

    Yanıtla

33. Max Manroe says

    Oca 26, 2013 5:17 pm'de

    Wow nice tutorial and think this is great, I will try it to my blog. Thanks

    Yanıtla

34. Zseller Istvan says

    Oca 19, 2013 6:36 pm'de

    Guys, this is the only thing that I really hate about WpBeginner. When I read your articles on my tablet, with Opera this footer bar stays in the middle of the page for seconds when scrolling. It is a new tablet, and powerful enough. The footer bar covers the content, which is really annoying. After some time it moves to place.

    Yanıtla

    • Editorial Staff says

      Oca 19, 2013 7:48 pm'de

      We are working on a mobile/tablet version. This won’t be an issue soon enough.

      Yanıtla

      Yönetici

35. Salman Ahmad says

    Oca 7, 2013 9:11 am'de

    Wow ! This is Awesome ,Thanks for sharing

    Yanıtla

36. Peter says

    Eyl 11, 2012 1:51 am'de

    Thanks a lot for providing us this great tutorial. Definitely it will be helpful for me.

    Yanıtla

37. Amitabha Chakraborty says

    Eyl 9, 2012 12:05 pm'de

    Hi

    Nice tutorial. Was thinking a “X” button to close it if it annoys someone would have been great.

    Regards
    Amitabha

    Yanıtla

38. David says

    Eyl 9, 2012 11:36 am'de

    I like a footer bar. I think its a great place to put social sharing buttons. I made my own on a client’s site but it has the option of being able to close. It also holds the go to the top button. Pretty nifty. However, like the footer bar I made, on my HTC EVO 4G your footer bar doesn’t stick at the bottom as it should. It actually is stuck in the middle of an article and is really annoying because it covers up a bit of the text. The bar I made can be closed so it is only a quick annoyance. Your bar cannot so I can never read that text. Again this is on my phone. If you can figure out the workaround please let me know.

    I came to this article through your newsletter which is great. Thanks for that.

    Yanıtla

39. Michael says

    Eyl 8, 2012 2:10 pm'de

    Like or hate these types of bars, there is great value in seeing how the code is written to implement such a thing, at least. I use Hello Bar and the Wibya bar on several of my sites and although I think some people have become blind to them, including myself, and some hate them, they still work to help convert and share content a lot of the time.

    I appreciate what I view as a helpful little code lesson. Great site!

    Yanıtla

40. Taryn Fox says

    Eyl 7, 2012 7:30 pm'de

    I personally feel that the floating footer bar is an extremely user-hostile feature, especially one like yours which is a) unhideable, and b) expands to twice its intended size (or greater) when viewed while the font size is increased.

    Speaking of which, even with nosquint magnifying the rest of the text on this site, the text in the comments field is tiny and hard to read if you have visual accessibility issues.

    Speaking of other accessibility issues, asking for a person’s “Real Name” is hostile to anyone who uses a pseudonym. This includes trans women, people who are being stalked, people who are hiding their online activity from others who are capable of hurting them, and people who simply prefer and are better known by their pseudonyms than their legal or birth names (both of which are more inclusive and accurate terms for what you call a “real name”).

    Also, you misspelled “meaningful” in the “Add a comment” notice.

    I wasn’t going to leave a long rambling comment of criticism, but I feel most people have banner blindness to footer bars, and are ambivalent towards them at best and annoyed by them at worst. Most people who aren’t web designers, anyway. I thought maybe someone should speak up for the people who are actually affected by them. Then I ran into the other issues once I went to your site from Google Reader, and tried to leave a comment.

    Thank you for your tutorials, and I hope things go well for you.

    Yanıtla

    • Editorial Staff says

      Eyl 8, 2012 9:21 am'de

      Hey Taryn,

      We really appreciate your invaluable feedback. There are definitely pros and cons to having a floating footer bar like this ones. The cons you have already pointed out. We thought about doing a cookie tracking option where regular users can close the bar and never have it shown again. But even the regular users sometime miss out on great deals because of that. Also if they clear their browser’s cache or use a different computer, the bar shows up again. Yet another downside of cookie tracking. We’ve given extensive thoughts of having user registration and offer personalization on the site.

      As for comments, the real name text in the field is there to serve one purpose, stop spammers. If you read the comments policy, it says “We do not allow Keywords stuffed in the name field. You must use your name or nick name for commenting.” Often folks use their nicknames, and we are completely ok with it. But if your nickname is “best insurance company” or something like that… then we mark it as spam.

      Thanks for pointing out the typo. We have fixed that.

      Yanıtla

      Yönetici

      • Partha Bhattacharya says

        Haz 5, 2013 1:07 am'de

        This is with respect to Taryn’s comment above:

        “…I feel most people have banner blindness to footer bars, and are ambivalent towards them at best and annoyed by them at worst.”

        Since you continue using them there is no doubt you get benefits from them, and people do click on them to remain updated just as I did just now…coming here from another page.

        Would you mind sharing some stats / lookins as to how effective is the footer bar for you, and also how effective it is as against using a header bar!

        Yanıtla

41. staion says

    Eyl 7, 2012 12:28 pm'de

    Thanks for this easy and amazing small tutorials! I’ve already implemented it on my site, but without the jquery thing, just using it as announcements.

    Yanıtla

42. FreedomJackson says

    Eyl 7, 2012 10:56 am'de

    Awesome thanks for sharing this dude I’m doing some updating and I was trying to find a good way to add this footer bar.

    mucho grande gracias senior

    Yanıtla