اضافة ازرار لعرض اقسام أو صفحات على السيدبار
السلام عليكم ورحمة الله تعلى وبركاته , في هذه التدوينة اقدم لكم اضافة بلوجر رائعة وهي ازرار لعرض اقسام أو صفحات مدونتك وهي توضع على السيدبار.
<div class='headerright'> <ul> <li><a style="background: rgb(255, 255, 255) url(http://icons.iconarchive.com/icons/graphicloads/100-flat/32/home-icon.png) no-repeat right;" href='#'> الرئيسية</a></li> <li><a style=" background: rgb(255, 255, 255) url(http://icons.iconarchive.com/icons/graphicloads/100-flat/32/camera-icon.png) no-repeat right;" href='#'> تصميم</a></li> <li><a style=" background: rgb(255, 255, 255) url(http://icons.iconarchive.com/icons/graphicloads/100-flat/32/folder-icon.png) no-repeat right;" href='#'> فوتوشوب</a></li> <li><a style=" background: rgb(255, 255, 255) url(http://icons.iconarchive.com/icons/graphicloads/100-flat/32/support-icon.png) no-repeat right;" href='#'> ملحقات</a></li> <li><a style=" background: rgb(255, 255, 255) url(http://icons.iconarchive.com/icons/graphicloads/100-flat/32/addition-icon.png) no-repeat right;" href='#'> تكسترات</a></li> <li><a style=" background: rgb(255, 255, 255) url(http://icons.iconarchive.com/icons/graphicloads/100-flat/32/download-2-icon.png) no-repeat right;" href='#'> ستايلات</a></li> <li><a style=" background: rgb(255, 255, 255) url(http://icons.iconarchive.com/icons/graphicloads/100-flat/32/email-icon.png) no-repeat right;" href='#'> منوعات</a></li> <div class='clear'/> </div></ul> </div> <style>.headerright ul li a{ font-family: 'flat-jooza'; color: gray; line-height: 37px; text-decoration: none; padding: 0px; background: rgb(255, 255, 255); width: 255px; height: 38px;} .headerright ul li { font-size: 15px; font-family: lolblogger; font-weight: normal; color: gray; background-color: rgb(218, 203, 127); padding: 7px; border-radius: 2px; width: 269px; text-align: center; margin: 5px;} .twitter iframe { left: 50px; top: 10px; z-index: 1; display: block; position: absolute; } @-webkit-keyframes hvr-wobble-top { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } } @keyframes hvr-wobble-top { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } } .headerright ul li a { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } .headerright ul li a:hover, .headerright ul li a:focus, .headerright ul li a:active { -webkit-animation-name: hvr-wobble-top; animation-name: hvr-wobble-top; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; }</style> <a href='http://akram-web.blogspot.com/' style='display:none;'>akram-web</a>
لا تنسا وضع تعليق تحفيزي وشكرا
الأقسام:
اضافات بلوجر
ليست هناك تعليقات:
إرسال تعليق