Skip to main content

Awesome Social Media Fans Counter Widget Ko Blog Me Add Kare



Hellow friends aaj mai aapko awesome social media fans counter widget ke baare me batane jaa raha hu. Yah social media counter widget bahut hi attractive hai. Aapko yah widget jarur pasand aayege. Is widget me aapko Facebook, Twitter, Pinterest, Instagram, Google Plus, LinkedIn, Flickr and Vine social ke icon
show hoge.

Saath me aapke followers ke number bhi show hoge. Waise maine apne previous post me ek aur social media counter widget ke baare me post likha tha. Aap is widget ki bhi try kar sakte hai. Ab mai aapko batana start karta hu ki widget ko blog me kaise add karna hai.


Add awesome social media counter widget in blog newfeatureblog





Awesome Social Media Fans Counter Widget Ko Blog Me Kaise Add Kare ?

Notes :- Code ko blog me lagane se pahle aap apne template ka backup jarur le len. Taaki agar code ko lagane me kuchh mistake bhi ho jaati hai to aap phir se apne template ko laga sakte hai.


Step 1

Sabse pahle aap apne blogger dashboard me login kare.


Step 2


Click on template - newfeatureblog

  1. Template option par click kare.
  2. Edit HTML par click kare.


Step 3

Edit HTML par click karne ke baad ek page open hoga. Us page me cursor ko le jaakar ctrl + F press kare. Ab us page me ek small search box open hoga.


Step 4

Search box me </style> likhkar search kare.


Step 5

Ab niche diye hue CSS code ko copy karke </style> tag ke pahle paste kar de.


/*================= CSS Social Icons Widget by msdesignbd.com =====================*/.widget_social_apps{margin-left:-.5%;margin-right:-.5%}.widget_social_apps:before,.widget_social_apps:after{content:&quot;&quot;;display:table}.widget_social_apps:after{clear:both}.widget_social_apps .app_social{margin:0 .5% .5%;width:24%;float:left;text-align:center;background-color:#111;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;transition:all .2s}.widget_social_apps.app_social.facebook{background-color:#3e64ad}.widget_social_apps .app_social.twitter{background-color:#58ccff}.widget_social_apps .app_social.pinterest{background-color:#de010d}.widget_social_apps.app_social.instagram{background-color:#125688}.widget_social_apps .app_social.google{background-color:#dd4b39}.widget_social_apps .app_social.linkedin{background-color:#007bb6}.widget_social_apps.app_social.flickr{background-color:#ff0084}.widget_social_apps .app_social.vine{background-color:#00bf8f}.widget_social_apps .app_social:hover{background-color:#111}.widget_social_apps .app_social a{display:block;color:#fff;padding:15px 5px}.widget_social_apps .app_social span{display:block}.widget_social_apps .app_social span.app_icon i{font-size:24px;margin-bottom:5px}.widget_social_apps .app_social span.app_count{font-weight:700;line-height:16px}.widget_social_apps .app_social span.app_type{font-size:14px;line-height:16px}



Step 6

Code ko paste karne ke baad Save Template par click kare.



Ab HTML code ko aapko apne blog me add karna hai. Aap mere steps ko follow kare :-

Step 1

Newfeatureblog click on layout


Layout par click kare.


Step 2


Click add a gadget

Add a Gadget ki link par click kare.


Step 3



HTML/Javascript par click kare.


Step 4

Ab ek new page open hoga.

Paste code in the box


a) Title me Follow on Social Media likhe.

b) Niche diye hue HTML code ko copy karke box me paste kar de.


<div
class="widget_social_apps">
<div
class="app_social facebook">
<a
href="https://www.facebook.com/newfeatureblog" target="_blank">
<span
class="app_icon"><i
class="fa fa-facebook"></i>< span>
<span
class="app_count"> 7845 </span>
<span
class="app_type">Fans</span></a></div>
<div
class="app_social twitter">
<ahref="https://www.twitter.com/newfeatureblog" target="_blank">
<span
class="app_icon"><iclass="fa fa-twitter"></i>< span>
<span
class="app_count"> 32 </span>
<span
class="app_type">Followers</span></a></div>
<div
class="app_social pinterest">
<ahref="https://www.pinterest.com/newfeatureblog" target="_blank">
<span
class="app_icon"><i
class="fa fa-pinterest"></i></span>
<span
class="app_count"> 4774 </span>
<span
class="app_type">People</span></a></div>
<div
class="app_social instagram">
<ahref="https://www.instagram.com/newfeatureblog" target="_blank">
<span
class="app_icon"><iclass="fa fa-instagram"></i></span><spanclass="app_count"> 65684 </span>
<span
class="app_type">Followers</span></a></div>
<div
class="app_social google">
<ahref="https://www.google.com/newfeatureblog" target="_blank">
<span
class="app_icon"><i
class="fa fa-google-plus"></i></span>
<span
class="app_count"> 65684 </span>
<span
class="app_type">People</span></a></div>
<div
class="app_social linkedin">
<ahref="https://www.linkedin.com/newfeatureblog" target="_blank">
<span
class="app_icon"><i
class="fa fa-linkedin"></i></span>
<span
class="app_count"> 65684 </span>
<span
class="app_type">Fans</span></a></div>
<div
class="app_social flickr">
<ahref="https://www.flickr.com/newfeatureblog" target="_blank">
<span
class="app_icon"><i
class="fa fa-flickr"></i></span>
<span
class="app_count"> 44 </span>
<span
class="app_type">Followers</span></a></div>
<div
class="app_social vine">
<ahref="https://www.vine.com/newfeatureblog" target="_blank">
<span
class="app_icon"><i
class="fa fa-vine"></i></span>
<span
class="app_count"> 574 </span>
<span
class="app_type">People</span></a></div>
</div>



Notes :- newfeatureblog ke place par aap apna social media page ka URL name likhe. Orange colour se jo social counting likha hua hai uske place par aap apne followers ka number likhe.


c) Save par click kare.





Ab aapko blog me awesome social media counter fans widget add ho chuka hai. Aap check karke dekh sakte hai.

Agar aapko yah post pasand aaya ho to is post ko social media par share kare. Isi tarah ka post padhte rahne ke liye mujhe subscribe kare.

Comments

Popular posts from this blog

Blogger Post में Code Box कैसे Add करें

Blog post में code box को add करना बहुत ही जरुरी है क्योंकि यह हमारे blog के post को professional look देता है और users को भी code का  इस्तेमाल करने में सुविधा होती है | मैंने पिछले post में भी HTML और CSS code box को blogger post में add करने  का सबसे आसान तरीका बतलाया था| अब मैं आपको इस post में code box को add करने का दूसरा method बतलाऊंगा | इस code को add करना बहुत ही आसान है | आप मेरे steps को follow करें | Website के लिए Domain Name कैसे खरीदे या Register करें ? Blog या Website के Domain Name को Without WWW के कैसे Set करें ? Step 1 सबसे पहले यह code copy कर लीजिए | /* Code Box ----------------------------------------------- */ .code { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 20px; color: #000000; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; max-height: 200px; min-height: 16px; overflow: auto; padding: 10px 10px 10px; width: 90%...

Google Analytics Account बनाकर इसको Blog में कैसे Add करे ?

Hellow friends, आज मैं आपको इस post में बताऊंगा कि Google Analytics account कैसे बनाते है और फिर इसको अपने blog से कैसे add करते है ? Analytics को अपने blog या site में add करके website का owner अपने site पर आने वाले सभी visitors की जानकारी आसानी से प्राप्त कर सकता है | इस analytics की मदद से अपने site के बारे में बहुत सारी जानकारियां मिलती है जिसका इस्तेमाल करके हम site की Search Engine Ranking  को increase कर सकते है | Google Analytics से हमें अपने site के बारे में क्या-क्या help मिल सकता है इसके बारे में आगे विस्तार से जानते है | Also Read :   AdSense Account कैसे बनाये Blog के लिए : Full Guide Also Read :   Blog or Website Ko Google, Bing, Yahoo Aur Yandex Me Submit Kaise Kare ? Google Analytics क्या है ? गूगल एनालिटिक्स Google की एक service है जिसके मदद से हम अपने site पर आने वाले visitors के बारे में जानकारी हासिल कर सकते है | इससे हमें visitors की location की जानकारी भी मिलती है | अपने blog या website की जानकारी को analytics...

AdSense Code को Blogger Template में Save करने के बाद आनेवाले Async XML Parsing Error को ठीक कैसे करे

हैलो दोस्तों, मैंने पिछले Post में Google Adsense Account को blog के लिए create करने  के बारे में बतलाया था | Adsense account बनाते समय एक ads का code प्राप्त होता है जिसको कि blogger template (theme) में लगाना होता है | इस code को blogspot blog के template में लगाकर save करने के बाद async XML parsing error का एक message show होता है | यह error adsense के लिए approval मिलने के बाद page-level ads को blogspot blog में लगाते समय भी आता है | इस post में मैं आपको बताऊंगा कि AdSense code को blogger template में save करने के बाद आने वाले Async XML parsing error को ठीक कैसे करते है ? Blogger पर error message कुछ इस प्रकार से show होगा :- Error parsing XML, line 670, column 15: Attribute name "async" associated with an element type "script" must be followed by the ' = ' character  इस error को ठीक करने का नीचे मैं solution बता रहा हूँ | ध्यान से पढ़ें | Also Read  : RevenueHits Ads Network पर Account बनाकर पैसा कैसे कमाये ? BlogSpot...