إضافة آخر المشاركات مع الصور المصغرة لمدونات بلوجر

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

زوار ومتابعي المدونة 

اليوم سوف نتعرف على إضافة مهمة لكل مدونة إلا وهي إضافة آخر المشاركات مع الصور المصغرة + التأثير

الأضافة خفيفة جداً وسلسلة وأحترافية وجميلة جداً في نفس الوقت .

- طريقة التركيب :

1- أدخل إلى مدونتك ثم أختر تخطيط ثم إضافة أداة : HTML/JavaScript

2- اللصق الكود التالي في صندوق الأداة ثم أحفظ .

   <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>      <style type="text/css">
    #post-gallery {width:100%; margin:0px auto;font:normal 11px Arial,Sans-Serif;color:##000000;padding:8px;}
    #post-gallery .rp-item {float:left;display:inline;  position:relative;  margin:2px;  padding:0px 0px;  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJd2Mq_2H46A1MFL2hbA2x6vv2GlN2AwYvbgU0SShhRg2n7LuHCcZuZTpdTKehrhYzYy2QR2ixfS5-AEVeKZaFDV2gOzLxG9HbN8A-ukaXvjjy-CNgYuF2ALkn3vihWCOpbtK7IPUVSXgx/s1600/LOAD+(66).gif') no-repeat 50% 50%;  width:79px;  height:79px;}
    #post-gallery .rp-item img {  width:69px;  height:69px;  border:none !important;  margin:0px 0px !important;  padding:0px 0px !important;  background:transparent !important;  display:none;}
    #post-gallery .rp-item img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}
    #post-gallery .rp-item .rp-child {  position:relative;  top:10%!important;  left:10%!important;  z-index:1000;  width:200px;  background-color:white;  border-bottom: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 type="text/javascript">
    var rpTitle     = "Recent Posts",       // Widget Title
        numposts    = 9,      // Number of Posts to show
        numchar     = 200,      // Number of Characters to be displayed
        rcFadeSpeed = 600,      // Speed
        pBlank      = "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",      // If No Image
        blogURL     = "http://www.homeblog7.blogspot.com/";       // Your Blog URL
    </script>
    <script src="http://files.allbloggertricks.com/Scripts/abt-recent-posts.js" type="text/javascript"></script>

- التعديلات :

1- إذا يوجد كود الجافا في مدونتك فلا داعي له أحذفه من الكود :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

2- أستبدل رابط مدونتي برابط مدونتك الذي هو باللون الأحمر .

وأخيراً أترككم برعاية الله وتوفيقه 

تنويه : أحبائي وأعزائي : تحية طيبة وبعد ، أنتم تعلمون كم يبذل كاتب التدوينة من جهد وعصف ذهني كي يخرجها إلى حيز الوجود أرجو من شخصكم الكريم عند النقل ذكر المصدر .