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

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

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

 شرح طريقه تركيب إضافة تلميحات إحترافية للروابط الخارجية في بلوجر بالفيديو :

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

اولا : قم بالحث عن الوسم 

</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>

واذا واجهت اي مشاكل لا تنسي ترك تعليق وساقوم بالرد عليك