السبت، ديسمبر 29، 2012

اضافة البوم صور احترافي مصنف لمدونات بلوقر.

بسم الله الرحمن الرحيم
 الحمد لله رب العالمين و الصلاة و السلام على سيد المرسلين و خاتم النبيين محمد و على اله واصحابه اجمعين .. و بعد ..
الكثير من المدونين المهتمين بالصور و التصوير الفوتوغرافي يريدون ان يكون عرض صورهم داخل المدونة و هذا يمكن بالنسبة للورد بريس اما بالنسبة لبلوقر فهو غير ممكن و يحتاج الى جهد كبير من اجل ترتيب الصور على شكل البوم و بدون تصنيف اكيد و قد حاولت في تدونة سابقة عرض الصورة بشكل البوم و لكن بدون تصنيفها الى البومات لانه يعرض البوم معين مصنف ضمن بيكاسا .. اما الان فيمكن عرض الصور بشكل احترافي و مميز و مصنف وفق ما تصنيفه في بيكاسا و باسلوب عرض محترف بتقنية الاجاكسي و بطريقة بسيطة بخطوتين فقط . نشاهد المثال اولا من هنا
و الان طريقة اضافة الالبوم الى المدونة :
 يعد الدخول الى لوحة التحكم اختر من اليمين الصفحات ثم صفحة جديدة ثم صفحة فارغة و اختر html

وانسخ الكود التالي و الصقه فيها : مع الاخذ بنظر الاعتبار تغير ما مشار اليه باللون الاصفر الى حسابك في بيكاسا و هو نفسه حسابك في كوكل اي الايميل و لكن بدون @gmail.com
<link href="https://guide-b.googlecode.com/svn/trunk/picasagallery/jquery.fancybox-1.3.1.css" rel="stylesheet" type="text/css"></link>
<script src="https://guide-b.googlecode.com/svn/trunk/picasagallery/jquery.min.js" type="text/javascript"></script>
<script src="https://guide-b.googlecode.com/svn/trunk/picasagallery/jquery.mousewheel-3.0.2.pack.js" type="text/javascript"></script>
<script src="https://guide-b.googlecode.com/svn/trunk/picasagallery/jquery.fancybox-1.3.1.js" type="text/javascript"> </script>
<script src="https://guide-b.googlecode.com/svn/trunk/picasagallery/jquery.picasagallery-1.0.0.js" type="text/javascript"> </script>
<script type="text/javascript">
             $(document).ready(function() { $('.picasagallery').picasagallery({'username':'alazawi.ahmed'}); } );      
 </script>
 <div class="picasagallery"></div>

 <style type="text/css">
 .picasagallery {
     float:right;width:100%;padding:0;
  text-align: right;
 }
 .picasagallery_header {
     float:right;
     width:100%;
  cursor: pointer;
  margin: 5px; /* top right bottom left */
  font:bold 14px arial; ;
  color: red;
  text-decoration: none;
 }
 .picasagallery_title {
  margin: 0px 5px 5px 5px; /* top right bottom left */
  font-size: 12pt;
 }
 .picasagallery_album {
  float: right;
  text-align: center;
  font-size: 10pt;
  margin: 5px; /* top right bottom left */
 }
 .picasagallery_album img {
     width:110px; /* عرض صور التصنيف */
  border:1px solid #d1d1d1;
  cursor: pointer;
  margin: 0px 0px 5px 0px; /* top right bottom left */

  background: none repeat scroll 0 0 #FAFAFA;
    border: 1px solid #DEDEDE;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 0 3px #DDDDDD, 0 1px 0 #FFFFFF inset;
    padding: 5px;
 }
  .picasagallery_album img:hover{
  background: none repeat scroll 0 0 #777;
    border: 1px solid #000;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 0 3px #000, 0 1px 0 #999 inset;
 }

 .picasagallery_album strong{
   background: none repeat scroll 0 0 #FAFAFA;
    border: 1px solid #DEDEDE;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 0 3px #DDDDDD, 0 1px 0 #FFFFFF inset;
    padding: 5px;

 }
 .picasagallery_thumbnail img {
     width:150px; /* عرض الصور بعد الدخول الى التصنيف */
  cursor: pointer;
  margin: 5px;
 
  background: none repeat scroll 0 0 #FAFAFA;
    border: 1px solid #DEDEDE;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 0 3px #DDDDDD, 0 1px 0 #FFFFFF inset;
    padding: 5px;
 }
.picasagallery_thumbnail img:hover{
  background: none repeat scroll 0 0 #777;
    border: 1px solid #000;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 0 3px #000, 0 1px 0 #999 inset;
 }
 .picasagallery_photo {
  z-index: 1;
  left: 0;
  display: none;
 }
 </style>

الى هنا تم الانتهاء من اضافة البوم الصور الى المدونة و يمكنك مشاهدته .
ملاحظة : اذا كنت قد اضفت البوم صور معين في بيكاسا و لا تريده ان يظهر لاحد او ان لا يظهر في المدونة اتبع التالي:
اولا: ادخل على بيكاسا من هنا .
ثم اضغط على my photo .
ثم اختر الالبوم الذي لا تريده ان يظهر و اضغط عليه سيتم عرض الصور الموجودة بداخله بعدها ندخل الى اعدادات الالبوم كما موضح في الصورة :
ثم نطبق كما موضح بالصورة : يرجى الضغط على الصورة لمشاهدتها بوضوح ..
اما اذا اردنا ان يظهر الالبوم للجميع و في البوم المدونة فنختار public on the web شاهد الصورة :
يفضل تسمية الالبوم باللغة العربية او الانكليزية  ليظهر في المدونة بشكل منسق .
و شكرا لكم .. انتهى .


هناك 23 تعليقًا:

  1. علي العراقي31 ديسمبر، 2012 2:10 م

    اضافة روووووووعة استمر اخي بابداعك

    ردحذف
  2. مشكووووور وبارك الله بيك

    عاشت الايادي

    والى الامام

    ردحذف
  3. إضافة أكتر من رائعة
    جزاك الله خيرا أخي الكريم

    ردحذف
  4. تمام جزاكم الله خيراً

    ردحذف
  5. شكرا لك على الموضوع المميز
    تحياتي

    ردحذف
  6. مدونة رائعة واضافة ممتازة استمر فى الابداع

    ردحذف
  7. مشكوووووووووووووووووووووووووووووووور اخى على الافاده والمساعده

    ردحذف
  8. لك وحشة شديدة يا عزاوي اين انت

    ردحذف
  9. تسلم على الموضوع الأكثر من روعة

    ردحذف
  10. أزال المؤلف هذا التعليق.

    ردحذف
  11. اخي جربته كم مره ما نجحت معي ماعرف لييش
    طيب شنو تقصد عرص الصور
    يعني اسم الصوره وله رابط الصوره
    عملت كل الي قلت عليه مانجحت عندي

    ردحذف
  12. تسلم متشكر جدا
    ُُُجزاك الله خيرا

    ردحذف

  13. موضوع شيق .. جزاكم الله خيرا
    كرز للاستشارات مدير موقع

    ردحذف
  14. الاضافة لاتعمل تماما مفيش اي البومات بتظهر في البلوج

    ردحذف
  15. جزاك الله كل خير لساني لا يكف عن الدعاء لك من امس كنت في أمس الحاجة لهذا الكود سلمت لنا يداك

    ومحتاج خدمة كمان لو ممكن انا عندي كود html لنموذج ضع ايملك ليصلك كل جديد انا عايز اوضعه في صفحة html بس مش عارف طريقة تفعيله ازاي لو ممكن تشرحها من فضلك اكون عاجز عن الشكر ... اخوك مصطفي من مصر

    ردحذف
  16. موضوع قيم

    مزيد من الابداع والتألق

    تقبل مروري

    ردحذف