أخر المقالات
تحميل...

إضافة قائمة روابط على شكل شجرة للبلوجر ووردبريس


نقدم لكم اليوم قائمة مميزة على شكل شجرة لمدونات الووردبرس وبلوجر تعطي منظر جميل للموقع لتظهر على شكل شجرة تحوٍ على مجموعة من الروابط مكونة من 11 رابط، يُمكن أن تستخدم لتكون أقسام مدونة أو للصفحات أو مواقع إلكترونية صديقة, مماثلة إلخ..
 تم إستنساخ هذه الإضافة من قالب ووردبرس ولكنها تعمل بشكل جيد على مدونات بلوجر ووردبرس ايضاً

معاينة


كيفية إضافة القائمة لمدونات بلوجر
1. الدخول للوحة التحكم لمدونتك https://www.blogger.com
2. اخترا المدونة التي ترغب بإضافة القائمة لها ثم أنتقل إلى "التخطيط" بالمدونة
3. انقر على إضافة أداة حيث تريد أن تظهر شجرة الروابط.
4. أختر من بين الأدوات اداة HTML/JavaScript
5. ثم الصق الكود التالي داخل أداة HTML/JavaScript ثم أنقر على "حفظ".

<style type='text/css'>
.related-cross {
  width: 100%;
  overflow: hidden;
  width: 300px;
  padding: 0 0 100px;
  margin: 40px 0 0;
  background: url("http://2.bp.blogspot.com/-J_XcVOfgmWw/VPn6f4gTx0I/AAAAAAAAd_o/kpj8IWDInoM/s1600/مدادالجليد.png") 0 100% no-repeat;
}
.related-cross ul {
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 10px 0 0;
  background: url("http://2.bp.blogspot.com/-J_XcVOfgmWw/VPn6f4gTx0I/AAAAAAAAd_o/kpj8IWDInoM/s1600/مدادالجليد.png") -646px 0 repeat-y;
}
.related-cross li {
  width: 146px;
  overflow: hidden;
  margin: 0 auto;
  padding: 5px 0;
  list-style-type: none;
}
.related-cross a {
  padding: 5px 10px 4px;
  background: #3f8cd9;
  color: #fff;
  background: #999;
  font-size: 0.75em;
  text-transform: uppercase;
}
.related-cross a:hover {
  background-color: #84af00 !important;
  color: #fff !important;
  text-decoration: none;
}
.related-cross .related-cross-center {
  clear: both;
  width: 200px;
  text-align: center;
  background: url("http://2.bp.blogspot.com/-J_XcVOfgmWw/VPn6f4gTx0I/AAAAAAAAd_o/kpj8IWDInoM/s1600/مدادالجليد.png") 50% -11px no-repeat;
}
.related-cross .related-cross-center a {
  padding-right: 15px;
  background: url("http://4.bp.blogspot.com/-9HPMgVDI5oQ/VPn88CM6N3I/AAAAAAAAd_4/T73cdYV2O8o/s1600/arrow-mini-right.png") 100% 50% no-repeat;
}
.related-cross .related-cross-left {
  clear: left;
  float: left;
  margin: 12px 0 0;
  text-align: right;
  display: inline;
}
.related-cross .related-cross-left a {
  padding-left: 15px;
  background: url("http://1.bp.blogspot.com/-D-nwt3pF2j4/VPn7mg4U0aI/AAAAAAAAd_w/TO6aFm-i_y8/s1600/arrow-mini-left.png") 0 50% no-repeat;
}
.related-cross .related-cross-right {
  clear: right;
  float: right;
  text-align: left;
  margin: 0 1px 12px 0;
  display: inline;
}
.related-cross .related-cross-right a {
  padding-right: 15px;
  background: url("http://4.bp.blogspot.com/-9HPMgVDI5oQ/VPn88CM6N3I/AAAAAAAAd_4/T73cdYV2O8o/s1600/arrow-mini-right.png") 100% 50% no-repeat;
}
.related-cross .tec-xataka-g,
.related-cross .tec-genbetasocialmedia-g,
.related-cross .tec-xatakahome-g,
.related-cross .tec-nacionred-g,
.related-cross .mot-motorpasion-g,
.related-cross .mot-motorpasionfuturo-g,
.related-cross .eco-elblogsalmon-g,
.related-cross .eco-pymesyautonomos-g,
.related-cross .oci-blogdecine-g,
.related-cross .oci-diariodelviajero-g,
.related-cross .oci-fueradelimites-g,
.related-cross .est-trendencias-g,
.related-cross .est-trendenciasbelleza-g,
.related-cross .est-trendenciashombre-g,
.related-cross .est-compradiccion-g,
.related-cross .est-trendenciasshopping-g,
.related-cross .est-directoalpaladar-g,
.related-cross .est-poprosa-g,
.related-cross .est-trendenciaslifestyle-g {
  clear: both;
  width: 200px;
  text-align: center;
  background: url("http://2.bp.blogspot.com/-J_XcVOfgmWw/VPn6f4gTx0I/AAAAAAAAd_o/kpj8IWDInoM/s1600/مدادالجليد.png") 50% -11px no-repeat;
}
.related-cross .tec-xataka-g a,
.related-cross .tec-genbetasocialmedia-g a,
.related-cross .tec-xatakahome-g a,
.related-cross .tec-nacionred-g a,
.related-cross .mot-motorpasion-g a,
.related-cross .mot-motorpasionfuturo-g a,
.related-cross .eco-elblogsalmon-g a,
.related-cross .eco-pymesyautonomos-g a,
.related-cross .oci-blogdecine-g a,
.related-cross .oci-diariodelviajero-g a,
.related-cross .oci-fueradelimites-g a,
.related-cross .est-trendencias-g a,
.related-cross .est-trendenciasbelleza-g a,
.related-cross .est-trendenciashombre-g a,
.related-cross .est-compradiccion-g a,
.related-cross .est-trendenciasshopping-g a,
.related-cross .est-directoalpaladar-g a,
.related-cross .est-poprosa-g a,
.related-cross .est-trendenciaslifestyle-g a {
  padding-right: 15px;
  background: url("http://4.bp.blogspot.com/-9HPMgVDI5oQ/VPn88CM6N3I/AAAAAAAAd_4/T73cdYV2O8o/s1600/arrow-mini-right.png") 100% 50% no-repeat;
}
.related-cross .tec-xatakaon-g,
.related-cross .tec-xatakafoto-g,
.related-cross .tec-genbetadev-g,
.related-cross .tec-applesfera-g,
.related-cross .tec-xatakawindows-g,
.related-cross .mot-motorpasionf1-g,
.related-cross .eco-ahorrodiario-g,
.related-cross .oci-vayatele-g,
.related-cross .oci-zonafandom-g,
.related-cross .oci-notasdefutbol-g,
.related-cross .est-bebesymas-g,
.related-cross .est-vitonica-g,
.related-cross .est-ambienteg-g {
  clear: left;
  float: left;
  margin: 12px 0 0;
  text-align: right;
  display: inline;
}
.related-cross .tec-xatakaon-g a,
.related-cross .tec-xatakafoto-g a,
.related-cross .tec-genbetadev-g a,
.related-cross .tec-applesfera-g a,
.related-cross .tec-xatakawindows-g a,
.related-cross .mot-motorpasionf1-g a,
.related-cross .eco-ahorrodiario-g a,
.related-cross .oci-vayatele-g a,
.related-cross .oci-zonafandom-g a,
.related-cross .oci-notasdefutbol-g a,
.related-cross .est-bebesymas-g a,
.related-cross .est-vitonica-g a,
.related-cross .est-ambienteg-g a {
  padding-left: 15px;
  background: url("http://1.bp.blogspot.com/-D-nwt3pF2j4/VPn7mg4U0aI/AAAAAAAAd_w/TO6aFm-i_y8/s1600/arrow-mini-left.png") 0 50% no-repeat;
}
.related-cross .tec-xatakamovil-g,
.related-cross .tec-xatakandroid-g,
.related-cross .tec-genbeta-g,
.related-cross .tec-vidaextra-g,
.related-cross .tec-xatakaciencia-g,
.related-cross .mot-motorpasionmoto-g,
.related-cross .eco-tecnologiapyme-g,
.related-cross .oci-poprosa-g,
.related-cross .oci-hipersonica-g,
.related-cross .oci-papelenblanco-g,
.related-cross .oci-fandemia-g,
.related-cross .est-decoesfera-g,
.related-cross .est-pequesymas-g,
.related-cross .est-embelezzia-g {
  clear: right;
  float: right;
  text-align: left;
  margin: 0 1px 12px 0;
  display: inline;
}
.related-cross .tec-xatakamovil-g a,
.related-cross .tec-xatakandroid-g a,
.related-cross .tec-genbeta-g a,
.related-cross .tec-vidaextra-g a,
.related-cross .tec-xatakaciencia-g a,
.related-cross .mot-motorpasionmoto-g a,
.related-cross .eco-tecnologiapyme-g a,
.related-cross .oci-poprosa-g a,
.related-cross .oci-hipersonica-g a,
.related-cross .oci-papelenblanco-g a,
.related-cross .oci-fandemia-g a,
.related-cross .est-decoesfera-g a,
.related-cross .est-pequesymas-g a,
.related-cross .est-embelezzia-g a {
  padding-right: 15px;
  background: url("http://4.bp.blogspot.com/-9HPMgVDI5oQ/VPn88CM6N3I/AAAAAAAAd_4/T73cdYV2O8o/s1600/arrow-mini-right.png") 100% 50% no-repeat;
}
.related-cross .tec-xataka-g a {
  background-color: #6ca427;
}
.related-cross .tec-xatakamovil-g a {
  background-color: #437f27;
}
.related-cross .tec-xatakafoto-g a {
  background-color: #333333;
}
.related-cross .tec-xatakaon-g a {
  background-color: #6d8c3a;
}
.related-cross .tec-xatakandroid-g a {
  background-color: #7d9f13;
}
.related-cross .tec-xatakahome-g a {
  background-color: #2f5083;
}
.related-cross .tec-xatakawindows-g a {
  background-color: #0f6d39;
}
.related-cross .tec-xatakaciencia-g a {
  background-color: #53a7a7;
}
.related-cross .tec-vidaextra-g a {
  background-color: #1680c6;
}
.related-cross .tec-applesfera-g a {
  background-color: #38278a;
}
.related-cross .tec-genbeta-g a {
  background-color: #004c98;
}
.related-cross .tec-genbetadev-g a {
  background-color: #94c6eb;
  color: #333;
}
.related-cross .tec-genbetasocialmedia-g a {
  background-color: #658eae;
}
.related-cross .tec-nacionred-g a {
  background-color: #fd932f;
}
.related-cross .est-trendencias-g a {
  background-color: #990033;
}
.related-cross .est-trendenciasbelleza-g a {
  background-color: #927897;
}
.related-cross .est-trendenciashombre-g a {
  background-color: #184272;
}
.related-cross .est-directoalpaladar-g a {
  background-color: #bf561f;
}
.related-cross .est-bebesymas-g a {
  background-color: #896399;
}
.related-cross .est-pequesymas-g a {
  background-color: #b3df41;
}
.related-cross .est-vitonica-g a {
  background-color: #628f1a;
}
.related-cross .est-decoesfera-g a {
  background-color: #2eafda;
}
.related-cross .est-compradiccion-g a,
.related-cross .est-trendenciasshopping-g a {
  background-color: #aa022b;
}
.related-cross .est-embelezzia-g a {
  background-color: #164dc5;
}
.related-cross .est-ambienteg-g a {
  background-color: #c96eab;
}
.related-cross .est-poprosa-g a {
  background-color: #df69b0;
}
.related-cross .est-trendenciaslifestyle-g a {
  background-color: #819f77;
}
.related-cross .oci-fueradelimites-g a {
  background-color: #122d02;
}
.related-cross .oci-vayatele-g a {
  background-color: #fa5c01;
}
.related-cross .oci-diariodelviajero-g a {
  background-color: #f8f3ac;
  color: #333;
}
.related-cross .oci-blogdecine-g a {
  background-color: #004f00;
}
.related-cross .oci-notasdefutbol-g a {
  background-color: #66b618;
}
.related-cross .oci-hipersonica-g a {
  background-color: #111111;
}
.related-cross .oci-papelenblanco-g a {
  background-color: #ab9c87;
}
.related-cross .oci-poprosa-g a {
  background-color: #df69b0;
}
.related-cross .eco-elblogsalmon-g a {
  background-color: #fdd1a2;
  color: #333;
}
.related-cross .eco-pymesyautonomos-g a {
  background-color: #165b8d;
}
.related-cross .eco-tecnologiapyme-g a {
  background-color: #84b7da;
}
.related-cross .eco-ahorrodiario-g a {
  background-color: #1c5baa;
}
.related-cross .mot-motorpasion-g a {
  background-color: #980000;
}
.related-cross .mot-motorpasionf1-g a {
  background-color: #491112;
}
.related-cross .mot-motorpasionmoto-g a {
  background-color: #fd7800;
}
.related-cross .mot-motorpasionfuturo-g a {
  background-color: #048fbd;
}
.related-cross .tec-vidaextra-g-mx {
  clear: left;
  display: inline;
  float: left;
  margin: 12px 0 0;
  text-align: right;
}
.related-cross .tec-vidaextra-g-mx a {
  background: url('http://1.bp.blogspot.com/-D-nwt3pF2j4/VPn7mg4U0aI/AAAAAAAAd_w/TO6aFm-i_y8/s1600/arrow-mini-left.png') no-repeat scroll 0 50% rgba(0, 0, 0, 0);
  padding-left: 15px;
  background-color: #1680C6;
}</style>
  <div class="related-cross">
    <ul>
            <li class="tec-xataka-g"><a href="#">رابط 1</a></li>
            <li class="tec-xatakamovil-g"><a href="#">رابط 2</a></li>
            <li class="tec-xatakafoto-g"><a href="#">رابط 3</a></li>
            <li class="tec-xatakandroid-g"><a href="#">رابط 4</a></li>
            <li class="tec-xatakahome-g"><a href="#">رابط 5</a></li>
            <li class="tec-xatakawindows-g"><a href="#">رابط 6</a></li>
            <li class="tec-xatakaciencia-g"><a href="#">رابط 7</a></li>
            <li class="tec-applesfera-g"><a href="#">رابط 8</a></li>
            <li class="tec-vidaextra-g"><a href="#">رابط 9</a></li>
            <li class="tec-genbeta-g"><a href="#">رابط 10</a></li>
            <li class="tec-genbetadev-g"><a href="#">رابط 11</a></li>
          </ul>
  </div>


لا تنسى تغيير كلمات الروابط بالكلمة لكل رابط وإضافة الرابط بجانبها بدلاً من رمز #

للإضافة للووردبرس
انتقل إلى لوحة التحكم في المدونة -->> المظهر -->> الودجات ثم أختر اداة html or text



أنسخ الكود أعلاه وألصق داخل الأداة ثم أنقر "حفظ".



كن الأول دائما علق على " إضافة قائمة روابط على شكل شجرة للبلوجر ووردبريس "

تذكر قوله تعالى:
(( مَا يَلْفِظُ مِنْ قَوْلٍ إِلَّا لَدَيْهِ رَقِيبٌ عَتِيدٌ)) ‏
-----------------------------------
الان يمكنك اضافة اي مقطع فيديو الى التعليقات وايضا اضافة الصور فقط ضع رابط الصور او مقطع الفيديو في التعليقات
----------------------------------
آرائكم تسعدنا, لمتابعة التعليق حتى نرد عليك فقط ضع إشارة على إعلامي

نحن نعرض الإعلانات على الموقع للإسهام في تحسين موقعنا.

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

شكرًا لك

×