إنشاء كارت معلوماتي لموقعك

تم انشاء إضافة عبارة عن كارت تعريفي بالموقع , أقرب لأدوات مواقع التواصل الإجتماعي لكنه خاص بموقعك وكذلك كبرمجية خفيفه مقارنة بأى آداة اجتماعية أخرى

إنشاء كارت معلوماتي لموقعك


مكونات الإضافة

  1. صورة لموقعك
  2. خاصة موضوع عشوائي تظهر عنوان الموضوع كمقترح للقراءة
  3. أزرار المتابعة الإجتماعية 

كود الإضافة
يمكنك وضع الكود في صفحة أو آداة HTML/JavaScript

<style>
#social-card{--carcolor:#456EAC;border:1px solid #eee;padding:10px;max-width:400px;margin:0 auto;box-sizing:border-box;background-color:#fff;}
#social-card > img{width:100%;height:140px;object-fit:cover;}
.cardtitle{position:relative;height:30px;line-height:30px;margin-bottom:15px;}
.cardtitle::before{content:"";background-color:#eee;height:2px;width:100%;left:0;top:50%;display:block;position:absolute;translate:0 -50%;}
.cardtitle span{background-color:#fff;position:relative;z-index:1;width:fit-content;margin:0 auto!important;display:block;padding:0 10px!important;font-size:20px;color:#777;height:30px;line-height:30px;}
#cnmu-rand-card{background-color:#eee;padding:10px;text-align:center;font-size:14px;margin-bottom:10px;position:relative;}
#cnmu-rand-card::before{content:"";position:absolute;border-style:solid;border-width:10px;border-color:transparent transparent #eee;top:-20px;left:50%;translate:-50% 0;}
#cnmu-rand-card a{color:#444;}
.card-sbuttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));justify-content:center;gap:10px;}
.card-sbuttons > a{display:flex;align-items:center;gap:5px;color:#fff;justify-content:center;border-radius:2px;height:36px;background-color:#444;font-size:14px;}

.card-sbuttons > a:nth-child(1) {background-color: #f45d00;}
.card-sbuttons > a:nth-child(2) {background-color: #3A589B;}
.card-sbuttons > a:nth-child(3) {background-color: #333;}
.card-sbuttons > a:nth-child(4) {background-color: #D20000;}
.card-sbuttons > a:hover {background-color: var(--carcolor); color:#fff;}
</style>

<div id="social-card">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjElBlTYhtaLVZPvVdSWPGaHEUl_lTfWpwKHKXYs-ldun-31woJ9Ctt6VjjV8JqMOqjg_-prI1bvFJ94UjP4FbfakbplFPbUyxOAnvGKoZ94WICjKrIr5xBqzYXjrFwlTXz_9p1JbukJ62N-VXJ5jmvkKz_5bQIJt9uF3eNnqxLmhaFkwZ6odP8dpfZu2iz/s1600/cnmu.jpg" alt="كن مدون" />
<div class="cardtitle"><span>اقرأ في كن مدون</span></div>
<div id="cnmu-rand-card">جاري التحميل ...</div>
<div id="cnmu-random"></div>
<div class="cardtitle"><span>تابعنا</span></div>
<div class="card-sbuttons">
<a href="https://www.blogger.com/follow-blog.g?blogID=**********" rel="nofollow noopener" target="_blank"><span>420</span><i class="fa-brands fa-blogger-b"></i></a>
<a href="#" rel="nofollow noopener" target="_blank"><span>1500</span><i class="fa-brands fa-facebook-f"></i></a>
<a href="#" rel="nofollow noopener" target="_blank"><span>102</span><i class="fa-brands fa-x-twitter"></i></a>
<a href="#" rel="nofollow noopener" target="_blank"><span>80</span><i class="fa-brands fa-youtube"></i></a>
</div>
</div>


<script>
const cardblogUrl = '/feeds/posts/default?alt=json-in-script';

</script>

<script>
(function(_0x328600,_0x3c759e){const _0x2e7a40=_0x30ce,_0x58fedf=_0x328600();while(!![]){try{const _0x4e6044=parseInt(_0x2e7a40(0xd1,'v4$7'))/0x1*(-parseInt(_0x2e7a40(0xea,'$ExT'))/0x2)+-parseInt(_0x2e7a40(0xef,'wQG]'))/0x3+-parseInt(_0x2e7a40(0xdb,'Z]6v'))/0x4+-parseInt(_0x2e7a40(0xeb,'Z]6v'))/0x5+parseInt(_0x2e7a40(0xdc,'dmd$'))/0x6+-parseInt(_0x2e7a40(0xe0,'iSZU'))/0x7+-parseInt(_0x2e7a40(0xda,'wCt1'))/0x8*(-parseInt(_0x2e7a40(0xcd,'O0]!'))/0x9);if(_0x4e6044===_0x3c759e)break;else _0x58fedf['push'](_0x58fedf['shift']());}catch(_0x159559){_0x58fedf['push'](_0x58fedf['shift']());}}}(_0x4cb1,0x7a0bb));function getRandomPost(){const _0x46368f=_0x30ce,_0x11b902=document['createElement']('script');_0x11b902[_0x46368f(0xd7,'KsdQ')]=cardblogUrl+_0x46368f(0xe7,'pNZv'),document[_0x46368f(0xd3,'k2!x')][_0x46368f(0xde,'hb!P')](_0x11b902);}function displayPost(_0x35ef81){const _0xec3b12=_0x30ce,_0x10ec82=_0x35ef81[_0xec3b12(0xf0,'Z]6v')][_0xec3b12(0xd6,'Z]6v')];if(_0x10ec82&&_0x10ec82['length']>0x0){const _0x40e945=Math[_0xec3b12(0xe4,'Jyxs')](Math[_0xec3b12(0xce,'Ja)L')]()*_0x10ec82[_0xec3b12(0xd9,'Ezo7')]),_0x459cce=_0x10ec82[_0x40e945],_0x4167cb=_0x459cce['title']['$t'],_0x43ae62=_0x459cce[_0xec3b12(0xee,'^!m1')][_0xec3b12(0xd5,'hb!P')](_0x533737=>_0x533737[_0xec3b12(0xe6,'HuuU')]==='alternate')['href'],_0x4e9af5=document[_0xec3b12(0xe8,'mii*')](_0xec3b12(0xf1,'Z]6v'));_0x4e9af5[_0xec3b12(0xd4,'JcY7')]=_0xec3b12(0xcf,'wQG]')+_0x43ae62+'\x22\x20target=\x22_blank\x22>'+_0x4167cb+_0xec3b12(0xe5,'WDVy');}else document[_0xec3b12(0xed,'PF@&')](_0xec3b12(0xd2,'zx%z'))['innerHTML']=_0xec3b12(0xe2,'Jyxs');}function _0x30ce(_0x5ebbbc,_0x23bbf1){const _0x4cb113=_0x4cb1();return _0x30ce=function(_0x30ce74,_0x230a44){_0x30ce74=_0x30ce74-0xcc;let _0x571724=_0x4cb113[_0x30ce74];if(_0x30ce['uailCM']===undefined){var _0x5145f8=function(_0x35ef81){const _0x10ec82='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=';let _0x40e945='',_0x459cce='';for(let _0x4167cb=0x0,_0x43ae62,_0x4e9af5,_0x533737=0x0;_0x4e9af5=_0x35ef81['charAt'](_0x533737++);~_0x4e9af5&&(_0x43ae62=_0x4167cb%0x4?_0x43ae62*0x40+_0x4e9af5:_0x4e9af5,_0x4167cb++%0x4)?_0x40e945+=String['fromCharCode'](0xff&_0x43ae62>>(-0x2*_0x4167cb&0x6)):0x0){_0x4e9af5=_0x10ec82['indexOf'](_0x4e9af5);}for(let _0x2a614d=0x0,_0x27a334=_0x40e945['length'];_0x2a614d<_0x27a334;_0x2a614d++){_0x459cce+='%'+('00'+_0x40e945['charCodeAt'](_0x2a614d)['toString'](0x10))['slice'](-0x2);}return decodeURIComponent(_0x459cce);};const _0x11b902=function(_0x11baf4,_0x2eacc0){let _0x29eae7=[],_0x3afb9a=0x0,_0x60e278,_0x4cd024='';_0x11baf4=_0x5145f8(_0x11baf4);let _0x55efbb;for(_0x55efbb=0x0;_0x55efbb<0x100;_0x55efbb++){_0x29eae7[_0x55efbb]=_0x55efbb;}for(_0x55efbb=0x0;_0x55efbb<0x100;_0x55efbb++){_0x3afb9a=(_0x3afb9a+_0x29eae7[_0x55efbb]+_0x2eacc0['charCodeAt'](_0x55efbb%_0x2eacc0['length']))%0x100,_0x60e278=_0x29eae7[_0x55efbb],_0x29eae7[_0x55efbb]=_0x29eae7[_0x3afb9a],_0x29eae7[_0x3afb9a]=_0x60e278;}_0x55efbb=0x0,_0x3afb9a=0x0;for(let _0x17e6f9=0x0;_0x17e6f9<_0x11baf4['length'];_0x17e6f9++){_0x55efbb=(_0x55efbb+0x1)%0x100,_0x3afb9a=(_0x3afb9a+_0x29eae7[_0x55efbb])%0x100,_0x60e278=_0x29eae7[_0x55efbb],_0x29eae7[_0x55efbb]=_0x29eae7[_0x3afb9a],_0x29eae7[_0x3afb9a]=_0x60e278,_0x4cd024+=String['fromCharCode'](_0x11baf4['charCodeAt'](_0x17e6f9)^_0x29eae7[(_0x29eae7[_0x55efbb]+_0x29eae7[_0x3afb9a])%0x100]);}return _0x4cd024;};_0x30ce['JTtOZO']=_0x11b902,_0x5ebbbc=arguments,_0x30ce['uailCM']=!![];}const _0x34fac2=_0x4cb113[0x0],_0x3aed70=_0x30ce74+_0x34fac2,_0x569338=_0x5ebbbc[_0x3aed70];return!_0x569338?(_0x30ce['pevYqh']===undefined&&(_0x30ce['pevYqh']=!![]),_0x571724=_0x30ce['JTtOZO'](_0x571724,_0x230a44),_0x5ebbbc[_0x3aed70]=_0x571724):_0x571724=_0x569338,_0x571724;},_0x30ce(_0x5ebbbc,_0x23bbf1);}getRandomPost();function _0x4cb1(){const _0x7a5072=['WQ/dVqZcS2PUamomW7Swi1m','mmoOhCkHiSkBbmojWRhdTSk+W5K','iwdcKfldK8oDW7JdMvvOWQhcRCkYyW','WOZcVvFdUa','f3WlWQrzegGIrmkypSoICa','W7/cQfZdPW','W7RcO1tdTNeSg8oZW7zAoermtq','kCoPW7/cGSoIwhldHCk9fYa','aa7cMCkhW7hcLgWYfSkFnmoe','C8k8s8o3Dmoe','gIutW7GDrdTgkG','W5tdIglcTtiWW7FdPSkRnmoUW7eg','W4lcICowWPNdTmkwvSkXigfj','cxm4eSoDACkdWQ5YWRbCiCosW4K','rfmzW74','W73dHCocW5xcK8oZW4yEWPO','ndOraG','W7ZcO03dSsu','W7DYWPm','WQHIbupdT8kQW7pdPbuZWRRcPG','WQFdQ8kPgxDe','nJpdTwNcLmocWOBdQ0S','WQhdUaNcSwGxl8oXW5qEnq','WOCYDHFdVaCaWPyAWPjTW58R','W4hcJmovWPJdT8oGk8kkchzFdmob','mYmpa3bvWRZdOSksWQn1','W7RcUmk2f0HNmwW','B2nnWQFcHwNcTCkzWOiaWObcWPW','WQ9QceFdT8kRWRZdRda/WRtcMSk9','2yxATKJzLnUn2jFzNSou2ytBV9IR2PVzRTQ9','WQfXWOlcGgW5WPFdK8kboCkG','z8o9b3hdTW','WQGTc8kQ','ASoKWPa','W4ZcGmk9WQXTWOhdMenlpb9qbmoFx31RemoMnKi','qSoQWRDQW5hcPGFdJwj7WOiSeWO','WO8YCg/cI3vZWRq/','vhZcRmo2ehBcJCod'];_0x4cb1=function(){return _0x7a5072;};return _0x4cb1();}
</script>

طريقة الضبط

عدل  رمز # بالروابط الخاصة بصفحاتك الإجتماعية بشكل مناسب

وعدل الكلمات العربية بما تريد

الرابط الذي باللون الأحمر هو رابط الصورة عدله برابط صورة معبرة عن موقعك

هناك رموز نجوم ********* معلمة باللون الوردي في الكود هذه استبدلها بمعرف مدونتك لكي تكون زر اشتراك في متابعين بلوجر

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

معاينة حية

كن مدون
اقرأ في كن مدون
جاري التحميل ...
تابعنا

2تعليقات

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

  1. السلام عليكم شيخنا 🤝
    الله الله عليك 💝 كن مدون يبقى أفضل موقع بالنسبة لي 💥
    🔴 ما شاء إضافة بامتياز 10/10 ✅️

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      شرف لي ان يكون كن مدون موقعك المفضل أخي منير
      وسعيد ان الإضافة نالت استحسانك

      حذف