Blogger is limited on the term of features so you have to step everything manually and I'm here to help to setup copy and share button to your posts specially in quote or sayari blogs.
Important Notice ?
All you need is knowledgeable of HTML, CSS and JavaScript to setup copy and share button in your posts. Let's see how it can be setup and works on the blogger website.
Before you edit your template we suggest you to take backup of your current template because you can restore it if anything wrong happened.
Read More : How to create navigation menu bar on blogger
How to setup sayari script on Blogger ?
We will go step by step to setup sayari script on blogger and It takes less than 5 minutes, Let's follow the step below.
Before you start please add the following jQuery script to your template before end of body tag.
1 : First of all we have to write some html code to start and We'll add some function with JavaScript. See the plain html code below.
I hope that one day my weakly heart will forget you.
I'm sure i can't stop loving you , won't let you go.
This is just the sample code everytime you add p you must add the class ="sayari" on every to every p tag unless it won't work on JavaScript.
2 : Now, We need to add the JavaScript to our html code to make it more dynamic. The code will add the div and button to the html code. Here is how it works.
$(document).ready(function(){
$(".sayari").each(function(){
($(this).wrap('<div class="sayari-box"/>'));
if($(this).parent().hasClass('sayari-box')){
$(this).parent().wrap('<div class="sayari-wrapper"/>');
}
});
$(".sayari-box").each(function(){
($(this).prepend('<span class="alert">Copied&tl;/span>'));
($(this).append('<div class="copy-box"/>'));
if($(this).children().hasClass('copy-box')){
$(this).children('.copy-box').append('<span class="shareme"><i class="fa fa-whatsapp"></span>Share</span><span class="copyme"><i class="fa fa-clipboard"></span>&ht;/i>Copy</span>');
}
});
So far , We wrapped all the ptag inside the div and added the button within it. We added the div as parent and append the button and whatsapp share button inside it. And you code look like this format.
...........
3 : Now, we have to add the css to style whole html with css before setup the Click Function to the button inside the Div. Let's style the all html with css with following code of css.
.sayari {
font-size: 18px;
font-weight: bold;
}
.sayari-wrapper {
float: left;
position: relative;
width: 100%;
max-width: 50%;
display: inline-block;
height: auto;
box-sizing: content-box;
margin-bottom: 10px;
}
.sayari-wrapper:nth-child(odd) {
clear: both;
}
.sayari-box {
padding: 14px;
margin: 16px 20px;
background: #fff;
border-top: 10px solid #6a1b9a;
color: #000;
border-radius: 7px;
box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.32);
position: relative;
}
.sayari-box .alert {
position: absolute;
bottom: -50px;
right: 8px;
padding: 10px;
border-radius: 100px;
text-transform: uppercase;
background: #fff;
box-shadow: 0 3px 6px 3px rgba(0, 0, 0, 0.1);
z-index: 55;
display: none;
transition: 0.5 ease;
}
.copy-box {
display: block;
position: relative;
padding: 20px 0 10px 0;
display: flex;
justify-content: space-between;
align-content: center;
align-items: center;
}
.copy-box span {
text-align: center;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin: 0 auto;
cursor: pointer;
box-sizing: border-box;
}
.copy-box span:first-child {
margin-right: 8px;
}
.copy-box span:hover {
background: #311b92;
transition: 0.8s ease-in-out;
}
.copy-box span i {
font-size: 20px;
padding-right: 7px;
}
.shareme {
padding: 10px;
background: green;
color: #fff;
border-radius: 3px;
}
.copyme {
padding: 10px;
background: #6a1b9a;
color: #fff;
border-radius: 3px;
}
You see .sayari-wrapper on the stylesheet which is not in the html code but we style it using css because we already appended the div using JavaScript. and our parent div is <div class="sayari-wrapper"></div> , You can do a snippet to see the div. You can't find it in the html because we appended it with JavaScript.
4 : Let's add the @mediaQueries to make the html make more responsive on the mobile devices or on small screens devices.
@media screen and (max-width:600px){
.sayari-wrapper{
float:none;
max-width:100%;
box-sizing:border-box;
margin-bottom:15px;
}
}
@media screen and (max-width:400px){
.copy-box{
flex-direction:column;
-webkit-flex-direction:column;
box-sizing:border-box;}
.copy-box span:first-child{
margin:0 auto 12px auto;}
}
}
Now, adding abovd css your post look like this. You can see the demo below on the screenshot. You will have awesome post block with Share and Copy button on it.
Now , to make the copy and share button operational. We need to create the function on JavaScript. Without JavaScript it won't work so major part is to make functional the copy and share button you can look on the JavaScript code below.
$('.copyme').click(function(e){
e.preventDefault();
var $text = $("");
$('body').append($text);
$(this).css({'background':'green','cursor':''});
$text.val($(this).parent('.copy-box').parent('.sayari-box').find("> .sayari").text()).select();
document.execCommand("copy");
//remove temp
$text.remove();
//show alert
$(this).parent('.copy-box').parent('.sayari-box').find('> .alert').show(800).fadeOut(300).delay(200);
});
After the code you put inside your template, The copy button be functional. We must make the share on whatsapp button also functional, For that you can use the following JavaScript code.
//share on whatsapp script
$('.shareme').click(function(){
var title = document.location.origin;
var text = $(this).parent('.copy-box').parent('.sayari-box').find("> .sayari").text();
var msg = encodeURIComponent(text) + " - " + title;
var open_url = "https://api.whatsapp.com/send?text=" + msg;
window.open(open_url, "_blank");
});
});
We completed the all the steps and now copy and share button is functional. Look the following codepen to check how it works on the website.
See the Pen jQuery sayari script by Buddhalimbu (@buddhalimbu-the-lessful) on CodePen.
That's all how you can setup the sayari script to your blog post if you are running quote or sayari blog on blogger.
Conclusion : The sayari script is pure coded on JavaScript and It is fully supported on blogger. I have personally tasted it on blog. We will be adding more coding tutorial for blogger. Stay in loop. If anything wrong happens let us know.
Post a Comment