1. مهمان گرامی، جهت ارسال پست، دانلود و سایر امکانات ویژه کاربران عضو، ثبت نام کنید.
    بستن اطلاعیه

آموزش اضافه کردن باکس اطلاعیه های مهم وبسایت در ویبولتین + قابلیت جی کوئری

شروع موضوع توسط ViRTUS ‏17/6/13 در انجمن vBulletin

  1. کاربر ارشد

    تاریخ عضویت:
    ‏8/12/11
    ارسال ها:
    12,530
    تشکر شده:
    3,789
    امتیاز دستاورد:
    0
    درود دوستان
    این نیز یک نمونه برا دوستان .

    [​IMG]

    جهت ایجاد چنین بخشی نیاز هست که حمأ حدود 500 پیکسل عرض و 200 پیکسل ارتفاع در یک بخش از استایل همانند هدر خالی داشته باشید .

    نخست فایل پیوست رو دریافت کنید .

    سپس فایل های جاوا اسکرپیت رو در پوشه js یا در روت پوشه اصلی استایل/ قالبتون آپلود کنید .

    بعد از انجام این کار این سه خط کد رو زیر تمامی کدهای فوتر یا هد اینکلود باتم قرار بدید .

    نکته : ادرس دهی رو با توجه به فایل های js باید ویرایش کنید .

    کد:
    <script src="../jquery.v1.5.1.min.js"></script> <script  src="../plugins.v1.0.js"></script> <script  src="../scripts.v1.2.js"></script>
    بعد از انجام این کار به قالبی برید که میخواید باکس رو در اونجا قرار بدید . مثال header - navbar و کد های زیر رو در اون بخش قرار بدید .


    کد:
    <div class="recent_news">
    <h3 class="recent_news_head">  اطلاعیه های مهم وبسایت </h3>
    <div class="recent_body">
    <div class="blogroll-inner-wrapper">
    <div class="blogroll-link-wrapper">
    <ul class="jcarousel-skin-ticker">
     <li><span></span><a href="#"> مطلب مورد نظر خود را اینجا باید درج کنید  </a></li>
     <li><span></span><a href="#"> مطلب مورد نظر خود را اینجا باید درج کنید  </a></li>
     <li><span></span><a href="#"> اگر نیاز به یک  استایل اختصاصی دارید ، پیشنهاد ما ، ویکی وی بی </a></li>
     <li><span></span><a href="#"> مطلب مورد نظر خود را اینجا باید درج کنید  </a></li>
      <li><span></span><a href="#"> مطلب مورد نظر خود را اینجا باید درج کنید  </a></li>
     <li><span></span><a href="#"> مطلب مورد نظر خود را اینجا باید درج کنید  </a></li>
      <li><span></span><a href="#"> مطلب مورد نظر خود را اینجا باید درج کنید  </a></li>
     <li><span></span><a href="#"> مطلب مورد نظر خود را اینجا باید درج کنید  </a></li>
     <li><span></span><a href="#"> استایل ویژه و  رایگان ویکی وی بی کلرایز منتشر شد [ بیشتر بخوانید ]  </a></li>
     <li><span></span><a href="#"> مطلب مورد نظر خود را اینجا باید درج کنید  </a></li>
     <li><span></span><a href="#"> مطلب مورد نظر خود را اینجا باید درج کنید  </a></li>
     <li><span></span><a href="#"> ویبولتین نسخه 5  ویرایش نهایی ، به اختصار ، گلد ، منتشر شد [ بیشتر بخوانید ]   </a></li>
    </ul>
    <p></div></div>
    </div></div>


    در پایان کد های css زیر رو در استایل مورد نظر قرار بدید و ذخیره کنید .

    کد:
    .recent_news {
        background: url(../aboutbg.png);
        height: 165px;
        width: 480px;
        border: 1px solid #fff;
        box-shadow : 0 1px 3px #444, inset 0 -1px 15px #333;
        border-radius: 5px 5px 10px 10px;
        float: left;
        margin: 5px 0 0 15px;
    }
    .recent_news h3.recent_news_head {
        background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom,  color-stop(0%, rgba(255,255,255,1)), color-stop(100%,  rgba(255,255,255,0))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* IE10+ */
        background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(  startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0 ); /*  IE6-9 */
        height: 37px;
        line-height: 37px!important;
        border: 1px solid #fff;
        border-radius: 5px 5px 0 0;
        box-shadow : 0 1px 3px #444, inset 0 -1px 3px #333;
        font: 200 22px "byekan";
        color: #555;
        text-shadow : 1px 1px 1px #eee;
        text-align: center;
    }
    .recent_body {
        width: 440px;
        margin: 0 auto;
        padding: 8px;
    }
    .blogroll {
        margin: 10px 0;
    }
    .blogroll h2 {
    }
    .blogroll-inner-wrapper {
        border-radius: 7px 7px 7px 7px;
        line-height: 0.8;
        padding: 1px 10px;
    }
    .blogroll-link-wrapper {
        font:400 13px "byekan";
        height:7.2em;
        margin: 0 0 10px;
        overflow: hidden;
    }
    .blogroll-link-wrapper li {
        background: url(../bullet.png) no-repeat scroll right center transparent;
        clear: right;
        color: #222;
        display: block;
        padding: 0 15px 2px 0;
    }
    .blogroll-link-wrapper li:hover {
        background: url(../bullet_h.png) no-repeat scroll right center transparent;
        clear: right;
        color: #222;
        display: block;
        padding: 0 15px 2px 0;
    }
    .blogroll-link-wrapper li span {
        font-size: 0.9em;
        padding-right: 5px;
    }
    .blogroll-link-wrapper li a {
        color: #555;
        text-shadow:1px 1px 1px #ccc;
    }
    .blogroll-link-wrapper li a:hover {
        color: #c00;
        padding: 1px 0 4px;
    }
    .jcarousel-skin-ticker .jcarousel-direction-rtl {
        direction: rtl;
    }
    .jcarousel-skin-ticker .jcarousel-container-vertical {
    }
    .jcarousel-skin-ticker .jcarousel-clip-vertical {
        height: 132px;
    }
    .jcarousel-skin-ticker .jcarousel-item-vertical {
        height: 21px;
        overflow: hidden;
        width: 580px;
    }
    .jcarousel-skin-ticker .jcarousel-item-placeholder {
        background: none repeat scroll 0 0 #FFFFFF;
        color: #000000;
    }
    .jcarousel-skin-ticker .jcarousel-next-vertical {
        background: url(../blogroll-arrow.png) no-repeat scroll 0 -30px transparent;
        cursor: pointer;
        height: 25px;
        left: 0;
        position: absolute;
        top: 30px;
        width: 25px;
    }
    .jcarousel-skin-ticker .jcarousel-next-vertical:hover {
        background-position: -29px -30px;
    }
    .jcarousel-skin-ticker .jcarousel-next-disabled-vertical,  .jcarousel-skin-ticker .jcarousel-next-disabled-vertical:hover,  .jcarousel-skin-ticker .jcarousel-next-disabled-vertical:active {
        background-position: 0 -96px;
        cursor: default;
    }
    .jcarousel-skin-ticker .jcarousel-prev-vertical {
        background: url(../blogroll-arrow.png) no-repeat scroll 0 0 transparent;
        cursor: pointer;
        height: 25px;
        left: 0;
        position: absolute;
        top: 0;
        width: 25px;
    }
    .jcarousel-skin-ticker .jcarousel-prev-vertical:hover {
        background-position: -29px 0;
    }
    .jcarousel-skin-ticker .jcarousel-prev-disabled-vertical,  .jcarousel-skin-ticker .jcarousel-prev-disabled-vertical:hover,  .jcarousel-skin-ticker .jcarousel-prev-disabled-vertical:active {
        background-position: 0 -96px;
        cursor: default;
    }
    نکته ، ادرس دهی تصاویر باید با توجه با محلی باشه که تصاویر رو آپلود کردید .

    نمونه

    کد:
    background: url(images/styles/WikivBColorize/images/bullet.png) no-repeat scroll right center transparent; 
    خوب کار تمام شد .

    پیروز باشید .
     

    پیوست ها:

    • top Plugin.zip
      اندازه فایل:
      کیلوبایت 50.2
      نمایش ها:
      91