كارت تعريفي لموقعك مع أزرار السوشيال ميديا

 كارت تعريفي يعرض معلومات عن موقعك ويعتبر جامع لعدة إضافات في إضافة واحدة

 

مكونات الكارت

صورة غلاف لموقعك

عرض رابط موضوع عشوائي من موقعك

الروابط الإجتماعية الخاصة بموقعك

 

<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: auto;object-fit: cover;max-height: 200px;}
#social-card a {text-decoration: navajowhite;}  
.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;font-weight: bold;}
.card-sbuttons > a i {order: -1;}

.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/AVvXsEhazvhEprVqcC6SHl4tdT7EYGyFgdBIQ_xdoGHz9DG5z2q9dYXlfRYX3HU_FYVNv7NYmo14g-FX05KVNk3LyT7BuVQVysUib_rjwYJ5gy8emhiwtKv6JVuuezpz1DqJERWItCYzy2JB4djd6eHgqP_FvRulR721ijJ8oMKi_qRpeK8if9hDBEQ0369jwK4E/s1600/Blloggar.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=XXXXXXXXXXXXX" 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';
      const noRes = "لا يوجد مواضيع";
</script>

<script>
(function(_0x1680dd,_0xc38af8){const _0x4bcde5=_0xc709,_0x100103=_0x1680dd();while(!![]){try{const _0x4ddf32=-parseInt(_0x4bcde5(0x1a8))/0x1+parseInt(_0x4bcde5(0x1bd))/0x2*(-parseInt(_0x4bcde5(0x1bc))/0x3)+-parseInt(_0x4bcde5(0x1a6))/0x4+parseInt(_0x4bcde5(0x1af))/0x5*(parseInt(_0x4bcde5(0x1a5))/0x6)+-parseInt(_0x4bcde5(0x1b9))/0x7*(-parseInt(_0x4bcde5(0x1a3))/0x8)+parseInt(_0x4bcde5(0x1aa))/0x9*(parseInt(_0x4bcde5(0x1b2))/0xa)+-parseInt(_0x4bcde5(0x1ab))/0xb*(parseInt(_0x4bcde5(0x1be))/0xc);if(_0x4ddf32===_0xc38af8)break;else _0x100103['push'](_0x100103['shift']());}catch(_0x28f776){_0x100103['push'](_0x100103['shift']());}}}(_0x4969,0x235cb));function getRandomPost(){const _0x2c1934=_0xc709,_0xe231ce=document[_0x2c1934(0x1a2)](_0x2c1934(0x1ae));_0xe231ce['src']=cardblogUrl+_0x2c1934(0x1b5),document[_0x2c1934(0x1ac)][_0x2c1934(0x1a9)](_0xe231ce);}function displayPost(_0x176d96){const _0x3edb95=_0xc709,_0x550759=_0x176d96[_0x3edb95(0x1b0)]['entry'];if(_0x550759&&_0x550759[_0x3edb95(0x1a1)]>0x0){const _0x32647d=Math[_0x3edb95(0x1b1)](Math[_0x3edb95(0x1b7)]()*_0x550759['length']),_0x13bf4e=_0x550759[_0x32647d],_0xf62fb0=_0x13bf4e[_0x3edb95(0x1b8)]['$t'],_0x556de1=_0x13bf4e[_0x3edb95(0x1ad)][_0x3edb95(0x1a4)](_0x57e66d=>_0x57e66d[_0x3edb95(0x1bb)]==='alternate')['href'],_0x354f7c=document[_0x3edb95(0x1b6)](_0x3edb95(0x1b3));_0x354f7c[_0x3edb95(0x1ba)]=_0x3edb95(0x1a7)+_0x556de1+_0x3edb95(0x1b4)+_0xf62fb0+'</a>';}else document['getElementById'](_0x3edb95(0x1b3))[_0x3edb95(0x1ba)]=noRes;}function _0xc709(_0x126d83,_0x25fd74){const _0x4969e1=_0x4969();return _0xc709=function(_0xc709c2,_0x580627){_0xc709c2=_0xc709c2-0x1a1;let _0x25a2cc=_0x4969e1[_0xc709c2];return _0x25a2cc;},_0xc709(_0x126d83,_0x25fd74);}function _0x4969(){const _0x4a6c0c=['random','title','989338UIMTTT','innerHTML','rel','3waxXeN','159748xaxfBZ','243120XBnkdt','length','createElement','16IqIIrj','find','53736XbnRNq','565244VLnZDG','<a\x20href=\x22','147278AKTlWv','appendChild','645417Qnzzpz','11NkQYWN','body','link','script','60UBTfWG','feed','floor','20WGITwu','cnmu-rand-card','\x22\x20target=\x22_blank\x22>','&callback=displayPost','getElementById'];_0x4969=function(){return _0x4a6c0c;};return _0x4969();}getRandomPost();
</script>

كيفية الإستخدام

 استبدل الرابط في هذا الجزء برابط صورة لموقعك

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhazvhEprVqcC6SHl4tdT7EYGyFgdBIQ_xdoGHz9DG5z2q9dYXlfRYX3HU_FYVNv7NYmo14g-FX05KVNk3LyT7BuVQVysUib_rjwYJ5gy8emhiwtKv6JVuuezpz1DqJERWItCYzy2JB4djd6eHgqP_FvRulR721ijJ8oMKi_qRpeK8if9hDBEQ0369jwK4E/s1600/Blloggar.jpg" alt="بلوجر بالعربي" />

 

هذا الجزء مثال لأحد الروابط أنا قسمته هنا لشرحه

<a href="#" rel="nofollow noopener" target="_blank">
<span>80</span>
<i class="fa-brands fa-youtube"></i>
</a>

رمز # في السطر الأول هو الرابط المراد فتحه

السطر الثاني هو عدد المشتركين في الموقع الإجتماعي

السطر الثالث هو الأيقونة المستخدمة ويعتمد على خط الأيقونات Fontawesome

 تكرار الكود مع التغييرها يعطي كود جديد ويمكنك طبعا حذف احد السطور

ملاحظة : الكود الأول انا أضفت به رابط بالفعل وهو خاص بالإشتراك في بلوجر استبدل رمز XXXXXXXX بمعرف مدونتك

يمكنك الحصول على المعرف من هذه الآداة  أو أزل الرابط ان لم تريده

 

-أما الجزء التالي مسؤول عن لون الزر

الأكواد مرقمة من 1 الى 4 كل سطر يخص لون الزر المقابل في الترتيب غير الألوان أو زد الأكواد ان زدت الأزرارمع تعديل الأرقام

.card-sbuttons > a:nth-child(1) {background-color: #f45d00;}