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

<style type='text/css'>
.related-cross {
  width: 100%;
  overflow: hidden;
  width: 300px;
  padding: 0 0 100px;
  margin: 40px 0 0;
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_sABkS_eB4lyHoFwCbWjHztl3v7XpTEoHc2JkKlgdrwTURtfw8J_BN5YcaFti7KRO96p9USR3dynQ9HKBUsYDIVxsbPYmoHjzDcOMKKeEEHRmU_Qf4kl0o8AjLDusnG1UiL0vhMmshKAL/s1600/مدادالجليد.png") 0 100% no-repeat;
}
.related-cross ul {
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 10px 0 0;
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_sABkS_eB4lyHoFwCbWjHztl3v7XpTEoHc2JkKlgdrwTURtfw8J_BN5YcaFti7KRO96p9USR3dynQ9HKBUsYDIVxsbPYmoHjzDcOMKKeEEHRmU_Qf4kl0o8AjLDusnG1UiL0vhMmshKAL/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_sABkS_eB4lyHoFwCbWjHztl3v7XpTEoHc2JkKlgdrwTURtfw8J_BN5YcaFti7KRO96p9USR3dynQ9HKBUsYDIVxsbPYmoHjzDcOMKKeEEHRmU_Qf4kl0o8AjLDusnG1UiL0vhMmshKAL/s1600/مدادالجليد.png") 50% -11px no-repeat;
}
.related-cross .related-cross-center a {
  padding-right: 15px;
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTHgDLJiBS2rmw3ILKOeA92jUfyMDJUO3ms-MU9Bu6-HBfcFCdIZCM0484NWQAai9GJwKDxOgVhcgF3yxdV36sGmqGMlpI2ikIX98RLAcmtT5JyT7Wlf548ZnFG6yCCF7r7_f8vsQAOu-B/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQhM4Mbr0pLOxF2Fa08zu9F9StBFGC6phFqmFV6khNUWbvzMa7BEUyvCEuQCGCgpGMWnVmmybvViEK3oo4avyx46IAlF-I6fSUMK3RScjnJ2QsI3tzVEEpi8QpZvcZQK2AoYAWqLfj8h51/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTHgDLJiBS2rmw3ILKOeA92jUfyMDJUO3ms-MU9Bu6-HBfcFCdIZCM0484NWQAai9GJwKDxOgVhcgF3yxdV36sGmqGMlpI2ikIX98RLAcmtT5JyT7Wlf548ZnFG6yCCF7r7_f8vsQAOu-B/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_sABkS_eB4lyHoFwCbWjHztl3v7XpTEoHc2JkKlgdrwTURtfw8J_BN5YcaFti7KRO96p9USR3dynQ9HKBUsYDIVxsbPYmoHjzDcOMKKeEEHRmU_Qf4kl0o8AjLDusnG1UiL0vhMmshKAL/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTHgDLJiBS2rmw3ILKOeA92jUfyMDJUO3ms-MU9Bu6-HBfcFCdIZCM0484NWQAai9GJwKDxOgVhcgF3yxdV36sGmqGMlpI2ikIX98RLAcmtT5JyT7Wlf548ZnFG6yCCF7r7_f8vsQAOu-B/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQhM4Mbr0pLOxF2Fa08zu9F9StBFGC6phFqmFV6khNUWbvzMa7BEUyvCEuQCGCgpGMWnVmmybvViEK3oo4avyx46IAlF-I6fSUMK3RScjnJ2QsI3tzVEEpi8QpZvcZQK2AoYAWqLfj8h51/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTHgDLJiBS2rmw3ILKOeA92jUfyMDJUO3ms-MU9Bu6-HBfcFCdIZCM0484NWQAai9GJwKDxOgVhcgF3yxdV36sGmqGMlpI2ikIX98RLAcmtT5JyT7Wlf548ZnFG6yCCF7r7_f8vsQAOu-B/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQhM4Mbr0pLOxF2Fa08zu9F9StBFGC6phFqmFV6khNUWbvzMa7BEUyvCEuQCGCgpGMWnVmmybvViEK3oo4avyx46IAlF-I6fSUMK3RScjnJ2QsI3tzVEEpi8QpZvcZQK2AoYAWqLfj8h51/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>