Blogger Blog Me Animated Social Sharing Buttons Kaise Lagaye

0

Blog me social sharing buttons kitne jaruri hote hai yeh toh sab bloggers ko pata hi hai. Lakin agar social sharing buttons animated bhi ho toh blog ki ek alag hi stylish look ban jati hai or visitors ko blog ki taraf or bhi jayda attract karti hai. Google ya dusri sites se pehli baar ane wale visitors first time me hi apke blog ke deewane ban jate hai. Or dubara ana bhi pasand karte hai.
Social networking sites ka blog ki traffic badhane me bahut bada jogdaan hota hai. Kyuki apke blog ke readers asaani se post ko apne social networking profile jaise facebook,twitter etc. par share kar sakte hai. Or waha ke dusre users bhi apke blog par visit kar sakte hai. Isilye blog me attractive animated social sharing buttons ka add hona blog ki ranking badhane ke sath sath new visitors lane ka acha source hota hai.
Aaj ki post me mein apko animated social sharing button ka css code batane ja raha jisko ap apne blogger.com blog me use kar sakte hai. Or apne blog ke design ko or bhi attractive bna sakte hai or social media sites se heavy traffic pa sakte hai.

social sharing buttons

Blogger Blog Me Animated Social Sharing Buttons Kaise Lagaye

Step 1. Sabse pehle blogger dashboard me setting me jaye.

Note:- Template me html editing karne se pehle iska backup jarur le le. So baad me agar coding me koi problem ati hai. Toh aap asaani se apna template firse vapis pa sakte hai.

Step 2. Template par jaye or Edit HTML par click kare.

Step 3. Ab apne keyborad se ctrl+f press kare, tab top right side me search box ayega waha ]]></b:skin> likhkar search kare.

Step 4. Iske baad template me ]]></b:skin> code highlight ho jayega. Ab is code ke bilkul uper (above) niche likha css code paste karde.

.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);
}

Ab apka css code template me add ho chuka hai. Ab isme step by step html code add karna hai.

Step 5. Ab firse search box me <div class=’post-footer’> search kare.

Step 6. Ho sakta hai ki template me <div class=’post-footer’> code 2 ya usse jayada baar mile. Apko 2nd wale code ke theek uper html button code paste karna jo mene niche diya hua hai.

.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 7. Code paste karne ke baad template ko save karde. Or apne blog ke page ko refresh karke dekh le stylish animated social sharing buttons apke blog par add ho chuke hai.

Agar apko is post se related koi problem ati hai toh aap muje comment karke puch sakte hai. Agar apke liye yeh jankari usefull rahi toh ise apne social networking sites par jarur share kare or apko stylish animated social sharing buttons kaise lagge yeh bhi comment karke bataye.

Hi Guys, Welcome to HarpreetKumar.Com I’m Harpreet Kumar, a professional Hindi blogger from Punjab, India. On this blog, I’m going to provide you exclusive fresh & usefull content about SEO, Adsense, WordPress, Blogger, Making Money & Internet related all other topics etc.

LEAVE A REPLY