الفت نظر الزائر باضافة اخر مشاركات للمدونة مع مصغرات الصورة

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

 اهلابكم في بلوجر حياتي

اضف اخر المشاركات بشكل جديد واحترافي 

 الفت نظر الزائر باضافة اخر مشاركات للمدونة مع مصغرات الصورة ، والاضافة تسهل علي الزائر البحث في المدونة وتجعل الزائر يقراء مواضيع كثير ة ويمضي في مدونتك اكثر وقت ممكن ، تكون الاضافة من 20مربع صغير مع الصورة وعند مرور الموس علي الاضافة  تظهر عنوان الموضوع مع  مقتطف نصي

شاهد صورة الاضافة

لتركيب الاضافة علي مدونتك ادخل علي لوحة تحكم مدونتك واختار التخطيط كما واضح في الصورة

ثم بعد ذلك اختار اضافة اداة كما ظهر في الصورة

بعد ذلك اختار  html /javascript كما موضح في الصورة

ثم الصق الكود 

<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/AVvXsEgCF1bkqebIxvTNCMNaPYWq5BtuMNCZuJp-hpopKtZq3P23iHRY2iXyDo1ailc_EkvH-uRIYP6TimPmTkuLri1P_Ws_eO3DO9kLSJ9lyo7xRHO1bjisQdEFmxtsz17Fqy7_6sNgwt1luvhs/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="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBibevRDjvVmu2nLi_y3iCgs9IhJy3cU2EGBqd3NujKoLOZgC_-bbzx928mAbvGRLUdAPxnNQyu6rtwqpbyz8KzNI3fwOe4EvbtPIMUCxickh45VRoYlTNBAanoqSAnhxKOhl0SULQ3arI/s100/no-img.png",      // Image that show up if the post doesn't have a image
    blogURL     = "http://awsa9090.blogspot.com//";       // Your Blog Address
</script>
<script src="http://dl.dropbox.com/u/81212926/Recent%20Post%20Thumbnail-blogger-heroe.js" type="text/javascript"></script>

يمكنك التعديل علي الاضافة 
 التحكم في عرض الاضافة  width:304px;

تحكم في عدد عرض المواضيع numposts    = 20,

تحكم في عدد الاحرف  التي تظهر في المقطتف  numchar     = 200,  

غير الرابط الي رابط مدونتك http://awsa9090.blogspot.com

 ارجو ان ينال الموضوع اعجابكم 

Unknown

7:26 ص

أكمل القراءة...

Facebook LikeBox Popup - V2 الصندوق المنبثق

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

أسعد الله مساءكم بكل خير أعزائي .. !

الكثير من متتبعي مدونة "نوردكسْ" سيلاحظون مؤخراً أنني نشرتُ موضوع عن إضافة رائعة لمدونات بلوجر تتعلق بصندوق إعجاب بصفحة الفيسبوك ينبثق لزائر مدونتك للمرة الأولى، ويطلب منهم الإلتحاق بالصفحة بالظغط على زر "أعجبني"، حتى يتسنى لهم تتبع جديد المدون عبر صفحة الفايسبوكْ.

اليوم أتيتكم بنسخة ثانية لإصدار الإضافة Facebook LikeBox Popup V2 

الجديد في النسخة الثاني، أن صندوق الفيسبوكْ يكون مرفقـاً بخذمة المتابعة عبر البريد الإلكتروني، فعندما يطلب من الزائر الإشتراك في الصفحة عبر الظغط على زر "أعجبني"، يُقترحُ كذلك علبه الزائر إضافة بريده الإلكتروني، ليصله جديد ماينشر بالمدونة عبر الإيميل و بشكل مجاني, و هذه صوة توضح الشكل الجديد للإضافة

الآن نأتي إلى الإضافة . 

توجه إلى لوحة التحكم في مدونتك

1. تم اظغط على "تصميم"

2. تم "إضافة أداة جديدة"

3ّ. اختر "HTML/javascript widget"

4. تم أضف الكود التالي :

<style>
    /* Jquery Facebook Likebox Popup Version 2.0 */ 
    #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} 
    #cboxOverlay{position:fixed; width:100%; height:100%;} 
    #cboxMiddleLeft, #cboxBottomLeft{clear:left;} 
    #cboxContent{position:relative;} 
    #cboxLoadedContent{overflow:auto;} 
    #cboxTitle{margin:0;} 
    #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;} 
    #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} 
    .cboxPhoto{float:left; margin:auto; border:0; display:block;} 

    .cboxIframe{width:100%; height:100%; display:block; border:0;} 

    /*
       User Style: 
       Change the following styles to modify the appearance of ColorBox.  They are 
       ordered & tabbed in a way that represents the nesting of the generated HTML. 
    */ 
    #cboxOverlay{background:#000;opacity:0.5 !important;} 
    #colorbox{ 
            box-shadow:0 0 15px rgba(0,0,0,0.4); 
           -moz-box-shadow:0 0 15px rgba(0,0,0,0.4); 
            -webkit-box-shadow:0 0 15px rgba(0,0,0,0.4); 
           } 
       #cboxTopLeft{width:14px; height:14px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat 0 0;}
       #cboxTopCenter{height:14px; background:url(http://imgboot.com/images/cybersidh/border.png) repeat-x top left;} 
       #cboxTopRight{width:14px; height:14px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat -36px 0;} 
       #cboxBottomLeft{width:14px; height:43px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat 0 -32px;} 
       #cboxBottomCenter{height:43px; background:url(http://imgboot.com/images/cybersidh/border.png) repeat-x bottom left;} 
       #cboxBottomRight{width:14px; height:43px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat -36px -32px;} 
       #cboxMiddleLeft{width:14px; background:url(http://imgboot.com/images/cybersidh/controls.png) repeat-y -175px 0;} 
       #cboxMiddleRight{width:14px; background:url(http://imgboot.com/images/cybersidh/controls.png) repeat-y -211px 0;} 
       #cboxContent{background:#fff; overflow:visible;} 
           #cboxLoadedContent{margin-bottom:5px;} 
           #cboxLoadingOverlay{background:url(http://imgboot.com/images/cybersidh/loadingbackground.png) no-repeat center center;} 
           #cboxLoadingGraphic{background:url(http://imgboot.com/images/cybersidh/loading.gif) no-repeat center center;} 
           #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;} 
           #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;} 
           #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;} 
           #cboxPrevious{left:0px; background-position: -51px -25px;} 
           #cboxPrevious.hover{background-position:-51px 0px;} 
           #cboxNext{left:27px; background-position:-75px -25px;} 
           #cboxNext.hover{background-position:-75px 0px;} 
           #cboxClose{right:0; background-position:-100px -25px;} 
           #cboxClose.hover{background-position:-100px 0px;} 
           .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;} 
           .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;} 
           .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;} 
           .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;} 
    /*-----------------------------------------------------------------------------------*/ 
    /*   Facebook Likebox popup For Blogger Version 2.0 
    /*-----------------------------------------------------------------------------------*/ 
    #subscribe { 
        font: 12px/1.2 Arial,Helvetica,san-serif; color:#666; 
    } 
    #subscribe a, 
    #subscribe a:hover, 
    #subscribe a:visited { 
        text-decoration:none; 
    } 
    .box-title { 
       color: #F66303; 
       font-size: 18px !important; 
       font-weight: bold; 
       margin: 10px 0; 
    border:1px solid #ddd; 
    -moz-border-radius:6px; 
    -webkit-border-radius:6px; 
    border-radius:6px; 
    box-shadow: 5px 5px 5px #CCCCCC; 
    padding:10px; 
    line-height:25px; font-family:arial !important; 
    }

    .box-tagline { 
       color: #999; 
       margin: 0; 
       text-align: center; 
    } 
    #subs-container { 
        padding: 35px 0 30px 0; 
        position: relative; 
    } 
    a:link, a:visited { 
    border:none; 
    } 
    .demo { 
    display:none; 
    }

/* ---------Nordax Subscribe Form---------- */
    .box-title1 { 
    border:1px solid #ddd; 
    -moz-border-radius:6px; 
    -webkit-border-radius:6px; 
    border-radius:6px; 
    box-shadow: 5px 5px 5px #CCCCCC; 
        padding:10px; 
  margin: 10px 0; 
    }
    .enteryouremail{ 
background: #fff !important;
border: 1px solid #d2d2d2; 
padding: 0px 8px 0px 8px; 
color: #a19999; font-size: 12px; 
height: 25px; width: 165px; 
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
margin:0px; 
}
    .submitbutton{ 
background:#F66303; 
border: 1px solid #F66303; 
text-shadow: 1px 1px 1px #333; 
box-shadow: 3px 3px 3px #666; 
font:bold 12px Arial, sans-serif; 
color: #fff; 
height: 25px; 
padding: 0 12px 0 12px; 
margin: 0 0 0 5px; 
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
cursor:pointer;}
    </style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script> 
<script src="http://mybloggertricks.googlecode.com/files/jquery.colorbox-min.js"></script> 
<script type="text/javascript"> 
jQuery(document).ready(function(){ 
   if (document.cookie.indexOf('visited=true') == -1) { 
       var fifteenDays = 1000*60*60*24*30; 
       var expires = new Date((new Date()).valueOf() + fifteenDays); 
       document.cookie = "visited=true;expires=" + expires.toUTCString(); 
   $.colorbox({width:"400px", inline:true, href:"#subscribe"}); 
       } 
}); 
</script> 
  
  
        <div style='display:none'> 
       <div id='subscribe' style='padding:10px; background:#fff;'> 
            <h3 class="box-title">إظغط على زر "أعجبني" حتى يتسنى لك متابعة جديد المدونة عبر الفايسبوك<center><p style="line-height:3px;" >▼</p></center></h3> 
          <center>

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fnordax.ma&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
</center> 
<div class="box-title1 ">
<center> 
<h3 style="color:#F66303;">يمكنك كذلك متابعة جديد المدونة عبر البريد الإلكتروني - الخذمة مجانية</h3> 
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=cba9s78j7o1qu6gkvui13tmn90', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10"  class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;أضف بريدك الإلكتروني هنا... &#39;;}" onfocus="if (this.value == &#39;أضف بريدك الإلكتروني هنا...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="cba9s78j7o1qu6gkvui13tmn90" name="uri" type="hidden" /><input value="إشترك الآن" class="submitbutton" type="إشترك الآن" /></form>
</center> 
</div></div></div>

نأتي الآن إلى التغييرات .. !

بالنسبة للكتابة الملونة بالأحمر يمكنك تغييرها بالجمل التي تراها مناسبة لك، لدعوة الزوار للإشتراك في تحديثات مدونتك.

بالنسبة لِـ "nordax.ma"

عليك تغييره باسم صفحتك على الفيسبوكْ.

إذا أردت أن يتكرر ظهور صندوق الإعجاب لزوار مدونتك، في كل مرة يزورون فيها مدونتك، ماعليكَ سوى حذف "*30" من الكود، و الذي يمثل عدد الأيام بين كل ظهور.

بالنسبة للرموز التالية " cba9s78j7o1qu6gkvui13tmn90"

عليك تغييره برمز الفيد الخاص بك، و يمكنك الحصول عليه من رابط الفيد الخاص بمدونتك، 

مثلاً بالنسبة لي هذا هو رابط الفيد الخاص بي  

http://feedburner.google.com/fb/a/mailverify?uri=cba9s78j7o1qu6gkvui13tmn90

بعد ذلك اظغط "حفظ" ، ومبروك عليك الإضافة الرائعة.

أي استفساراتْ أنا دائما رهن الإشارة، فلا تبخلو عني بتعليقاتكم,, !

إلى موضوغ آخر و فكرة أخرى

دمتم بود :) 

Unknown

7:16 ص

أكمل القراءة...

اضافة صندوق اعجاب الفيس بوك متحرك مع الصفحة 2014

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

مرحبا بكم في بلوجر حياتي اضافة صندوق اعجاب الفيس بوك متحرك مع الصفحة 2014الاضافة لن تجدها الي في بلوجر حياتي ،الاضافة عبر عن صندوق منبثق متحرك مع الصفحة وشكل الصندوق جذاب جدا واحترافي، زود عدد المعجبين بصفحتك علي الفيس بوك باضافة هذا الصندوق الجميل جدا  

اضافة صندوق اعجاب الفيس بوك متحرك مع الصفحة 2014

صورة من الاضافة

لتركيب الاضافة علي مدونتك ادخل علي لوحة تحكم مدونتك واختار التخطيط  ثم بعد ذلك اختار اضافة اداة

 بعد ذلك اختار  html /javascript والصق الكود في المربع

<style>
#ptftopbar {
border-radius: 10px;
height:30px;
width:auto;
background: #005094 url('..');
background-repeat:repeat-x;
text-align:left;
padding-top:4px;
}
#fbground {
border-radius: 10px;
border: 3px ;
height:600;
margin:0 auto;
width: 160px;
background:#fff;
border-bottom:2px #005094 solid;
border-right:2px #005094 solid;
border-left:2px #005094 solid;
text-align:center;
padding:4px;
}

#headlineatas {
opacity:1.0;
height:auto;
width:auto;
position:fixed;
top:65px;
left:10px;
border-bottom:1px #005094 solid;
border-bottom:0px blue solid;
color:#660000;
padding:1px;
z-index:1001;
font-size:13px;}
</style>
<script type="text/javascript">
function getValue()
{
document.getElementById("headlineatas").style.display = 'none';
}
</script>
<div id="headlineatas">
<div id="ptftopbar">
<img align="left" style="padding-right:2px;" src="http://i50.tinypic.com/34p1d6u.png" />
<span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em">ادعمناعلي الفيس بوك </span>
<span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em;float:right;padding-top:3px;padding-right:10px"><a href="http://www.facebook.com/hh5050?ref=hl" target="_blank" onclick="getValue()">Close</a></span>
</div>

<div id="fbground">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fhh5050?ref=hl&amp;width=200&amp;height=200&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=false&amp;appId=221777087880548" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:140px; height:258px;" allowtransparency="true"></iframe>
</div>
<br/></div>

ملاحظة هامة غير مابلون الاحمر الي حسابك في الفيس بوك

ان وفقت فهذا من الله وان اخطاءت فمن نفسي والشيطان

Unknown

7:13 ص

أكمل القراءة...

افضل 10 قوالب اخبارية لمدونات بلوجر

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

 

1-قالب وطن 24 الاخباري الاخضر

معاينة                                     تحميل

2- قالب وطن 24 الاخباري البرتقالي

معاينة                                     تحميل

3- قالب اخبار ثيم news theme

 معاينة                                     تحميل

4- قالب اخبار ثيم news theme 2

 معاينة                                     تحميل

5- قالب اتقان الاخباري it9an news

معاينة                                     تحميل

6- قالب راصد نيوز rased news للبلوجر

معاينة                                     تحميل

7-القالب الإخبارى Simplex News Portal 

معاينة                                     تحميل

8-القالب الإخبارى Simlpex Celebrity لمدونات بلوجر

معاينة                                     تحميل

9- قالب بلوجر إخباري resizable

معاينة                                     تحميل

10- قالب بلوجر إخباري Fresh Life

معاينة                                     تحميل

وفي الختام اتمني ان مجموعة القوالب الجميلة هذه قد نالت اعجابك والي اللقاء في تدوينة جديدة ومجموعة اخري من القوالب المعربة .

Unknown

7:01 ص

أكمل القراءة...

اضافة كود تنبهة لاشتراك في المواقع الاجتماعية

اليوم درس جميل ومفيد جدا،اضافة  كود تنبهة لاشتراك في المواقع الاجتماعية، الاضافة تزيد من مشتركين المدونة الاضافة خفيفية علي المدونة ،والاضافة تنزلق مع المدونة وعند الوصول الي لمنتصف تختفي الاضافة ، والاضافة بها ثلاث ازرار من المواقع الاجتماعية موقع التويتر ،موقع الفيس بوك ،جوجل بلس+1

صورة الاضافة 

 ولتطبيق الاضافة

نذهب إلى لوحة تحكم مدونتك وتقوم بالضغط على التخطيط ثم على ،إضافة أداة ؛ ثم بعد ذلك تختار، html/java script وتقوم بوضع هذا الكودفي المربع

الكود 

******************************************************************

<script type="text/javascript" src="https://cnmu.googlecode.com/svn/trunk/slidesubsc.js"></script>

<script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#mblsocialslide").show("slow");else $("#mblsocialslide").hide("slow");});function closeMBlsocialslide(){$('#mblsocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>

<style>

#mblsocialslide{background:#f3f3f3;border:1px solid #BBBBBB;border-radius:9px;box-shadow: 0 1px 2px #999;padding:12px 14px 12px 14px;width:300px;position:fixed;bottom:13px;right:2px;display:none;z-index:3;height:65px;}

</style>

<div style="display: none;" id="mblsocialslide">

<a style="position:absolute;top:12px;right:10px;color:#555;font-size:15px;font-weight:bold;color:#C53A1E;" href="javascript:void(0);" onclick="return closeMBlsocialslide();">(X)</a>

<span style="font-size: 20px; margin: 10px 20px; text-shadow: 1px 1px 0 #FFFFFF;">لا تنسى الإنضمام الى متابعينا</span><br />

<div style="float:left; margin:15px;"><g:plusone annotation="none"></g:plusone></div>

<div style="float:left; margin:15px;"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fhh5050?ref=hl&amp;send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe></div>

<div style="float:left; margin:15px;"><a href="https://twitter.com/hh5050" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Follow Us</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

</script>

</div>

</div>

<div class='clear'></div>

                                  ***********************************************************

ملاحظة ::: يجب تغير   hh5050?ref=hlبرابط الفيس بوك

                                                         وغير hh5050برابط التويتر

Unknown

6:48 ص

أكمل القراءة...