EasyTricks - For Life

    Social Items

Home / Tips

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


Hello Guys Welcome To EasyTrks. Today I Will Show You How To Make A Navigation Bar Using Bootstrap 4. So Stay Tuned.

Introduction : Bootstrap Probably The Best Way Of Making Navigation Bar For New Bees. Bootstrap Is A Program That Have Huge Css Inside It. It's Known World Wide & Beings Used By Many Sites. But The Most Important Thing Is It's Absolutely Free To Use.

 We Will Use Pooper Js & Jquery To.

So Let's Get Started .

> Go To Your Site & Add This Bootstrap In The Middle Of <head> & </head> Section.


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

> This Was The css & Now Let's Add The Jquery & Popper Js.


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

For Wapkiz Go To Panel Mode > Meta Header & Add All Of This Codes.
After Installing All Of This Code You Are Ready For Installing Navigation Bar. Just Add This Html Code  Where You Want To Install Navigation Bar.


<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

And Now Your Done.
Wanna See Demo!



Special Thanks To GetBootstrap.Com
How To Make A Bootstrap 4 Navigation Bar

How To Make A Bootstrap 4 Navigation Bar


Hello Guys! Thanks For Visiting EasyTrks . Today I Will Show You How To Use Font Awesome Icons On Your Site.

So Let's Start.

First Go To Your Website Edit Mode & Search For The Code </head> . Then Paste The Code Before </head> . 

To use the Font Awesome icons, add the following line inside the <head> section of your HTML page:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Note: No downloading or installation is required!
You place Font Awesome icons by using the prefix fa and the icon's name.

Example :

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<i class="fa fa-car"></i>
<i class="fa fa-car"style="font-size:48px;"></i>
<i class="fa fa-car"style="font-size:60px;color:red;"></i>

</body>
</html>

 The Result Will Be Like This :







Font Awesome is designed to be used with inline elements. The <i> and <span> elements are widely used for icons.
Also note that if you change the font-size or color of the icon's container, the icon changes. Same things goes for shadow, and anything else that gets inherited using CSS.

Larger Icons

The fa-lg (33% increase), fa-2x, fa-3x,fa-4x, or fa-5x classes are used to increase the icon sizes relative to their container

Example


<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>

The Result Will Be :




List Icons

The fa-ul and fa-li classes are used to replace default bullets in unordered lists.

Example

The following code:
<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>List icons</li>
  <li><i class="fa-li fa fa-square"></i>List icons</li>
</ul>

The Result Will Be :

  • List icons
  • List icons
  • List icons

Animated Icons

The fa-spin class gets any icon to rotate, and the fa-pulse class gets any icon to rotate with 8 steps.

Example

The following code:
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>

The Result Will Be Like :



Stacked Icons

To stack multiple icons, use the fa-stackclass on the parent, the fa-stack-1x class for the regularly sized icon, and fa-stack-2x for the larger icon.
The fa-inverse class can be used as an alternative icon color. You can also add larger icon classes to the parent to further control the sizing.

Example

The following code:
<span class="fa-stack fa-lg">
  <i class="fa fa-circle-thin fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-circle-thin<br>

<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
fa-twitter (inverse) on fa-circle<br>

<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"style="color:red;"></i>
</span>
fa-ban on fa-camera

The Result Will Be Like :

fa-twitter on fa-circle-thin
fa-twitter (inverse) on fa-circle
fa-ban on fa-camera

So Guys Hope You All Understand Font Awesome Today. Comment Below What You want In The Next Post......

Special Thanks To
w3school.,
How to use FONT AWESOME icons on your website

How to use FONT AWESOME icons on your website

Subscribe to: Posts (Atom)

Subscribe To Our Newsletter