الأربعاء، 29 فبراير 2012

أضف صندوق mashabe الشهير للمشاركة الاجتماعية لمدونات بلوجر(blogspot)

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




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

.1 اذهب للوحة التحكم


2. تخطيط او تصميم
3.عناصر الصفحة
4. اضف اداة
6.اختار  Html/Javascript

الكود


<style type="text/css">
/*<!CDATA[*/
#w2b-mashable{width:300px;margin:auto;padding:0;}
.w2b-googleplus {height: 57px;}
.w2b-facebook {background#FFFFFF;border: 1px solid #DCDCDC;margin-top: -2px;padding: 5px 10px;}
.w2b-gplusone {background-color: #ffffff;border: 1px solid #d8e6eb;border-top: 1px solid white;font-size: .87em;color: black;padding: 9px 0 0 11px;line-height: 24px;height:30px;}
.w2b-gplusone span {display: inline-block;vertical-align: middle;height: 20px;margin-top: -17px;font-size: 11px;font-family: "Arial","Helvetica",sans-serif;}
.w2b-twitter {background-color: #ffffff;border: 1px solid #c7dbe2;border-top: 0;}
.w2b-twitter a.twitter-follow-button {display: block;}
.w2b-twitter iframe {margin: 9px 11px;}
.w2b-sociallinks {background-color: #ffffff;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 10px 11px;overflow: hidden;}
.w2b-sociallinks a {text-shadow: 1px 1px white;}
.w2b-sociallinks .w2b-social {list-style: none;overflow: hidden;margin: 0 !important;padding: 0 !important;}
.w2b-sociallinks .w2b-social li {border:0 none !important;float: left;line-height: 1;padding: 2px 0 4px 20px !important;margin-bottom: 3px;width: 70px;background: url(http://4.bp.blogspot.com/-WpJR2Qq0Sqw/Tx_4RZNGNuI/AAAAAAAABb0/WbNVkzuBexQ/s1600/w2b_socialsprite.png) no-repeat;font-size: 12px;}
.w2b-sociallinks .w2b-social li a {display: block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}
.w2b-sociallinks .w2b-social li a:hover {text-decoration: underline;}
.w2b-sociallinks .w2b-social li.digg {background-position: 0 -30px !important;}
.w2b-sociallinks .w2b-social li.linkedin {background-position: 0 -390px !important;}
.w2b-sociallinks .w2b-social li.rss {background-position: 0 -240px !important;}
.w2b-emailbox {background-color: #588adb;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 12px 16px;overflow: hidden;}
.w2b-emailbox form{width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;}
.w2b-emailbox input.emailu {float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;color: #999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}
.w2b-emailbox input.emailu:focus {color: #333;}
.w2b-emailbox input.submitu {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 7px 14px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;}
.w2b-emailbox input.submitu:hover {text-decoration: none;}
.w2bBlue{border:1px solid #397CBA;text-shadow: 1px 1px 0 #3A7AB2;background: #60abf8;background: -moz-linear-gradient(top, #60abf8 0%, #4082c4 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#60abf8), color-stop(100%,#4082c4));background: -webkit-linear-gradient(top, #60abf8 0%,#4082c4 100%);background: -o-linear-gradient(top, #60abf8 0%,#4082c4 100%);background: -ms-linear-gradient(top, #60abf8 0%,#4082c4 100%);background: linear-gradient(top, #60abf8 0%,#4082c4 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#60abf8', endColorstr='#4082c4',GradientType=0 );}
.w2bBlue:hover{background: #9ccefc;background: -moz-linear-gradient(top, #9ccefc 0%, #5087bf 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ccefc), color-stop(100%,#5087bf));background: -webkit-linear-gradient(top, #9ccefc 0%,#5087bf 100%);background: -o-linear-gradient(top, #9ccefc 0%,#5087bf 100%);background: -ms-linear-gradient(top, #9ccefc 0%,#5087bf 100%);background: linear-gradient(top, #9ccefc 0%,#5087bf 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ccefc', endColorstr='#5087bf',GradientType=0 );}.w2b-moresubs {background: none repeat scroll 0 0 #EBEBEB;border-style: solid;border-width: 1px;border-color: #fff #ccc #ccc;padding: 3px 8px 3px 3px;text-align: right;font-size: 7px;letter-spacing: 1px;}
.w2b-moresubs a {display: inline-block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}
/*]]>*/
</style>
    <div id="w2b-mashable">
    <div class="w2b-googleplus">
        <script type="text/javascript">
        /*<![CDATA[*/
        window.___gcfg = {lang: 'en'};
        (function(){
            var po = document.createElement("script");
            po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(po, s);
        })();
        /*]]>*/
        </script>
        <div class="g-plus" data-href="https://plus.google.com/105111763875634408359" data-width="300" data-height="69" data-theme="light"></div>
    </div>
    <div class="w2b-facebook">
        <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Ffacename&amp;send=false&amp;layout=standard&amp;width=280&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:280px; height:66px;" allowtransparency="true"></iframe>
    </div>
    <div class="w2b-gplusone">
        <script type="text/javascript">/*<![CDATA[*/
          (function() {
        var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;
        po.src = "https://apis.google.com/js/plusone.js";
        var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);
          })();/*]]>*/
        </script>
        <div class="g-plusone" data-size="medium" data-href="http://chamelcool.blogspot.com/"></div>
        <span>Recommend on Google</span>
    </div>
    <div class="w2b-twitter">
        <a href="https://twitter.com/twitername" class="twitter-follow-button" data-show-count="true">Follow @chamelcool</a>
        <script type="text/javascript">/*<![CDATA[*/!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 class="w2b-sociallinks">
        <ul class="w2b-social">
        <li class="digg"><a href="diggprofile">Digg</a></li>
        <li class="linkedin"><a href="linkedinprofile">LinkedIn</a></li>
        <li class="rss"><a href="http://feeds.feedburner.com/chamelcool/rInPq">RSS</a></li>
        </ul>
    </div>
    <div class="w2b-emailbox">
        <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=chamelcool/rInPq', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
        <table width="100%">
            <tr>
            <td>
                <input class="emailu" name="email" placeholder="أدخل بريدك الالكتروني..." type="text"/>
            </td>
            <td width="64px">
                <input class="submitu w2bBlue" type="submit" value="اشترك"/>
            </td>
            </tr>
        </table>
        <input name="uri" type="hidden" value="chamelcool/rInPq"/>
        <input name="loc" type="hidden" value="en_US"/>
        </form>
    </div>
    <div class="w2b-moresubs">
        <a href="http://chamelcool.blogspot.com/2012/02/mashabe-blogspot.html">Get this Gadget</a>
    </div>
    </div>



ملاحضة  :: ماذا يكن أن تغير في الكود    

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

غير twittername  باسم صفحتك على twitter

غير facepage باسم صفحتك على    facebook





  •  ادا كان اسم صفحتك طويل جدا و عبارة عن أصفار  قم الدخول هنا  Facebook.com/username  واختر اسم لصفحتك








  • قم بتبديل chamelcool/rInPq  هنالك  (ثلاتة) بعنوان التغدية الخاص بموقعك و التي ستجدها في اخر رابط التغدية الخاص بمدونتك

    غير https://plus.google.com/105111763875634408359   برابط صفحتك على google plus

    غير  diggprofile  ببروفيلك على digg

    غير lnkedinprofile  ببروفيلك على likedin

    ثم احفض الأاداة  ومبروك عليك

    Social Sharing Widget bychamelcool


    2 التعليقات:

    شكرا اضافة جيدة ولكن كنت اودي تغير لون زر اشتراك هذا
    من اللون الازرق الي اللون الموجود في مدونتي

    @مدونه العرب عربي ايجي

    سأعدل لك الكود حسب طلبك وأرسله لك

    إرسال تعليق

    ملحوظة: يمكن لأعضاء المدونة فقط إرسال تعليق.

    Twitter Delicious Facebook Digg Stumbleupon Favorites More

     
    Gadgets By chamelcool Blog