إضافة " صندوق الإشتراك بالبريد وفيسبوك وتويتر" بشكل جذاب بتقنية css

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

صورة الإضافة

شرح الإضافة

انتقل إلى لوح تحكم مدونتك،
تم الى تصميم..تحرير HTML
ثم ابحث عن هذا الكود

كود HTML:

]]></b:skin>

والصق قبله تماما هذا الكود

كود HTML:

subbox{width:305px;border:0 solid #141414;overflow:hidden}
.addthis_toolbox{padding:15px 0 5px 0;text-align:center}
.addthis_toolbox .custom_images a{width:32px;height:32px;margin:0 4px 0 4px;padding:0}
.addthis_toolbox .custom_images a:hover img{opacity:1}
.addthis_toolbox .custom_images a img{opacity:0.85}
.rssbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.rssbox:hover{border:1px solid #92aed1}
.rssbox a{color:#7c8a9b;text-transform:uppercase;text-*****ation:none;font:bold 12px Arial,Helvetica,Sans-serif}
.rssbox a:hover{color:#7c8a9b;text-*****ation:underline}
.emailsbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.emailsbox:hover{border:1px solid #92aed1}
.emailsbox a{color:#7c8a9b;text-transform:uppercase;text-*****ation:none;font:bold 12px Arial,Helvetica,Sans-serif}
.emailsbox a:hover{color:#7c8a9b;text-*****ation:underline}
.twitterbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.twitterbox:hover{border:1px solid #92aed1}
.twitterbox a{color:#7c8a9b;text-transform:uppercase;text-*****ation:none;font:bold 12px Arial,Helvetica,Sans-serif}
.twitterbox a:hover{color:#7c8a9b;text-*****ation:underline}
.facebookbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.facebookbox:hover{border:1px solid #92aed1}
.facebookbox a{color:#7c8a9b;text-transform:uppercase;text-*****ation:none;font:bold 12px Arial,Helvetica,Sans-serif}
.facebookbox a:hover{color:#7c8a9b;text-*****ation:underline}
#search{width:290px;padding:2px 2px;background:#f7f6f6;border:1px solid #ccd1d7;height:28px;margin-top:0;margin-left:5px;display:inline;float:left}
#search:hover{border:1px solid #92aed1}
#search form{margin:0;padding:0}
#search fieldset{margin:0;padding:0;border:none}
#search p{margin:0;font-size:85%}
#s{width:200px;margin:0 0 0 0;padding:5px 5px 5px 5px;border:none;font:normal 80% &quot;Tahoma&quot;,Arial,Helvetica,sans-serif;color:#000;float:left;background:#f7f6f6;display:inline}
input#searchsubmit{float:right;display:inline;margin:0 0 0 0;height:28px;background:#b2b2b2;color:#000;border:0 solid }#222

الان احفظ القالب
ثم الى "تصميم" ثم إضافة أداة ثم اختر HTML/جافاسكريبت
والآن الصق الكود التالي :

كود HTML:

<div class="subbox"> <div id='search' style='display:inline;'> <form action='/search' id='searchform' method='get'> <input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;;}" type="text" value="Search..." /> <input id="searchsubmit" type="submit" value="Search" /> </form> </div> <table><tr> <td><div class="rssbox"> <a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghE6Zz937CCLqQuWPrHCKqgdIscLO5ybMta-GwjnDDRybO8Zv3E6pXjghAQbfPY6asJAxC7ZA0CdYn8qZSXXmnsf4uPxKI9Q9IivkClBb0gyBsTjMZRpB56lc_KJm9FILmEdWsFte8jKac/" alt="RSS Feed" title="RSS Feed" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow">RSS Feed</a> </div></td> <td><div class="emailsbox"> <a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyRYjExI-GtOk3_2R1A7Knr5ZCxIt9jJYxGnjTLxT5bIgt-jiIqaE1gNlKxmSlfoBIaVW2olr9mQcOrMwlrkpeeJWrm0v9z3bC7-KTkwSRWZcAlEUeE6viOov8JVtw9xuXiB6YLYMiylbA/" alt="EMail Feed" title="EMail Feed" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow">EMail Feed</a> </div></td> </tr><tr> <td><div class="twitterbox"> <a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjehq8UOjv0HLIcHiM4yWSek8xr9UuzZNirtpkE78auqyZR-kAhhrWESjWVs5lHIiGDJZzTTXGRxrn70FVAbiDpWNCDuXyrae4ztXv1kDkMVMVUrEYSK2AlGLRvYDuz7vqkgg-0fEqoJsyJ/" alt="Twitter" title="Twitter" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow">Twitter</a> </div></td> <td><div class="facebookbox"> <a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinXPyaC_lYB-pWmUfPDRRlkYOlVWU3OymoRvLt_JnFpbufaPjh4bXJii3G-c7-ag7WUu54JImWzJQC7vkQrzB9xiAwd0CESbSJv95NXzRT2XGhI88U19SzCwPiKB0e14lNtson7dAQt8f1/" alt="Facebook" title="Facebook" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow">Facebook</a> </div></td> </tr></table> <p style="display:none;" align="center">Widget by <a href="http://blogspacetech.blogspot.com/" target="_blank">blogspacetech</a></p> <div class='addthis_toolbox'> <div class='custom_images'> <a class='addthis_button_twitter'><img alt='Twitter' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNyyYyMY_VlPdX8Hymf9Tyf1CI5bKlRVW70AuFrQ4SSi3tO8BMTbSCuVyXpOiaYpfh9P0yWqm8U4nVHCtRg0hqEIE4UVFWzbSkH_Auq2ZNUyXJ1lrltdjJ7HS49eXHqsgRu0hsJjq0Qbc/' width='32'/></a> <a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6ACp5PkivO7NUqmOzsTM3vp4BBpQmrX9IGPmHZMWEGNL0WMAB6CHgbEMxWXplqBQwG5-e3sk21FXMdiuyLG6piBFizrMDrEfCfvGhDEj_SlPEaqMrRKeL3czUyx60boC320wPn6Cj22w/' width='32'/></a> <a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj9k2JpWe3zt6w2QuCNhnk4Z2nHBpeUbVFQ-njUmBky-yYtSXNOGCIS_9zSAOmf8FrDJVCwVNxqPMItWjiY4NtGb5NNigeS118h2uMWYKXU7R-MNjq2hEjKCuk7Bu-3rwnd7Z6VZWkb5k/' width='32'/></a> <a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPgACo1IYZ5dzaHbKITtDx_wDyN7Ppoe7yx7weK6NtV_6hRbrdYbYcsNBS2gsQHyyvsBseCl3FLHjSBHlF4rsnOW2SSERH2gjCuZORbYkIdxv0VJqUd7R1uQFBXhdgNJtzTGKqO3GhdaI/' width='32'/></a> <a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzsKh9Bx8i1vZUBCc9Xa0ac4caxdf0wLiWr8lVlQRzVF4lIpneUt5ma06Q_OVMeM_YV_25z-3C01VUT3R03RclQoinY9PtjoFVJG86Bn-lbnhARcvTTBv4j0TkZDh4UGXJ4UuDHbsRVJ8/' width='32'/></a> <a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyfRVl7Dhkew7E_yrQEM9ZlyJ1ZFFKlfCEBGhTwduaQA8fGamLDmIidxUS2xi3PtsJKq8G4Ak7wKJhgro6WJkC3A0UM45mM8SCrkJh2MmbczAMXp-8R2tIYC7dGigXSS_4TXxAsiWoWP4/' width='32'/></a> <a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVfjf9wP6gxP8BYofz3LRPyCh2OqbHfgXKUUtCSNhHLVaoU9i2oyTOC8n4QXUbxqbuOUqQ_uYPxbNKldewMZ7F2BpPJmLzhpU7xzia2H9H2_CrOLzJUt8i5mDAdzOtSLuEdOhBxRctWlY/' width='32'/></a> </div> <script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/> </div> </div>if (document.getElementById('hello')) { document.getElementById('hello').innerHTML = 'Hello World - this was inserted using JavaScript'; }