Apna Blogger Header ma Stylish Social Icon add kara

Dosto mara khaya sa app savi na apnakhud ki free website bana hi li hogi, lakin kya app janta h ki app chaya jitni v acchi website q na bana la ya kitni v acchi acchi article ko usma post q na kar da ussa appki tariff nhi badti jab tak app apna website ko Social media ka jariya promote nhi karta.
Jaisa ki app savi janta hi h Social media ak accha platform h pura world sa jurna ka to app v in savi Social Media (Facebook,Twitter,Google Plus aur Feedburner) ka istamal kar ka apna Blog/Website ki Tariff bada Sakta h.

Aj mai batana wala hu ki kaisa app apna blogger header ka top ma Social Media icon ko set kara taki inn social media icon ki madat sa log appko aur appka Website page ko log follow kara social media ka jariya taki appki aur apka website ki popularitu ma increment ho.

Also Read: Apna Blog ma Floating Share Gadget ko add kara

Blog Header ma Social Media Icon lagan aka faida:

 Iss Social Media Icon ko apna Blog ka Header ma lagana sa logo ki najar sabsa pahala isi par parti h aur logo(visitors) ko ager appki website pasand ayi to wo appko social media ma iss icon ki help sa follow kar sakta h jo ki appka website ka SEO ka liya bahut hi acchi h.

Also Read: Apna Blogger ma Stylish Social Media Subscription Gadget add kara

Steps To add Social Media Icon in Header:

To ab app samaj hi gaya honga ki social media icon ko apna blod ka header ma lagana sa kya faida h. To ab mai kuch steps ko batata hu jinko app follow kar ka apna Blog ma issa add kar sakta h bs app mara steps ko follow kara.

Also Read: Tricks for increase your Adsense Income-Hindi ma

Note: Nicha ka steps ko follow karna sa phala app apna blogger ka template ka backup jarur la la.

Step 1: Sabsa pahala app Blogger Dashboard>>Template>>Edit HTML ma jaya.

Step 2: Uska Bd <b:skin>…</b:skin> ko Ctrl+F dabaka Search kara. Uska bd app uska left side ma ak Black colour ka nisan hoga usma click kar ka ussa Expand kara jaisa ki app picture ma dakh sakta h.

Step 3: Usko Expand karna ka bd ]]></b:skin> ko search kara. Uska bd niche ka code ko thik ]]></b:skin>  ka uper paste kar da.

/* Social icons for Blogger

Edunext
----------------------------------------------- */

#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 4: Uska bd niche ki line ko search kara.

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Step 5: Uska bd ya Code (<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>) mil jana ka bd niche diya gaya code ko isska upper paste kar da.

<div class='social-media-icons' id='social-icons'>
<ul>

<li class='media_icon'><a href='http://facebook.com/Your Facebook ID'><img border='0' src='http://2.bp.blogspot.com/-hJlnVDP-uXk/UaKErpYECEI/AAAAAAAADhA/DA59rR8trrA/s1600/Facebook.png'/></a></li>

<li class='media_icon'><a href='http://twitter.com/#!/Your Twitter ID'><img border='0' src='http://3.bp.blogspot.com/-x7YZ7aKIxM8/UaKErq0FZlI/AAAAAAAADhE/3zNd_IFPT8g/s1600/Twitter.png'/></a></li>

<li class='media_icon'><a href='https://plus.google.com/Your Google Plus ID /about'><img border='0' src='http://1.bp.blogspot.com/-DNSrkD8pl14/UaKEsW_JdfI/AAAAAAAADhU/S0jGIdQuO4M/s1600/googleplus.png'/></a></li>

<li class='media_icon'><a href='http://Your Blog URL/feeds/posts/default'><img border='0' src='http://2.bp.blogspot.com/-H3nOjhn9wk8/UaKErtM0_mI/AAAAAAAADg8/vJ8tEgRcl5M/s1600/RSS.png'/></a></li>

</ul></div>

Step 6: Ab appko Red colour sa highlighted ki hui words ko apna Social media profile id sa change karna h. Aur ager app chahya to </ul></div> ka upper Extra Social Media icon ki Code ko v add kar sakta h. Nicha app Extra Icon ki code ki format ko dakh sakta h.

<li class='media_icon'><a href='Link URL'><img border='0' src='Image URL'/></a></li>

Step 7: Ab app Template ko Save kar da.

Also Read: Template ko compress kar ka Website speed Badaya

Ab appka Blog ma Attractive Social Media Icon add ho chuki hogi ab app ki visitors ma v increment hogi. 

Agar apko ya blog sa related aur v kuch jankari chaiya to please comment kara aur ager ya post acchi lagi ho to issa share jarur kara.

Tags : #SEO#Website Design

Share This :

Unknown