stayconnected3

Stay connected box for WordPress without a plugin

Ernest Marcinko Tutorials, Wordpress 1 Comment

I’ve done a lot of research to look for a plugin, that can add a “stay connected with us” box below my posts. Unfortunately there is none. The main reason for this, is because there is no proper hook in wordpress to add a content block after the sinlge post. Fortunately, the workaround isn’t too hard. It’s attractive, visitors will love it!

CSS

I’ve done 3 buttons so far: facebook, twitter, and email. You can create new based on this code.

The buttons
a.facebook-small:before,a.twitter-small:before,a.email-small:before {
-moz-border-radius: 6px;
-moz-transform: translate(0,0);
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
-webkit-border-radius: 6px;
-webkit-transform: translate(0,0);
-webkit-transition: all .2s ease;
border-radius: 2px;
color: transparent;
content: "";
cursor: pointer;
display: inline-block;
font: 0/0 a;
height: 27px;
margin: 0 10px 0 0;
overflow: hidden;
position: relative;
text-align: center;
text-decoration: none;
text-shadow: none;
transform: translate(0,0);
transition: all .2s ease;
vertical-align: bottom;
width: 30px;
}

a.social-small:active:before {
-moz-transform: translate(0,3px);
-webkit-transform: translate(0,3px);
transform: translate(0,3px);
}

a.twitter-small:before {
-moz-box-shadow: 0 4px 0 #2695BC;
-webkit-box-shadow: 0 4px 0 #2695BC;
background: #2CA9E1 url(http://i.imgur.com/qAiH79O.png) no-repeat 0 0;
box-shadow: 0 4px 0 #2695BC;
}

a.twitter-small:active:before {
-moz-box-shadow: 0 2px 0 #2695BC;
-webkit-box-shadow: 0 2px 0 #2695BC;
box-shadow: 0 2px 0 #2695BC;
}

a.facebook-small:before {
-moz-box-shadow: 0 4px 0 #293F63;
-webkit-box-shadow: 0 4px 0 #293F63;
background: #3B5997 url(http://i.imgur.com/qAiH79O.pngg) no-repeat -30px 0;
box-shadow: 0 4px 0 #293F63;
}

a.facebook-small:active:before {
-moz-box-shadow: 0 2px 0 #293F63;
-webkit-box-shadow: 0 2px 0 #293F63;
box-shadow: 0 2px 0 #293F63;
}

a.email-small:before {
-moz-box-shadow: 0 4px 0 #A76917;
-webkit-box-shadow: 0 4px 0 #A76917;
background: #f89a1e url(http://i.imgur.com/qAiH79O.png) no-repeat -60px 0;
box-shadow: 0 4px 0 #A76917;
}

a.email-small:active:before {
-moz-box-shadow: 0 2px 0 #A76917;
-webkit-box-shadow: 0 2px 0 #A76917;
box-shadow: 0 2px 0 #A76917;
}
 The container
.stayconnected-wrap {
background-color: #FFFFFF;
border-radius: 4px;
box-shadow: 0 0.15em 0.35em 0 rgba(0, 0, 0, 0.133);
display: block;
margin: 10px 0 0;
padding: 25px 60px 41px;
}

.stayconnected-wrap a {
color: #777;
}

.stayconnected-wrap a:hover {
color: #444;
}

.stayconnected-wrap h4 {
border-bottom: 1px solid #F5F5F5;
font-size: 1.6em;
font-style: italic;
margin: 0 0 20px;
padding: 0 0 6px;
}

.stayconnected-wrap ul {
list-style-type: none;
margin: 0;
}

.stayconnected-wrap li {
list-style-type: none;
display: inline-block;
margin: 0 15px 0 0;
vertical-align: middle;
}
 The HTML output
<div class=”stayconnected-wrap stay-connected”>
 <h4>Stay connected</h4>
 <ul>
 <li><a class=”twitter-small social-small” href=”https://twitter.com/ernest_marcinko”>Follow Us on <strong>Twitter</strong></a></li>
 <li><a class=”facebook-small social-small” href=”https://www.facebook.com/pages/WPDreams/383702515034741″>Follow Us on <strong>Facebook</strong></a></li>
 <li><a class=”email-small social-small” href=”http://feedburner.google.com/fb/a/mailverify?uri=wpdreams&amp;loc=en_US” target=”_blank”>subscribe by <strong>e-Mail</strong></a></li>
 </ul>
</div>

The best place for this html code is in the current templates folders single.php file. After some experimenting you will surely find the best location!

Result
Stay connected box

Stay connected box

Grab the code

DemoDownload

Related Posts
Filter by
Post Page
Commercial Plugins Wordpress Blog Tutorials Wordpress Free Plugins jQuery ajax search ajax search pro ajax search
Sort by

Ajax Search Pro for WordPress v2.4

2012-11-06 19:27:10
admin

4

Related Posts Pro for WordPress

2014-07-04 14:07:19
admin

2

Using Ajax in your WordPress plugins

2014-04-14 13:23:29
admin

2

Maximum performance with WordPress

2014-03-24 18:26:32
admin

2

WordPress - Widget select box

2014-03-18 09:40:58
admin

2

jQuery element rotation plugin

In my previous project I needed to rotate some elements, but I hadn't found any jQuery plugins regarding this issue.
2012-10-16 18:50:00
admin

2

Polaroid Slider for WordPress

2012-10-09 18:26:50
admin

2

Item Transition Inspiration with jQuery

2014-03-21 19:26:44
admin

1

WordPress ping list for 2014

2014-03-20 14:19:25
admin

1

How to set up W3 Total cache with MaxCDN

2014-03-20 13:15:00
admin

1

Contact form 7 Gmail spam fix

2014-03-17 16:25:25
admin

0

Like this plugin?

2014-07-01 00:00:00
anago

999

Ernest Marcinko

WordPress developer, javascript enthusiast, photoshop clicker and the founder of wp-dreams.com

Comments 1

  1. Pingback: Maximum performance with WordPress | WordPress Dreams

Leave a Reply

Your email address will not be published. Required fields are marked *


− 1 = 6