طريقة اضافة أداة أزرار مواقع التواصل الاجتماعي لمدونة بلوجر - نسخة قابلة للطباعة +- المفيـد (https://allmofid.com) +-- قسم : تطوير المواقع و المنتديات (https://allmofid.com/forumdisplay.php?fid=141) +--- قسم : تطوير المواقع والمنتديات وحلولها (https://allmofid.com/forumdisplay.php?fid=57) +--- الموضوع : طريقة اضافة أداة أزرار مواقع التواصل الاجتماعي لمدونة بلوجر (/showthread.php?tid=889) |
طريقة اضافة أداة أزرار مواقع التواصل الاجتماعي لمدونة بلوجر - houssemkh - 03-15-2014 [center]السلام عليكم السوم سأشرح لكم طريقة لاضافة أداة جميلة جدا لمدونتكم #Blogger و المتمثلة في أداة ''[glow=red]تابعني على[/glow]'' أو " [glow=red]Follow us[/glow]:" و التي تظهر ازرار مواقع التواصل الاجتماعي [highlight=#ff4040]Google+ , Facebook, Twitter, Pinterest[/highlight] في شكل قائمة منزلقة افقيا تحت بعضها البعض من ما يمكن الزائرين من الضغط عليها و متابعة حساباتكم على هذه المواقع بكل سهولة مثلما في الصورة ************ ********** [highlight=#ff40bf]خطوات اضافة الأداة[/highlight] [highlight=#ff4040]أولا:[/highlight]نذهب الى المدونة الخاصة *ننقر فوق "[highlight=#ff4040]تخطيط[/highlight]" ثم "[highlight=#ff4080]اضافة أداة[/highlight]" كما هو موضح في الصورة <!-- m --><a class="postlink" href="http://www12.0zz0.com/2014/03/06/09/795469431.jpg">http://www12.0zz0.com/2014/03/06/09/795469431.jpg</a><!-- m --> ************** [highlight=#ff4040]ثانيا:[/highlight] نختار من القائمة html/javascript كما هو موضح في الصورة ************** [highlight=#ff4040]ثالثا:[/highlight]نقوم باختيار عنوان للأداة مثل "تابعني على" ثم نقوم بنسخ الكود التالي في المكان المخصص له ، مع تبديل [highlight=#ff4040]الروابط التي باللون الأحمر[/highlight] بروابط حساباتكم الخاصة ******************* <style> #tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;} #tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;} #tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;} #tbisose .googleplus, .facebook, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://lh4.googleusercontent.com/-l0EYSSxxuc8/UFd37FdwjzI/AAAAAAAAG2E/CDbmwPO4haA/s800/sprites.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-javascript:void(0)shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#FFFFFF; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;} #tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#FFFFFF; content:attr(data-alt); line-height:32px;} #tbisose .icon{overflow:hidden; color:#fafafa;} #tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;} #tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;} #tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;} #tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;} #tbisose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;} #tbisose li:hover .icon, .touch #tbisose li .icon{width:210px;} .touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);} .touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);} .touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);} .touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);} .touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);} </style> <ul id="tbisose"> <li data-alt="+Follow us on Google"><a class="icon googleplus"href="[highlight=#ff4040]https://plus.google.com/u/0/112722828355861868913[/highlight]">+Follow us on Google</a></li> <li data-alt="Follow us on Facebook"><a class="icon facebook"href="[highlight=#ff4040]https://www.facebook.com/houssem.mysetrious[/highlight]">Follow us on Facebook</a></li> <li data-alt="Follow us on Twitter "><a class="icon twitter"href="[highlight=#ff4080]https://twitter.com/Patrick_Houssem[/highlight]">Follow us on Twitter</a></li> <li data-alt="Follow us on Pinterest"><a class="icon pinterest"href="[highlight=#ff4080]http://www.pinterest.com/PatrickHoussem/[/highlight]">Follow us on Pinterest</a></li> </ul> *********** ثم نضغط على "[highlight=#ff4080]حفظ[/highlight]" كما هو موضح في الصورة **************** ************** [highlight=#ff4040]رابعا:[/highlight] نضغط على "[highlight=#ff4040]حفظ الترتيب[/highlight]" في أعلى اليسار كما هو موضح في الصورة *************** و مبروك اضافة أداة ************* كما يمنكم اضافة أداة ''[highlight=#ff4040]تابعني على يوتوب[/highlight]'' قرب الأداة السابقة لتكتمل القائمة ************* ********** و الطريقة موضحة في الموضوع التالي: http://houssemmedia.blogspot.com/2014/03/blog-post_9925.html ************** بالتوفيق [highlight=#ff4040]المصدر:[/highlight] http://houssemmedia.blogspot.com/2014/03/blog-post_7.html[/center] Re: طريقة اضافة أداة أزرار مواقع التواصل الاجتماعي لمدونة بل - saboha abdasalem - 03-15-2014 Re: طريقة اضافة أداة أزرار مواقع التواصل الاجتماعي لمدونة بل - houssemkh - 03-16-2014 saboha abdasalem كتب :العفو و يبارك فيك |