How To Add Together Social Media Push To Blogger Header Amongst Pictures

Hello friends, welcome to the Blogger tutorial today I volition demo you lot how to add together insert Social Media Buttons to Blogger header with pictures.

When nosotros add together merely about Social Buttons inward Blogger blog, It is rattling useful to our weblog visitor because if they similar our weblog postal service in addition to whatsoever of images they tin percentage the weblog postal service on in that location social media network in addition to it is besides looking squeamish on Blogger weblog header.

These are Following Steps:-

Step 1: Go to Blogger Theme in addition to click Edit HTML button.

Step 2: Click whatsoever where inward the Code in addition to Press Ctrl+F type “ ]]></b:skin> ” hitting larn into in addition to thus Paste the start Code higher upward the “]]></b:skin>” tag.

#social-icons {
margin-bottom:-30px;
height:50px;
width:100%;
clear:both;
z-index: 2;
position: relative;}
.social-media-icons {
display:table}
.social-media-icons ul {
text-align:right;
padding:5px 5px 0 0
list-style-image:none;
list-style-position:outside;
list-style-type:none;}
.social-media-icons ul {
margin-bottom:0;
padding:0;
float:right;}
.social-media-icons li.media_icon {
margin-left:6px;
padding-left:0 !important;
background:none !important;
display:inline;
float:left;}
.social-media-icons li:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}

Step 3: Again Press Ctrl+F in addition to type " <b:section class=’header’> " or " <b:section class=’header’ " Paste 2nd Code earlier higher upward “ <b:section class=’header’> ” line.

<div class='social-media-icons' id='social-icons'>
<ul><li class='media_icon'><a href='http://www.facebook.com/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXL4PQz0uIRyfD8HuXnJT5TJvKxEaNvSHy7Tew-PC3UsIwYB891sUTZyWkkxUs1CV8mYw0_D37aWeDwuFc6xSVn2oSQslNlU-LBRdSv38FIfLXkqX3zVTHmyYfhoIsEsAXgoUio0tfnOI/s1600/Facebook.png'/></a></li>
<li class='media_icon'><a href='http://www.twitter.com/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggnCsRVQ-qc4M1mOmBToVtf-24zeaeIxz7axJ5GK43o6Sz8uMkWz8qhiwfVopmNftbySMYeNvm1eQaFS9yexo9sUMUUklQzjuqKCCZD8342z7jmJvrYE52HpMvsWcG05l7n2YqmgLWzWU/s1600/Twitter.png'/></a></li>
<li class='media_icon'><a href='https://plus.google.com/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfbMos_8RfFcVueNsIFaNJKkZ1wp4BRwDqymE21KEuOEfA_RTT2bmbgfyJaPYSiCLSSj24QlwWSp8RikhsUm-Y9cnvNokGwHWAatMW3sI9OoeU5dAqK8WVaxi6KA3Lnx1p2OR6cobMMvg/s1600/googleplus.png'/></a></li>
<li class='media_icon'><a href='http://name-of-your-blog.com/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFgwKJOuwIdhiUJtHjRDHNvPEiSz7Qehe3gWL9R9gela9pPyxTW3_cG-42L2PakY5jL0js121RxQUB32SYmYYz6GUl2vVTPkLqEpTnsmZFQgV98BdkcFLEkuKUj155M1p-rhSIDsBv_7k/s1600/RSS.png'/></a></li>
</ul></div>

Step 4: Go to your Blogger Blog.


Note:- Replace RED URLs With Your Social URLs

How to Add Social Media Button to Blogger Header



Read More:- 
How to Add Social Media Buttons to Blogger
How to Add Google Translate to Blogger
How to Add Read More Link inward Blogger 
How to Prevent Copying Text from Blogger

I promise you lot relish this Post. If whatsoever occupation comment it.

Share this post