ازرار المواقع الاجتماعيه بشكل جميل وذات تأثير رائع

 

السلام عليكم! في هذا الموضوع ساتطرق لكيفية اضافة ازرار

المواقع الاجتماعيه بشكل انيق وذات تأثير جميل كما في الصوره اعلاه

 طبعا تم ترجمة الموضوع من قِبل مدونة ارشيف بلوجر ,المصدر 

فارجو ان تنال الاضافة اعجابكم الان مع كيفية التركيب.

1. اذهب للوحة تحكم مدونتك.
2. اذهب إلى تخطيط .
3.  اضف اداة HTML/Javascript' و الصق الكود التالي بداخلها  ثم حفظ.

/*--------Social Sharing Widget ------*/
<style type="text/css">
.socialsharing {
display: block;
margin: 2em auto;
width: 200px;
height:40px;
}
.socialsharing span {
float: left;
display: inline;
margin-right: 8px;
}
.socialsharing span a {
display: block;
width: 32px;
height: 32px;
text-indent: -9999px;
background-color: none;
background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Bten41esdYn9X51WIBg9n_Ejqq1a2BSmkGPZmZYzp6WsjN2XNRHPP6vdA_KpvGeKeXpY8l-7Lx5pFwzwP6rIYzu4ICMQ81Qr5eYkJv5Q9ng9zBHzqqIWwpN_3qxMggZIlBc6NPDbbL-L/s1600/social+icon.png") 0 0 no-repeat;
}
#iconTwitter {background-position: -33px -33px;}
#iconFacebook {background-position: -66px -33px;}
#iconRSS {background-position: 0 -33px;}
#iconYouTube {background-position: -99px -33px;}
#iconGooglePlus {background-position: -132px -33px;}
#iconTwitter:hover {background-position: -33px 0;}
#iconFacebook:hover{background-position:-66px 0}
#iconRSS:hover{background-position:0 0}
#iconYouTube:hover{background-position:-99px 0}
#iconGooglePlus:hover{background-position:-132px 0}
</style>

<div class="socialsharing">
<a href="http://www.twitter.com/bloggerarchive" id="iconTwitter" target="_blank" title="Follow us on Twitter">Twitter</a>
<a href="http://www.facebook.com/bloggerarchive" id="iconFacebook" target="_blank" title="Join us at Facebook">Facebook</a>
<a href="http://feeds.feedburner.com/bloggerarchive" id="iconRSS" target="_blank" title="Subscribe our RSS Feed">RSS</a>
<a href="http://www.blogger.com/youtube.com/bloggerarchive" id="iconYouTube" target="_blank" title="Follow our YouTube Channel">YouTube</a>
<a href="https://plus.google.com/123456789005648565/posts" id="iconGooglePlus" target="_blank" title="Follow us at Google+">Google</a></div>

عدل الاجزاء الملونه في الكود بالمطلوب.

واي استفسار يمكنك وضعه في تعليق في هذه التدوينيه وسيتم الرد عليه في اقرب وقت ممكن.

تحياتي.

اضافة تأثير تكبير الصوره وانزلاق الطبقه الاماميه منها عند تحريك المؤشر فوقها

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

اقدم لكم في هذا الموضوع كيفية اضافة تأثير جميل على الصوره 

كمت ترا اعلاه فإن الصوره تكبر عند تحريك المؤشر عليها يمكنك

استخدام هذه الاضافة في امور التبادل الاعلاني او قد تستخدم بالنسبه

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

وغيرها الاستخدامات المختلفه  تم ترجمة الموضوع من

 قِبل مدونة ارشيف بلوجر ,المصدر 

فارجو ان تنال الاضافة اعجابكم الان مع كيفية التركيب.

1. اذهب للوحة تحكم مدونتك .
2. القالب.
3. تحرير HTML'
4. متابعه و اشر على توسيع القوالب.
5. اضغط Ctrl+F من لوحة المفاتيح.
6. ابحث عن الوسم التالي:

  ]]></b:skin>

7. قم بلصق الكود التالي فوقه مباشره:

/* The CSS3 image galler by blogger-archive.com */
.photos {
    width: 300px;
    height: 300px;
    margin: 100px auto;
    position:relative;}
.photos > div {
    background-color: rgba(128, 128, 128, 0.5);
    border: 2px solid #444;
    float: left;
    height: 70px;
    margin: 5px;
    overflow: hidden;
    position: relative;
    width: 70px;
    z-index: 1;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    -webkit-transform:scale(1.0);
    -moz-transform:scale(1.0);
    -ms-transform:scale(1.0);
    -o-transform:scale(1.0);
    transform:scale(1.0);
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.photos > div img{
    width: 100%;
}
.photos > div:hover{
    z-index: 10;
    -webkit-transform:scale(2.0);
    -moz-transform:scale(2.0);
    -ms-transform:scale(2.0);
    -o-transform:scale(2.0);
    transform:scale(2.0);
}
.photos > div div {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC8S5dLC82Vt7PExIdnn-_Pi3flBZuCqogq-9BIUIv7v2uFauyce6vc7yvGaYqYYAfaVHys8oY9-9ORlhthSe8HKWDoF-GR8cIrvCTtLn128fs1yM02NNleaO0-ztpJPPM69xt-IDx31o/s1600/hover.gif) repeat scroll 0 0 transparent;
    cursor: pointer;
    height: 100px;
    left: 0;
    opacity: 0.7;
    position: absolute;
    top: 0;
    width: 100px;
    z-index: 15;
    -webkit-transition-duration: 1.5s;
    -moz-transition-duration: 1.5s;
    -ms-transition-duration: 1.5s;
    -o-transition-duration: 1.5s;
    transition-duration: 1.5s;
}
.photos > div:nth-child(1):hover div {
    height: 0%;
}
.photos > div:nth-child(2):hover div {
    height: 0%;
    margin-top: 100px;
}
.photos > div:nth-child(3):hover div {
    width: 0%;
}
.photos > div:nth-child(4):hover div {
    margin-left: 100px;
    width: 0%;
}
.photos > div:nth-child(5):hover div {
    height: 0%;
    margin-left: 150px;
    margin-top: 50px;
    width: 0%;
}
.photos > div:nth-child(6):hover div {
    margin-left: 150px;
    width: 0%;
}
.photos > div:nth-child(7):hover div {
    height: 0%;
    margin-left: 150px;
    margin-top: 50px;
    width: 0%;
    -webkit-transform: rotateX(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
}
.photos > div:nth-child(8):hover div {
    height: 0%;
    margin-left: 150px;
    margin-top: 50px;
    width: 0%;
    -webkit-transform: rotateZ(600deg);
    -moz-transform: rotateZ(600deg);
    -ms-transform: rotateZ(600deg);
    -o-transform: rotateZ(600deg);
    transform: rotateZ(600deg);
}
.photos > div.pair div {
    width: 100px;
}
.photos > div.pair div:nth-child(odd) {
    margin-left: 100px;
}
.photos > div.pair:hover div {
    width: 0%;
}
.photos > div.pair:hover div:nth-child(odd) {
    margin-left: 100px;
}

8. اضغط حفظ.

9.اذهب إلى تخطيط .

10. اضف اداة HTML/Javascript' و الصق الكود التالي بداخلها  ثم حفظ.

<div class="photos">
            <div>
                <a href="الرابط" target="blank"><img src="رابط الصوره1" /></a>
                <div></div></div><div>
    
                <a href="الرابط" target="blank"><img src="رابط الصوره2" /></a>
                <div></div><div></div>
           
                <a href="الرابط" target="blank"><img src="رابط الصوره3" /></a>
                <div></div><div></div>
            
                <a href="الرابط" target="blank"><img src="رابط الصوره4" /></a>
                <div></div><div></div>
           
                <a href="الرابط" target="blank"><img src="رابط الصوره5" /></a>
                <div></div><div></div>
            
                <a href="الرابط" target="blank"><img src="رابط الصوره6" /></a>
                <div></div><div></div>
            
                <a href="الرابط" target="blank"><img src="رابط الصوره7" /></a>
                <div></div><div></div>
            
                <a href="الرابط" target="blank"><img src="رابط الصوره8" /></a>
                <div></div> </div>
           
                <div class="pair">
                <a href="الرابط" target="blank"> <img src="رابط الصوره9" /></a>
                <div></div> <div></div>
            </div>
        </div>

 الان عدل " رابط الصوره "  الذي في الكود اعلاه برابط الصوره التي تريدها .

عدل " الرابط  "  الذي في الكود اعلاه برابط الذي تريده ان يفتح عند نقر الشخص على احدى الصور.

واي استفسار يمكنك وضعه في تعليق في هذه التدوينيه وسيتم الرد عليه في اقرب وقت ممكن.

تحياتي.

ازرار المواقع الاجتماعية عائمة تخرج من الدائره عند تحريك الماوس فوقها

 

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

 اهلا وسهلا بكم في موضوع جديد وهذه المره اقدم لكم شرح اضافة

كما ترون في الصورة اعلاه فهي دائره مكتوب فيها "SHARE"  عند

تحريك المؤشر فوقها تخرج ازرار المواقع الاجتماعيه منها 

طبعا هذه الاضافة تكون عائمة في كل صفحات المدونه

  تم ترجمة الموضوع من قِبل مدونة ارشيف بلوجر ,المصدر 

فارجو ان تنال الاضافة اعجابكم الان مع كيفية التركيب.

1. اذهب للوحة تحكم مدونتك .
2. القالب.
3. تحرير HTML'
4. متابعه و اشر على توسيع القوالب.
5. اضغط Ctrl+F من لوحة المفاتيح.
6. ابحث عن الوسم التالي:

  <div class=’post-footer-line post-footer-line-1′>

7.الان الصق الكود التالي بعد الوسم مباشرة.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
.ringMenu {
width: 100px;
margin: 150px auto;
}
.ringMenu ul {
list-style: none;
position: relative;
width: 100px;
color: white;
}
.ringMenu ul a {
color: white;
}
.ringMenu ul li {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.ringMenu ul li a {
display: block;
width: 100px;
height: 100px;
background: rgba(50,50,50,0.7);
text-align: center;
line-height: 100px;
-webkit-border-radius: 50px;
border-radius: 50px;
font-size: 20px;
}
.ringMenu ul li a:hover {
background: rgba(230,150,20,0.7);
text-decoration: none;
}

.ringMenu ul li:not(.main) {
-webkit-transform: rotate(-180deg) scale(0);
-moz-transform: rotate(-180deg) scale(0);
-o-transform: rotate(-180deg) scale(0);
transform: rotate(-180deg) scale(0);
opacity: 0;
}
.ringMenu:hover ul li {
-webkit-transform: rotate(0) scale(1);
-moz-transform: rotate(0) scale(1);
-o-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
opacity: 1;
}
.ringMenu ul li.top {
-webkit-transform-origin: 50% 152px;
-moz-transform-origin: 50% 152px;
-o-transform-origin: 50% 152px;
transform-origin: 50% 152px;
position: absolute;
top: -70px;
left: 50px;
}
.ringMenu ul li.bottom {
-webkit-transform-origin: 50% -52px;
-moz-transform-origin: 50% -52px;
-o-transform-origin: 50% -52px;
transform-origin: 50% -52px;
position: absolute;
bottom: -70px;
left: 50px;
}
.ringMenu ul li.right {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
top: 10px;
right: -50px;
}
.ringMenu ul li.left {
-webkit-transform-origin: 152px 50%;
-moz-transform-origin: 152px 50%;
-o-transform-origin: 152px 50%;
transform-origin: 152px 50%;
position: absolute;
top: 10px;
left: -50px;
}
</style>
<div class="ringMenu">
<script type="text/javascript">var switchTo5x=false;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "ur-e9856caa-8f3b-40a6-82af-461e390fe167"});</script>
<ul>
<li class="main"><a href="#main">SHARE</a></li>
<li class="top"><span class='st_fblike_vcount' displayText='Like'></span></li>
<li class="right"><span class='st_sharethis_vcount' displayText='Share'></span></li>
<li class="bottom"><span class='st_plusone_vcount' displayText='+1'></span></li>
<li class="left"><span class='st_twitter_vcount' displayText='Tweet'></span></li>
</ul>
</div>
</b:if>

اضغط حفظ وبهذا تكون انتهيت.

طبعاً اي استفسار يمكنك وضعه في تعليق هنا كما ارجو منك

الضغط على ازرار المواقع الاجتماعيه ادناة

تحياتي.

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

 

السلام عليكم! في هذا الموضوع ساتطرق لكيفية اضافة صندوق المتابعين 

او المتابعه في تويتر طبعا هو شبيه بالتابع للفيس بوك لكن هذا لتويتر

طبعا تم ترجمة الموضوع من قِبل مدونة ارشيف بلوجر ,المصدر 

فارجو ان تنال الاضافة اعجابكم الان مع كيفية التركيب.

1. اذهب للوحة تحكم مدونتك.
2. اذهب إلى تخطيط .
3.  اضف اداة HTML/Javascript' و الصق الكود التالي بداخلها  ثم حفظ.

<!-- Twitter Follower Box www.blogger-archive.com -->
<script type='text/javascript'>
function fanbox_init(screen_name){document.getElementById('twitterfanbox').innerHTML='\<iframe name=\"fbfanIFrame_0\" frameborder=\"0\" allowtransparency=\"true\" src=\"http://s.moopz.com/connect.html?user='+screen_name+'\" class=\"FB_SERVER_IFRAME\" scrolling=\"no\" style=\"width: 295px; height: 250px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; \"\>\<\/iframe\>';}
</script>
<div id="twitterfanbox"></div><script
type="text/javascript">fanbox_init("BloggerArchive");</script
type="text>
<!-- End Twitter Follower Box -->

 الان عدل " BloggerArchive "  الذي في الكود اعلاه باسمك في تويتر .

واي استفسار يمكنك وضعه في تعليق في هذه التدوينيه وسيتم الرد عليه في اقرب وقت ممكن.

تحياتي.

شريط علوي متعدد الالوان للبلوجر و الوورد برس

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

 اهلا وسهلا بكم في موضوع جديد وهذه المرة عن القوائم العلويه

هي شئ مهم تساعد الزائر على الوصول للاقسام او الصفحات بشكل اسرع

طبعا تم ترجمة الموضوع من قِبل مدونة ارشيف بلوجر ,المصدر 

فارجو ان تنال الاضافة اعجابكم الان مع كيفية التركيب.

1. اذهب للوحة تحكم مدونتك .
2. القالب.
3. تحرير HTML'
4. متابعه و اشر على توسيع القوالب.
5. اضغط Ctrl+F من لوحة المفاتيح.
6. ابحث عن الوسم التالي:

  ]]></b:skin>

7. قم بلصق الكود التالي فوقه مباشره:

/* The CSS Code for the menu starts here blogger-archive.com */
.cbdb-menu li {
    display: block;
    float: left;
    line-height: 35px;
    list-style:none;
    margin: 0 5px;}
.cbdb-menu li a {
    /* This generators the gradient on top of the solid color */
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, rgba(255,255,255,.5)),
        color-stop(1, rgba(0,0,0,.1))
    );
    background-image: -moz-linear-gradient(
        center top,
        rgba(255,255,255,.5) 0%,
        rgba(0,0,0,.1) 100%
    );
    color: #f4f4f4; /* IE */
    color: rgba(255, 255, 255, 0.8);
    display: block;    
    font: bold 18px "Myriad Pro","Lucida Grande",Helvetica,Arial,sans-serif;        
    outline:none;
    padding: 5px 15px;
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
    -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
    -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);    }
    .cbdb-menu li a:active {
        background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0,rgba(255,255,255,.5)),
            color-stop(.1,rgba(255,255,255,.2)),
            color-stop(.85, rgba(0,0,0,.2)),
            color-stop(100, rgba(0,0,0,.4))
        );
        background-image: -moz-linear-gradient(
            center bottom,
            rgba(255,255,255,.5) 0%,
            rgba(255,255,255,.2) 10%,
            rgba(0,0,0,.2) 85%,
            rgba(0,0,0,.4) 100%
        );
    }
/* Dark Text */
.cbdb-menu li a.dark {
    color: #333; /* IE */
    color: rgba(0, 0, 0, 0.8);
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
}
/*********** COLORS *************/
/* Create your own class for your own colors */
.red {
    background: #B80202;
    border: #B80202 1px solid}
    .red:hover, .red:focus{
        background-color:#e30606
   }
.green {
    background: #46c431;
    border: #46c431 1px solid}
    .green:hover,.green:focus {
        background-color:#44e329
    }
.yellow {
    background: #D9CE1C;
    border: #D9CE1C 1px solid}
    .yellow:hover,.yellow:focus {
     background-color:#eee117}
.cyan {
    background: #23c6de;
    border: #23c6de 1px solid}
    .cyan:hover,.cyan:focus {
     background-color:#18d8f4
    }
.blue {
    background: #3271d9;
    border: #3271d9 1px solid}
    .blue:hover,.blue:focus {
     background-color:#377ef2
    }
   

7.الان اضغط حفظ.

8.الان اضغط على تخطيط و اضف اداة "HTML/Javascript"

9.الصق احدى الاكواد التاليه:

الشريط ذا الكتابه البيضاء:

  طبعا في الكود تم استبدال الكتابه الانجليزيه إلى العربيه

فيجب عليك تعديلها وتعديل الروابط.

<ul class="cbdb-menu">

  <li><a href="#" class="red">الرائيسيه</a> </li>
  <li><a href="#" class="green">تعديل</a></li>
  <li><a href="#" class="yellow">تعديل</a></li>
  <li><a href="#" class="cyan">تعديل</a> </li>
  <li><a href="www.blogger-archive.com" class="blue">تعديل</a></li>

</ul>   

 الكتابه الزرقاء اسم الزر 

و الحمراء الرابط.

كذالك اذا اردت ان تكون الكتابه في الازرار سوداء عدل نفس التعديلات في الكود التالي:

<ul class="cbdb-menu">
  <li><a href="#" class="red dark">الرائيسيه</a> </li>
  <li><a href="#" class="green dark">تعديل</a></li>
  <li><a href="#" class="yellow dark">تعديل</a></li>
  <li><a href="#" class="cyan dark">تعديل</a> </li>
  <li><a href="http://www.blogger-archive.com/" class="blue dark">تعديل</a></li>
  </li>
</ul>   

اخيرا ارجو ان يستفيد الجميع من الموضوع

و اي استفسار يمكنك وضعه في تعليق

وساقوم بالاجابه عنه في اقرب وقت

ممكن ان شاء الله.

تحيااتي.

كيفية اضافة تأثير جميل على التسميات في بلوجر بـCSS

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

 

كيفكم؟؟

 

يسرني ان اقدم لكم  شرح لكيفية اضافة تأثير على التسميات في المدونة

بحيث عند تحريك المؤشر فوق اسم اي قسم يحدث له التأثير كما في الصوره اعلاه

 

طبعا تم ترجمة الموضوع من قِبل مدونة ارشيف بلوجر ,المصدر 

فارجو ان تنال الاضافة اعجابكم الان مع كيفية التركيب.

1. اذهب للوحة تحكم مدونتك .
2. القالب.
3. تحرير HTML'
4. متابعه و اشر على توسيع القوالب.
5. اضغط Ctrl+F من لوحة المفاتيح.
6. ابحث عن الوسم التالي:

  ]]></b:skin>

7. قم بلصق الكود التالي اسفله مباشره:

/*-----Custom Labels Cloud widget by www.blogger-archive.com----*/
.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;font-size:10px;color:#666;}

.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.label-size a {
text-transform: uppercase;
float:left;
text-decoration: none;
}.label-size a:hover {
text-decoration: none;
}

 الان اضغط حفظ.

 

 

اخيرا ارجو ان يستفيد الجميع من الموضوع

و اي استفسار يمكنك وضعه في تعليق

وساقوم بالاجابه عنه في اقرب وقت

ممكن ان شاء الله.

تحيااتي.

ازرار المواقع الاجتماعية عائمة بشكل جميل جدا جنب الصفحه

 

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

ها نحن اليوم مرة اخرى مع اضافة جديده ومميزه للمدونات وهي عبارة

شريط عائم جنب المدونة يحوي ازرار المواقع الاجتماعيه  بشكل جميل ورائع

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

فارجو ان تنال الاضافة اعجابكم الان مع كيفية التركيب.

1. اذهب للوحة تحكم مدونتك .
2. القالب.
3. تحرير HTML'
4. متابعه و اشر على توسيع القوالب.
5. اضغط Ctrl+F من لوحة المفاتيح.
6. ابحث عن الوسم التالي:

  ]]></b:skin>

7. قم بلصق الكود التالي فوقه مباشره:

/* The CSS Code for the menu starts here http://www.blogger-archive.com/ */
/* CoolDoood Social Network Tabs */
.MBC ul, .MBC li, .MBC h3 {
padding: 0;
margin: 0;
list-style: none!important;
}
.MBC {
font-size: 12px;
color: #666;
}
.active.MBC .mbc-slider {
-webkit-box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.6);
}
.MBC a {
text-decoration:none;
}
.MBC-content {
position: relative;
}
.social-tabs li {
padding: 4px;
width: 27px;
height: 26px;
z-index: 10;
}
.active .social-tabs li {
z-index: 10;
-webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6);
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6);
}
.active .social-tabs li.active {
z-index: 11;
-webkit-box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.6);
}
.static .social-tabs {
padding-left: 8px;
}
.static .social-tabs li {
float: left;
margin-right: 2px;
border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
}
.top .social-tabs {
padding-left: 8px;
}
.top.align-right .social-tabs {
padding-left: 0;
padding-right: 8px;
}
.top .social-tabs li {
padding: 3px 4px;
margin-right: 2px;
float: left;
border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
}
.right .social-tabs {
padding-top: 8px;
}
.right .social-tabs li {
margin: 0 0 2px 0;
border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
}
.bottom .social-tabs {
padding-left: 8px;
}
.bottom.align-right .social-tabs {
padding-left: 0;
padding-right: 8px;
}
.bottom .social-tabs li {
padding: 4px 4px 2px 4px;
margin: 0 2px 0 0;
float: left;
border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
}
.left .social-tabs {
padding-top: 8px;
}
.left .social-tabs li {
margin: 0 0 2px 0;
border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
}
.mbc-slider, .MBC-slider {
clear: both;
overflow: hidden;
}
.tab-content {
position: relative;
overflow: hidden;
z-index: 11;
background: url no-repeat center 200px;
}
.tab-content ul {
font-size: 11px;
}
.tab-content .tab-inner {
background: #fff;
overflow: hidden;
}
.tab-inner ul {
padding: 0 10px;
}
.tab-inner .profile {
position: relative;
padding: 10px;
border-bottom: 1px solid #ccc;
background: #ececec;
}
.tab-inner .profile h3 {
margin: 0;
padding: 3px 0 3px 26px;
position: relative;
}
.tab-inner .profile h3 a {
font-size: 14px;
text-decoration: none;
}
.tab-inner .profile h3, .tab-inner .profile h3 a {
color: #555;
text-shadow: 0 1px 0 #fff;
}
.tab-inner .MBC-btn {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
font: bold 12px/14px Arial, sans-serif;
display:inline-block;
text-decoration:none;
outline:none;
padding: 5px 8px;
background: #fcfcfc url repeat-x 0 0;
color: #fff;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}
.tab-inner .MBC-btn:hover{
background-position: 0 100%;
color: #fff;
}
.tab-inner .profile a.avatar{
display:block;
float:left;
text-decoration:none;
outline:none;
margin:0 10px 0 0
}
.tab-inner .profile a.avatar img{
padding:1px;
background: #fff;
border: 3px solid #ccc;
display:block
}
.tab-rss .profile h3 {
background: urlno-repeat 0 4px;
}
.tab-flickr .profile h3 {
background: url no-repeat 0 4px;
}
.tab-delicious .profile h3 {
background: url) no-repeat 0 4px;
}
.tab-twitter .profile h3 {
background: url no-repeat 0 4px;
}
.tab-facebook .profile h3 {
background: url no-repeat 0 4px;
}
.tab-fblike .profile h3 {
background: url no-repeat 0 4px;
}
.tab-fbrec .profile h3 {
background: url no-repeat 0 4px;
}
.tab-google .profile h3 {
background: url no-repeat 0 4px;
}
.tab-youtube .profile h3 {
background: url no-repeat 0 4px;
}
.tab-pinterest .profile h3 {
background: url no-repeat 0 4px;
}
.tab-lastfm .profile h3 {
background: url no-repeat 0 4px;
}
.tab-dribbble .profile h3 {
background: url no-repeat 0 4px;
}
.tab-vimeo .profile h3 {
background: url no-repeat 0 4px;
}
.tab-stumbleupon .profile h3 {
background: url no-repeat 0 4px;
}
.static .mbc-slider, .static .MBC-slider {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.static .tab-content {
padding: 10px;
}
.static .tab-inner {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.top .mbc-slider, .top .MBC-slider {
border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
}
.top .tab-inner {
border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
}
.top .tab-content {
padding: 0 10px 10px 10px;
}
.right .mbc-slider, .right .MBC-slider {
border-radius: 10px 0 0 10px;
-webkit-border-radius: 10px 0 0 10px;
-moz-border-radius: 10px 0 0 10px;
}
.right .tab-inner {
border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
}
.right .tab-content {
padding: 10px 0 10px 10px;
}
.bottom .mbc-slider, .bottom .MBC-slider {
border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
}
.bottom .tab-inner {
border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
}
.bottom .tab-content {
padding: 10px 10px 0 10px;
}
.left .mbc-slider, .left .MBC-slider {
border-radius: 0 10px 10px 0;
-webkit-border-radius: 0 10px 10px 0;
-moz-border-radius: 0 10px 10px 0;
}
.left .tab-inner {
border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
}
.left .tab-content {
padding: 10px 10px 10px 0;
}
.MBC .stream, .mbc .stream {
overflow: hidden;
}
.stream p {
margin: 0;
padding: 0;
}
.tab-inner ul li {
padding: 5px 0 20px 0;
margin: 0;
position: relative;
overflow: hidden;
background: none;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
}
.tab-inner ul li .thumb {
float: left;
margin: 0 10px 0 0;
}
.tab-inner ul li .thumb img {
border: 3px solid #ececec;
padding: 1px;
background: #fff;
}
.tab-inner ul li .logo {
margin-bottom: 3px;
}
.tab-inner ul li .title {
display: block;
font: bold 12px Arial, sans-serif;
margin-bottom: 3px;
}
.tab-inner ul li .title.clear {
clear: both;
}
.tab-inner ul li .text {
display: block;
}
.tab-inner ul li .text br{
display: none;
}
.tab-inner ul li .date {
position: absolute;
bottom: 5px;
left: 0;
font-style: italic;
color: #999;
font-size: 90%;
}
.tab-inner ul li .meta {
display: block;
font-size: 90%;
color: #999;
}
.tab-inner ul li .meta span {
margin: 0 8px 5px 0;
display: block;
float: left;
padding: 0 0 0 15px;
line-height: 12px;
}
.tab-dribbble .tab-inner ul li .thumb img {
margin-bottom: 5px;
}
.tab-lastfm .tab-inner ul li .title {
background: url no-repeat 0 0;
padding-left: 17px;
margin-bottom: 0;
}
.tab-google .tab-inner ul li .title {
margin-bottom: 5px;
}
.tab-vimeo .tab-inner ul li .text {
margin-bottom: 5px;
}
.tab-inner ul li .meta span.plusones {
padding-left: 0;
}
.tab-inner ul li .meta span.shares {
background: url no-repeat 0 0;
padding-left: 20px;
}
.tab-inner ul li .meta span.views {
background: url no-repeat 0 0;
padding-left: 18px;
}
.tab-inner ul li .meta span.likes {
background: url no-repeat 0 0;
padding-left: 16px;
}
.tab-inner ul li .meta span.comments {
background: url no-repeat 0 0;
}
.tab-inner ul li .meta span.users {
background: url no-repeat 0 0;
}
.tab-inner ul li .meta span.videos {
background: url no-repeat 0 0;
padding-left: 16px;
}
.tab-inner ul li.MBC-error {
color: #990000;
}
.MBC-loading {
background: url no-repeat 10px center;
padding: 10px 30px 10px 42px;
}
.controls {
position: absolute;
left: 10px;
height: 20px;
padding: 5px 0;
z-index: 12;
display: none;
background: url) repeat 0 0;
}
.controls ul {
padding: 0 10px;
}
.controls li {
display: inline;
}
.controls a {
display: block;
width: 20px;
height: 20px;
float: left;
margin-right: 4px;
background: url no-repeat 0 0;
}
.controls .prev {
background-position: -40px 0;
}
.controls .next {
background-position: -60px 0;
}
.controls .play {
background-position: 0 0;
}
.controls .pause {
background-position: -20px 0;
}
.controls .mbc-close {
background-position: -80px 0;
}
.controls .prev:hover {
background-position: -40px -20px;
}
.controls .next:hover {
background-position: -60px -20px;
}
.controls .play:hover {
background-position: 0 -20px;
}
.controls .pause:hover {
background-position: -20px -20px;
}
.controls .mbc-close:hover {
background-position: -80px -20px;
}
.static .controls {
bottom: 10px;
}
.top .controls {
bottom: 10px;
}
.right .controls {
bottom: 10px;
right: 0;
}
.bottom .controls {
bottom: 0;
}
.left .controls {
bottom: 10px;
left: 0;
}
.tab-google .tab-inner .google-page {
overflow: hidden;
height: 55px;
border-bottom: 1px solid #ccc;
}
.tab-google .tab-inner .google-page.standard {
height: 117px;
}
.tab-google .tab-inner .google-page.small iframe{
height: 69px;
margin-bottom: 0;
}
.tab-google .tab-inner .google-page.standard iframe{
height: 131px;
margin-bottom: 0;
}
.tab-flickr .tab-inner ul {
padding-top: 5px;
}
.tab-flickr .tab-inner li {
float: left;
padding: 0;
margin: 0 5px 5px 0;
border: none;
}
.tab-flickr .tab-inner li .thumb {
margin: 0;
}
.tab-flickr .tab-inner li img{
height: 70px;
}
.youtube-subscribe {
overflow: hidden;
height: 105px;
width: 100%;
border: 0;
}
.tab-digg .digg-widget .digg-widget-head.premium, .tab-digg .digg-widget .digg-widget-head {
height: auto;
overflow: hidden;
padding: 10px;
position: relative;
white-space: nowrap;
border: none;
border-radius: 0;
-webkit-border-radius: 0;
}
.tab-digg .digg-widget .digg-widget-head h2 {
font-size: 14px;
font-weight: bold;
line-height: 20px;
margin: 0;
overflow: hidden;
padding: 0 0 0 26px;
white-space: nowrap;
text-shadow: 0 1px 0 #fff;
background: url no-repeat 0 0;
}
.tab-digg .digg-widget .digg-widget-head a {
top: 12px;
}
.tab-digg .digg-widget-content {
border-top: 1px solid #ccc;
}
.tab-content.tab-linkedin .tab-inner {
background: #fff url(../images/loader.gif) no-repeat center center;
}
.tab-twitter,.tab-twitter .MBC-btn, li.active.MBC-twitter, li.MBC-twitter:hover{background-color:#4ec2dc;}.tab-facebook,.tab-facebook .MBC-btn, li.active.MBC-facebook, li.MBC-facebook:hover{background-color:#3b5998;}.tab-fblike,.tab-fblike .MBC-btn, li.active.MBC-fblike, li.MBC-fblike:hover{background-color:#3b5998;}.tab-fbrec,.tab-fbrec .MBC-btn, li.active.MBC-fbrec, li.MBC-fbrec:hover{background-color:#3b5998;}.tab-google,.tab-google .MBC-btn, li.active.MBC-google, li.MBC-google:hover{background-color:#2d2d2d;}.tab-rss,.tab-rss .MBC-btn, li.active.MBC-rss, li.MBC-rss:hover{background-color:#FF9800;}.tab-flickr,.tab-flickr .MBC-btn, li.active.MBC-flickr, li.MBC-flickr:hover{background-color:#f90784;}.tab-delicious,.tab-delicious .MBC-btn, li.active.MBC-delicious, li.MBC-delicious:hover{background-color:#3271CB;}.tab-youtube,.tab-youtube .MBC-btn, li.active.MBC-youtube, li.MBC-youtube:hover{background-color:#DF1F1C;}.tab-digg,.tab-digg .MBC-btn, li.active.MBC-digg, li.MBC-digg:hover{background-color:#195695;}.tab-pinterest,.tab-pinterest .MBC-btn, li.active.MBC-pinterest, li.MBC-pinterest:hover{background-color:#CB2528;}.tab-lastfm,.tab-lastfm .MBC-btn, li.active.MBC-lastfm, li.MBC-lastfm:hover{background-color:#C90E12;}.tab-dribbble,.tab-dribbble .MBC-btn, li.active.MBC-dribbble, li.MBC-dribbble:hover{background-color:#F175A8;}.tab-vimeo,.tab-vimeo .MBC-btn, li.active.MBC-vimeo, li.MBC-vimeo:hover{background-color:#4EBAFF;}.tab-stumbleupon,.tab-stumbleupon .MBC-btn, li.active.MBC-stumbleupon, li.MBC-stumbleupon:hover{background-color:#EB4924;}.tab-tumblr,.tab-tumblr .MBC-btn, li.active.MBC-tumblr, li.MBC-tumblr:hover{background-color:#365472;}.tab-deviantart,.tab-deviantart .MBC-btn, li.active.MBC-deviantart, li.MBC-deviantart:hover{background-color:#B8C529;}.tab-linkedin,.tab-linkedin .MBC-btn, li.active.MBC-linkedin, li.MBC-linkedin:hover{background-color:#006DA7;}.social-tabs li {background:#7d7d7d;}

8. اضغط حفظ.

9.اذهب إلى تخطيط .

10. اضف اداة HTML/Javascript' و الصق الكود التالي بداخلها  ثم حفظ.

<div id="MBC-2" class="MBC right align-top sliding" style="width: 360px; position: fixed; margin-right: -360px; top: 10px; right: 0px; "><div id="social-tabs" class="MBC-content">
<ul class="social-tabs" style="position: absolute; top: 0px; left: 0px; margin-left: -35px; width: 35px; ">
<li class="MBC-twitter first"><a href="#" rel="0" title="twitter"><img src="http://1.bp.blogspot.com/-xBOKgPOlVjY/UBVYAYzsGtI/AAAAAAAACQo/AMDko1yTznw/s320/twitter.png" alt="" rel="twitter"></a></li>
<li class="MBC-facebook"><a href="#" rel="1" title="facebook"><img src="http://1.bp.blogspot.com/--6Q5YLxZUKY/UBVWkh4rn1I/AAAAAAAACPI/HCcVF2YTJEI/s320/facebook.png" alt="" rel="facebook"></a></li>
<li class="MBC-fblike"><a href="#" rel="2" title="fblike"><img src="http://3.bp.blogspot.com/-E8TsQgkPb0A/UBVWk_Q0fRI/AAAAAAAACPU/1RfGobJ8CRo/s320/fblike.png" alt="" rel="fblike"></a></li>
<li class="MBC-fbrec"><a href="#" rel="3" title="fbrec"><img src="http://2.bp.blogspot.com/-eTJffp_XqN4/UBVXYDUCXoI/AAAAAAAACPg/DsDQ5g4R45g/s320/fbrec.png" alt="" rel="fbrec"></a></li>
<li class="MBC-google"><a href="#" rel="4" title="google"><img src="http://1.bp.blogspot.com/-VpucjHQuLWk/UBVXYK-ZfbI/AAAAAAAACPs/WRJ3wLtJSfg/s320/google.png" alt="" rel="google"></a></li>
<li class="MBC-linkedin"><a href="#" rel="5" title="linkedin"><img src="http://1.bp.blogspot.com/-9EjdzY2Cvs8/UBVY0XugIFI/AAAAAAAACRM/W2afpfxj3cI/s320/linkedin.png" alt="" rel="linkedin"></a></li>
<li class="MBC-rss"><a href="#" rel="6" title="rss"><img src="http://2.bp.blogspot.com/-iUNrYWpW988/UBVXYxBHMCI/AAAAAAAACQQ/WOyuBxGREkA/s320/rss.png" alt="" rel="rss"></a></li>
<li class="MBC-delicious"><a href="#" rel="7" title="delicious"><img src="http://1.bp.blogspot.com/--FNvyhhovqU/UBVWkB89feI/AAAAAAAACOk/i1tBmlFgaV0/s320/delicious.png" alt="" rel="delicious"></a></li>
<li class="MBC-youtube"><a href="#" rel="8" title="youtube"><img src="http://4.bp.blogspot.com/-vbN6ifuNgGI/UBVYA3CJNOI/AAAAAAAACRA/YMiLLa8gW6w/s320/youtube.png" alt="" rel="youtube"></a></li>
<li class="MBC-digg"><a href="#" rel="9" title="digg"><img src="http://2.bp.blogspot.com/-lqiOg4rwRyE/UBVWkR21FhI/AAAAAAAACOw/RVl9vY-rU0I/s320/digg.png" alt="" rel="digg"></a></li>
<li class="MBC-pinterest"><a href="#" rel="10" title="pinterest"><img src="http://1.bp.blogspot.com/-O6jVOTHrd2Y/UBVXYus_ZjI/AAAAAAAACQE/KBGD_veEFj8/s320/pinterest.png" alt="" rel="pinterest"></a></li>
<li class="MBC-lastfm"><a href="#" rel="11" title="lastfm"><img src="http://2.bp.blogspot.com/-T-aRYyLuBhs/UBVXYVrtkGI/AAAAAAAACP4/bkwq53L15Z8/s320/lastfm.png" alt="" rel="lastfm"></a></li>
<li class="MBC-dribbble"><a href="#" rel="12" title="dribbble"><img src="http://3.bp.blogspot.com/-JxPFx4fln0s/UBVWkUY6ijI/AAAAAAAACO8/DHtm3WXhL0I/s320/dribbble.png" alt="" rel="dribbble"></a></li>
<li class="MBC-vimeo"><a href="#" rel="13" title="vimeo"><img src="http://4.bp.blogspot.com/-8I2NKLKb2xA/UBVYAsBm5EI/AAAAAAAACQ0/FoMzvNKtMdE/s320/vimeo.png" alt="" rel="vimeo"></a></li>
<li class="MBC-stumbleupon"><a href="#" rel="14" title="stumbleupon"><img src="http://4.bp.blogspot.com/-XutABgjQhno/UBVYAS-3SrI/AAAAAAAACQc/d3_vS_N_vKs/s320/stumbleupon.png" alt="" rel="stumbleupon"></a></li>
</ul><ul class="MBC-slider"><li class="tab-content tab-twitter tab-active" style="height: 535px; width: 350px; position: relative; display: list-item; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
<li class="tab-content tab-facebook" style="height: 535px; width: 350px; position: relative; display: none; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
<li class="tab-content tab-fblike" style="height: 535px; width: 350px; position: relative; display: none; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
<li class="tab-content tab-fbrec" style="height: 535px; width: 350px; position: relative; display: none; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
<li class="tab-content tab-google" style="height: 535px; width: 350px; position: relative; display: none; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
<li class="tab-content tab-linkedin" style="height: 535px; width: 350px; position: relative; display: none; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
<li class="tab-content tab-rss" style="height: 535px; width: 350px; position: relative; display: none; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
<li class="tab-content tab-delicious" style="height: 535px; width: 350px; position: relative; display: none; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
<li class="tab-content tab-youtube" style="height: 535px; width: 350px; position: relative; display: none; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
<li class="tab-content tab-digg" style="height: 535px; width: 350px; position: relative; display: none; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
<li class="tab-content tab-pinterest" style="height: 535px; width: 350px; position: relative; display: none; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
<li class="tab-content tab-lastfm" style="height: 535px; width: 350px; position: relative; display: none; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
<li class="tab-content tab-dribbble" style="height: 535px; width: 350px; position: relative; display: none; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
<li class="tab-content tab-vimeo" style="height: 535px; width: 350px; position: relative; display: none; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
<li class="tab-content tab-stumbleupon" style="height: 535px; width: 350px; position: relative; display: none; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
</ul><div class="controls" style="width: 350px; display: none; "><ul><li><a href="#" class="pause"></a></li>
<li><a href="#" class="prev"></a></li><li><a href="#" class="next"></a></li><li><a href="#" class="mbc-close close"></a></li></ul></div></div></div>

 الان عدل " # "  الذي في الكود اعلاه برابطك في الموقع المعين .

واي استفسار يمكنك وضعه في تعليق في هذه التدوينيه وسيتم الرد عليه في اقرب وقت ممكن.

تحياتي.

 

مدونة ارشيف بلوجر تصل للبيج رانك :|١|:

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

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

اعلن اليوم وبحمد الله تعالى ارتقاء المدونه من البيج رانك ٠ إلى بيج رانك ١

و ان شاء الله في المستقبل نصل للبيجرانك ١٠ بإذن الله ....