اضافة شريط قوائم 3D CSS فى بلوجر

هذه اضافة CSS صافية تماما بتحرك جميل وسلس بتقنية 3d. مكونات القائمة سوف تتحرك بمجرد
تحريك مؤشر الفأرة عليها. قائمة هى مستوحاة من التحرك السهل والبسيط لبعض المكونات بمجرد لمسها, 
 هذه الاضافة مستوحاة من افضل المصممين David Walsh

وأخيرا، لقد حان الوقت للبدء في شرح طريقة الاضافة، وهي ليست صعبة . ونحن في طريقنا لإضافة هذه القائمة 
إلى Blogger في خطوتين



كيفية اضافة شريط قوائم CSS فى بلوجر
  - قم بالتوجه الى بلوجر > القالب > تعديل القالب > ابحث عن الوسوم التالى

]]></b:skin>
فوق الوسوم السابق اضف الكود التالى


        /* 3d flipping menu by livegy.blogspot.com */
        .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 .3s ease-out;
            -moz-transition: all .3s ease-out;
            -ms-transition: all .3s ease-out;
            -o-transition: all .3s ease-out;
            transition: all .3s 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;
            left: 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;
            left: 0;
            background: black;
            padding: 15px 10px;
            color: white;
            pointer-events: none;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

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

والان وقت الخطوة الثانية حيث سنقوم باضافة كود HTML


  - قم بالتوجه الى بلوجر > التخطيط > اضافة HTML/JavaScript
 قم بلصق الكود التالى
<ul class="block-menu">
<li><a href="#" class="three-d">
Home
<span class="three-d-box"><span class="front">Home</span><span class="back">Home</span></span>
</a></li>
<li><a href="#" class="three-d">
Demos
<span class="three-d-box"><span class="front">Demos</span><span class="back">Demos</span></span>
</a></li>
<li><a href="#" class="three-d">
Deals
<span class="three-d-box"><span class="front">Deals</span><span class="back">Deals</span></span>
</a></li>
<li><a href="#" class="three-d">
About
<span class="three-d-box"><span class="front">About</span><span class="back">About</span></span>
</a></li>
</ul>

الان قم بحفظ الاضافة 

لاتنسى ان تقم بتعديل # بروابط اقسام موقعك واسماء الاقسام لتظهر مع تحرك
القائمة 3d الذى قمت باضافتها
-------

ليست هناك تعليقات:

إرسال تعليق

سياسة الخصوصية - DMCA

جميع محتويات الموقع لا تنتهك حقوق الملكية عند وجود أي مشاركة مخالفة يرجي الابلاغ هنا

المدونة غير مسئولة عن اى تعليقات فى حالة المسائلة القانونية

(فالتعليقات تعبر عن رأى صاحبها فقط)

برامج مجانية

yahoo messenger google earth internet explorer media player skype yahoo messenger flash player yahoo messenger google chrome