پی سی دی ال این سری از پست های خود را به یک کد جالب و پرکاربرد تخصیص داده. بنر گوشه ای به همراه توضیحات و افکت زیبا. با این کد میتوانید بنر های تبلیغاتی گوشه ای خود را به صورت کج شده به عقب (حالت سه بعدی داره) نمایش بدین که زمانی که کاربر موس خود را بر روی بنر برد آن بنر صاف شده و توضیحاتی از اون بنر بر روی اون نمایش داده میشود. همان طور که میدانید بنر های تبلیغاتی گوشه ای طرفدار زیادی داره و با این افکت طرفداران اون چندین برابر میشود. با این کد یک بنر، یک عنوان از اون سایت تبلیغ شده و چند خطی توضیحات از اون سایت تبلیغ شده به نمایش در میاد.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!--Code by : WwW.Pi3idl.com--> <style> #tri-d-wrapper {-webkit-perspective: 300px;perspective: 300px;position: fixed;height: 270px;width: 350px;bottom:10px; left:10px;} #tri-d-wrapper *{direction:rtl;font-family:b yekan;} #img-wrapper {width: 350px;background: #3498db;margin: 0;position: absolute;cursor: pointer;border-radius: 3px;overflow: hidden;top: 50%;left: 50%;margin-left: -175px;margin-top: -131px;-webkit-transform: rotateX(30deg) scale(.65);transform: rotateX(30deg) scale(.65);-webkit-transition: .3s all ease;transition: .3s all ease;box-shadow: 0 15px 20px 5px rgba(0,0,0,.2);border:1px solid gray;} #img-wrapper:hover {-webkit-transform: rotateX(0deg) scale(1);transform: rotateX(0deg) scale(1);box-shadow: none;} #img-wrapper img {width: 100%;margin: 0;position: relative;display: block;-webkit-transition: .3s all ease;transition: .3s all ease;} #img-wrapper:hover img {-webkit-transform: scale(1.5);-ms-transform: scale(1.5);transform: scale(1.5);} #img-wrapper:hover figcaption {background: rgba(0,0,0,.75);} #img-wrapper:hover figcaption h2 {opacity: 1;padding-left: 20px;-webkit-transition: .3s all ease .3s;transition: .3s all ease .3s;} #img-wrapper:hover figcaption .bottom-detail {-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);} #img-wrapper:hover figcaption .bottom-detail p {opacity: 1;top: 0;-webkit-transition: .3s all ease .5s;transition: .3s all ease .5s;} figcaption {position: absolute;top: 0;left: 0;right: 0;bottom: 0;-webkit-transition: .3s all ease;transition: .3s all ease;} figcaption h2 {margin: 0;color: white;font-size: 22px;line-height: 70px;opacity: 0;padding-left: 0;padding-right: 20px;font-weight: 300;} figcaption .bottom-detail {position: absolute;width: 100%;bottom: 0;top: 70px;background: white;-webkit-transform: translateY(100%);-ms-transform: translateY(100%);transform: translateY(100%);-webkit-transition: .3s all ease .1s;transition: .3s all ease .1s;} .bottom-detail p {font-size: 17px;opacity: 0;top: 20px;padding-left: 20px;padding-right: 20px;color: #999;font-weight: 300;line-height: 1.5;} </style> <a href="http://linkshoma.com"><div id="tri-d-wrapper"> <figure id="img-wrapper"> <img src="http://www.pi3idl.com/wp-content/uploads/2015/04/advance-banner-ad.jpg" alt="Preview Image" /> <figcaption> <h2 class="title">عنوان</h2> <div class="bottom-detail"> <p>متنی برای توضیحات این بنر در اینجا قرار میگیرد.</p> </div> </figcaption> </figure> </div></a> <h2><a style="position:fixed;top:1000%;width:1px; height:1px;overflow:hidden;" href="http://pi3idl.com">کد وبلاگ</a></h2> <h2><a style="position:fixed;top:1000%;width:1px; height:1px;overflow:hidden;" href="http://www.pi3idl.com/2015/04/ad-banner-with…ect-and-detail/">کد بنر گوشه ای به همراه افکت</a></h2> <!--Code by : WwW.Pi3idl.com--> |
سلام. این کد رو باید کجای قالب بذاریم؟ وقتی از طریق افزونه اینکار رو انجام میدم بنر میره زیر لایه نوشته های سایت
به قسمت ویرایش قالب بروید و تو فایل header.php قرار دهید.