[hanna]

قائمة لمدونة بلوجر بشكل 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- التعديلات / عدل رابط الصفحة بما يتناسب مع مدونتك