Hi Web Developers! Back again with trickpk, this time TrickPk will share a tutorial on How to Create a Link Ad Slot Similar to an AdSense Link Ad . It looks very similar to Google AdSense link ads, so this link ad slot can be used to open advertising services on your blog, and this type of link ad can be applied anywhere, whether below the post, in the middle of the post or above the post.
Well, that way you can provide more independent link ad slots with a display that doesn't interfere, of course, because it will look more attractive like the display of AdSense link ads and of course also responsive. without further ado, proceed to the tutorial.
How to Create Link Ads Similar to AdSense Link Ads
Go to Blogger >> Themes >> Edit HTML .
Then copy and paste this CSS code below the code
]]></b:skin>or</style>Save Theme .
If you want to place it in the blog sidebar, you just need to go to Layout >> Add Gadget >> HTML/JavaScript.
/*Adsense-like Link Ads by TrickPk.com*/ .link-btn{width:100%;position:relative;padding-top:15px} .link-btn:after{clear:both;content:"";display:block} .label-link-btn{font-size:12px;color:#333;position:absolute;top:0;left:0;line-height:1} .label-link-btn svg{width:15px;height:15px;vertical-align:-3px} .label-link-btn svg path{fill:#00aecd} .link-btn-left,.link-btn-right{width:calc(50% - 10px);float:left} .link-btn-left{margin-right:10px} .link-btn-right{margin-left:10px} .trickpkads-link{width:100%;height:41px;display:block;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;text-align:center;line-height:41px;box-shadow:0 1px 1px rgba(255,255,255,0.35) inset,0px 1px 1px rgba(0,0,0,0.3);align-items:center;justify-content:center;background-color:#119af5;border:1px solid #ffffff;border-radius:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:#ffffff;font-weight:normal;font-family:arial,sans-serif;font-size:16px;margin:5px auto} .trickpkads-link:hover{background-color:#fff;color:#333!important} @media screen and (max-width:640px){.link-btn-left,.link-btn-right{width:100%;float:none;margin:0 auto}}
Here is the HTML code.
<div class="link-btn"> <div class="link-btn-left"> <a class="trickpkads-link" href="#" target="_blank">Post a Link Ad Here</a> <a class="trickpkads-link" href="#" target="_blank">Post a Link Ad Here</a> <a class="trickpkads-link" href="#" target="_blank">Post a Link Ad Here</a> <a class="trickpkads-link" href="#" target="_blank">Post a Link Ad Here</a> </div> <div class="link-btn-right"> <a class="trickpkads-link" href="#" target="_blank">Post a Link Ad Here</a> <a class="trickpkads-link" href="#" target="_blank">Post a Link Ad Here</a> <a class="trickpkads-link" href="#" target="_blank">Post a Link Ad Here</a> <a class="trickpkads-link" href="#" target="_blank">Post a Link Ad Here</a> </div> <a href="#" target="_blank" title="link ads by trickpk.com"> <div class="label-link-btn"> <svg x="0px"> <path d="M7.5,1.5a6,6,0,1,0,0,12a6,6,0,1,0,0,-12m0,1a5,5,0,1,1,0,10a5,5,0,1,1,0,-10ZM6.625,11l1.75,0l0,-4.5l-1.75,0ZM7.5,3.75a1,1,0,1,0,0,2a1,1,0,1,0,0,-2Z"> </path></svg> Link Ads by trickpk.com </div></a> </div>
The writing text in the above block code, change according to your desire.
That's the tutorial on how to make a link ad slot similar to an AdSense link ad . Hopefully useful thank you.