بوسیله این ترفند ساده، لیست مطالبی که در ماژول مطالب برتر به نمایش گذاشته میشود را با چهره جدید و امکانات بیشتری به نمایش بگذارید.
امکانات این ترفند:
۱. نمایش تصویر مطلب بوسیله Tooltip
۲. نمایش مختصری از متن مطلب بوسیله Tooltip
آموزش نصب
۱. فایل topnews.tpl قالب خود را باز کرده، تمامی محتوای آن را حذف کرده و کد زیر را به جای آن قرار دهید:
نکته: لطفآ * موجود در تگ های {li*nk} و {ti*tle} را حذف کنید.
برای نمایش مطالب برتر باید از کد زیر در قالب استفاده کنید:
<style>
span {-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
.tooltip-style1 {background:rgba(0,0,0,0.8);color:white;max-width:200px;padding:5px;box-shadow:0 0 3px rgba(0, 0, 0, 0.5);-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.5);-webkit-box-shadow:0 0 3px rgba(0,0,0,0.5);}
.topnews a {padding:2px;display: block;margin:0 0 2px 0;color:#fff;background:rgba(0,0,0,0.4);box-shadow: inset rgba(0,0,0,0.3) 0px 1px 3px, rgba(255,255,255,0.4) 0px 1px 0px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}
.topnews a:hover {background:rgba(0,0,0,0.2);}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".tooltips").hover(
function() { $(this).contents("span:last-child").css({ display: "block" }); },
function() { $(this).contents("span:last-child").css({ display: "none" }); }
);
$(".tooltips").mousemove(function(e) {
var mousex = e.pageX + 10;
var mousey = e.pageY + 5;
$(this).contents("span:last-child").css({ top: mousey, left: mousex });
});
});
</script>
<div id="header_wrapper" class="tooltips topnews">
<li><a href="{li*nk}">{ti*tle}</a></li><span style="display:none;position:absolute;" class="tooltip-style1"><img width="50px" style="float:right;" src="{image-1}" /><div style="margin-right:33px;">{text limit="50"}</div></span>
</div>
span {-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
.tooltip-style1 {background:rgba(0,0,0,0.8);color:white;max-width:200px;padding:5px;box-shadow:0 0 3px rgba(0, 0, 0, 0.5);-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.5);-webkit-box-shadow:0 0 3px rgba(0,0,0,0.5);}
.topnews a {padding:2px;display: block;margin:0 0 2px 0;color:#fff;background:rgba(0,0,0,0.4);box-shadow: inset rgba(0,0,0,0.3) 0px 1px 3px, rgba(255,255,255,0.4) 0px 1px 0px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}
.topnews a:hover {background:rgba(0,0,0,0.2);}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".tooltips").hover(
function() { $(this).contents("span:last-child").css({ display: "block" }); },
function() { $(this).contents("span:last-child").css({ display: "none" }); }
);
$(".tooltips").mousemove(function(e) {
var mousex = e.pageX + 10;
var mousey = e.pageY + 5;
$(this).contents("span:last-child").css({ top: mousey, left: mousex });
});
});
</script>
<div id="header_wrapper" class="tooltips topnews">
<li><a href="{li*nk}">{ti*tle}</a></li><span style="display:none;position:absolute;" class="tooltip-style1"><img width="50px" style="float:right;" src="{image-1}" /><div style="margin-right:33px;">{text limit="50"}</div></span>
</div>
نکته: لطفآ * موجود در تگ های {li*nk} و {ti*tle} را حذف کنید.
برای نمایش مطالب برتر باید از کد زیر در قالب استفاده کنید:
{include file="engine/modules/3news.php?mod=topnews&template=topnews&from=0&limit=10"}