خاصية تلميحات الروابط الخارجية لأعطاء الزائر ثقة تامة بك 2022

السلام عليكم ومرحبا بكم في مدونة technomee درس اليوم عن اضافة ليست مهمة يعني في الصراحة ولكن انا لما كنت بروح لمواقع او مدونات وبشوف رابط تحميل او موقع ما بخاف لأنو في روابط كتير عطلتلي المتصفح لأنني قد اخدع احيانا وادخل الى مواقع خداعبة او تعرض اشياء غير شرعية ولهذا لاادخل للرابط ولكن لو تلك المواقع عرفتني بالموقع الذي سأدخل اليه او عرضتلي اسمه وايقونته لو دخلت اليها ولكن لما اصبحت انا الناشر وبالذات بلوجر فقررت انشاء اداة تقوم بتعريف للزائر الموقع الذي سيدخل اليه عبر اسم وايقونته وبعدما نجت في ذلك قررت نشره لكم لعلكم تحتاجونه والإضافة تعمل مع الروابط الخارجية فقط 

الفائدة من الإضافة: 

  1. تعطي شكلا لروابط الموقع
  2. تعرف الزائر بالموقع الذي سيذهب اليه 
  3. تجعل الروابط الخارجية لاتشبه الروابط الداخلية
جرب التأشير على هذه(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
االٱن بعدما اضفنا السكريبت علينا الذهاب الى الموضوع المراد اضافة فيه هذه الخاصية ثم اجعل كل الروابط خارجية عبر خاصية بلوجر لاعددات الروابط وسيت توفير قريبا سكريبت يقوم بهذا للعملية تلقائيا بدون تدخل منك ولهذت نقول لكم دائما ان تتابعوا المدونة
والى هنا نكون انتهينا من درس اليوم انتظرونا في دروس قادمة. 
Next Post Previous Post
No Comment
Add Comment
comment url