حصريا اضافة قائمة الافقية غاية في روعة لمدونات بلوجر
Posted by 3alch tv On 6:38 ص اضافات بلوجر بلوجر تدوين مواقع
السلام عليكم اليوم بعد غايب طويل بسبب مشاكل في قالب ها انا أعود مرة الاخرى بي حصري لي أعز متتبعي مدونتنا نعم اليوم جئت لكم بقائمة الافقية غاية في روعة لن أطيل عليكم الى شرح

ماعليك سوى ان تتبع الخطوات التالية :
الذهاب إلى المدونة> قالب> تحرير HTML
الأولى إضافة CSS أدناه فقط فوق
]]></b:skin>
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
.menu,
.submenu {
margin: 0;
padding: 0;
list-style: none;
}
.menu {
margin: 50px auto;
width: 800px;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
}
.menu > li {
background: #34495e;
float: left;
position: relative;
transform: skewX(25deg);
}
.menu a {
display: block;
color: #fff;
text-transform: uppercase;
text-decoration: none;
font-family: Arial, Helvetica;
font-size: 14px;
}
.menu li:hover {
background: #e74c3c;
}
.menu > li > a {
transform: skewX(-25deg);
padding: 1em 2em;
Posted by 3alch tv On 6:38 ص اضافات بلوجر بلوجر تدوين مواقع
السلام عليكم اليوم بعد غايب طويل بسبب مشاكل في قالب ها انا أعود مرة الاخرى بي حصري لي أعز متتبعي مدونتنا نعم اليوم جئت لكم بقائمة الافقية غاية في روعة لن أطيل عليكم الى شرح
ماعليك سوى ان تتبع الخطوات التالية :
الذهاب إلى المدونة> قالب> تحرير HTML
الأولى إضافة CSS أدناه فقط فوق
]]></b:skin>
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
.menu,
.submenu {
margin: 0;
padding: 0;
list-style: none;
}
.menu {
margin: 50px auto;
width: 800px;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
}
.menu > li {
background: #34495e;
float: left;
position: relative;
transform: skewX(25deg);
}
.menu a {
display: block;
color: #fff;
text-transform: uppercase;
text-decoration: none;
font-family: Arial, Helvetica;
font-size: 14px;
}
.menu li:hover {
background: #e74c3c;
}
.menu > li > a {
transform: skewX(-25deg);
padding: 1em 2em;
}
.submenu {
position: absolute;
width: 200px;
left: 50%; margin-left: -100px;
transform: skewX(-25deg);
transform-origin: left top;
}
.submenu li {
background-color: #34495e;
position: relative;
overflow: hidden;
}
.submenu > li > a {
padding: 1em 2em;
}
.submenu > li::after {
content: '';
position: absolute;
top: -125%;
height: 100%;
width: 100%;
box-shadow: 0 0 50px rgba(0, 0, 0, .9);
}
.submenu > li:nth-child(odd){
transform: skewX(-25deg) translateX(0);
}
.submenu > li:nth-child(odd) > a {
transform: skewX(25deg);
}
.submenu > li:nth-child(odd)::after {
right: -50%;
transform: skewX(-25deg) rotate(3deg);
}
.submenu > li:nth-child(even){
transform: skewX(25deg) translateX(0);
}
.submenu > li:nth-child(even) > a {
transform: skewX(-25deg);
}
.submenu > li:nth-child(even)::after {
left: -50%;
transform: skewX(25deg) rotate(3deg);
}
.submenu,
.submenu li {
opacity: 0;
visibility: hidden;
}
.submenu li {
transition: .2s ease transform;
}
.menu > li:hover .submenu,
.menu > li:hover .submenu li {
opacity: 1;
visibility: visible;
}
.menu > li:hover .submenu li:nth-child(even){
transform: skewX(25deg) translateX(15px);
}
.menu > li:hover .submenu li:nth-child(odd){
transform: skewX(-25deg) translateX(-15px);
}
2- إضافة HTML في مكان قائمة الافقي قديمة
<ul class="menu cf">
<li><a href="">Menu item</a></li>
<li>
<a href="">Menu item</a>
<ul class="submenu">
<li><a href="">Submenu item</a></li>
<li><a href="">Submenu item</a></li>
<li><a href="">Submenu item</a></li>
<li><a href="">Submenu item</a></li>
</ul>
</li>
<li><a href="">Menu item</a></li>
<li><a href="">Menu item</a></li>
<li><a href="">Menu item</a></li>
</ul>
3- إضافة HTMLأدناه فقط فوق </head>
<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
(حصريا) قالب مدونة التقنية العربية باللون الاحمر
يجب حدف قائمة الافقية قديمة بشكل تام
ليست هناك تعليقات: