طريقة اضافة شبكات التواصل الاجتماعي اسفل المشاركات في المدونة بلوجر

اضافة شبكات التواصل الاجتماعي اسفل كل تدوينة بتقنية CSS

اذهب الى لوحة تحكم المدونة -> التخطيط -> تحرير HTML 

ضع علامة على مربع توسيع قوالب عناصر واجهة المستخدم

الان بالضغط على CTRL + F ابحث عن الكود التالي 

</head> ضع الكود التالي قبل الكود السابق <style type="text/css"> /* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */ ul.way2blogging-social { list-style:none; margin:15px auto;display:inline-block; } ul.way2blogging-social li { display:inline; float:left; background-repeat:no-repeat; } ul.way2blogging-social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; } ul.way2blogging-social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);} ul.way2blogging-social li.way2blogging-facebook { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixpe4YC14YtXvGZ75QVeEmuzqawT5eqwOtaFIKNLQl0MGCVzxp7uguNcLamHcNRsnHdDUU3DzB4XquqnkAiuBYC36ynBYmyAfPkj_ccFN6EaRpRYo5K_lN0CdhlLfMZ11k6GXgWkXNURiq/s1600/way2blogging-facebook.png"); } ul.way2blogging-social li.way2blogging-twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiQuSwKwuqbF3Jdnc1uERPcvw-7AYxJYu8WHTnTL1oAU2jH-1Q50oMD050FSbIUc2UQuhN7665BNDzFYrzfwDb1rIeY5xfQ4B3eOXjMkKaSjS5qMkWSaUTbmksBIV11I56YZ8CgCOtxoM5/s1600/way2blogging-twitter.png"); } ul.way2blogging-social li.way2blogging-googlebuzz { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4vir8HP1hAxJvZubLaA5T9uTFTeIaSHo6j1-BYnaTUBOLRK5GOt6CHD7iDhbF1IGqpm1VzXmiBj4VltEnhLen9xNCaVj-scs6IT-kRRTWskT856bRulLJwkDr7Bs0SQfAXjiZ5Znf4X1x/s1600/way2blogging-googlebuzz.png"); } ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5gi8yoakKl7aWTCpu2WbdGbTxj8CEEpMCuE2CIDZxSx6-5yfiRN9aorN-gUeix8P6Ubexq7hmxOY4qE-a6VA3n631XjfFWGRDUu1p3QYHkC3L6PdSNZTOeCCOj7BDIVaEN08ITGt5vfv-/s1600/way2blogging-stumbleupon.png"); } ul.way2blogging-social li.way2blogging-digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuOLLI-KcQVHDePyWB_73qD-BYZH7kSocgYNcII_M_zFI-8782jCF5OITsC1u7Awpfiy_TDP1o5yTcTsILy17AXDWLU0QvCTfR4ILp9N0wv_kYTtr8dhenT2ENHUa0DpurASo2g_B9NdXp/s1600/way2blogging-digg.png"); } ul.way2blogging-social li.way2blogging-delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwEPLKdOgrR0_dxc60jvBzpNTQvoezCg4y062XMQweL9ZflrkoOxHCTz4Yz86iFpMCpqymg9sVNxMedRbPycizAECmzw_jPEGTwSOhn-DdRLphpHkvvkcTx-q4UXF_LbW5HbxqaPkd3lUH/s1600/way2blogging-delicious.png"); } ul.way2blogging-social li.way2blogging-linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBEuI3KxFeRXDz6Wgstsv-cOpPHRTvZvt_iIQOYQCwaU6XApEgafYnBdoF0HI2HBoY9aBwUuA1kiZaHFtvxYpkOJacdExHU09BkPlD0Cuzjii4N34XHw-n154ilQUqNlf4BZKiO2do4KDF/s1600/way2blogging-linkedin.png"); } ul.way2blogging-social li.way2blogging-reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQurssHmyTGn0w430z1GQ6RryotetS4L2ykHTMqeoo6udM2apkbT8nsmGR-eMcKRVOWy1s6zdjGImLnedWHtCkZSoY5ljSWR7W-Yhl_yWINNo7avuu_w93SCtO9YFXPUA9wWolpaQ3XSL8/s1600/way2blogging-reddit.png"); } ul.way2blogging-social li.way2blogging-technorati { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsg2YCKes8QWQurSo8zdq4w-Kp6a1Gus2mywknM83Un90BTVU6AsZY5XJSiSA4_e_WTsoQIDIHu7Wb_GU9cODhDbjRG-h9EPRYBv85PdqnrEQn7jWCbf4TmzTeSi1d2LZHJsgbh4_MkJOE/s1600/way2blogging-technorati.png"); } #way2blogging-cssanime:hover li { opacity:0.2; } #way2blogging-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; } #way2blogging-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; } #way2blogging-cssanime li:hover { opacity:1; } #way2blogging-cssanime li:hover a strong { opacity:1; top:-10px; } /* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */ </style> الان ابحث عن الكود التالي قد تجد 3 او 4 ضعه بعد الثاني <data:post.body/> ضع الكود التالي بعد الكود السابق <b:if cond='data:blog.pageType == "item"'> <ul class='way2blogging-social' id='way2blogging-cssanime'> <li class='way2blogging-facebook'> <a expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a> </li> <li class='way2blogging-twitter'> <a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a> </li> <li class='way2blogging-googlebuzz'> <a expr:href='"http://www.google.com/buzz/post?url=" + data:post.url + "&imageurl="' rel='nofollow' title='Post on GoogleBuzz'><strong>Google Buzz</strong></a> </li> <li class='way2blogging-stumbleupon'> <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a> </li> <li class='way2blogging-digg'> <a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Digg this!'><strong>Digg</strong></a> </li> <li class='way2blogging-delicious'> <a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a> </li> <li class='way2blogging-linkedin'> <a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' title='Share this on LinkedIn'><strong>LinkedIn</strong></a> </li> <li class='way2blogging-reddit'> <a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a> </li> <li class='way2blogging-technorati'> <a expr:href='"http://technorati.com/faves?add=" + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a> </li> </ul> </b:if> الان احفظ النموذج انتهى الشرح

اقرأ المزيد

طريقة اضافة مربع البحث الى المدونة بلوجر

اضافة مربع البحث بألوان جميلة الى مدونة Blogger

لاضافة مربع البحث باللون الاسود

اذهب الى لوحة تحكم المدونة -> التخطيط -> اضافة اداة

من القائمة تختار HTML/JavaScript ثم نضع الكود التالي

<style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK0foSlGH5IoKu96XBiiWHACOtt3CuYg7qhNx97xHeFhyphenhyphenzdNxMLvUwAYo1wfLeR7-1PZIdxeKpgiGiniOfzHmmrBJn-QEMyB7Wl75GHzjlxczdkrDvy_upLMWjWUeVDUo00aDPxJUFFGiZ/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 10px 12px;margin:0;} form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="w2b-searchbox"> <form id="w2b-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div> لاضافة مربع البحث باللون الاحمر نضع الكود التالي <style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjItD-fNecx0wgyYY6DA_8t3qKlwyucWvnbxyHiI5RR_kBjo7Cu5L0IC3tLMhB8pE5ReInrIsAhy9I30dACGPQsEbF4xhzfm1sO9EurPiRX56LBypLvW4ctmI6ldTDifjL5Hi5fK-9mrAeO/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 10px 12px;margin:0;} form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="w2b-searchbox"> <form id="w2b-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div> لاضافة مربع البحث باللون البرتقالي نضع الكود التالي <style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu_RLiA5nLJATPSXdh_Hke6WzQjCj3JceIt94YvZclnI_6neE7aiwET5aaKccbs26Q_uCPoCtt5pHfJqDPeBPpBB9ZJKvkgzXLMM2KgojSrYyaxpFty_VnffUPV0louQvLD6aR-FskFP3N/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 10px 12px;margin:0;} form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="w2b-searchbox"> <form id="w2b-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div> لاضافة مربع البحث باللون الابيض نضع الكود التالي <style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvfrqZcyTWlZtZa8xVYxeUkHQde2fUTv22y6ab386nMlpUmJelQqzGsMFfcE3f_vqAloH4If7nOTiB5b2cgAJoDIrzZt9LCUtE3itAkyq4R5NzR8IqY8GCE4xPRNtPB3j1vbwzoopdNp23/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 12px;margin:0;} form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="w2b-searchbox"> <form id="w2b-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value=""/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div> لاضافة مربع البحث باللون الازرق نضع الكود التالي <style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSENY_eF06NoWrc_8v-vbbSWNmc731dMLbscxSP3BUD3wY9hVT0DH8ENXZtFzafH6mWEHG69JFAotcDs98FHwfxaLHdHmllIcsMzjbBNEA99AHDnCIf7561mE5N0YOaGUPqdfszPFgQne2/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 12px;margin:0;} form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="w2b-searchbox"> <form id="w2b-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value=""/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div> لاضافة مربع البحث باللون الكحلي نضع الكود التالي <style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfljk3QgEAQfR00ZQ0LPVdJmoFfZ5mOYuVnaNsHVQEpXW3-l76WyW1klhwnq38hoV8nJasTz0INsP2i2yyCXGriJF1W7r_S5VFcX6sMz5Ezje5mNxtI-qxOCOLPif7BiT3GWEwBlW7fZKk/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 12px;margin:0;} form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="w2b-searchbox"> <form id="w2b-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value=""/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div>

اقرأ المزيد

اضافة ايقونة الشبكات الاجتماعية الى مدونة بلوجر

ايقونة جميلة وعند وضع المؤشر عليها تخرج الى الامام كما هو واضح 

بالصورة في الاعلى .

طريقة اضافتها سهلة وبسيطة كل ماعليك فعله التوجة الى :

 لوحة تحكم بلوجر ثم الى التخطيط 

نختار إضافة أداة 

عندها تخرج لنا نافذة نختار منها  HTML/JavaScript      
                  

نضع الكود التالي 

<style> /*www.allbloggingtools.com*/ .bubblewrap{ list-style-type:none; margin:0; padding:0; } .bubblewrap li{ display:inline; width: 60px; height:60px; } .bubblewrap li img{ width: 50px; /* width of each image.*/ height: 50px; /* height of each image.*/ border:0; margin-right: 4px; /*spacing between each image*/ -webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */ -o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */ } .bubblewrap li img:hover{ -moz-transform:scale(1.8); /*scale up image 1.8x*/ -webkit-transform:scale(1.8); -o-transform:scale(1.8); }</style> <br /> <center> <br /> <ul class="bubblewrap"> <li><a href="http://www.plus.google.com/ضع هنا معرف صفحتك"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4I4Ar2J2mhHzoPZusLr10O4-cuwgklHHG2VdJ1tXjTNcXj8elE76DefsdqnbeAKytOSuYR2b70nbaC9TNAJqqM4T-UNP0MQ8OUO8vklfiRjst9Z3tI0PBjnmAEUyER4W5RrkGahh_xaI/s1600/Google.png" title="Add to Google+" /></a></li> <li><a href="http://www.facebook.com/matjerblog"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9fZulNM7jdXiMsnYK75Hwm-sxGbTL9U-PQvaBDl1Rno3Z8RtrZ1kbB5jfEcDk171GkD10B0KvFFbtDzxrNOQSFyomzTxe_rsE-Ft9Zobf6Pm_1t5Z1hGdJz80iTNaEebtiPEjMelf8M0/s1600/Facebook.png" title="Add to Facebook" /></a></li> <li><a href="https://twitter.com/matjerblog"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgky9xQmkm99cY_8kVT5ZaGDNynlMWp-xSEE2Q9xA95QFpyng9shUxJR7p5KTzJ1ctVomdOsH9kiyExBmt6Vy0dR50Ofmn6bwsnicyHxAFDFDCBNfYe8MmnWHyZ5c-h2GR9G3qTImqo_YU/s1600/Twitter.png" title="Add to Twitter" /></a></li> <li><a href="http://feeds2.feedburner.com/blogspot/ndUfA"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB3whD_bCfpxuTi_93sX3IFFzIogrnqdg8zRc6mA7OIKbG5kCrvx_MYIhHOnWkWyTLxn-pFU1TvIEtMTI4p1qYXDY16DQeZudijCM2kwI6Nke6UkEfYRgvJ0zKiFAEaytHio-kzyocsKU/s1600/RSS.png" title="Add RSS Feed" /></a></li> </ul> </center> استبدل اسم المستخدم الخاص بصفحاتك على شبكات التواصل الاجتماعية بالاسماء الموجودة بالكود انتهى الشرح اذا اعجبك الموضوع اعمل مشاركة على شبكات التواصل الاجتماعية لمتابعة جديد المدونة اشترك بخدمة البريد الالكتروني ليصلك كل جديد

اقرأ المزيد

طريقة اضافة زر الى مدونتك مثل الفيس بوك

لإضافة هذا الزر الى مدونتك كل ماعليك هو الذهاب الى المدونة 

تحرير HTML

( ملاحظة : دائما قبل اي تغيير في القالب الخاص بك احفظ نسخة احتياطية )

ضع علامة على توسيع قوالب عناصر واجهة المستخدم


الان ابحث عن هذا الكود 

<data:post.body/> ثم ضع الكود التالي فوقة مباشرة <iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=100& action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:20px;'/>

اقرأ المزيد

اضافة ايقونة الوسائل الاجتماعية الى المدونة

طريقة اضافة اداة الوسائل الاجتماعية على مدونة بلوجرهي اداة تكون في آخر الموضوع بركن المدونة 

مميزة ومصممة بشكل جميل تكون مقفلة وعند وضع المؤشر عليها تخرج الوسائل الاجتماعية 

منها بشكل جميل كما هو واضح بالصورة بالاعلى 

طريقة التركيب سهلة جدا ولكن دائما قبل التعديل على HTML يجب عليك اخذ 

نسخة احتياطية للقالب حتى اذا يوجد غلط في عملية التعديل يكون لديك نسخة للقالب

الخاص فيك

لاخذ نسخة احتياطية 

اولا ندخل الى القالب 

ثانيا نسخ احتياطي

ثالثا تنزيل النموذج كامل 

الان لاضافة ايقونة الوسائل الاجتماعية 



الخطوة الاولى : نذهب الى قالب المدونة كما هو موضح بالصورة التالية 

ثم نضغط تحرير HTML 

نضع علامة امام توسيع قوالب عناصر واجهة المستخدم 

من لوحة تحكم الكمبيوتر الخاص بك نضغط على مفتاحي CTRL + F 

الان نبحث عن الكود التالي  

</head> ثم نضيف الكود التالي فوقة مباشرة <script type="text/javascript" src="http://w.sharethis.com/gallery/shareegg/shareegg.js"></script> <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script> <script type="text/javascript">stLight.options({publisher: "bea50586-2b9f-448d-947a-01385f28e305", onhover:false});</script> <link media="screen" type="text/css" rel="stylesheet" href="http://w.sharethis.com/gallery/shareegg/shareegg.css"></link> الان نبحث عن الكود التالي </body> ثم نضيف الكود التالي فوقة مباشرة <div style='position: fixed; bottom: 2%; left: 2%;'><div id='shareThisOrnament' class='shareEgg'></div> <script type='text/javascript'>stlib.shareEgg.createEgg('shareThisOrnament', ['facebook','twitter','googleplus','pinterest','stumbleupon','linkedin','email','sharethis'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'holiday'});</script> </div><a href="http://www.spiceupyourblog.com/">Blogger Wordpress Tips</a><!-- End Christmas Share Code From http://www.spiceupyourblog.com/ --> انتهى الشرح اذا اعجبك الموضوع اتمنى منك نشرة

اقرأ المزيد