إضافة تابعني عبر الشبكات الاجتماعية بتأثيرات رائعة

بسم الله الرحمن الرحيم

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

قد تطرقت فى الموضوع السابق الى درس " زر أعجبني وزر المشاركة من الفيس بوك أسفل تدوينات بلوجر " والان سوف اقدم لكم إضافة جديدة من أهم الإضافات وهى إضافة " تابعني عبر الشبكات الاجتماعية " بطريقة جديدة وبتأثيرات جميلة جدا ! 

أهمية الإضافة 

الإضافة مهمة من ناحية انها تجلب لك الكثير والكثير من المتابعين على تويتر والكثير من المعجبين على صفحتك على الفيس بوك وجوجل بلس , كما انها تجلب لكل مشتركين فى الخلاصات RSS مما يجعل الشبكات الإجتماعية و الخلاصات مصدراً آخر للزوار , فبمجرد ان يتابعك الزائر على تويتر او الفيس بوك او جوجل بلس ... تظهر له كل تحديثاتك من مواضيع ..... الخ ( وذلك بالطبع بعد مشاركتك لها )

أين يجب ان أضع الإضافة ؟

مكان وضع الإضافة مهم جدا لإقبال الزوار عليها , فهناك اماكن لا يقترب الزائر منها , وهناك أماكن يقترب الزوار منها ! , فالمكان الامثل لوضع هذه الإضافة إما فى الشريط الجانبي sidebar كما فى مدونتي , وإما اسفل كل موضوع وهذا لتظهر افضل نتائج للإضافة .

إضافة الأداة الى بلوجر

اذهب الى لوحة تحكم مدونتك
اضغط على التخطيط    Layout
إضغط على " إضافة أداة "
اختر HTML/JavaScript
ثم الصق الكود التالى :

<style>
    /*--------Touch Me Sharing Widget ------*/
    .touchme a {
    display:block;
    height:50px;
    width:50px;
    padding:0 4px;
    float:left;
    background:transparent url(http://blogger-araby.googlecode.com/files/Sharing%20Touch%20Me.png) no-repeat;
    -webkit-transition: ease-in 0.2s all;  
    -moz-transition: ease-in 0.2s all;  
    -o-transition: ease-in 0.2s all;  
    -ms-transition: ease-in 0.2s all;  
    transition: ease-in 0.2s all;
    cursor:pointer;

    }


    .touchme a.googleplus {
    background-position: 0px -58px;

    }
    .touchme a.googleplus:hover {
    background-position: 0px 0px;
    }


    .touchme a.twitter {
    background-position: 0px -290px;

    }
    .touchme a.twitter:hover {
    background-position: 0px -232px;

    }
    .touchme a.facebook {
    background-position: 0px -406px;

    }
    .touchme a.facebook:hover {
    background-position: 0px -348px;

    }


    .touchme a.rss {
    background-position: 0px -174px;

    }
    .touchme a.rss:hover {
    background-position: 0px -116px;

    }


    </style>


    <div class='touchme'>

    <!--RSS-->
    <a class='rss' href="http://feeds.feedburner.com/xxxxxxxxxxxxxxxxx" rel='external nofollow' target='_blank'></a>

    <!--Google Plus-->
    <a class='googleplus' href="xxxxxxxxxxxxxxxx" rel='external nofollow' target='_blank'></a>

    <!--Facebook-->
    <a class='facebook' href="xxxxxxxxxxxxxxxx" rel='external nofollow' target='_blank'></a>

    <!-- Twitter -->
    <a class='twitter' href="xxxxxxxxxxxxxxxx" rel='external nofollow' target='_blank' ></a>


    </div>

استبدل التالى :
 ما باللون الاحمر باسم حسابك على الفييد برنر feedburner
ما باللون الازرق برابط حسابك على جوجل بلس
ما باللون الاخضر برابط حسابك على الفيس بوك
ما باللون البنفسجى برابط حسابك على تويتر

إضغط حفظ ! ومبروك عليك الإضافة !

الايقونات المستخدمة فى الإضافة مقدمة من موقع : Design Kindle

انتهى الموضوع 

الســـــــــــــــلام عليـــــــــكم