FmD4FRX3FmXvDZXvGZT3FRFgNBP1w326w3z1NBMhNV5=

Related Products

items

ADD A SOCIAL MEDIA BUTTON Th3safelink





ADD A SOCIAL MEDIA BUTTON Th3safelink

Adding a social media button, we will provide you today with an addition to the social media fund in a professional way that combines elegance and different effects. It will serve your site completely, including a picture (cover) and a button that accompanies it in addition to the social buttons since ...
th3safelink We will provide you today with an addition to a professional social media fund that combines elegance and different effects. It will serve your site fully, including a cover (cover) and a button that accompanies it, in addition to the social buttons, since the post image clarifies the idea, so there is no harm.

Explanation of the installation method


  • From the layout add a tool

Html/Javascript


  • Put the extension code in it


<style>.about_blog { padding: 0; overflow: hidden;background: #fff; }.about-nqnia-info h4{background:transparent;position:relative;padding:0;margin:0;border:0;text-align:center;font-size:120%}.about-nqnia-img{position:relative;max-height:140px;overflow:hidden}.about-nqnia-img img {max-width:100%;width:100%;transition:all .6s;}.about-nqnia-img:hover img{transform:scale(1.2) rotate(-10deg)}.about-nqnia-img:before{content:'';background:rgba(0,0,0,0.3);position:absolute;top:0;right:0;left:0;bottom:0;z-index:2;transition:all .3s}.about-nqnia-img:hover:before{background:rgba(0,0,0,0.6);}.aboutfloat-img{width:55%;position:absolute;top:35%;bottom:35%;right:22.5%;z-index:3}.about-nqnia-float{text-align:center;display:table;width:100%;height:100%}.about-nqnia-float a{color: #fff; padding: 8px 14px; z-index: 2; display: table-cell; width: 100%; font-size: 100%; text-transform: uppercase; vertical-align: middle; transition: all .3s; border: 2px solid #FFFFFF; font-weight: bold; background: rgba(0,0,0,0.5); text-shadow: 0 2px 0 rgba(0,0,0,0.15); box-shadow: 0 1px 0 rgba(255,255,255,0.34) inset, 0 2px 0 -1px rgba(0,0,0,0.13), 0 3px 0 -1px rgba(19, 18, 18, 0.38), 0 3px 13px -1px rgba(0, 0, 0, 0.08); border-radius: 2px;}.about-nqnia-float:hover a{background:#fff; color: #444!important;}.about-nqnia-float a i{font-weight:normal;margin-left:5px}.about-nqnia-wrpicon{display:block;margin:0 auto;position:relative;}.extender{text-align:center;font-size:16px; margin: 15px!important;}
.extender .about-nqnia-icon{display: inline-block!important; border: 0!important; margin: 0!important; padding: 0!important; width: 32%!important;}.extender .about-nqnia-icon a{background: #ccc; display: inline-block; font-weight: 400; color: #fff; line-height: 32px; border-radius: 3px; font-size: 12px; width: 100%; border: 1px solid rgba(0,0,0,0.21); border-bottom-color: rgba(0, 0, 0, 0.27); text-shadow: 0 1px 0 rgba(0,0,0,0.15); box-shadow: 0 1px 0 rgba(255,255,255,0.34) inset, 0 2px 0 -1px rgba(0, 0, 0, 0), 0 3px 0 -1px rgba(0,0,0,0.08), 0 3px 13px -1px rgba(0, 0, 0, 0.08);}.extender .about-nqnia-icon i{font-family:fontawesome;margin:0 3px 0 0}.about-nqnia-icon.fbl a{background:#3b5998}.about-nqnia-icon.twitt a{background:#19bfe5}.about-nqnia-icon.crcl a{background:#d64136}.about-nqnia-icon.fbl a:hover,.about-nqnia-icon.twitt a:hover,.about-nqnia-icon.crcl a:hover{background:#313B42}.extender .about-nqnia-icon:hover a,.extender .about-nqnia-icon a:hover{color:#fff;}.about-nqnia-info{margin:10px 0 0 0;font-size:13px;text-align:center;}.about-nqnia-info p{margin:5px 0;font: 12px Droid Arabic Naskh; color: #444;}.about-nqnia-info h4{margin-bottom:10px;font-size:16px;text-transform:uppercase;color:#444;font-weight:700}.about-nqnia-info h4 span {position:relative;display:inline-block;padding:0 10px;margin:0 auto;}.about-nqnia-info h4:before,.about-nqnia-info h4:after {position:absolute;top:51%;overflow:hidden;width:50%;height:1px;content:'\a0';background-color:rgba(0, 0, 0, 0.08)}.about-nqnia-info h4:before {margin-right:-50%;text-align:left;}</style><div class="about_blog"><div class="inner_wrapper"><div class="about-nqnia-img"><img alt="alwan may" class="img-responsive" height="auto" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZaNPaVMF05j-gtFACEz2z2S2sOuydDQDp0GKvmJjWiZ_tmQEnNy9LbiNSFKgB5JwsG8qcbGBI7GWjKcqajKxyzjzEGXXyqYAidYS4NeatIMZ6zGSvjHxVItE3eUPgjtAXUtT2yWJN-Xyk/s1600/Festival-Of-Colors-People-HD-Wallpaper.jpg" width="300" /><div class="aboutfloat-img"><span class="about-nqnia-float"><a href="http://th3safelink.blogspot.com" rel="nofollow" target="_blank"><i class="fa fa-user"></i> Join our site</a></span></div></div></div><div class="about-nqnia-info"><h4>Follow us new to our website</h4>Excellence without limits</div><div class="about-nqnia-wrpicon"><ul class="extender"><li class="about-nqnia-icon fbl"><a href="#" rel="nofollow" target="_blank"><i class="fa fa-facebook fa-fw"></i> Our page</a></li><li class="about-nqnia-icon twitt"><a href="#" rel="nofollow" target="_blank"><i class="fa fa-twitter fa-fw"></i> Follow us</a></li><li class="about-nqnia-icon crcl"><a href="#" rel="nofollow" target="_blank"><i class="fa fa-google-plus fa-fw"></i> Google</a></li></ul></div></div>



Addition customization:

  • selected in red # change with the link
  • specified in orange change in words
  • specified in green for the image link

See the Pen GRJdMWw by Shaampc (@shaampc) on CodePen.

0/Post a Comment/Comments

73745675015091643

Left Room

[getBlock results="5" label="recent" type="col-left"]

Right Room

[getBlock results="5" label="recent" type="col-right"]