• Home
Tech News, Magazine & Review WordPress Theme 2017
  • Home
    • Home – Layout 1
    • Home – Layout 2
    • Home – Layout 3
    • Home – Layout 4
    • Home – Layout 5
No Result
View All Result
  • Home
    • Home – Layout 1
    • Home – Layout 2
    • Home – Layout 3
    • Home – Layout 4
    • Home – Layout 5
No Result
View All Result
Techno
No Result
View All Result

Add A Css Animated Portion Push On Blogger – Helplogger

Admin by Admin
August 19, 2021
Home blogger posts
Share on FacebookShare on Twitter
I saw this on Paulund , a highly recommended site amongst a skillful collection of snippets , i.e. a collection of dissimilar codes that educate modest utilities , all of these beingness applicable to spider web design.

In this tutorial , nosotros volition run into how nosotros tin add together a like portion push on Blogger amongst a actually cool hover number in addition to iv social media icons amongst links to portion the electrical current page on Facebook , Twitter , Google+ in addition to Pinterest. However , nosotros tin supplant these social networks subsequently amongst whatever other but yesteryear changing the links below.

Advertisement. Scroll to continue reading.
Demo:

Advertisement. Scroll to continue reading.
  • Share t

  • his page

Advertisement. Scroll to continue reading.

Creating A CSS Animated Share Button

Step 1. From your Blogger dashboard > become to “Template” > click on the “Edit HTML” button.

Step 2. Click anywhere within the code expanse in addition to press the Ctrl + F keys to opened upward the blogger search box. Type or glue the ]]> tag in addition to striking Enter to detect it.

Step 3. Just inwards a higher identify ]]> add together this CSS:

.share_button {
width: 300px;
height: 50px;
margin: 10px auto;
}
.share_button ul {
width: 50%;
height: inherit;
float: left;
list-style: none;
margin: 0 !important;
padding: 0 !important;
}
.share_button ul h1 {
margin-top: 9%;
overflow: hidden;
width: 100%;
color: #4889F0;
font-size: 18px;
text-shadow:2px 2px 2px #fff;
}
.share_button ul li {
position: absolute;
height: inherit;
width: 150px;
margin: 0 !important;
padding: 0 !important;
background: #EEEEEE;
-webkit-transition: all 600ms;
-moz-transition: all 600ms;
-o-transition: all 600ms;
-ms-transition: all 600ms;
transition: all 600ms;
text-align: center;
}
.share_button ul li h2 {
display: inline-block;
width: 32%;
height: 40px;
overflow: hidden;
margin-top: 5%;
cursor: pointer;
border: 0 !important;
}
.share_button ul:first-child li:first-child{
text-align: right;
}
.share_button ul:last-child li:first-child{
text-align: left;
}
.share_button ul:first-child li:last-child ,
.share_button:hover ul:first-child li:first-child {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
transform: rotateY(90deg);
}
.share_button ul:last-child li:last-child ,
.share_button:hover ul:last-child li:first-child {
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
.share_button:hover ul:first-child li:last-child ,
.share_button:hover ul:last-child li:last-child {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}

Step 5. Now let’s become ahead in addition to insert the HTML push inwards the template. The almost mutual identify would live but after

– detect the minute

in addition to glue the next code but inwards a higher identify it:

  • Share t

  • http://2.bp.blogspot.com/-UK3OEVM0cVw/UwJfjtO-exI/AAAAAAAAGPA/CqQmlIlNJAE/s1600/Facebook.png“/>

    http://4.bp.blogspot.com/-XyPHPVsfdz4/UwJfkJmI3JI/AAAAAAAAGPQ/QRGykJJtGow/s1600/Twitter.png“/>

  • his page

  • http://3.bp.blogspot.com/-_YGvQ_Nrw10/UwJfjhXOGGI/AAAAAAAAGPU/tv1WNfkHdgg/s1600/Google-plus.png“/>

    http://4.bp.blogspot.com/-oZgH_AD169o/UwJfjl3ON0I/AAAAAAAAGPE/BLj5lWbsZyE/s1600/Pinterest.png“/>

Note: if y’all desire to alter the icons , supplant the URLs inwards blue.

Step 5. Click on the “Save template” push in addition to we’re done! Enjoy 😉

SHARE TWEET GOOGLE+ PIN IT
Admin

Admin

Next Post

Orbit - Jquery Icon Slider Plugin For Blogger - Helplogger

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts

  • BRAIN ILLUMINATION – The Monkey Mind VS the Mind of Light
  • SMS Mobile Text Marketing: Is Your Business Ready For The Mobile Marketplace?
  • What Can Visual Composer: Page Builder for WordPress Do for Your Website?
  • LotRO Macros
  • Tips To Make PSD To HTML Conversion Simpler

Recent Comments

  1. خرید لایک ارزان قیمت on Filter Out Your Visits To Your Weblog From Google Analytics Traffic Statistics – Helplogger
  • About
  • Advertise
  • Privacy & Policy
  • Contact
No Result
View All Result
  • Home

© 2022 TechnoNews