خاصية تلميحات الروابط الخارجية لأعطاء الزائر ثقة تامة بك 2022
السلام عليكم ومرحبا بكم في مدونة technomee درس اليوم عن اضافة ليست مهمة يعني
في الصراحة ولكن انا لما كنت بروح لمواقع او مدونات وبشوف رابط تحميل او موقع ما
بخاف لأنو في روابط كتير عطلتلي المتصفح لأنني قد اخدع احيانا وادخل الى مواقع
خداعبة او تعرض اشياء غير شرعية ولهذا لاادخل للرابط ولكن لو تلك المواقع عرفتني
بالموقع الذي سأدخل اليه او عرضتلي اسمه وايقونته لو دخلت اليها ولكن لما اصبحت
انا الناشر وبالذات بلوجر فقررت انشاء اداة تقوم بتعريف للزائر الموقع الذي سيدخل
اليه عبر اسم وايقونته وبعدما نجت في ذلك قررت نشره لكم لعلكم تحتاجونه والإضافة
تعمل مع الروابط الخارجية فقط
الفائدة من الإضافة:
- تعطي شكلا لروابط الموقع
- تعرف الزائر بالموقع الذي سيذهب اليه
- تجعل الروابط الخارجية لاتشبه الروابط الداخلية
جرب التأشير على هذه(technomee) هل لاحظت هكذا سيصبح معك وربما أحسن حسب القالب.
اضافة السكريبت
السكريبت صغير ولن يثقل الموقع لهذا نشرته لأنه لن يسبب نشاكل في الموقع
لإضافة عليك الذهاب الى ٱخر الموقع فوق </body> ثم ضف الكود فوقه
<b:if cond='data:view.isPost'>
<style>
:root{
--tooltip-background: #fff; /*لون خلفية*/
--tooltip-color-text: #000000bf; /*لون خط الرابط*/
--technomee-tooltip-icon-background:#eee;/*لون خلفية الأيفونة*/
}
.technomee-tooltip-icon{position:relative}.technomee-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}.technomee-tooltip-icon>div *{display:inline-block}.technomee-tooltip-icon>div img{width:25px;height:25px;float:left;margin-right:8px;background:var(--technomee-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}.technomee-tooltip-icon>div span{color:var(--tooltip-color-text);padding-right:15px;position:relative;font-weight:600}.technomee-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}.technomee-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("technomee-tooltip-icon").append(c)})});
//]]>
</script>
</b:if>
تحميل القالب
اما إذا كنت لديك أسباب تدفعك الى أنك لن تستطيع المجيء الى هنا كل مرة
للحصول على أكواد القالب يمكنك تحميل أكواده مباشرتا من الأداة التالية عبر
زر التحميل:
كود js-css
680B
##
االٱن بعدما اضفنا السكريبت علينا الذهاب الى الموضوع المراد اضافة فيه هذه
الخاصية ثم اجعل كل الروابط خارجية عبر خاصية بلوجر لاعددات الروابط وسيت توفير
قريبا سكريبت يقوم بهذا للعملية تلقائيا بدون تدخل منك ولهذت نقول لكم دائما ان
تتابعوا المدونة
والى هنا نكون انتهينا من درس اليوم انتظرونا في دروس قادمة.