EasyTricks - For Life

    Social Items


Hello friends! Howdy? It’s been a long time since i published a post. I don’t know why! But now i will try to post regularly. 

Spoiler is very cool and visitor attractive for your Site. A spoiler can be used for many terms it can be an useful utility for your BLOG. Plus it’s attractive and super responsive design will attract more visitors.
 

Simply Follow These Steps


First go to Blogger Dashboard > Select Your Blog > Theme > Edit HTML
Add this code before </style> or ]]></b:skin>.

/* Spoiler Button By LimonSeo */
#soore-spoiler{display:inline-block;margin:15px auto;}#soore-spoiler button{display:inline-block;background:#292e34;color:#fff;padding:10px 53px;border-radius:6px;border:none;outline:0;}
#soore-spoiler-content{display:none;background:#f0f8ff;margin:10px auto;padding:15px;border-radius:6px;}

Now add this Javascript before </body>.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
  $('#soore-spoiler').click(function(){
    $('#soore-spoiler-content').slideToggle('normal');
  })
});
//]]>
</script>

Note That! You will need jQuery Script to run the JS so if you don’t have install before </body>. If you have already installed Ignore.


<script async="async" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Congratualtions You have successfully completed the installation process. To Show the spoiler on post or page add the below code.

<div id='soore-spoiler'>
<button>Open Spoiler</button>
</div>
<div id='soore-spoiler-content'>
Spoiler Content
</div>

See The Demo If You Want!



So that was all. I will be back soon with another existing post. Thank You
Make a spoiler simple attractive responsive for blogger using jQuery

Make a spoiler simple attractive responsive for blogger using jQuery


This time I am sharing a cool blogger widget NewsTicker! This cool widget inspired from a blog from Namina Kikky. We are using css html & a little bit of JS for this cool widget. So why waiting! Let's get started.

Go To Blogger > Click menu Theme Then Click Edit HTML > Add This CSS Before </head>

<style type='text/css'>
/* Breaking News */
#breakingwrapper{position:relative;background-color:#fff;color:#ccc;display:block;margin:20px auto 0 auto;overflow:hidden;border-radius:5px;box-shadow:0 2px 3px -2px rgba(0,0,0,0.1)}#breakingnews{width:100%;max-width:990px;display:block;margin:0 auto;line-height:42px;height:42px;overflow:hidden;font-size:13px;padding:0}#breakingnews .tulisbreaking{background:#e74c3c;color:#fff;display:block;padding:0 15px;font-size:13px;font-weight:600;height:28px;line-height:28px;float:left;margin:7px 14px 0 7px;text-align:center;border-radius:3px}#recentbreaking{float:left;margin:0;font-size:13px;color:#222;font-weight:600}#recentbreaking ul,#recentbreaking li{list-style:none;margin:0;padding:0}#recentbreaking li a{color:#222}#recentbreaking li a:hover{color:#222;text-decoration:underline}.blog-date{display:inline-block;float:right;margin:0 20px 0 0;font-size:13px;border-radius:2px;cursor:pointer}#recentbreaking li i{margin:0 10px 0 0}
@media screen and (max-width:768px) {
#breakingwrapper{background-color:#e74c3c;color:#fff;margin:10px auto 20px auto;border-radius:0}#breakingnews{padding:0 20px;color:#fff;overflow:hidden;text-overflow:ellipsis}#recentbreaking{color:#fbc531;text-align:center;float:none;margin:0 auto}#breakingnews .tulisbreaking .breakhidden,#breakingnews .tulisbreaking{display:none}#recentbreaking li a,#recentbreaking li a:hover{color:#fff}}
</style>

After That Add This JS Before </body>

<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="https://www.easytricks.blogspot.com/",t=10;$.ajax({url:"/feeds/posts/default?alt=json-in-script&amp;max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#recentbreaking li:first").slideUp(function(){$(this).appendTo($("#recentbreaking ul")).slideDown()})}var n,r,a="",i=e.feed.entry;if(void 0!==i){a="<ul>";for(var l=0;l<i.length;l++){for(var s=0;s<i[l].link.length;s++)if("alternate"==i[l].link[s].rel){n=i[l].link[s].href;break}r=i[l].title.$t,a+='<li><i class="fa fa-check-square"></i><a href="'+n+'" target="_blank">'+r+"</a></li>"}a+="</ul>",$("#recentbreaking").html(a),setInterval(function(){t()},5e3)}else $("#recentbreaking").html("<span>There nothing here?</span>")},error:function(){$("#recentbreaking").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>

Change the code marked with your blog address and change the number 10 according to the number of posts you want to display.

Then Add The Code Wherever You Want to Install The Newsticker Between <body> And </body>

<div id='breakingwrapper'>
   <div id='breakingnews'>
     <span class='tulisbreaking'>News Update<span class='breakhidden'/></span>
      <div id='recentbreaking'>Loading...</div>
      <div class='blog-date'>
         <script language='Javascript'>
            var dayName = new Array(&quot;Sunday&quot;, &quot;Monday&quot;, &quot;Tuesday&quot;, &quot;Wednesday&quot;, &quot;Thursday&quot;, &quot;Friday&quot;, &quot;Saturday&quot;);
            var monName = new Array(&quot;January&quot;, &quot;February&quot;, &quot;March&quot;, &quot;April&quot;, &quot;May&quot;, &quot;June&quot;, &quot;July&quot;, &quot;August&quot;, &quot;September&quot;, &quot;October&quot;, &quot;November&quot;, &quot;December&quot;);
            var now = new Date();
            document.write(&quot;&quot; + &quot; &quot; + dayName[now.getDay()] + &quot;,&quot; + &quot; &quot; + now.getDate() + &quot; &quot; + monName[now.getMonth()] + &quot;&quot;);
         </script>
      </div>
   </div>
</div>
<div class='clear'/>

After That Click Save Button And Your Done.


Now your blog have a cool Newsticker.
How To Make A Cool NewsTicker Widget On Blogger

How To Make A Cool NewsTicker Widget On Blogger

Hello Viewers It's Been A Long Time Since I Haven't Shared Any Post. Now I am Sharing A Post That Will Make Your Blogger Post Super Cool. Now Lets Get Started.


This wigdet is inspired by the Newspaper Wordpress theme, where you can see the example image below.


Image By Bosjn


How to Make a Simple Author Box Follow The Steps ↓

Open Blogger > Dashboard > Theme > Edit HTML


/* AUTHOR POST PROFILE */
.author-profile {overflow: hidden;margin-bottom: 10px;padding: 24px;line-height: 1.5;border: 1px solid #ededed;}
.author-profile-url {font-size: 11px;font-style: italic;line-height: 21px;margin-bottom: 6px;}
.author-profile-url a {color: #444444;}
.author-profile-url a:hover {color: #2ec4f2;}
.author-profile img {border: 0;padding: 2px;width: 96px;float: left;margin-right: 15px;}
.author-profile > span {font-size: 14px;color: #222;}
.author-profile a.g-profile {font-weight: 500;color: #222222;font-size: 15px;margin-bottom: 5px;display: inline-block;}
.web-author-url a:hover, .author-profile a.g-profile:hover {color: #4db2ec;}
.web-author-url {font-size: 11px;font-style: italic;line-height: 21px;margin-bottom: 6px;}
.web-author-url a {color: #444;}
.author-social {margin-bottom: -5px;}
.social-links li {list-style: none!important;float:left;}
.social-links a {border-bottom:none;}
.social-links li a {font-size:18px;color: #222;width: auto;min-width: 18px;height: auto;margin-right: 15px;}
/* SVG ICON SOSIAL MEDIA */
.author-profile a.g-profile:after, .comments .comments-content .icon.blog-author:after {
content:'';width:15px; height:15px; vertical-align:middle;display:inline-block;transition:all 0.3s ease;background: url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M23,12L20.56,9.22L20.9,5.54L17.29,4.72L15.4,1.54L12,3L8.6,1.54L6.71,4.72L3.1,5.53L3.44,9.21L1,12L3.44,14.78L3.1,18.47L6.71,19.29L8.6,22.47L12,21L15.4,22.46L17.29,19.28L20.9,18.46L20.56,14.78L23,12M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9L10,17Z' fill='%234db2ec'></path></svg>") no-repeat center center;}
.social-links li a.fcb:before {
content:'';width:16px; height:16px; vertical-align:middle; display:inline-block;transition:all 0.3s ease; background: url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z' fill='%23000'></path></svg>") no-repeat center center;}
.social-links li a.twt:before {
content:'';width:20px; height:20px; vertical-align:middle;display:inline-block;transition:all 0.3s ease;
background: url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z' fill='%23000'></path></svg>") no-repeat center center;}
.social-links li a.wa:before {content:'';width:20px; height:20px; vertical-align:middle; display:inline-block;transition:all 0.3s ease; background: url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z' fill='%23000'></path></svg>") no-repeat center center;}
.social-links li a.igicon:before {content:'';width:20px; height:20px; vertical-align:middle; display:inline-block;transition:all 0.3s ease; background: url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z' fill='%23000'></path></svg>") no-repeat center center;}
.social-links li a.ytb:before {content:'';width:20px; height:20px; vertical-align:middle; display:inline-block;transition:all 0.3s ease; background: url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M3.42,12C3.42,10.76 3.69,9.58 4.16,8.5L8.26,19.72C5.39,18.33 3.42,15.4 3.42,12M17.79,11.57C17.79,12.3 17.5,13.15 17.14,14.34L16.28,17.2L13.18,8L14.16,7.9C14.63,7.84 14.57,7.16 14.11,7.19C14.11,7.19 12.72,7.3 11.82,7.3L9.56,7.19C9.1,7.16 9.05,7.87 9.5,7.9L10.41,8L11.75,11.64L9.87,17.27L6.74,8L7.73,7.9C8.19,7.84 8.13,7.16 7.67,7.19C7.67,7.19 6.28,7.3 5.38,7.3L4.83,7.29C6.37,4.96 9,3.42 12,3.42C14.23,3.42 16.27,4.28 17.79,5.67H17.68C16.84,5.67 16.24,6.4 16.24,7.19C16.24,7.9 16.65,8.5 17.08,9.2C17.41,9.77 17.79,10.5 17.79,11.57M12.15,12.75L14.79,19.97L14.85,20.09C13.96,20.41 13,20.58 12,20.58C11.16,20.58 10.35,20.46 9.58,20.23L12.15,12.75M19.53,7.88C20.2,9.11 20.58,10.5 20.58,12C20.58,15.16 18.86,17.93 16.31,19.41L18.93,11.84C19.42,10.62 19.59,9.64 19.59,8.77L19.53,7.88M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,21.54C17.26,21.54 21.54,17.26 21.54,12C21.54,6.74 17.26,2.46 12,2.46C6.74,2.46 2.46,6.74 2.46,12C2.46,17.26 6.74,21.54 12,21.54Z' fill='%23000'></path></svg>") no-repeat center center;
}
    width: 96px;
    float: left;
    margin-right: 15px;
}
.author-profile > span {
    font-size: 14px;
    color: #222;
}
.author-profile a.g-profile {
 font-weight: 500;
    color: #333333;
    font-size: 15px;
    margin-bottom: 5px;
    display: inline-block;
}
.author-profile a.g-profile:after {
    content: "\f058";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    text-decoration: inherit;
    padding-right: 4px;
    color: #55ACEE;
}
.web-author-url a:hover, .author-profile a.g-profile:hover {
 color: #0066cc;
}
.web-author-url {
    font-size: 11px;
    font-style: italic;
    line-height: 21px;
    margin-bottom: 6px;
}
.web-author-url a {
    color: #444;
}
.author-social {
    margin-bottom: -5px;
}
.social-links li {
    list-style: none!important;
    float:left;
}
.social-links a {
    border-bottom:none;
}
.social-links li a {
    font-size: 18px;
    color: #222;
    width: auto;
    min-width: 18px;
    height: auto;
    margin-right: 15px;
}
.social-links li a:hover {
    color: #666666;
}
.social-links li a.fcb:hover {
 color:#3b5998;
}
.social-links li a.twt:hover {
 color:#1BB2E9;
}
.social-links li a.ytb:hover {
 color:#ED3F41;
}
.social-links li a.wa:hover {
 color:#25d366;
}
.social-links li a.igicon:hover {
 color:#527fa4;
}

@media only screen and (max-width:800px) {
.author-profile img {
        width: 76px;
        float: none;
        margin: 0;
        text-align: center;
    }
    .author-social, .author-profile {
    text-align: center;
}
    .social-links li {
    display: inline-block;
    float: none;
}

Add This CSS Under </style>
or </:b skin>

After that, copy the HTML code in the box below.


<div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
<img class='lazy' src='https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQxVGRSs4AQi3Kz-qqZUuk9cK0BdYsAmWOfA_EZeCEjc_SNdUY4' itemprop='image' width='90px'/>
<div>
<a class='g-profile' href='https://github.com/lidesign' itemprop='url' rel='author' title='author profile'>
<span itemprop='name'>Easy Tricks</span>
</a>
</div>
<div class='web-author-url'>
<a href='/' itemprop='url' rel='blog' title='author blog'>https://easytrks.blogspot.com/</a>
</div>
<span itemprop='description'>I am the author's editor of this blog, and really like writing and also reading information about the world of the Internet.</span>
<div class='author-social' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Organization'>
<span class='social-links'>
<li><a class='fcb' href='https://www.facebook.com/bthemebd' rel='nofollow' target='_blank' title='Facebook'></a></li>
<li><a class='twt' href='https://twitter.com/LimonMostafa' rel='nofollow' target='_blank' title='Twitter'></a></li>
<li><a class='wa' href='https://id.pinterest.com/nmlbd' rel='nofollow' target='_blank' title='Vimeo'></a></li>
<li><a class='igicon' href='https://google.com' rel='nofollow' target='_blank' title='VKontake'></a></li>
<li><a class='ytb' href='https://www.youtube.com/#' rel='nofollow' target='_blank' title='Youtobe'></a></li>
</span>
</div>
</div>

Place this HTML code in the <div class = 'post-footer'> section, usually each blogger template is different, just look for something similar to the code <div class = 'post-footer'>.

The Result Will Be Like This



Note! Don't Forget To Change The Social Links With your Own Links. It Is Very Important .
Thanks .

This Post Is Based On Bosjin Blog author section . 
Make A Cool Author Box Under Blogger Posts

Make A Cool Author Box Under Blogger Posts

Free download Helio Grid Style Blogger Template Premium Version. Helio is the ultra smart and modern gird style blogger template for Blogspot. If you're looking for a nice and smooth responsive blogger template, then try the Helio Blogger template by MS Design. Free download premium blogger template Helio.
This Template I Share Here Is MsdedignBD Version.

Let's See It's Features. 


Features Availability
Responsive True Cek
Google Testing Tool Validator True Cek
SEO Friendly True Cek
Mobile Friendly True Cek
Dynamic Heading True
Adsense True
Valid Schema.org True
High CTR True
Personal Blog True
2 Column True
Auto Read More with Thumbnail True
Responsive Ad Slot True
Breadcrumbs True
Footer Link True
Related Posts with Thumb True
Search Box True
Social Share Button True
Responsive Sticky Navigation True
Back to Top Button True
Shortcodes True
Unlimited Page Numbered True
Recent Post with Thumbnail True
Custom Contact Form Widget True
Responsive Sitemap Widget True
4 Variant Template Premium

You Can Download It From Below.

Note If You Can't Find The Download Link, Try Uc Browser, Uc Mini or Google Chrome.Thank You.
Helio Premium Version Responsive Blogger Template

Helio Premium Version Responsive Blogger Template

Hello Bloggers Today I Am Going To Show You How To Add A Cool Social Media Widget On Blogger.

So Follow The Article. 

1st Method :

Go To Blogger.com > Theme > Edit Html > Add The Css Code Before </style>

#socialblock{overflow:hidden;margin:0 0 10px 0}
#socialblock h2{margin:0 auto 4px auto}
#socialblock .vam_social{margin-left:-.5%;margin-right:-.5%}
#socialblock .vam_social:before,.vam_social:after{content:"";display:table}
#socialblock .vam_social:after{clear:both}
#socialblock .vam_social .scl_social{margin:0 .5% 1%;width:32.3%;float:left;text-align:center;background:#111;border:1px solid rgba(0,0,0,0.03);transition:all .3s}
#socialblock .vam_social .scl_social.facebookx{background:#3e64ad}#socialblock .vam_social .scl_social.twitterx{background:#58ccff}#socialblock .vam_social .scl_social.bloggerx{background:#f79738}#socialblock .vam_social .scl_social.instagramx{background:#4d749f}#socialblock .vam_social .scl_social.googlex{background:#dd4b39}#socialblock .vam_social .scl_social.youtubex{background:#e62119}
#socialblock .vam_social .scl_social.facebookx:hover{background:#2d4980}#socialblock .vam_social .scl_social.twitterx:hover{background:#4aaeda}#socialblock .vam_social .scl_social.bloggerx:hover{background:#d78432}#socialblock .vam_social .scl_social.instagramx:hover{background:#3c5d81}#socialblock .vam_social .scl_social.googlex:hover{background:#bf3c2c}#socialblock .vam_social .scl_social.youtubex:hover{background:#c71f18}
#socialblock .vam_social .scl_social a{position:relative;overflow:hidden;display:block;color:#fff;padding:22px 5px}
#socialblock .vam_social .scl_social a:before{content:'';position:absolute;left:0;right:0;bottom:0;top:0;background-image:linear-gradient(150deg,rgba(0,0,0,0.02) 45%,rgba(255,255,255,.12) 45%);transition:all .6s}
#socialblock .vam_social .scl_social:hover a:before{transform:rotate(-30deg) scale(1.3);}
#socialblock .vam_social .scl_social span{display:block}
#socialblock .vam_social .scl_social span.app_icon i{font-size:24px;margin-bottom:5px}
#socialblock .vam_social .scl_social span.app_type{font-size:13px;margin:5px auto 0 auto}
#socialblock h2,#Label1 h2{background:#1abc9c}

After  Adding The Css > Add This Html Code Where You Wanna Install The Widget.


<div id='socialblock'>
<div class='vam_social'>
<div class='scl_social facebookx'>
<a href='fb.com/myabdurrahim.id' rel='nofollow' target='_blank' title='Like our Facebook'>
<span class='app_icon'><i class='fa fa-facebook'></i></span>
<span class='app_type'>Facebook</span>
</a>
</div>
<div class='scl_social twitterx'>
<a href='twitter.com/abdurrahim_ID' rel='nofollow' target='_blank' title='Follow our Twitter'>
<span class='app_icon'><i class='fa fa-twitter'></i></span>
<span class='app_type'>Twitter</span>
</a>
</div>
<div class='scl_social bloggerx'>
<a href='https://www.blogger.com/follow-blog.g?blogID=7216711388501110503' rel='nofollow' target='_blank' title='Join our Site'>
<span class='app_icon'><i class='fa fa-user'></i></span>
<span class='app_type'>Blogger</span>
</a>
</div>
<div class='scl_social googlex'>
<a href='https://plus.google.com/u/0/110857132806605497220' rel='nofollow' target='_blank' title='Get in touch'>
<span class='app_icon'><i class='fa fa-google-plus'></i></span>
<span class='app_type'>Google+</span>
</a>
</div>
<div class='scl_social instagramx'>
<a href='instagram.com/abdurrahim_id' rel='nofollow' target='_blank' title='Follow our Instagram'>
<span class='app_icon'><i class='fa fa-instagram'></i></span>
<span class='app_type'>Instagram</span>
</a>
</div>
<div class='scl_social youtubex'>
<a href='https://www.youtube.com/channel/UCnUzeQMof2aHNJOveCY9eWQ' rel='nofollow' target='_blank' title='Visit our Channel'>
<span class='app_icon'><i class='fa fa-youtube'></i></span>
<span class='app_type'>Youtube</span>
</a>
</div>
</div>
</div>

2nd Method :

This Is Easy Method. Just Go To Blogger > Layout > Add Widget > Html / Javascript & Add The Code.



<style type='text/css'>
/* css by EasyTrks*/
#socialblock{overflow:hidden;margin:0 0 10px 0}
#socialblock h2{margin:0 auto 4px auto}
#socialblock .vam_social{margin-left:-.5%;margin-right:-.5%}
#socialblock .vam_social:before,.vam_social:after{content:"";display:table}
#socialblock .vam_social:after{clear:both}
#socialblock .vam_social .scl_social{margin:0 .5% 1%;width:32.3%;float:left;text-align:center;background:#111;border:1px solid rgba(0,0,0,0.03);transition:all .3s}
#socialblock .vam_social .scl_social.facebookx{background:#3e64ad}#socialblock .vam_social .scl_social.twitterx{background:#58ccff}#socialblock .vam_social .scl_social.bloggerx{background:#f79738}#socialblock .vam_social .scl_social.instagramx{background:#4d749f}#socialblock .vam_social .scl_social.googlex{background:#dd4b39}#socialblock .vam_social .scl_social.youtubex{background:#e62119}
#socialblock .vam_social .scl_social.facebookx:hover{background:#2d4980}#socialblock .vam_social .scl_social.twitterx:hover{background:#4aaeda}#socialblock .vam_social .scl_social.bloggerx:hover{background:#d78432}#socialblock .vam_social .scl_social.instagramx:hover{background:#3c5d81}#socialblock .vam_social .scl_social.googlex:hover{background:#bf3c2c}#socialblock .vam_social .scl_social.youtubex:hover{background:#c71f18}
#socialblock .vam_social .scl_social a{position:relative;overflow:hidden;display:block;color:#fff;padding:22px 5px}
#socialblock .vam_social .scl_social a:before{content:'';position:absolute;left:0;right:0;bottom:0;top:0;background-image:linear-gradient(150deg,rgba(0,0,0,0.02) 45%,rgba(255,255,255,.12) 45%);transition:all .6s}
#socialblock .vam_social .scl_social:hover a:before{transform:rotate(-30deg) scale(1.3);}
#socialblock .vam_social .scl_social span{display:block}
#socialblock .vam_social .scl_social span.app_icon i{font-size:24px;margin-bottom:5px}
#socialblock .vam_social .scl_social span.app_type{font-size:13px;margin:5px auto 0 auto}
#socialblock h2,#Label1 h2{background:#1abc9c}
/* www.easytrks.blogspot.com */
</style>

<div id='socialblock'>
<div class='vam_social'>
<div class='scl_social facebookx'>
<a href='https://fb.com/btemplatesBD' rel='nofollow' target='_blank' title='Like our Facebook'>
<span class='app_icon'><i class='fa fa-facebook'></i></span>
<span class='app_type'>Facebook</span>
</a>
</div>
<div class='scl_social twitterx'>
<a href='twitter.com/LimonMostafa' rel='nofollow' target='_blank' title='Follow our Twitter'>
<span class='app_icon'><i class='fa fa-twitter'></i></span>
<span class='app_type'>Twitter</span>
</a>
</div>
<div class='scl_social bloggerx'>
<a href='https://www.blogger.com/follow-blog.g?blogID=7216711388501110503' rel='nofollow' target='_blank' title='Join our Site'>
<span class='app_icon'><i class='fa fa-user'></i></span>
<span class='app_type'>Blogger</span>
</a>
</div>
<div class='scl_social googlex'>
<a href='https://plus.google.com/u/0/110857132806605497220' rel='nofollow' target='_blank' title='Get in touch'>
<span class='app_icon'><i class='fa fa-google-plus'></i></span>
<span class='app_type'>Google+</span>
</a>
</div>
<div class='scl_social instagramx'>
<a href='https://instagram.com/nm.limon' rel='nofollow' target='_blank' title='Follow our Instagram'>
<span class='app_icon'><i class='fa fa-instagram'></i></span>
<span class='app_type'>Instagram</span>
</a>
</div>
<div class='scl_social youtubex'>
<a href='https://www.youtube.com/channel/UCnUzeQMof2aHNJOveCY9eWQ' rel='nofollow' target='_blank' title='Visit our Channel'>
<span class='app_icon'><i class='fa fa-youtube'></i></span>
<span class='app_type'>Youtube</span>
</a>
</div>
</div>
</div>
Don't Forgot To Change The Social Links To Your Social Links. It's Very Important To Change Those Links.
Thank You. This Tutorial Is Based On Simplify 2 Blogger Template Social Widget. 
Social Media Widget For Blogger

Social Media Widget For Blogger



Hello blogger, Today I will share simple tips on how to Speedup your Blogger with Image Lazy Load Script. This Tips work on all blog templates, This Tips will make your blog Loading fast.

Why choose lazy loading pictures at all?

Lazy Loading defers the loading of a picture that's not required on the page in real time. a picture that's not visible to the user once the page masses, is loaded later once the user scrolls and therefore the image really come into view. If the user ne'er scrolls, a picture that's not visible to the user ne'er gets loaded.

1. Performance Improvement

The is that the most significant one for you as a web site administrator – higher performance and cargo time. With lazy loading, you're reducing the number of pictures that require to be loaded on the page at the start. Lesser resource requests mean lesser bytes to transfer and lesser competition for the restricted network information measure accessible to the user. This ensures that the device is ready to transfer and method the remaining resources abundant quicker. Hence, the page becomes usable abundant earlier compared to the case while not lazy loading.

2. value reduction

The second profit for you is in terms of delivery prices. Image delivery, or delivery of the other quality, is sometimes charged on the idea of the number of bytes transferred. As mentioned earlier, with lazy loading, if the image isn't visible, it ne'er get loaded. Thus, you scale back the overall bytes delivered on the page. particularly for users that bounce off the page or move solely with the highest portion of the page. This reduction in bytes transferred from your delivery network reduces delivery prices. this can become a lot of apparent as we have a tendency to explore lazy loading within the returning sections.

How to Install Lazy Load on your blogger?

Login to blogger.com > Theme > Html Editor and find this code </body>.

Add this code before </body> code and save your template.

<script type='text/javascript'>
//<![CDATA[

// Lazy Load
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container:window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8u2Kk4wtEUISFaMELyKvpXnvRT-1AneFPaDY-gHBDtlLxJ_lAmuHz1D46o99EhipLHuVZtPbndc3R8vi3sBAATmrJhT9EBdi1CgWGtOSTUiEIE3Lvb1QZgWTz3Mt6mRyiyuh8U3996x41/s1600/Loadingsome.gif",effect:"fadeIn",threshold:"0"})});
//]]>
</script>

when done, save your template then refresh your blogger, Good luck.
How to Speedup your Blogger with Image Lazy Load Script

How to Speedup your Blogger with Image Lazy Load Script

Subscribe To Our Newsletter