Elect Baskar

How to add Social Follow Button in Blogger

உங்கள் BLOGGER How To Add Social Follow Button எவ்வாறு சேர்ப்பது என்பதைக் காண்பிப்பேன். சமூக ஊடக ICON உங்கள் வாசகர்கள் social pages சுயவிவரங்களையும் பின்பற்ற அனுமதிக்கிறது. பேஸ்புக், ட்விட்டர், இன்ஸ்டாகிராம் போன்ற மிகவும் பிரபலமான சமூக ஐகான் சேவைகளை இங்கே பெறுவீர்கள்.இந்த சமூக பின்தொடர் விட்ஜெட்டுகள் HTML மற்றும் CSS உடன் வடிவமைக்கப்பட்டுள்ளன, அவை 100% பதிலளிக்கக்கூடியவை. பிளாகர் தனிப்பயன் வார்ப்புருக்கள் சமூக பின்தொடர் பொத்தான்களுடன் வருகின்றன. ஆனால் உங்களுக்கு அவை பிடிக்கவில்லை என்றால், இந்த விட்ஜெட்களை பிளாகருக்குப் பயன்படுத்தலாம்.

I will show you how to add social follow button to your Blogger blog. Social media icon allows your readers to follow your social pages and profiles. Here you get the most popular social icon services like Facebook, twitter, Instagram etc.

These social follow widgets are designed with HTML and CSS, which are 100% responsive. Blogger custom templates also come with social follow buttons. But if you don't like them, then you can use these widgets for Blogger.

Follow the procedure given below to add a responsive and beautiful social media widget inside your Blogger blog.

உங்கள் BLOGGER வலைப்பதிவிற்குள் பதிலளிக்கக்கூடிய மற்றும் அழகான சமூக ஊடக விட்ஜெட்டைச் சேர்க்க கீழே கொடுக்கப்பட்டுள்ள நடைமுறையைப் பின்பற்றவும்.

Step 1: First login to your Blogger account and go to the Theme menu. Click on Edit HTML button here.

Step 1: முதலில் உங்கள் BLOGGER account உள்நுழைந்து Theme menu செல்லவும். இங்கே திருத்து HTML button கிளிக் செய்க.

Step 2: Click anywhere in the HTML code and press Ctrl + F. Then a search box will open, here you type "</head>" and press enter.

Step 2; HTML குறியீட்டில் எங்கும் கிளிக் செய்து Ctrl + F ஐ அழுத்தவும். பின்னர் search box will open, இங்கே "</head>" type Enter ஐ அழுத்தவும்.

Step 3: Now copy the code given below and paste it immediately before </head> code. Click on the Save Theme button.

Step 3: இப்போது கீழே கொடுக்கப்பட்டுள்ள குறியீட்டை copy </ head> குறியீட்டிற்கு முன் உடனடியாக . Click on the Save Theme கிளிக் செய்க.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

CLICK HERE ; DOWNLOAD

Now is complete >Let's go to the second part of the setting.

Step 4: Now go to the "Layout" section of the blogger. Click on "Add a Gadget" in the Sidebar section.

Step 4: இப்போது பதிவரின் "Layout" பகுதிக்குச் செல்லவும். Sidebar section "Add a Gadget" என்பதைக் Click செய்க.

Step 5: Now the popup will open, scroll under it and click on “HTML / JavaScript” gadget.

Step 5: இப்போது popup will open, அதன் கீழ் உருட்டி “HTML / JavaScript” gadget click செய்க.

Step 6: Now choose your social media Widget code (Style 1, 2, 3, 4) for Blogger from the list below and paste the code in the content box.Finally, click on the “Save” button. Click on "Save arrangements". Considerably done, go to your blog and reload it. You will see that the widget is live on your blog.

Step 6:இப்போது கீழேயுள்ள பட்டியலிலிருந்து பிளாகருக்காக உங்கள் சமூக மீடியா விட்ஜெட் குறியீட்டை (உடை 1, 2, 3, 4) தேர்ந்தெடுத்து உள்ளடக்க பெட்டியில் குறியீட்டை ஒட்டவும். இறுதியாக, “சேமி” பொத்தானைக் கிளிக் செய்க. "சேமிப்பு ஏற்பாடுகள்" என்பதைக் கிளிக் செய்க. கணிசமாக முடிந்தது, உங்கள் வலைப்பதிவுக்குச் சென்று அதை மீண்டும் ஏற்றவும். உங்கள் வலைப்பதிவில் விட்ஜெட் நேரடியாக இருப்பதை நீங்கள் காண்பீர்கள்.

List of Social Media Buttons HTML Code

Here are some amazing social media follow buttons for bloggers. Here, choose whichever widget you like and add it to your blogger blog. Copy any HTML code for your block.

Style 1:

<style>

ul.techornate-social-share{padding:0;margin:0;overflow:hidden}ul.techornate-social-share li{list-style:none;float:left;margin-right:4%;width:48%;margin-bottom:10px;background:#fafafa;overflow:hidden}ul.techornate-social-share li a{text-decoration:none;display:inline-block;float:left;color:#fff;height:40px;width:40px;text-align:center;font-size:14px;line-height:40px;margin-right:16px;position:relative;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out}ul.techornate-social-share li a:after{height:0;width:0;top:50%;left:100%;content:'';margin-top:-4px;position:absolute}ul.techornate-social-share li a.facebook{background:#436feb}ul.techornate-social-share li a.facebook:after{border:4px solid #436feb;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}ul.techornate-social-share li a.twitter{background:#43c9eb}ul.techornate-social-share li a.twitter:after{border:4px solid #43c9eb;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}ul.techornate-social-share li a.google{background:#f14133}ul.techornate-social-share li a.google:after{border:4px solid #f14133;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}ul.techornate-social-share li a.youtube{background:#b00}ul.techornate-social-share li a.youtube:after{border:4px solid #b00;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}ul.techornate-social-share li a:hover{opacity:.7}ul.techornate-social-share li span{font-size:12px;margin:0;line-height:15px;color:#999;font-weight:700;display:block}ul.techornate-social-share li span.scount-number{margin-top:5px;color:#333}ul.techornate-social-share li:nth-child(2n){margin-right:0} </style>

<li> <a href="#" class="twitter"><i class="fa fa-twitter"></i></a> <span class="scount-number">39,505</span> <span>Followers</span></li>

<li> <a href="#" class="google"><i class="fa fa-google-plus"></i></a> <span class="scount-number">25,203</span> <span>Followers</span></li>

<li> <a href="#" class="youtube"><i class="fa fa-youtube"></i></a><span class="scount-number">7,456</span> <span>Subscribers</span></li>

</ul>

CLICK HERE ; DOWNLOAD

Replace each "Numbers" with your social followers, fans and YouTube subscribers numbers.

Style 2:

<style>

.techornate-social-buttons ul{padding-left:0;list-style:none}.techornate-social-buttons li a{text-transform:uppercase;text-decoration:none;padding:10px 1px 10px 10px;letter-spacing:2px;font-size:10px;color:#fff;display:block;border-radius:3px}.techornate-social-buttons ul li{margin-bottom:10px;width:100%}.techornate-social-buttons li a i{width:35px;height:14px;float:right;padding:0 0 0 10px;margin:0;font-size:14px;line-height:14px;border-left:1px solid #B1B1B1}.techornate-social-buttons li a.social-btn-facebook{background:#3b5998}.techornate-social-buttons li a.social-btn-twitter{background:#1da1f2}.techornate-social-buttons li a.social-btn-youtube{background:#cd201f}.techornate-social-buttons li a.social-btn-instagram{background:#405de6}.techornate-social-buttons li a.social-btn-google{background:#dd4b39}

</style>

<li><a href="#" class="social-btn-facebook">Like on Facebook <i class="fa fa-facebook"></i> </a></li>

<li><a href="#" class="social-btn-twitter">Follow on Twitter <i class="fa fa-twitter"></i> </a></li> <li><a href="#" class="social-btn-google">Follow on Google+ <i class="fa fa-google"></i> </a></li>

<li><a href="#" class="social-btn-instagram">Follow on Instagram <i class="fa fa-instagram"></i> </a></li>

<li><a href="#" class="social-btn-youtube">Subscribe on Youtube <i class="fa fa-youtube"></i> </a></li>

</ul>

</div>