ওয়েব সাইটে এক্সটারনাল লিংককে CSS এর মাধ্যমে স্টাইল করা, লিংকের শেষে শব্দ বা ছবি যুক্ত করা যায়। এছাড়াও চাইলে এক্সটারনাল লিংকের ক্ষেত্রে target=”_blank” সেট করা যায় জেকুয়েরীর সাহায্যে। নিচের উদাহারণে shamokaldarpon.com ছাড়া বাকী সব লিংক এক্সটারনাল লিংক হিসাবে ব্যবহার করেছি। আপনার প্রয়োজনমত সাইটের ইআরএল পরিবর্তন করে নিবেন।
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>Styling External Links</title> <style type="text/css"> /* Styling External Links */ a[href^="http://"]:not([href*="shamokaldarpon.com"]):after, a[href^="https://"]:not([href*="shamokaldarpon.com"]):after{ padding-left:2px; content: "" url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=); } </style> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script type="text/javascript"> jQuery.noConflict(); (function( $ ) { $(document).ready(function(){ $("a[href^='http://']:not([href*='shamokaldarpon.com'])").attr("target","_blank"); $("a[href^='https://']:not([href*='shamokaldarpon.com'])").attr("target","_blank"); }); })(jQuery); </script> </head> <body> <div> <h4>Internal Links</h4> <a href="http://shamokaldarpon.com">Shamokal Darpon</a> <a href="http://demo.shamokaldarpon.com">Demo</a> <a href="http://www.shamokaldarpon.com/4120/sylhet-tour-2014">Sylhet Tour 2014</a> <a href="http://www.shamokaldarpon.com/4127/khoiyachora-waterfalls">Khoiyachora Waterfalls</a> </div> <div> <h4>External Links</h4> <a href="https://www.facebook.com">Facebook</a> <a href="https://www.google.com">Google</a> <a href="https://wikipedia.org">Wikipedia</a> <a href="http://royaltechbd.com">Royal Technologies</a> </div> </body> </html>
এখানে CSS পার্টটুক shamokaldarpon.com ছাড়া বাকী লিংকগুলোর শেষে একটি ছবি যুক্ত করা হয়েছে এবং জেকুয়েরী কল করা এবং স্ক্রিপ্টটুক shamokaldarpon.com ছাড়া বাকী সব লিংকে target=”_blank” করা হয়েছে।