How to Add Sliding Boxes to WordPress
Sliding boxes can be used to display important information in an eye-catching manner; visitors can interact with the box by moving their cursor over the information to display a new slide or to close a box when they have read the information. WordPress features a selection of free plug-ns that allow you to add and customize sliding boxes without any coding knowledge. Used sparingly, sliding boxes can help direct visitors to areas of your site that you want to give more exposure.
1 Installing The Plugins
2 Sign in to your WordPress account
Sign in to your WordPress account (link in Resources) and select "Plugins" from the dashboard.
3 Click Add New
Click "Add New" and type "Sliding Boxes" (without the quotation marks) in the Search box.
4 Enter or click Search Plugins
Press "Enter" or click "Search Plugins" to display a list of plugins that add the sliding box functionality to your WordPress blog.
5 Check the description section
Check the description section for each plugin and click the "Install Now" link for the plugin that suits your needs. Plugins include the WordPress Visual Slide Box Builder that allows you to build slide boxes visually, WP Slide-up Box that adds jQuery-driven slide boxes to pages and posts, and Slide In Popup that enables you to define the bottom edge slide-in box globally or for each page/post.
6 Click to confirm the plugin installation
Click "OK" to confirm the plugin installation and then click the "Activate Plugin" link.
7 WP WordPress Visual Slide Box Builder
8 Click Settings
Click "Settings" and select "Virtual Slide Box Builder."
9 Adjust the rounded corners
Adjust the rounded corners, border, width, height and opacity values to specify the look of the sliding box. Click "Background" image and select a file if you want to use a background for the box.
10 Click the Text box
Click the "Text" box in the "Box" section and type the initial text that is displayed in the sliding box.
11 Click the radio button
Click the radio button next to "Bottom," "Top," "Left" or "Right" to specify the direction of the slide effect.
12 The Title
Click the "Title" input box and type a title for the sliding box. Click the "Text" box in the "Lit" section and type the text that is displayed when the user moves their mouse cursor over the text box.
13 Click the Title Link input box and type
Click the "Title Link" input box and type the title of the post to link to when the user clicks the sliding box.
14 Click the input box in the Menu section
Click the input box in the Menu section and type a name for the sliding box.
15 Click Save to generate the shortcode
Click "Save" to generate the shortcode for the sliding box.
16 Copy and paste the shortcode
Copy and paste the shortcode anywhere on your site where you want to display the sliding box. The sliding box can be added to a page, post or any section of the site capable of rending HTML.
17 Click New
Click "New" and repeat the process to create further sliding boxes.
18 WP Slide-up Box
19 Click Appearance
Click "Appearance" and select "WP Slide-up Box."
Type the ID of the image that you want to add to the sliding box in the "Image ID" input box. To obtain the image ID fro images on your WordPress site click "Media" and then select "Library."
21 Type a URL
Type a title and description text for the sliding box image and then type a URL in the "Target URL" input box.
22 Click Add Image
Click "Add Image" to generate the shortcode for the sliding box. Copy and paste the shortcode anywhere on your site where you want to display the sliding box. Add the "mode" parameter along with an option to specify which sliding effect to use for the box. For example "[slideupbox id="31" mode="left-right"] slides the title and text in over the image from left to right. Check the modes showcase page (link in Resources) for a list of options and examples.
23 Slide In Popup
24 Click Appearance-2
Click "Appearance" and select "Widgets."
25 Click and drag the SlideIn Box widget
Click and drag the "SlideIn Box" widget to the "SlideIn Boxes" widget area.
26 Type the HTML or PHP code
Type a title for the sliding box in the "Title" section and then type the HTML or PHP code that you want to use inside the box. For PHP enclose the code inside "<?php?>" tags.
27 Click the Save button
Click the "Save" button to store the sliding box.
28 Click and drag the SlideIn Box widget-2
Click and drag the "SlideIn Box" widget to the "SlideIn Boxes" widget area again to create another sliding box.
29 Click Settings-2
Click "Settings" and select "Global Slide In" after you have saved the sliding boxes.
30 Select the sliding box
Select the sliding box that you have created from the "Global SlideIn Box" drop-down list.
31 To specify the distance
Type a pixel or percentage value in the "Left side distance" or "Right side distance" input boxes to specify the distance from the side of the page that the box is displayed.
32 Click the Delay input
Click the "Delay" input box and type the number after the page is loaded to display the sliding box.
33 Click the radio button next
Click the radio button next to the close policy that you want to use for the sliding box. "Close button" allows users to click a button to close the box while "Toggle button" allows users to toggle the display of the box on and off. Use "None" to prevent the removal of the sliding box or if you want to use your own HTML for a close button inside the box.
34 Click the radio button-2
Click the radio button next to the cookie condition that you want to use for the sliding box. The box can be displayed every time the page is visited, once per visit or only on the first visit.
35 Click Save Changes
Click "Save Changes" to apply the changes you have made and activate the selected sliding box.