Add Facebook Like Sidebar Ads to Blogger

You all have seen Ads on Facebook on the right sidebar. Today i am going to teach how to add Facebook ads on your blog with CSS code

You can add your website link and your own custom text to it by just changing the code so lets start the tutorial on how to create Facebook ads bar.

1.Adding the first part.

<div id="TNB" style="width:234px;background-color:#ffffff;height:290px;position:relative;"><div style="margin:0px;padding:0px;text-decoration:none;font-family:Lucida Grande,tahoma,verdana,arial,sans-serif;background-color:#f2f2f2;color:#333;font-size:11px;line-height:20px;text-align:left;font-weight:bold;border:none;border-bottom:1px solid #d9d9d9;border-top:1px solid #d9d9d9;width:234px;height:20px;text-indent:4px">Ads</div><div onclick="document.location.href = 'http://thenextblogs.blogspot.com';" style="margin:0px;padding:0px;text-decoration:none;border:none;border-bottom:1px solid #E9E9E9;width:234px;height:120px;padding-bottom:16;margin-top:8;margin-right:4px;margin-left:4px;background-color:#ffffff;line-height:14px;text-align:left;cursor:pointer;"><a class="TNB1" style="margin:0px;padding:0px;text-decoration:none;font-family:Lucida Grande,tahoma,verdana,arial,sans-serif;background-color:#ffffff;color:#3B5998;font-size:11px;line-height:13px;text-align:left;font-weight:bold;cursor:pointer;">Sponsred </a><br/><a class="TNBgs2" style="margin:0px;padding:0px;text-decoration:none;font-family:Lucida Grande,tahoma,verdana,arial,sans-serif;background-color:#ffffff;color:#808080;font-size:11px;line-height:14px;text-align:left;font-weight:normal !important;margin-bottom:5px;cursor:pointer;display:inline-block">http://thenextblogs.blogspot.com</a><br/><a class="TNBgs3" style="margin:0px;padding:0px;text-decoration:none;font-family:Lucida Grande,tahoma,verdana,arial,sans-serif;background-color:#ffffff;color:#333333;font-size:11px;line-height:14px;text-align:left;font-weight:normal !important;cursor:pointer;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbnW5DnQYYzRjeSTSseaNN4BbABS3ftQ2oiONDzsBHzcRn4gN7tzq8cL0VIb1N56Vncreg6DzSyhj6MUf5wTCGW2cNAxIqdhdMODMEDNp40zhT-9Hv1J_aXdrqQuN5Kd3HHjq9xQiMsNzR/s1600/chrome.jpg" style="margin:0px;padding:0px;width:80px;height:80px;float:left;margin-right:8px;margin-top:3px;cursor:pointer;border:none !important"/>Show your ad here..</a></div><div onclick="document.location.href = 'http://thenextblogs.blogspot.com';" style="margin:0px;padding:0px;text-decoration:none;border:none;border-bottom:1px solid #E9E9E9;width:234px;height:120px;padding-bottom:16;margin-top:8;margin-right:4px;margin-left:4px;background-color:#ffffff;line-height:14px;text-align:left;cursor:pointer;">

2. Lets add the second part of the ads tag

<a class="TNBs1" style="margin:0px;padding:0px;text-decoration:none;font-family:Lucida Grande,tahoma,verdana,arial,sans-serif;background-color:#ffffff;color:#3B5998;font-size:11px;line-height:13px;text-align:left;font-weight:bold;cursor:pointer;">Free </a><br/><a class="TNB2" style="margin:0px;padding:0px;text-decoration:none;font-family:Lucida Grande,tahoma,verdana,arial,sans-serif;background-color:#ffffff;color:#808080;font-size:11px;line-height:14px;text-align:left;font-weight:normal !important;margin-bottom:5px;cursor:pointer;display:inline-block">funsgag.blogspot.com</a><br/><a class="TNB3" style="margin:0px;padding:0px;text-decoration:none;font-family:Lucida Grande,tahoma,verdana,arial,sans-serif;background-color:#ffffff;color:#333333;font-size:11px;line-height:14px;text-align:left;font-weight:normal !important;cursor:pointer;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGiwnpqmLEGM52ZPnLb9dJg_JsUl4PyEUpalqxft07SbjZfb1RhFL2KBwHGFGv0jQmNl5YQjmoMu-0LNpXwdekqD04bKmPOOQfF6FaVCwQbXMVGEU4aZD6Cv4dUm80Rnam46S4LrlradYk/s1600/mom.gif" style="margin:0px;padding:0px;width:80px;height:80px;float:left;margin-right:8px;margin-top:3px;cursor:pointer;border:none !important"/>Show your ad here</a></div><a href="http://thenextblogs.blogspot.com/" target="_blank" style="position:absolute;right:0px;bottom:0px;border:none;padding:0px;margin:0px;"><img style="padding:0px;margin:0px;background-color:transparent;border:none;height:14px;float:right;" src="http://www.comlaw.gov.au/WebResource.axd?d=8pcqcqQZtBvWE0Pgj9As_C7Ht5ZJK7NoZqRP7fLtGnCnQNTDP0aFZHxque8-5vmKr7haiaUYPVwlSXVoO_IkrUpGj9AViXEG_qllcuqnsN-GJBkJ0&t=634605906709717464" /></a></div>

3.The last and the final part is to add the css need to add this CSS using <style>
tag in your blogger template.

TNB:hover{font-family:Lucida Grande,tahoma,verdana,arial,sans-serif;background-color:#ffffff;color:#3B5998;font-size:11px;line-height:13px;text-align:left;font-weight:bold;text-decoration:underline !important;cursor:pointer;}.TNB2:hover{font-family:Lucida Grande,tahoma,verdana,arial,sans-serif;background-color:#ffffff;color:#808080;font-size:11px;line-height:14px;text-align:left;font-weight:normal !important;display:inline-block;text-decoration:none;cursor:pointer;}.TNB3:hover{font-family:Lucida Grande,tahoma,verdana,arial,sans-serif;background-color:#ffffff;color:#333333;font-size:11px;line-height:14px;text-align:left;font-weight:normal !important;text-decoration:none;cursor:pointer;}

Add that all reload you blog and check how Facebook ads works, it recommend you to add this all tags in you HTML gadget and not in your blogger template.

Image:- TNB