عرض آخر المواضيع بطريقة رائعة لمدونة بلوجر

مكتبة الدروس
دروس مدونة بلوجر

أولاً : انتقل الى https://www.blogger.com

ثانياً : نختار تخطيط >> اضافة أداة >> نختار HTML/JavaScript

ثالثاً : نضع الكود التالي

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>


<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/AVvXsEj96qXUx23U8osebMSChynbuf2ufpKZG6kCpQK_ZPJ33ley0USy1FKXh6C6BBaC4nkhwIQ__hfhF_NoJRgNdZpHcAAtgOlLsVT537tmNfK5F5P9JVmtbJXFBc3nAKoev8dy-0hSwKDSSk05/s1600/24work.blogspot.com.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 #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><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><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/AVvXsEh9dOtod6XVqyvO7eKx8lOzEzj5qTZJmrOIdFTue2_JWxCoosou2_tbGzZQScIU4Qr77ojN0dsOaCC13x6bVSq6A_9CJj3tC8QfGwXdvZeuiPXCg9p-Kk90mG1vmT26zqVdJBiQcnntQ9US/s1600/noimage.png", // Image that show up if the post doesn't have a image
blogURL = "http://knz2013.blogspot.com/"; // Your Blog Address
</script><script src="http://dl.dropboxusercontent.com/s/mcnspfkhcl2wwql/animated-recent-posts-ycode-6.js" type="text/javascript"></script>

ملاحظة : اذا كان الكود التالي موجود في اضافات سابقة قم بحذفه من الكود السابق

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

1)  قم بتغير http://knz2013.blogspot.com/  الى عنوان مدونتك

2)   numposts = 20    لتغيير عدد المواضيع

3)   numchar = 200  عدد الأحرف في وصف الموضوع

4) لتغير لون الخلفية   background-color:#1BA1E2
5) لتغير لون خلفية العنوان   background-color:#000000
6) لتغير لون الخط     color:white

مثال بعد تعديل الألوان

 

شارك الموضوع