عرض مشاركة واحدة
قديم 04-30-2013, 05:37 AM   #1
السيد ابو جبل
مدون نشيط
 
الصورة الرمزية السيد ابو جبل
 
تاريخ التسجيل: Jul 2012
الدولة: مصر
المشاركات: 272
إرسال رسالة عبر Yahoo إلى السيد ابو جبل
افتراضي المشاركات الشائعة بشكل أنيق و جديد 2013





كنت ترغب في مساعدةالزوارالخاص بك للبحث عنالمشاركات الأخيرة الخاصة بك بسرعة، بينما عدم صرف وقت التصفح يمكنك معرفة الاضافة الخاص بك فى مدونتك. كما سترى في عدة مدونات. عادة توضع هذه ع أنواع الحاجيات داخل القائمه الجانبي للمدونة. ولذلك نريد فريدة من نوعها من مدونة الطرف الآخر، وهنا. هذهالاضافة الأخيرة يمكن أن تظهر آخرالمشاركات والمخطط التفصيلي كتلميح الأدوات مرة واحدة مويوفير على الصورة المصغرة. وكان تأثير تتلاشى. كذلك يتيح محاولة مجرد مع الخطوات
المشاركات الشائعة بشكل أنيق و جديد 2013 شكل اكثر من رائع مع تقنية css الاضافة هيا عبارة عن مصغرات بشكل جميل والوان رائعه مثيره جدا للزائر ربما ان اراء الاضافة تناسب الشكل العام لمدونتك مع تحكم العرص وعداد الموضيع الزى تظهر بيها





شكل الاضافة


شرح الاضافة فى مدونتك
اذهب الى لوحه التحكم فى مدونتك
ثم التخطيط
ثم أضافه أداة
اختار




HTML/JavaScript


ثم اكتب عنوان
مثل المشاركات الشائعة
وأضف الكود التالى


كود بلغة HTML:

<style type="text/css">
#post-gallery {
  width:320px;  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://lh6.googleusercontent.com/-Ki06DVUw8Ak/UV4vnxj-oeI/AAAAAAAAJCg/gmu9zk_3PR8/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="https://bilokr.googlecode.com/files/djquery.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://lh4.googleusercontent.com/-Q5TyyMqOEkk/UV4vn45zY4I/AAAAAAAAJCk/WXm15PWrULA/s100/no-img.png",       // Image that show up if the post doesn't have a image
    blogURL     = "http://bilokr.blogspot.com/";       // Your Blog Address
</script>
<script   src="http://dl.dropbox.com/u/81212926/Recent%20Post%20Thumbnail-blogger-heroe.js"  type="text/javascript"></script>



الاحمر برابط مدونتك http://bilokr.blogspot.com/تغير الازرق بعداد اظهر الموضيع 20 الاصفر هو عداد الاحرف الوصف الزى تظهر عن مرور الموز 200الاخضر التحكم فى سرعه الفلاشه 600وهذا الكودالتحكم فى عرض الاضافة width:320px;متابعة مفيدة ، و لأي استفسار فورم التعليق رهن الإشارة

المصدر http://bilokr.blogspot.com/2013/04/2013_29.html

الدعم العربي

السيد ابو جبل غير متواجد حالياً   رد مع اقتباس