الفت نظر الزائر باضافة اخر مشاركات للمدونة مع مصغرات الصورة

السلام عليكم ورحمه الله وبركاته

اهلابكم في بلوجر حياتي

اضف اخر المشاركات بشكل جديد واحترافي

الفت نظر الزائر باضافة اخر مشاركات للمدونة مع مصغرات الصورة ، والاضافة تسهل علي الزائر البحث في المدونة وتجعل الزائر يقراء مواضيع كثير ة ويمضي في مدونتك اكثر وقت ممكن ، تكون الاضافة من 20مربع صغير مع الصورة وعند مرور الموس علي الاضافة تظهر عنوان الموضوع مع مقتطف نصي

شاهد صورة الاضافة

لتركيب الاضافة علي مدونتك ادخل علي لوحة تحكم مدونتك واختار التخطيط كما واضح في الصورة

ثم بعد ذلك اختار اضافة اداة كما ظهر في الصورة

بعد ذلك اختار html /javascript كما موضح في الصورة

ثم الصق الكود

<style type="text/css">
#post-gallery {
width:304px;
margin:0px auto;
font:normal 11px Arial,Sans-Serif;
color:##000000
;
padding:8px;
background-color:#1BA1E2
;
-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);
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
#post-gallery h2 {
font:20px Arial,Sans-Serif;
color:white;
text-shadow:0px 3px 2px black;
text-transform:uppercase;
margin:2px 2px 2px;
padding:7px 14px;
background-color:#000000;
text-align: center;
}
#post-gallery .rp-item {
float:left;
display:inline;
position:relative;
margin:2px;
padding:0px 0px;
background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLYeIXCM8TMjm9WUmim7PT3IzedF5oRuikWgacguLJQU4hito-INXHlL8K7QSeZr1QTVe7ZYEE4ak3j0qGh5hhBT-4LDZx5xRJkFilF1-qclnXO-kgcnR0YC9wvcjmu1UqQzyjGc9WiZGM/s48/Bloggerheroe.comloading.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 #1BA1E2;
-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:#1BA1E2;
}
#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      = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioJzgdB5CgUzpmb_DY587eSwtbK43JKC6f7SeSVMSx0vf7cXv2FD4S_ROv1IYwMRQ_dNSNovQp83qfC6jw1pbS_HEB1zv9EmvsaDuiKyKvekdrBmuozTHxXA98WWVY1w9_QexQxinDTh5C/s100/no-img.png",      // Image that show up if the post doesn't have a image
    blogURL     = "http://awsa9090.blogspot.com//";       // Your Blog Address
</script>
<script src="http://dl.dropbox.com/u/81212926/Recent%20Post%20Thumbnail-blogger-heroe.js" type="text/javascript"></script>

يمكنك التعديل علي الاضافة
التحكم في عرض الاضافة width:304px;

تحكم في عدد عرض المواضيع numposts = 20,

تحكم في عدد الاحرف التي تظهر في المقطتف numchar = 200,

غير الرابط الي رابط مدونتك http://awsa9090.blogspot.com

ارجو ان ينال الموضوع اعجابكم

الفت نظر الزائر باضافة اخر مشاركات للمدونة مع مصغرات الصورة

Author: Unknown

مواضيع ذات صلة