طريقة إضافة تلميحات إحترافية لروابط الخارجية في مواضيع بلوجر

السلام عليكم ومرحبا بكم في موقع الوليد نت 

اقدم لكم اليوم طريقة سهلة لكي تضيف شكل مميز لروابط الخارجية التي على المواضيع بشكل احترافي وجميل

يمكنك معاينة الاضافة عبر الرابط 

موقع الوليد نت

شكل الاضافة مميز حيث تعرض لك ايقونة الموقع الذي يتوجه له الرابط ومعه دومين الرابط ايضا

لأضافة رابط الخارجي 

ضع علامة صح على فتح هذا الرابط في نافذة جديدة

الان لجعل الإضافة تظهر ضع الكود التالي فوق ال </body>

<b:if cond='data:view.isPost'>
<style>
:root{
  --tooltip-background: #fff; /*لون خلفية*/
  --tooltip-color-text: #000000bf; /*لون خط الرابط*/
  --tooltip-icon-background:#eee;/*لون خلفية الأيفونة*/
} 
.tooltip-icon{position:relative}.tooltip-icon>div{position:absolute;top:-40px;right:-5px;background:var(--tooltip-background);border-radius:25px;border:1px solid #eee;width:max-content;padding:6px 20px;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);-webkit-transition:all 800ms cubic-bezier(0.23,0.01,0,1);-moz-transition:all 800ms cubic-bezier(0.23,0.01,0,1);-o-transition:all 800ms cubic-bezier(0.23,0.01,0,1);transition:all 800ms cubic-bezier(0.23,0.01,0,1);-webkit-transform:translateY(15px);-moz-transform:translateY(15px);-ms-transform:translateY(15px);-o-transform:translateY(15px);transform:translateY(15px);opacity:0;visibility:hidden}.tooltip-icon>div *{display:inline-block}.tooltip-icon>div img{width:25px;height:25px;float:left;margin-right:8px;background:var(--tooltip-icon-background);border-radius:50%;padding:4px}.tooltip-info:after{width:0;height:0;content:"";border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #c1c1c1;transition:all .5s ease-in-out;position:absolute;bottom:-8px;right:12px}.tooltip-icon>div span{color:var(--tooltip-color-text);padding-right:15px;position:relative;font-weight:600}.tooltip-icon>div span:before{content:"";display:inline-block;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000000bf'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14' /%3E%3C/svg%3E");background-repeat:no-repeat;background-size:100%;width:17px;height:17px;margin-left:5px;margin-bottom:-3px}.tooltip-icon:hover>div{visibility:visible;opacity:1;-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none}
</style>
<script type='text/javascript'>
//<![CDATA[
function smart_domain(a){if(-1<a.indexOf("://"))return-1<a.indexOf("://www.")?a.split("://www.")[1].split(".")[0]:a.split("://")[1].split(".")[0]}function extractHostname(a){var b;return b=-1<a.indexOf("//")?a.split("/")[2]:a.split("/")[0],b=b.split(":")[0],b=b.split("?")[0],b}$(document).ready(function(){$(".post-body a[target=\"_blank\"]").each(function(){var a=$(this).attr("href"),b=extractHostname(a);b=b.split("."),b=b.slice(-2).join(".");var c="<div class=\"tooltip-info\"><span>"+b+"</span><img src=\"https://cdn.statically.io/favicons/"+extractHostname(a)+"\" width=\"40\" height=\"40\"  alt=\""+smart_domain(a)+"\" ></div>";$(this).addClass("tooltip-icon").append(c)})});
//]]>
</script>
</b:if>

Share This

clear