درود دوستان این نیز یک نمونه برا دوستان . جهت ایجاد چنین بخشی نیاز هست که حمأ حدود 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; خوب کار تمام شد . پیروز باشید .