ثلاثة اشكال جديدة لأضافة التواصل (feedburner +facebook&twitter) ~ مدونة سفيان للتصميم

السلام عليكم ،

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

الشكل الاول

الكود

<form id="subscribe" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=sma-b', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><b style="color: rgb(102, 51, 255);">اعجبتك تدويناتي?</b> كن الاول في معرفة جديد المدونة عبر البريد الالكتروني ، واستمتع بالخدمة!

<div style="text-align: center;">

<input autocomplete="off" value="ضع بريدك الالكتروني..." id="subbox" onfocus="if (this.value == 'ضع بريدك الالكتروني هنا...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter your email address...';}" name="email" style="width: 200px; background-repeat: no-repeat ! important; background-image: url("chrome://sxipper/skin/images/field_icon_R.png") ! important; background-position: right center ! important; padding-left: 0px ! important;" type="text" />

<input value="sma-b" name="uri" type="hidden" />

<input name="loc" value="en_US" type="hidden" />

<input value="OK" id="subbutton" type="submit" />

</div></form>

<div>

<center>

<table>

<tbody><tr>

<td>

<a href="http://feeds.feedburner.com/sma-b "><img src="http://feeds.feedburner.com/%7Efc/sma-b%20?bg=99CCFF&fg=111111&anim=1" style="border: 0pt none;" alt="" height="26" width="88" /></a>

</td><td>

<script type="text/javascript" language="JavaScript" src="http://twittercounter.com/embed/adiarar1/000000/99ccff"></script>

</td>

</tr>

</tbody></table></center>

</div>

<div style="padding-left: 10px;">

<table>

<tbody><tr><td>

<a href="http://feeds.feedburner.com/sma-b%20" target="_blank" title="اشترك في اخر التدوينات"><img style="float: left; margin-right: 5px; width: 20px; height: 20px;" src="http://img243.imageshack.us/img243/2619/10rssicon.png" /></a><a href="http://feeds.feedburner.com/sma-b%20" target="_blank" title="اشترك في اخر التدوينات">اشترك عبر RSS Feed</a>

</td></tr>

<tr><td>

<a href="http://www.facebook.com/adiarar1" target="_blank" title="Facebook "><img style="float: left; margin-right: 5px; width: 20px; height: 20px;" src="http://img163.imageshack.us/img163/8637/10facebookicon.png" /></a>

<a href="http://www.facebook.com/adiarar1" target="_blank" title="Facebook ">تواصل عبر facebook</a>

</td></tr>

<tr><td>

<a href="http://twitter.com/adiarar1" target="_blank" title="Twitter time"><img style="float: left; margin-right: 5px; width: 20px; height: 20px;" src="http://img189.imageshack.us/img189/6853/10twittericon.png" /></a><a href="http://twitter.com/adiarar1" target="_blank" title="Twitter "> اتبعني عبر Twitter</a>

</td></tr>

</tbody></table></div>

______________________________________________________________________

الشكل الثاني

الكود

<div style="background-color: rgb(255, 255, 255); background-image: url("http://img171.imageshack.us/img171/2742/rssbg.png"); background-repeat: no-repeat; background-attachment: scroll; background-position: 0% 0%; -moz-background-size: auto auto; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; padding-top: 0px;">

<form action="http://feedburner.google.com/fb/a/mailverify" id="subscribe" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=sma-b;, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">

<p><a href="http://feeds.feedburner.com/sma-b" target="_blank" title="subscribe to the latest posts"><img src="http://img171.imageshack.us/img171/162/rssicons.jpg" style="float: left; width: 38px; height: 38px; margin-right: 5px;" /></a><a style="font-weight: bold; color: rgb(51, 0, 153);" href="http://feeds.feedburner.com/sma-b" target="_blank" title="اشترك في اخر التدوينات"><u>اشترك في rss</u></a>

واحصل على الجديد اولا بأول !</p>

<div style="text-align: center;"><b style="color: rgb(204, 0, 0);">احصل على اخر التدوينات بالبريد الالكتروني</b>

<input autocomplete="off" id="subbox" name="email" onblur="if (this.value == &apos;&apos;) {this.value = &apos;Enter your email address...&apos;;}" onfocus="if (this.value == &apos;Enter your email address...&apos;) {this.value = &apos;&apos;;}" style="width: 215px; background-repeat: no-repeat ! important; background-image: url("chrome://sxipper/skin/images/field_icon_R.png") ! important; background-position: right center ! important; padding-left: 0px ! important;" value="ضع بريدك الالكتروني" type="text" />

<input name="uri" value="sma-b" type="hidden" /> <input name="loc" value="en_US" type="hidden" /> <input id="subbutton" value="OK" type="submit" /> <div style="clear: both;"> <center><table border="0"> <tbody><tr> <td><a href="http://www.facebook.com/adiarar1" target="_blank" title="connect to us on facebook"><img src="http://img29.imageshack.us/img29/3497/facebookiconf.jpg" style="width: 54px; height: 54px;" /></a></td><td><a href="http://twitter.com/adiarar1" target="_blank" title="follow us">

<img src="http://img291.imageshack.us/img291/3765/twittericon.jpg" style="width: 54px; height: 54px;" /></a>

</td><td>

</td><td><a href="http://feeds.feedburner.com/sma-b"><img alt="Fellow Readers" src="http://feeds.feedburner.com/%7Efc/sma-b?bg=000000&fg=FFFFFF&anim=1" style="border: 0pt none; padding-top: 5px;" height="26" width="88" /></a>

<div id="twittercounter"><a href="http://twittercounter.com/adiarar1?from=button" target="_blank" title="adiarar1"><img alt="TwitterCounter for adiarar1" src="http://srv2.twittercounter.com/counter/ani/adiarar1/ffffff/111111" style="border: medium none;" height="26" width="88" /></a></div></td> </tr> </tbody></table></center> </div></div></form></div>

________________________________________________________________________

الشكل الثالث

الكود

<a href="http://feeds2.feedburner.com/sma-b" title="اشترك عبر rss"><img alt="RSS" src="http://i50.tinypic.com/esnlvc.jpg" style="float: left; vertical-align: middle; padding-right: 10px;" border="0" /></a>

<p style="padding: 5px 0pt;"><a href="http://feeds2.feedburner.com/sma-b" title="اشترك عبر rss">احصل على الجديد عبر rss!</a>

(ماذا يعني هذا? — <a href="http://www.youtube.com/watch?v=0klgLsSxGsU" target="_blank" title="RSS in Plain English">اعرف المزيد عن هذه الخدمة</a>)</p>

<a href="http://feedburner.google.com/fb/a/mailverify?uri=sma-b" title="احصل على الجديد عبر البريد الالكتروني"><img alt="اشترك" src="http://i45.tinypic.com/xmk8w6.jpg" style="float: left; vertical-align: middle; padding-right: 10px;" border="0" /></a>

او اشترك عبر البريد الالكتروني من هنا :

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open(\" com="" fb="" a="" uri="sma-b" scrollbars="yes,width=550,height=520\');return" true="" style="text-align: center;" target="popupwindow">

<input autocomplete="off" name="email" style="width: 140px; background-repeat: no-repeat ! important; background-image: url("chrome://sxipper/skin/images/field_icon_R.png") ! important; background-position: right center ! important; padding-left: 0px ! important;" type="text" />

<input name="uri" value="sma-b " type="hidden" />

<input name="loc" value="en_US" type="hidden" />

<input onmouseover="style.cursor=\" style="margin: 5px; cursor: pointer;" value="موافق" type="submit" />

</form>

اخترت ما يناسبك ، انسخ الكود ومن لوحة التحكم اختار- التخطيط - عناصر الصفحة - اضافة اداة - html/java ومن ثم الصق الكود ..... الان قم بتخصيص الكود بروابطك الخاصة .

_______________________________________________________________________

- تخصيص الكود -

1. غير كل sma-b اينما تجدها برابط مدونتك على feedburner .

مثال : http://feeds2.feedburner.com/sma-b

2. غير روابط مدونتي في فيس بوك بروابطك الخاصة مثل : http://www.facebook.com/adiarar1

3. غير روابط مدونتي في تويتر بروابطك الخاصة ان وجدت مثل :"http://twitter.com/adiarar1"

4. تستطيع تغيير الجمل والكلمات داخل الكود وكل ما يمكن تغييره مكتوب بخط احمر .

5. كما يمكن تخصيص بعض الاشياء الاخرى مثل الاتجاه والخلفية والعرض الخ ...

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