أيقونات تواصل اجتماعي بشكل مميز وجميل على بلوجر

 

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

1- اذهب الى لوحة التحكم الرئيسية --> تصميم --> تحرير HTML  وقم بالضغط على توسعة القالب.
2- ابحث  بالضغط على ctrl+f  للبحث عن هذا الكود  </head>
3- ضع الكود التالي فوق /قبل  </head>

<link href='https://blognpctricks.googlecode.com/svn/css/4in1widgetv2.css' rel='stylesheet'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://apis.google.com/js/plusone.js&apos; type=&apos;text/javascript' type='text/javascript'/>
<script src='http://makingdifferent.googlecode.com/files/fanbox_init.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function(){
 jQuery(&quot;#facebook_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery(&quot;#facebook_right&quot;).stop(true,false).animate({right: -200}, 500); });    jQuery(&quot;#twitter_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery(&quot;#twitter_right&quot;).stop(true,false).animate({right: -250}, 500); });     jQuery(&quot;#google_plus_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery(&quot;#google_plus_right&quot;).stop(true,false).animate({right: -154}, 500); });    jQuery(&quot;#feedburner_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery(&quot;#feedburner_right&quot;).stop(true,false).animate({right: -303}, 500); });    });
</script

 4- قم بحفظ القالب.

5-إذهب إلى تخطيط --> إضافة أداة --> إضافة HTML/JavaScript  --> ثم ضع هذا الكود:

 <div id="on"><div id="facebook_right" style="top: 18%;"><div id="facebook_div"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpzCv3U-WvpoPXgA-6iIIgxSuh41wfNOlZgLOXDPadK4Nzt94H1T0QyRbJo8es2Noh2P5M_PWMXH2HMW_6D4SipvpZdJGfMWaQyXWjoJ2upUNIOo-20mrTOiKiePIwV7XrSyUNcwyBWCA/s1600/bloggertricksdotbiz(facebook+right).png" alt="" /><iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fkhatab.dadi&amp;locale=en_gb&amp;width=200&amp;connections=9&amp;stream=&amp;header=false&amp;show_faces=0&amp;height=356"   scrolling="no"></iframe></div></div></div><div id="on"><div id="twitter_right" style="top: 35%;"><div id="twitter_div"><img id="twitter_right_img" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVf_c5KM0F3MdnoPs7yHp3vW-m8QDb9ByNJ_hJbI9e51AkZFBHNOt48cqAY5VmktCZb4R_0qikV6qKOqroZRcTPC76CTHioY4HGJyV9fZHSD8LxACqPBi0LO1n4BkjfMYRbQ4I9p7zCmA/s1600/bloggertricksdotbiz(twitter+right).png" /><div id="twitterfanbox"></div><script type="text/javascript">fanbox_init("freeeagle18");</script></div></div></div><div id="on"><div id="google_plus_right" style="top: 52%;"><div id="google_plus_div"><img id="google_plus_right_img" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvVCet8psf-rxuCycXGEKEp4gr1-53qjaKhrceqiC6KTzrS95qYWJIOPqJmd3E0D8ht-2PfiWkioOw7m-GhAmOC6FGWQiVDribK3wxEJdrGX4xjacd_tsKC3XJr7dcYKEWjVUOwzc-HBc/s1600/bloggertricksdotbiz(google+plus+right).png" /><div style="float:left;margin:10px 10px 10px 0;"><g:plusone size="tall" expr:href="data:post.url"></g:plusone></div></div></div><div id="on"><div id="feedburner_right" style=" top: 69%;"><div id="knfeedburner_div"><center><h4 style="color:#f66303;">you can also receive free email updates:</h4><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=dadou', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;enter your email here...&#39;;}" onfocus="if (this.value == &#39;enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="dadou" name="uri" type="hidden" /><input value="submit" class="submitbutton" type="submit" /></form></center><img id="feedburner_right_img" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1GAC_TNWsrBw6R5NXmR3Uw63jOhIy-2bImJduJsQYcMLh_f7vqJ07NPIk9y_cVpG0yt8Ip-PQaW4zms1bBdc1Dqetuu81wu_LYoJCxHegDQL3Ewj8s2fN4u54ulttqqgLmgv9ZKPFN5w/s1600/bloggertricksdotbiz(subscribe+right).png " /></div></div></div></div>

- قم بتغيير ما باللون الأزرق بتعريف تويتر الخاص بك
- قم بتغيير ما باللون الأحمر بتعريف فيسبوك الخاص بك
- قم بتغيير ما باللون الأخضر بتعريف RSS  الخاص بك

6- أخيرا قم بحفظ القالب.

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

وشكرا.

04:33