Place Slider Above Blog Archive

What is the first step?
First we’ll need to add a new hook for the slider area into our funtions.php file. This will add the widget area into the blog archive template which is page_blog.php. This is built into Genesis, unless your Genesis theme says otherwise.

//* Hooks slider above blog content
add_action( 'genesis_before_loop', 'riot_above_blog_slider'  ); 
function riot_above_blog_slider() {
if (is_page_template( 'page_blog.php' ) || is_home()) {
    
    genesis_widget_area( 'above-blog-slider', array(
		'before' => '',
		'after'  => '',
    ) );

}}

So next you’ll need to registar the widget using the code below. This will create the widget area in the dashboard.

// Register widget areas
genesis_register_sidebar( array(
	'id'				=> 'above-blog-slider',
	'name'			=> __( 'Home - Blog Slider', 'bold' ),
	'description'	=> __( 'This is the top section above blog.', 'bold' ),
) );

Make sure to save you file before moving on to the last step.

Now you’ll need to add the CSS coding into your styles.css file. This will give it the look and feel.
*This code is bare bones for your own customizations.

/* Genesis Responsive Slider
--------------------------------------------- */
.content #genesis-responsive-slider {
	border: 1px dotted #ddd;
	margin: 0 auto;
	padding: 0;
	position: relative;
}

.content .slide-excerpt {
	background: transparent;
	margin: 0 0 20%;
	opacity: 1;
	width: 100%;
}

.content .slide-excerpt-border {
	border: 0;
	display: inline;
	float: left;
	margin: 0;
	padding: 0;
	width: 100%;
}

.content .slide-excerpt-border h2 {
	margin: 0;
	text-align: center;
	width: 100%;
}

.content #genesis-responsive-slider h2 a {
	background: #ff7f8c;
	color: #fff;
	font-size: 14px;
	margin: 0;
	overflow: visible;
	padding: 10px;
	text-align: center;
	width: 100%;
}

.content .flex-direction-nav li a {
	background: url('images/slider-arrows.png');
	top: 40%;
}

.content .flex-direction-nav li .prev,
.content .flex-direction-nav li .prev:hover {
	background-position: 0 0;
	left: 0;
}

.content .flex-direction-nav li .next,
.content .flex-direction-nav li .next:hover {
	background-position: -52px 0;
	right: 0;
}

.content .flex-direction-nav li .prev:hover,
.content .flex-direction-nav li .next:hover {
	opacity: 0.9;
}

.content .flex-control-nav li a {
	background: url('images/slider-arrows.png');
}

.content .flex-control-nav li a.active {
	background-position: 0 -26px;
}

.content .flex-control-nav li a:hover {
	background-position: 0 -12px;
}

Try Out The Demo
CLICK HERE

Plugin’s you’ll need to add
Genesis Responsive Slider
Regnerate Thumbnails