LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code








Copy the below block of code and paste on your own website to embed
CSS
body {
  background: url('https://static.pexels.com/photos/90807/pexels-photo-90807.jpeg') no-repeat 0 0;
  font-family: 'Roboto', sans-serif;
}
/* ADJUST THESE SETTINGS TO GET YOUR DESIRED LAYOUT */

.share-bar li {
  min-width: 30px; /* Set minimum width of each cube */
  min-height: 30px; /* Set minimum height of each cube */
}
.share-bar .top, .share-bar .bottom {
  min-width: 400px;
}
.share-bar .left, .share-bar .right {
    min-height: 400px;
}
.share-bar i {
  font-size: 30px; 
}
.share-bar li {
  padding: 0.8em;
  line-height: 105%; /* set same as min-height */
  vertical-align: middle;
}


/* DO NOT EDIT BELOW THIS LINE */

.share-bar {
  position: fixed;
  height: auto;
  width: auto;
  margin: auto 0;
}

.top {
  top: 0;
  margin: 0 auto;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
}
.right {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  min-height: 400px;
}
.left {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  min-height: 400px;
}
.bottom {
  bottom: 0;
  margin: 0 auto;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
}

.share-bar ul {
  width: inherit;
  height: inherit;
  margin: 0;
  padding: 0;
}

.share-bar li {
  list-style-type: none;
}

.share-bar.right a, .share-bar.left a {
  width: inherit;
  height: inherit;
  display: block;
}

.share-bar.top a, .share-bar.bottom a {
  width: inherit;
  height: inherit;
  display: inline-block;
}

.share-bar .right a {
  width: inherit;
  height: inherit;
  display: block;
}

.share-bar i {
  line-height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  color: #FFF;
  text-align: center;
}

.share-bar fa {
  width: 100%;
  height: auto;
}

.share-bar li {
  background-color: rgba(9,9,8,0.8);
  display: block;
}

.share-bar.top li, .share-bar.bottom li {
  float: left;
}

.share-bar .twitter:hover {
  background-color: #1da1f2;
}

.share-bar .facebook:hover {
  background-color: #3b5998;
}
.share-bar .youtube:hover {
  background-color: #cd201f;
}
.share-bar .pinterest:hover {
  background-color: #bd081c;
}
.share-bar .linkedin:hover {
  background-color: #0077b5;
}
.share-bar .googleplus:hover {
  background-color: #dd4b39;
}
.share-bar .embed:hover {
  background-color: #34bf49;
}


/* Embed Window */
.embedWindow {
  display: none;
  width: 80%;
  height: auto;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  padding: 15px;
  background: rgba(9,9,8,0.9);
}

.embed-close .fa {
    color: #FFF;
    font-size: 25px;
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
}
.embedCnt {
    display: table-cell;
    text-align: center;
}
.embed-heading {
    line-height: 30px;
    color: #28f45b;
    font-size: 24px;
}
.embedWindow .copyWrp {
    overflow: hidden;
    height: auto;
    width: 85%;
    margin: 50px auto;
    padding: 0;
    display: block;
    border-radius: 0;
    background: none;
    border: 1px solid #fff;
}
.embedWindow textarea {
    overflow-x: hidden;
    height: auto;
    width: 100%;
    margin: 0;
    padding: 30px 50px;
    white-space: pre-wrap;
    display: block;
    color: #FFF;
    line-height: 30px;
    background: none;
    border: 0;
}
.embedWindow .btn-wrp {
    margin: 0 auto;
    text-align: center;
}
#embedCopyButton {
    color: #090908;
    background: #28f45b;
    padding: 25px 25px 20px 25px;
    border: 0;
    font-size: 24px;
    width: 50%;
    line-height: 30px;
}
JS

$(document).ready(function(){

    // Generate current URL
    var $currentURL =  window.location.href;
  
    // ### Open Graph Variables & Settings
    var $title = 'Some Title'; // Your title to be used for the OG Titles
    var $description = 'Some Description'; // Your description to be used for the Meta Tags
    
    // ### Twitter Variables & Settings
    var $twitterHandle = ''; // Dont include the @ symbol i.e '@MyName' would jsut be 'MyName'
    var $twitterMessage = $('meta[name="twitter:description"]').attr('content');
    var $twitterURL = $('meta[name="twitter:url"]');
    var $twitterImage = $('meta[name="twitter:image"]');
    var $buttonTwitterShare = $('.share-btn.twitter');
    $buttonTwitterShare.attr('href', 'https://twitter.com/share?url=' + $currentURL + '&text=' + $twitterMessage + '&via=' + $twitterHandle); // Generate Twitter Share URL    
    $twitterURL.attr('content', $currentURL); // Twitter card url    
    $twitterImage.attr('content', $currentURL + 'assets/img/og/science-of-sleep.png?v=3'); // Twitter card image
  
    // ### Facebook Variables & Settings
    var $facebookID = '' // Enter tyour facebook App ID
    var $facebookPageURL = '' // Enter your page URL i.e. Company-Name-218510068734127
    var $buttonFacebookShare = $('.share-btn.facebook');
    var $facebookURL = $('meta[property="og:url"]');
    var $facebookImage = $('meta[property="og:image"]');  
    $facebookURL.attr('content', $currentURL); // Set facebook url    
    $facebookImage.attr('content', $currentURL + 'assets/img/og/science-of-sleep.png?v=3'); // Set facebook card image url
    $buttonFacebookShare.attr('href', 'https://www.facebook.com/sharer/sharer.php?u=' + $currentURL + '&src=' + $facebookPageURL); // Set facebook button URL
    $buttonFacebookShare.attr('data-href', 'https://www.facebook.com/sharer/sharer.php?u=' + $currentURL); // Set facebook button data-href value


    // ### Google+ Variables & Settings
    var $buttonGooglePlus = $('.share-btn.google-plus');
    $buttonGooglePlus.attr('href', 'https://plus.google.com/share?url=' + $currentURL); // Set Google+ button URL
    $buttonGooglePlus.attr('data-href', 'https://plus.google.com/share?url=' + $currentURL); // Set Google+ button data-href value


    // ### Embed Window Variables & Settings
    var $embedItemWrapper = $('.copyWrp');
    $embedItemWrapper.html('')

});
  
  
/* Embed Window */
var embedWindow = $('.embedWindow');
$('.embed, .embed-close').click(function(e){

    if (embedWindow.is(":visible"))
    {
        embedWindow.css('display', 'none');
    }
    else
    {
        embedWindow.css('display', 'table');
    }
    return false;
});

$('body').click(function (e)
{
    var container = $(".embedWindow");
    if (container.has(e.target).length === 0)
    {
        container.css('display', 'none');
    }
});


// Embed window copy to clipboard feature
$('.copyWrp').on('click', function() {
    $('#embedWindowArea').select();
    document.execCommand('copy');
});

$('#embedCopyButton').on('click', function() {
    var w = $('#embedWindowArea');
    w.select();
    try {
        var i = document.execCommand('copy'),
            t = i ? 'successful' : 'unsuccessful';
        alert('Copy ' + t + '!');
    } catch (o) {
        alert('We have been unable to copy the embed code on this occasion, please re-try ro manually copy & paste.');
    }
});
Term
Wed, 12/27/2017 - 07:04

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv