إضافة القائمة الرئيسية لمدونة بلوجر بشكل 3D تتقلب | مدونة الخبراء للبرامج

إضافة القائمة الرئيسية لمدونة بلوجر بشكل 3D  تتقلب | مدونة الخبراء للبرامج

طريقة تركيب الإضافة

1- ادخل إلى مدونتك / واختر تحرير قالب 

2- ابحث عن الوسم  ]]></b:skin>

3- ضع الكود التالي فوقه 

الكود

.block-menu {
            display: block;
            background: #000;
        }

        .block-menu li {
            display: inline-block;
        }

        .block-menu li a {
            color: #fff;
            display: block;
            text-decoration: none;
            font-family: 'Passion One',Arial,sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-font-smoothing: antialiased;
            font-smoothing: antialiased;
            text-transform: uppercase;
            overflow: visible;
            line-height: 20px;
            font-size: 24px;
            padding: 15px 10px;
        }

        /* animation domination */
        .three-d {
            -webkit-perspective: 200px;
            -moz-perspective: 200px;
            perspective: 200px;
            -webkit-transition: all .07s linear;
            -moz-transition: all .07s linear;
            transition: all .07s linear;
            position: relative;
        }

            .three-d:not(.active):hover {
                cursor: pointer;
            }

            .three-d:not(.active):hover .three-d-box,
            .three-d:not(.active):focus .three-d-box {
                -moz-transform: translateZ(-25px) rotateX(90deg);
                -webkit-transform: translateZ(-25px) rotateX(90deg);
                -o-transform: translateZ(-25px) rotateX(90deg);
                transform: translateZ(-25px) rotateX(90deg);
            }

        .three-d-box {
            -webkit-transition: all .5s ease-out;
            -moz-transition: all .5s ease-out;
            -ms-transition: all .5s ease-out;
            -o-transition: all .5s ease-out;
            transition: all .5s ease-out;
            -webkit-transform: translatez(-25px);
            -moz-transform: translatez(-25px);
            -o-transform: translatez(-25px);
            transform: translatez(-25px);
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
            pointer-events: none;
            position: absolute;
            top: 0;
            right: 0;
            display: block;
            width: 100%;
            height: 100%;
        }

        .front {
            -webkit-transform: rotatex(0deg) translatez(25px);
            -moz-transform: rotatex(0deg) translatez(25px);
            -o-transform: rotatex(0deg) translatez(25px);
            transform: rotatex(0deg) translatez(25px);
        }

        .back {
            -webkit-transform: rotatex(-90deg) translatez(25px);
            -moz-transform: rotatex(-90deg) translatez(25px);
            -o-transform: rotatex(-90deg) translatez(25px);
            transform: rotatex(-90deg) translatez(25px);
            color: #FFE7C4;
        }

        .front, .back {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
            background: black;
            padding: 15px 10px;
            color: white;
            pointer-events: none;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

4- احفظ القالب

5- اذهب إلى تخطيط / واختر إضافة أداة  HTML/JavaScript

6- ضع الكود في صندوق الإضافة

الكود

<ul class="block-menu">

<li><a href="رابط الصفحة الرئيسية" class="three-d">الرئيسية<span class="three-d-box"><span class="front">الرئيسية</span><span class="back">الرئيسية</span></span>

</a></li>

<li><a href="رابط الصفحة" class="three-d">اتصل بناt<span class="three-d-box"><span class="front">اتصل بنا</span><span class="back">اتصل بنا</span></span>

</a></li>

<li><a href="رابط الصفحة" class="three-d">سياستنا<span class="three-d-box"><span class="front">سياستنا</span><span class="back">سياستنا</span></span>

</a></li>

<li><a href="رابط الصفحة" class="three-d">إضافات بلوجر<span class="three-d-box"><span class="front">إضافات بلوجر</span><span class="back">إضافات بلوجر</span></span>

</a></li>

<li><a href="رابط الصفحة" class="three-d">قوالب بلوجر<span class="three-d-box"><span class="front">قوالب بلوجر</span><span class="back">قوالب بلوجر</span></span>

</a></li>

</ul>

7- احفظ الإضافة

8- التعديلات / عدل رابط الصفحة بما يتناسب مع مدونتك

إذا كان لديكم أي إقتراحات أو تساؤلات حول الموضوع اضغط هنا وقدم اقتراحك أو تساؤلاتك ونحن على إستعداد للإطلاع على اقتراحاتكم والإجابة عن تساؤلاتكم ... أهلاً بكم على أرض الإبداع والتمييز

Note:- الرجاء من الأخوة الكرام : زوار المدونة عدم النسخ دون ذكر المصدر