Nov 14, 2016

How to add social media buttons icons to website new float animeted

Namaskar Dosto 
Aap to jante hi honge, blogging karne ke liye Social Media kitni jaruri hai,
Hamare post ko har koi, search karke nahi dekh ja sakta,
social media baar
iske liye log Social media hi, sabse achchha flatform hai, apno post article ko jaldi se, jaldi, apne visitor tak pahuchane ka,
Social media ke madad se apne visitor ko apne Group me jod sakte hai,
iske liye Social media ko apne website se jodna hota hai,
jodne ke liye aapko mai kuchh social media sidebar banakar laya hun,
jise apne website me jodkar bahut sunder bana sakte,
Yah side baar is liye khas hai, kyoki  scrolink karne par sath rahta hai,
aap yah step by step kare, aapko koi paresani nahi hogi,
Step 1. login to www.blogger.com
Step 2. Click Template
Step 3. Edit Html
template HTML edit
Step 4. blogger code ke bich me ak click kare,
Step 5. Ctrl+F Dabaye,
Step 6. </body> likhe
body
Ak baar enter dabaye,
Aapko yah </body> code dikhai de raha hoga,

Step 7. Niche ki is Code ko Copy kare,




Note pad open karke,
is # link ki jagah par apne Social link ko add kar de,
Aur Sabhi ko Ctrl+A karke, Ctrl+C karke Copy kar le,




Step 8.   </body> ke upar me (Up) paste kar de,

paste body

Step 9. Niche ki is Code ko Copy kare,
]]></b:skin>
 Step 10. Ctrl+F dabaye,  
Step 11. Ctrl+V paste kar de,
ab ak baar enter dabaye,
aapko yah(]]></b:skin>) code dikhai de raha hoga,
Niche ki is Code ko select karke Copy kar le,

/* social media baar by inhindiindia.in */
side social
a {
color: #fff;
text-decoration: none;
}
.me {
width: 400px;
margin: 90px auto;
}
.me p,
.me h1 {
text-transform: uppercase;
letter-spacing: 3px;
text-align: center;
}
.me p {
font-weight: 200;
}
.me span {
font-weight: bold;
}
.social {
position: fixed;
top: 150px;
}
.social ul {
padding: 0px;
-webkit-transform: translate(-270px, 0);
-moz-transform: translate(-270px, 0);
-ms-transform: translate(-270px, 0);
-o-transform: translate(-270px, 0);
transform: translate(-270px, 0);
}
.social ul li {
display: block;
margin: 5px;
background: rgb(35, 142, 201);
width: 295px;
text-align: right;
padding: 10px;
-webkit-border-radius: 0 30px 30px 0;
-moz-border-radius: 0 30px 30px 0;
border-radius: 0 30px 30px 0;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.social ul li:hover {
-webkit-transform: translate(110px, 0);
-moz-transform: translate(110px, 0);
-ms-transform: translate(110px, 0);
-o-transform: translate(110px, 0);
transform: translate(110px, 0);
background: rgba(255, 255, 255, 0.4);
}
.social ul li:hover a {
color: #000;
}
.social ul li:hover i {
color: #fff;
background: rgba(8, 218, 188, 0.8);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.social ul li i {
margin-left: 10px;
color: #000;
background: #fff;
padding: 5px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width: 20px;
height: 20px;
font-size: 20px;
background: #ffffff;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
 Step 12. (]]></b:skin>)is Code ke upar(Up) me paste kar de,
paste skin

Final Step 13. Click Save Template,
save temptale
And open your website,
Dosto agar aapko yah Article achchha laga to Kripya, Apne Dosto me share kare,
Comment kare, apne sawal puche, धन्यवाद्
Previous Post
Next Post

post written by:

0 Comments: