staceyuy of Blog
7/27/2016 - 3:47 PM

Blog Tweet Blocks

Blog Tweet Blocks

<!--Start Tweet Block-->
<div class="row-fluid cf tweet-block">
  <div class="col-xs-6 col-xs-offset-3 col-sm-3 col-sm-offset-0 col-md-3 col-md-offset-0 col-lg-3 col-lg-offset-0 headshot" style="padding-left: 0;">
    <!--**Speaker Headshot**--><img src="https://247b4308cdda2f42ef56-ce647a8b55ca793d6ab67ea8f274b2b0.ssl.cf2.rackcdn.com/blog/wp-content/images/2014/shah-hiten.jpg" alt="Hiten Shah"/><!--**Speaker Name & Title**--><h6>Hiten Shah</h6><p>Co-Founder and President of KissMetrics and CrazyEgg</p>
  </div>
  <div class="col-xs-12 col-sm-9 col-sm-offset-0 col-md-9 col-md-offset-0 col-lg-9 col-lg-offset-0 tweet">
    <!--**Tweet URL**--><a href="#" target="_blank" class="button"><i class="fa fa-twitter"></i>&nbsp;Tweet</a>
    <!--**Quote Text**--><p class="cf quote">"A transparent brand is one that l feel like I can trust to always do the right thing."</p>
  </div>
</div>
<!--End Tweet Block-->
<style>
.tweet-block { margin-bottom: 20px; }
.headshot { padding-left: 0;}
.headshot img { margin-bottom: 0px; max-width: 100%; height: auto; }
.headshot h6 { font-family: 'Open Sans', Helvetica, sans-serif; font-size: 14px; line-height: 1.3; color: #5e5f5f; text-transform: uppercase; font-weight: bold !important; font-style: normal; margin: 10px 0; }
.headshot p { font-size: 12px!important; line-height: 1.3!important; margin-bottom: 25px; font-style: normal; }
.headshot.inline h6, .headshot.inline p {padding-left: 15px; padding-right: 15px;}
.tweet { padding: 20px; margin-bottom: 40px; border: 1px solid #cccccc; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.tweet a.button { display: block; padding: 8px 15px; max-width: 140px; float: right; font-family: 'Open Sans', Helvetica, sans-serif; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: 1px solid #55acee; color: #55acee; }
.tweet a.button:hover { background-color: #55acee; color: #ffffff; -webkit-transition: all 200ms ease-in; -moz-transition: all 200ms ease-in; -ms-transition: all 200ms ease-in; -o-transition: all 200ms ease-in; transition: all 200ms ease-in; }
.tweet p.quote { clear: both; padding: 18px 15px 7px; font-family: "Merriweather", serif; color: #444b55; font-style: italic; }
@media (max-width: 640px) { .headshot p, .headshot h6 { text-align: center; } }
</style>
<div class="inline headshot"><h6>Name</h6><p>Title, Org</p></div>

How to Use Tweetables

  1. Copy and paste the tweet.css code snippet at bottom of the WP post. (Note: this should only be applied to your post once)
  2. Copy and paste the tweet.html code snippet where you'd like your first tweetable block to appear
  3. Populate the tweet.html code snippet with your info: headshot image url, speaker name and title, Tweet URL, and Quote Text
  4. To create another Tweetable, copy and paste the tweet.html code snippet only. Do not copy the tweet.css code snippet again.