السلام عليكم متابعي مدونة سمور الكرام ... اليوم نقدم لكم اضافة اداة اخر المواضيع بتصميها الرائع وفي حلتها الجديدة حصريا من مدونة سمور ... الاضافة تعرض المواضيع التي تم نشرها مؤقتا بتنسيق رائع ومميز كما انها تتميز بالخفة حيث انها لاتؤثر على سرعة تحميل القالب كما انها تتميز بالبساطة و السرعة في التحميل ..
معاينة الاضافة
نتوجه الى لوحة التحكم > التخطيط > اضافة اداة > جافا سكريب ونلصق الكود التالي :
<style type="text/css">
#post-gallery {
width:304px;
margin:0px auto;
font:normal 10px Droid Arabic Kufi;
color:#494848;
padding:8px;
background-color:#2db5e8;
-webkit-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
-moz-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
border: 1px dashed #FFf;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}
#post-gallery h2 {
font:15px Droid Arabic Kufi;
color:white;
text-shadow:0px 3px 2px black;
text-transform:uppercase;
margin:2px 2px 2px;
padding:7px 14px;
background-color:#2db5e8;
text-align: center;
}
#post-gallery .rp-item {
float:left;
display:inline;
position:relative;
margin:2px;
padding:0px 0px;
background:#fff url('http://softglad.at.ua/images/loading.gif') no-repeat 50% 50%;
width:72px;
height:72px;
}
#post-gallery .rp-item img {
width:72px;
height:72px;
border:none !important;
margin:0px 0px !important;
padding:0px 0px !important;
background:transparent !important;
display:none;
}
#post-gallery .rp-item .rp-child {
position:relative;
top:10%!important;
left:10%!important;
z-index:1000;
width:200px;
background-color:white;
border-top:5px solid #2db5e8;
-webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
padding:10px 15px;
overflow:hidden;
word-wrap:break-word;
display:none;
opacity: 0.9;
}
#post-gallery .rp-item .rp-child h4 {
font-size:12px;
margin:0px 0px 5px;
color:#2db5e8;
}
#post-gallery .rp-item:hover .hidden {display:block;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var rpTitle = "اخر المواضيع", // Widget Title
numposts = 20, // The number of thumbnails / posts to display
numchar = 200, // Number of characters in the description tooltip
rcFadeSpeed = 600, // Speed of the effect. fadeIn () tooltip appears
pBlank = "http://softglad.at.ua/images/no-img.png", // Image that show up if the post doesn't have a image
blogURL = "http://st-tek.blogspot.com/"; // Your Blog Address
</script>
<script src="http://softglad.at.ua/widgets/post-gallery.js" type="text/javascript"></script>
<a style="font-size: 6px; text-decoration:none; color: #616469;" href="http://st-tek.blogspot.com">
Widget by hsam ahmed
</a>
#post-gallery {
width:304px;
margin:0px auto;
font:normal 10px Droid Arabic Kufi;
color:#494848;
padding:8px;
background-color:#2db5e8;
-webkit-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
-moz-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
border: 1px dashed #FFf;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}
#post-gallery h2 {
font:15px Droid Arabic Kufi;
color:white;
text-shadow:0px 3px 2px black;
text-transform:uppercase;
margin:2px 2px 2px;
padding:7px 14px;
background-color:#2db5e8;
text-align: center;
}
#post-gallery .rp-item {
float:left;
display:inline;
position:relative;
margin:2px;
padding:0px 0px;
background:#fff url('http://softglad.at.ua/images/loading.gif') no-repeat 50% 50%;
width:72px;
height:72px;
}
#post-gallery .rp-item img {
width:72px;
height:72px;
border:none !important;
margin:0px 0px !important;
padding:0px 0px !important;
background:transparent !important;
display:none;
}
#post-gallery .rp-item .rp-child {
position:relative;
top:10%!important;
left:10%!important;
z-index:1000;
width:200px;
background-color:white;
border-top:5px solid #2db5e8;
-webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
padding:10px 15px;
overflow:hidden;
word-wrap:break-word;
display:none;
opacity: 0.9;
}
#post-gallery .rp-item .rp-child h4 {
font-size:12px;
margin:0px 0px 5px;
color:#2db5e8;
}
#post-gallery .rp-item:hover .hidden {display:block;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var rpTitle = "اخر المواضيع", // Widget Title
numposts = 20, // The number of thumbnails / posts to display
numchar = 200, // Number of characters in the description tooltip
rcFadeSpeed = 600, // Speed of the effect. fadeIn () tooltip appears
pBlank = "http://softglad.at.ua/images/no-img.png", // Image that show up if the post doesn't have a image
blogURL = "http://st-tek.blogspot.com/"; // Your Blog Address
</script>
<script src="http://softglad.at.ua/widgets/post-gallery.js" type="text/javascript"></script>
<a style="font-size: 6px; text-decoration:none; color: #616469;" href="http://st-tek.blogspot.com">
Widget by hsam ahmed
</a>
* الكود #2db5e8 هو كود خلفية الاضافة ويمكن تغييره الى اي لون يتناسق مع تصميم مدونتك
* يجب تغيير الرابط باللون الاحمر الى رابط مدونتك حتى يتم عرض مواضيع مدونتك
وبعدها نحفظ الاداة ونكتب تعليقا بداخله " شكراااا " ^_^
ودمتم في حفظ الله ورعايته
الإبتساماتإخفاء