احترف عرض مواضيعك !
<style type="text/css">
body {
margin: 0;
padding: 50px 0 0;
font: 10px normal Verdana, Arial, Helvetica, sans-serif;
background: #111 url(http://www.sohtanaka.com/web-design/examples/display-switch/body_bg.jpg) no-repeat center top;
color: #fff;
}
* {
margin: 0;
padding: 0;
}
img {
border: none;
}
h1 {
font: 5em normal Georgia, 'Times New Roman', Times, serif;
text-align:center;
margin-bottom: 20px;
}
h1 span { color: #e7ff61; }
h1 small{
font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;
text-transform:uppercase;
letter-spacing: 1.5em;
display: block;
color: #ccc;
}
.container {
width: 758px;
margin: 0 auto;
padding-bottom: 100px;
overflow: hidden;
}
ul.display {
float: left;
width: 756px;
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid #333;
border-right: 1px solid #333;
background: #222;
}
ul.display li {
float: left;
width: 754px;
padding: 10px 0;
margin: 0;
border-top: 1px solid #111;
border-right: 1px solid #111;
border-bottom: 1px solid #333;
border-left: 1px solid #333;
}
ul.display li a {
color: #e7ff61;
text-decoration: none;
}
ul.display li .content_block {
padding: 0 10px;
}
ul.display li .content_block h2 {
margin: 0;
padding: 5px;
font-weight: normal;
font-size: 1.7em;
}
ul.display li .content_block p {
margin: 0;
padding: 5px 5px 5px 245px;
font-size: 1.2em;
}
ul.display li .content_block a img{
padding: 5px;
border: 2px solid #ccc;
background: #fff;
margin: 0 15px 0 0;
float: left;
}
ul.thumb_view li{
width: 250px;
height: 184px;
}
ul.thumb_view li h2 {
display: inline;
}
ul.thumb_view li p{
display: none;
}
ul.thumb_view li .content_block a img {
margin: 0 0 10px;
}
a.switch_thumb {
width: 122px;
height: 26px;
line-height: 26px;
padding: 0;
margin: 10px 0;
display: block;
background: url(http://www.sohtanaka.com/web-design/examples/display-switch/switch.gif) no-repeat;
outline: none;
text-indent: -9999px;
}
a:hover.switch_thumb {
filter:alpha(opacity=75);
opacity:.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
}
a.swap { background-position: left bottom; }
</style>كود الhtml
<a href="#" class="switch_thumb">Switch Thumb</a>
<ul class="display">
<li>
<div class="content_block">
<a href="your_url_1"><img src="your_thumbnail_image_1" /></a>
<h2><a href="your_url_1">Title of item 1</a></h2>
<p>summary 1 goes here</p>
</div>
</li>
<li>
<div class="content_block">
<a href="your_url_2"><img src="your_thumbnail_image_2" /></a>
<h2><a href="your_url_2">Title of item 2</a></h2>
<p>summary 2 goes here</p>
</div>
</li>
....................
</ul>كود الjquery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a.switch_thumb").toggle(function(){
$(this).addClass("swap");
$("ul.display").fadeOut("fast", function() {
$(this).fadeIn("fast").addClass("thumb_view");
});
}, function () {
$(this).removeClass("swap");
$("ul.display").fadeOut("fast", function() {
$(this).fadeIn("fast").removeClass("thumb_view");
});
});
});
</script>
|
-
السلام عليكم ورحمة الله وبركاته
كيف الأحوال أخى الغالى خالد
.. بصراحة والله مبدع هذه الطريقة أكثر من ممتازة تجلع المدونة مختلفة الشكل وكانها ليست بلوجر .. أتمنى لك التوفيق والابداع .. والمزيد من هذه الدروس
-
و عليكم السلام و رحمة الله تعالى و بركاته
اختي أم خلود أي اشكال في الموضوع يمكنك الاتصال بي
انا في الخدمة...أشكرك على كرم المرور.
اخي جهاد .بصراحة مرورك شرف لنا بارك الله فيك أخي الكريم
و صحيح أن الطريقة مميزة فهي تعطي ميزة رائعة وتكسبه صيغة احترافية
تمكن للزائر اختيار عرض المواضيع كما يشاء
تحيااتي للجميع!
-
عزيزي خالد حاولت فتح المدونة من نفس اسمها المعرفة ولكنها لم تفتح قيل أنها مدونة للمدعوين فقط.
-
نعم أختي صحيح دالك و لعلمك فقط هي الان تحت الصيانة
و سوف يتم تغيير الرابط و دالك في وقت لاحق و ستظل فقط للمدعوين امثالك
لأني وجدت تصفح رهيب لمدونتي و نقل رهيب لمواضيعي
مقابل و لا كلمة شكر..
اشكرك على ردودك الجميلة اختي أم خلود
السلام عليكم ..
ولكني أفضل الموضوع الكامل .. في التديونة فهو أسهل .. لكن لكل منا طريقته الخاصة في عرض مواضيعه.. تحياتي لك