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
Free Plugins Wordpress Blog Commercial Plugins Tutorials Wordpress jQuery Design plugin update ajax box search
Sort by

Related posts lite - free plugin

2014-08-08 09:10:54
admin

18

Related Posts Pro for WordPress

2014-07-04 14:07:19
admin

18

Using Ajax in your WordPress plugins

2014-04-14 13:23:29
admin

18

Maximum performance with WordPress

2014-03-24 18:26:32
admin

18

WordPress ping list for 2014

2014-03-20 14:19:25
admin

18

WordPress - Widget select box

2014-03-18 09:40:58
admin

18

Ajax Search Pro for WordPress v2.4

2012-11-06 19:27:10
admin

18

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

18

Polaroid Slider for WordPress

2012-10-09 18:26:50
admin

18

Item Transition Inspiration with jQuery

2014-03-21 19:26:44
admin

8

How to set up W3 Total cache with MaxCDN

2014-03-20 13:15:00
admin

8

Contact form 7 Gmail spam fix

2014-03-17 16:25:25
admin

8

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

Latest posts by Ernest Marcinko (see all)

Comments 1

  1. Pingback: Maximum performance with WordPress | WordPress Dreams

Leave a Reply

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


− 3 = 3