| 
		
			| AvTaR | 12-20-2013 08:32 AM |  
 اضافة اخر المشاركات بتاثيرات جافا جميلة ورائعة
  اضافة اخر المشاركات بتاثيرات جافا جميلة ورائعة 
 
 الكاتب : yalla nsaytar
 الخميس، 19 ديسمبر، 2013 | 6:45 م
 
   
 
      
كيف يمكنك إضافة اخر المشاركات مذهلة ورائعة  إلى مدونتك . هذه القطعة تجلب كل المشاركات عبر جافا سكريبت وتظهر بطريقة جميلة. هذه الاداة تعرض المشاركات الأخيرة مع الصور المصغرة الخاصة بهم. عند المرور عليها يمكنك أن ترى تأثير الظل CSS ، بالاضافة الى مربع وصندوق يحتوي على وصف الموضوع .
   معاينة
 معاينة 
 طريقة التركيب
  
نذهب الى لوحة تحكم المدونة ← التخطيط ← اضافة اداة جديدة HTML/JavaScript 
ونضع هذا الكود  <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 tahoma,Sans-Serif;color:##000000;padding:8px;}
 #post-gallery .rp-item {float:left;display:inline;  position:relative;   margin:2px;  padding:0px 0px;  background:  url('http://4.bp.blogspot.com/-0E2ZARxMyAo/UZwiR3XjlvI/AAAAAAAAKDc/3Z8WjltqbCQ/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",       // عنوان الاضافة
 numposts    = 14,      // عدد المشاركات
 numchar     = 200,      // عدد حروف الوصف
 rcFadeSpeed = 600,      // سرعة ظهور مربع وصف الموضوع
 pBlank      = "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",      // الصورة الافتراضية
 blogURL     = "http://www.yalla-nsaytar.com/";       // رابط المدونة
 </script>
 <script  src="https://dl.dropboxusercontent.com/s/9j4leixj2pyfqor/Recent-Post-Thumbnail-Blogger.js"  type="text/javascript"></script>
 الاعدادات
  
var rpTitle     = "Recent Posts",                                // عنوان الاضافة 
    numposts    = 14,                                                    // عدد المشاركات 
    numchar     = 200,                                                    // عدد حروف الوصف 
    rcFadeSpeed = 600,                                               // سرعة ظهور مربع وصف الموضوع 
    blogURL     = "http://www.yalla-nsaytar.com/";       // رابط المدونة 
 المصدر : 
  اضافة اخر المشاركات بتاثيرات جافا جميلة ورائعة
 |