Floating elements, blocks for the screen as you scroll, typically have a higher click through and conversion rate than static objects. This is why many websites use floating elements across their site. We have seen elements like header bar, footer bar, newsletter sidebar widget, etc. In the past, we showed you, . In this article, we'll show you how to create a sticky floating widget sidebar in WordPress so you can make your email newsletter stand out.
Note: This works for all types of sidebar widgets, not just your email. You can use it for promotions, featured posts, Flickr photos, Google calendar, and basically anything else you like.
The first thing you need to do is install and activate the Q2W3 Fixed Widget plugin. After activating the plugin, go to appearance » widgets and click on the widget you want to make sticky. The plugin adds an option fixedwidget to all your widgets. Check the window fixedwidget and save the changes. Go to your personal site and scroll down. Yours fixedwidget will now be a sticky floating widget. 
Plugin fixedwidget comes with options to customize the positioning of the main widgets. Go to View » options fixedwidget to configure the plugin. On this page, you can set fields, add your own HTML IDs, and even disable fixed widgets on phones and tablets.
A sticky floating sidebar can be used to increase overall user loyalty. You can have multiple fixed widgets in your sidebar. However, they can be easily irritated and this can have a negative impact too. Keep a balance in your design so that you don't irritate your users.
Hello, dear readers of the blog site. Today I want to talk about a fairly functional and convenient upPrev plugin, which can implement several types of page linking at once. You can observe his work (at least at the time of writing this article) at the bottom of each article page - a pop-up panel appears on the right with a list of similar materials.
The plugin can display not only similar materials, but also previous articles from the same category or archive of tags (this is the one we talked about in detail in the above article, and the practical implementation of which I described), previous materials in the format of the entire blog, as well as publications taken at random. In addition, the whole thing can be spiced up with thumbnails if you create them when writing posts.
What role does linking play in website promotion now?
In general, optimizing a website for its further successful promotion is task number one (number two is getting backlinks). Internal factors can block and reduce the influence of everything else. On the other hand, it’s not possible (especially with keywords in the content and anchors of internal links).
Nowadays, an integrated approach to promotion is in charge, and linking occupies quite a significant place in it. Recently, it has become fashionable to use infographics to visually represent anything. On the topic of SEO you can find many similar flowcharts, for example, in Seopro’s article about how to promote a website. Unfortunately, I am not yet ready to create such masterpieces, but referring to them will allow me not to pour unnecessary water.
Which linking scheme to choose? Quite a difficult question, because many of the schemes that worked well before (all the same notorious “ring”, links to methods of implementation of which I gave just above) no longer give the phenomenal results that were observed ten years ago. Search engines are also learning and trying not to take into account what, from their point of view, is obvious cheating.
Interlinking in the form of a series of rings, according to Peydrank's theory, should seriously increase the static weight of the site pages () that are involved in this ring.
However, this does not always work in practice. It is possible that when individual pages fall out of the index, the ring breaks, or it is possible that in order to reduce markups, the search introduced a serious reduction factor into the classic formula for calculating the status weight.
Linking website pages has another task, which is no longer aimed at pleasing Yandex or Google, but at the visitor will like it. One article will clearly not be enough for him to try your blog - you must definitely invite him to go somewhere else in order to interest him, retain him and, possibly, make him your subscriber.
Thus, linking also affects behavioral factors, which the search also takes into account and every year to a greater and greater extent. Almost all webmasters understand this and add blocks to the site with similar materials, with the most read publications or with articles from the same category. There are probably other variations on the theme.
Naturally, there are also a lot of options for implementing internal linking. You can even do without plugins (you can see an example in the article), but a lot of them have been written for linking. The most difficult thing is to choose an option that works perfectly for your blog.
I myself have tried a lot of them and even wrote reviews about some of them (). In fact, the mentioned plugin is one of the best for calculating related posts and listing them on blog pages.
But its data can also be used by other WordPress extensions, designing them more colorfully or pretentiously. In the same article about YARP, I just gave an example of how its data was used by the Related Posts Slider plugin, which allowed it to display similar posts in the following form:
Well, or this:
Our today's hero called upPrev also knows how to take information from the Yet Another Related Posts Plugin database and does the right thing, because there is no need to reinvent the wheel every time. Let's, in fact, move on to describing the capabilities of this miracle of engineering.
Linking options using the upPrev plugin
I didn’t touch these styles, because I took a different path (not the most direct), which I will describe below in the text. Then go to the second tab:
Select the number of posts to which this plugin will generate links. But a little lower, we are just select the type of linking for our site. I have selected the option of similar posts using the Yet Another Related Posts Plugin base (it must be pre-installed), but you can configure ring-type linking by selecting the second or third option, as well as large ring linking by selecting the first .
I intended to organize this matter only for posts, which is indicated by the checkmark in the appropriate field. In addition to the post title, this panel can also display several words (their number is set at the very bottom) from the beginning of the post or the quote area, if you fill it out. It seemed unnecessary to me.
The third tab is used to set up tracking of the number of clicks on links in this panel, which I did not use. However, on the fourth tab I still activated the cache. On the fifth tab, I prohibited the display of the panel on mobile phones, but did not object to its display on tablets:
Well, that’s all, upPrev completed the settings, but I already changed the appearance of the panel in the settings of the Yet Another Related Posts Plugin.
Customizing the appearance of the sliding panel contents
There I selected a template file that will be responsible for displaying similar posts (see the link above for the essence and specifics of working with this extension):
That. Now the appearance of the list of similar posts displayed by the upPrev plugin (in the pop-up panel) is determined by the code that is written in my yarpp-template-list.php file from the folder with my theme (). If your blog generates thumbnails for posts, then it makes sense to choose a template from the Yet Another Related Posts Plugin arsenal with their support.
The code for this file is:
-
have_posts()): $postsArray = array(); while ($related_query->have_posts()) : $related_query->the_post(); $postsArray = "
- ".get_the_title()." "; endwhile; echo implode(" "."\n",$postsArray); // print out a list of the related items, separated by commas else:?>
No related posts.
As you can see, this is where the header of the sliding socket lives, so you will need to convert (if necessary) this file to UTF-8 encoding without BOM in order to avoid crack(). I don’t know about you, but I’ve had Notepad++ () as my main editor for quite a long time, and in it this conversion is done like this:
It is clear that this code generates just a banal Html list (), and the CSS properties written in the style file for the classes present in the code are responsible for the appearance. In my case these styles look like this:
A.oy (color: #333;font:700 1.2em/1 "PT Sans Narrow", Arial, sans-serif;line-height:18px;) li.eto (text-align:center;padding:12px 5px 17px 5px;margin: 5px 0;border: dotted 2px #ccc;) li.eto:hover (text-decoration:underline;) div.oyy (margin:0 0 0 0;padding:5px 0;font:normal 17px "Trebuchet MS", Verdana, Arial;color:#666;)
The lampochka class adds green checkmarks, which are set in my CSS code using base64 code (I copied this code somewhere). If you're interested, take a look at my style.css. OK it's all over Now. If you forgot something, then ask. True, I set up this linking option a month ago and something has already disappeared from my mind during this time.
Good luck to you! See you soon on the pages of the blog site
You might be interested
How to remove the transparent pixel http://yarpp.org/pixels in the Yet Another Related Posts plugin and change the inscription Similar materials 
Creating a list of related posts in WordPress (with thumbnails) using the Related Posts plugin for internal linking 
How to improve website behavioral statistics using Yet Another Related Posts and Related Posts Slider plugins for WordPress 
Simple Counters and Category and Page Icons - beautiful RSS and Twitter counters, as well as icons for categories and pages in WordPress 
WordPress plugins on my blog (site) Sliders and slideshows for your website - what options exist and how to use jQuery Slider scripts 
Breadcrumbs in WordPress using the Breadcrumb NavXT plugin (strengthening linking) 
Reducing memory consumption in WordPress when creating pages - WPLANG Lite plugin for replacing the localization file 
WP-PageNavi - page navigation for a WordPress blog - installation, configuration and changing the appearance of pagination 
Calendarize it! - Events calendar for WordPress 
Mail is not sent from WordPress and the visual editor does not work - solution using the Configure SMTP and Post Editor Buttons plugins
Recently, one of our readers asked how to replace his site navigation menu with a jQuery pop-up menu bar. Such a panel can significantly improve usability on mobile versions of sites. In this article, we will show you how to add a sliding menu bar to WordPress themes.
Note: This article assumes intermediate knowledge of HTML and CSS.
Replacing the standard menu with a sliding panel in WordPress
The goal here is to show the sliding menu bar to users with low screen resolutions, while maintaining the standard menu of our theme so that desktop users can see the full version of the menu. Before we get started, it's important to understand that there are many different WordPress themes out there, so you'll have to tweak the CSS styles depending on your design.
First of all, we need to open a text editor like Notepad and create a new file. Copy and paste the following code into it:
(function($) ( $("#toggle").toggle(function() ( $("#popout").animate(( left: 0 ), "slow", function() ( $("#toggle" ).html(" 
"); )); ), function() ( $("#popout").animate(( left: -250), "slow", function() ( $("#toggle").html(" "); )); )); ))(jQuery);
Replace example.com to your website domain name, and also change your-theme to the actual folder of your current theme. Save the file with the name slidepanel.js on computer. This code uses jQuery to toggle the sliding menu bar. It also animates the switching effect.
Open your FTP client (Filezilla or Total Commander) and connect to your site. Next, go to the directory of your theme and if there is already a folder in it js, then open it. If your theme does not have such a directory, then create it and upload the slidepanel.js file inside.
The next step is to design or find an icon for the menu. The most used icon for this is the one with three bars. You can create it in any graphics editor (for example, Photoshop) or find one of the many existing ones on Google. In this example we will use a size of 27x23px for the icon. Once you've created it, rename it to menu.png and upload it to the images folder in your theme directory.
The next step is for the sliding menu bar. You just need to copy and paste the following code into the file functions.php Topics:
Wp_enqueue_script("wpb_slidepanel", get_template_directory_uri() . "/js/slidepanel.js", array("jquery"), "20131010", true);
Now that all the preparatory work is completed, you need to modify the default theme menu. Typically, most themes display a navigation menu in the file header.php Topics. Opening header.php and find a line similar to this:
"primary", "menu_class" => "nav-menu")); ?>
The challenge is to wrap the theme menu in HTML code to display the sliding menu bar on small screens. We'll wrap it in
Replace example.com with your domain name and your-theme with your theme folder. Save your changes.
The last step is to use CSS to hide the menu icon for users with large screens and display it for those with small screens. We also need to adjust the position of the menu icon and the appearance of the sliding panel. Copy and paste this CSS code into your theme's stylesheet.
@media screen and (min-width: 769px) ( #toggle ( display:none; ) ) @media screen and (max-width: 768px) ( #popout ( position: fixed; height: 100%; width: 250px; background : rgb(25, 25, 25); background: rgba(25, 25, 25, .9); color: white; top: 0px; left: -250px; overflow:auto; ) #toggle ( float: right; position : fixed; top: 60px; right: 45px; width: 28px; height: 24px; ) .nav-menu li ( border-bottom:1px solid #eee; padding:20px; width:100%; ) .nav-menu li :hover ( background:#CCC; ) .nav-menu li a ( color:#FFF; text-decoration:none; width:100%; ) )
Keep in mind that your theme's menu may use different CSS classes and these may conflict with the ones above. You can solve this problem by using the Inspector in Chrome or Firefox to find out which classes conflict with yours. Also, do not forget that you are free to customize the appearance of the panel to suit the site design.
You've probably noticed that most developers have started adding special Javascript-based slide-out panels to their websites, which are placed either at the very top of the site or in the footer. These panels are used to attract user attention to various promotions, interesting blog posts, etc. The main reason why these panels have become so widespread is, of course, their focus on results. You may love or hate these panels, but you will definitely agree that they get the job done. There are many free and commercial plugins for adding pop-up panels to your blog; I'll look at them later in this article.
Free plugins
Hello Bar
A simple and modest plugin that has all the necessary tools to create a panel at the top of the site. Such a panel will definitely attract user attention.
Attention Bar
If you need to draw users' attention to some important message, you can create an alert bar that is a regular div with additional styling. However, it is worth remembering that such a panel is very annoying, and users of your site are unlikely to like it. Using the Attention Bar plugin, you can display a good bar at the top of the page, which will not distract from viewing the site. Rich settings will help the developer control the panel layout.
Easy Heads Up Bar
The plugin adds a handy notification bar to the top of your site. You can leave links in notifications to enhance the call to action.
Notification Toolbar
A panel placed in the footer of your blog. Allows you to display custom notifications. The plugin is based on Static Toolbar.
Quick Notice Bar
The plugin allows you to create a highlighted notification in the header of the site. Such a notification is sure to attract the attention of users, so you can place anything in it, from simple warnings to special offers.
Viper Bar
The plugin allows you to add a panel to the header area of the site, which can be used to increase the number of subscribers. The plugin includes built-in styles, Aweber and Feedburner integration, conversion tracking, split testing, and more.
Commercial plugins
A WordPress plugin that allows you to add custom panels to the top of your blog or website. You can display different notifications for different pages, set a standard panel that will appear on all pages, etc.
Attention Grabber
A plugin that allows you to add a notification panel to your website. Using this plugin, you can easily display arbitrary text, Twitter posts or RSS feeds. In addition, there is a huge list of functions that allow you to customize the appearance of the notification.
http://wplift.com/wordpress-notification-bar-plugins/
Notification panels- an extremely effective means of stimulating the user to move to the required page. In addition, they serve to display important information, as they always attract the user's attention. Some panels contain forms for data entry and can be used, for example, to organize a subscription to mailing lists.
In online stores, notification panels are actively used to notify visitors about promotions and discounts and, thus, are a powerful mechanism for increasing sales.
In this review, I will talk only about some of the most functional and attractive, in my opinion, plugins for creating such panels on the pages of a website or blog on the platform. Each of them has its own advantages, many functions and the ability to adapt the appearance to the style and design of your site. I have no doubt that thanks to this review you will be able to choose the plugin that best suits your requirements.
Custom Notifications
A high-quality premium plugin that has all the necessary functions inherent in a plugin of this level.The notification bar can contain simple text, email entry form or on the website, social networks and countdown timer.
And all this is enclosed in adaptive containers and will be displayed correctly on any screen. In addition, the settings panel allows you to control the position on the page and the color scheme with almost no restrictions.
Cost: $29
BugMeBar WordPress plugin
A simple but eye-catching panel with very beautiful and eye-catching color effects. It can be placed anywhere on the page, and in addition, it can set cookies and not be displayed on a subsequent visit to the page if the user suddenly does not want to see it anymore.Other features worth noting:
- Specifying the pages on which the panel will be displayed and on which it will not.
- Setting the validity period of cookies.
- Full control over the appearance, including choosing color, transparency, etc.
- The ability to shift fixed headers while maintaining the integrity of the layout.
- Ability to enable or disable transitivity and animation
Hello Bar
One of the most popular notification bars for Wordpress. And then, free, although in terms of functionality it is in no way inferior to its premium counterparts.To use Hello bar, just go to the plugin and enter the URL of your blog. Next, you will be taken to the settings panel, where you can configure the location and appearance of notifications. Moreover, the settings panel has a preview function, so you can quickly give your notifications the desired look.
After completing the settings, you will receive a code fragment that you need to paste directly into the site page. If you do not feel qualified enough for this operation, you can install one that will do this routine work for you.
DW Promobar
A fairly simple plugin containing only the essentials. The notification bar can display simple text, a button, a link, or a countdown timer. It looks attractive and gives you full control over all customization options.
Foobar – WordPress Notification Bars
This review wouldn't be complete if I didn't mention Foobar. This is one of the most widely used premium plugins in this class. It contains over 30 customization options and, unlike many others, allows you to customize the notification bar separately for each page.Cost: $9
WordPress Notification Bar
Free plugin, easy to use and activate. The panel content can be plain text, or it can also contain a button associated with a specific action. Thanks to the wide range of color settings, you can perfectly adapt the panel to the design of your website.
Royal Footer Bar
Royal Footer Bar is a plugin of the highest class, truly “royal”. It looks very professional and has a wide variety of options.The information panel can contain plain text, a form for subscribing to mailing lists, and various links, including to accounts on social networks. In the settings panel, you can not only set the necessary settings, but also get complete statistics about activity.
The highlight of this plugin is that the developers called it an A/B/C test - you can set several settings and, after evaluating them in your working environment, choose the one that best suits the concept of the site.
Cost: $39
