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

السلام عليكم احبائي

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

ولمعاينة الاضافه في مدونة أقرب طريق في الصوره أدناه

(ملاحظه انقر على الصور في الموضوع لمشاهدتها بوضوح)

الان الطريقه لأضافة الأداة في المدونه

1_تخطيط
2_أضافة أداة (HTML/JavaScript)

والان هذا الكود الذي يجب وضعه في المحتوى

    <style type="text/css">
    /*<!CDATA[*/
    #cnmu-ultm{width:300px;margin:auto;padding:0;}
    .cnmu-googleplus {height:57px;}
    .cnmu-facebook {background:#E7EBF2;border: 1px solid #DCDCDC;margin-top: -6px;padding:0px 10px 3px;}
    .cnmu-twitter {background-color: #eef9fd;border: 1px solid #c7dbe2;border-top: 0;}
    .cnmu-twitter a.twitter-follow-button {display: block;}
    .cnmu-twitter iframe {margin: 6px 11px -1px;}
    .cnmu-emailbox {background-color:#70706E;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 5px 16px;overflow: hidden;}
    .cnmu-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;}
    .cnmu-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;}
    .cnmu-emailbox input.emailu:focus {color: #333;}
    .cnmu-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;}
    .cnmu-emailbox input.submitu:hover {text-decoration: none;}
    .cnmuGray{color:#444 !important;border:1px solid #CCC;background: #dbdbdb;background: -moz-linear-gradient(top, #dbdbdb 0%, #bbbbbb 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dbdbdb), color-stop(100%,#bbbbbb));background: -webkit-linear-gradient(top, #dbdbdb 0%,#bbbbbb 100%);background: -o-linear-gradient(top, #dbdbdb 0%,#bbbbbb 100%);background: -ms-linear-gradient(top, #dbdbdb 0%,#bbbbbb 100%);background: linear-gradient(top, #dbdbdb 0%,#bbbbbb 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbdbdb', endColorstr='#bbbbbb',GradientType=0 );}
    .cnmuGray:hover{background: #e6e6e6;background: -moz-linear-gradient(top, #e6e6e6 0%, #bbbbbb 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6e6e6), color-stop(100%,#bbbbbb));background: -webkit-linear-gradient(top, #e6e6e6 0%,#bbbbbb 100%);background: -o-linear-gradient(top, #e6e6e6 0%,#bbbbbb 100%);background: -ms-linear-gradient(top, #e6e6e6 0%,#bbbbbb 100%);background: linear-gradient(top, #e6e6e6 0%,#bbbbbb 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e6e6', endColorstr='#bbbbbb',GradientType=0 );}.cnmu-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;}
    .cnmu-moresubs a {display: inline-block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}
    /*]]>*/
    </style>
        <div id="cnmu-ultm">
        <div class="cnmu-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/كوكل بلص" data-width="300" data-height="69" data-theme="light"></div>
        </div>
        <div class="cnmu-facebook">
           <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="فيس بوك" width="250" show_faces="false" stream="false" header="true"></fb:like-box>
        </div>
        <div class="cnmu-twitter">
            <a href="https://twitter.com/تويتر" class="twitter-follow-button" data-show-count="true">Follow @تويتر</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="cnmu-emailbox">
            <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri= فييدبرنر', '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 cnmuGray" type="submit" value="إشتــرك"/>
                </td>
                </tr>
            </table>
            <input name="uri" type="hidden" value=" فييدبرنر"/>
            <input name="loc" type="hidden" value="en_US"/>
            </form>
        </div>

وبعدها نضغط حفظ ومبروك عليكم الأداة

الان ما يجب عليك تغييره في الكود
1_كلمة (كوكل بلص)استبدلها بمعرف صفحتك في الكوكل بلص
2_كلمة (فيس بوك)استبدلها برابط صفحتك على الفيس بوك
3_كلمة (تويتر)استبدلها بأسم حسابك في تويتر علما انها مكرره مرتين
4_كلمة (فييدبرنر) استبدلها بمعرف حسابك في فييدبرنر علما انها مكرره مرتين

ملاحظه للأيضاح
1_معرف الصفحه في الكوكل بلص /مثال رابط صفحتي في الكوكل بلص هو
https://plus.google.com/u/0/b/112156417607777127189/112156417607777127189/posts
ما مظلل باللون الأحمر هو معرف رابط صفحتي وليس كل الرابط
2_رابط صفحة الفيس بوك معروف تضع كل رابط صفحتك
3_اسم الحساب في تويتر /مثال رابط صفحتي في تويتر هو
https://twitter.com/a22w11?lang=ar
ما مظلل باللون الأحمر هو اسم حسابي وليس كل الرابط
4_معرف حساب فييدبرنر هو يجب ان تسجل في الموقع لكي تستخرج معرف حسابك وان شاء الله عن قريب سأشرح كيفية التسجيل بالموقع
أما الذين غير مسجلين في موقع فييد برنر فبالأمكان قطع كود الموقع من الكود الكلي وبعد قطع كود الموقع تصبح الأداة بهذا الشكل في الصوره ادناه
أي بدون بريد الأشتراك

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

تحياتي لكم

أقرب طريق : من العراق , اهتمامي وحبي للتدوين هو ما جعلني أستمر ليس فقط لتقديم المواضيع بل أيضا لمساعدة الأشخاص المبتدئين ، كما كنت سابقا إلا أني لم أجد من يساعدني ! مع ذلك كافحت وواضبت على ماأحبه من عمل لأصل إلى ما أريده ، ليس كمستقبل لكن كهدف حققته , اهتماماتي للتدوين جعلني أتحدى العمل ، للأكواد ، والتعديل عليها وتكويدهالتخرج بالأشكال المناسبه .

من فضلك تابعنا :
fb
tw
gl

المشاركات الشائعة

اضافات بلوجر ودروس المواقع

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

0 التعليقات:

إرسال تعليق

المشاركات الشائعة

اضافات بلوجر ودروس المواقع

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

مواضيع ذات صلة

0 التعليقات:

إرسال تعليق