loulou ange
11-01-2013, بتوقيت غرينيتش 08:07 AM
http://4.bp.blogspot.com/-NgOE3m_3m-g/UVYrSKtdFHI/AAAAAAAABUo/97qZprBYX-s/s1600/%D8%A5%D8%B6%D8%A7%D9%81%D8%A9+%D8%A3%D8%B2%D8%B1% D8%A7%D8%B1+%D8%B9%D8%A7%D8%A6%D9%85%D8%A9+%D9%84% D9%84%D9%85%D9%88%D8%A7%D9%82%D8%B9+%D8%A7%D9%84%D 8%A5%D8%AC%D8%AA%D9%85%D8%A7%D8%B9%D9%8A%D8%A9+%D9 %81%D9%8A+%D8%A7%D9%84%D9%85%D8%AF%D9%88%D9%86%D8% A9.png
السلام عليكم ورحمة الله
في تدوينة اليوم سنتابع شرح طريقة إضافة أزرار عائمة للمواقع الاجتماعية في يمين المدونة blog تعطيها شكلا جميل واحترافية أكثر.
http://3.bp.blogspot.com/-m6HzP0MxfXk/UVYbQkoAWgI/AAAAAAAABUY/O1wWLTZ2CeQ/s320/29-03-2014+22-45-34.png (http://3.bp.blogspot.com/-m6HzP0MxfXk/UVYbQkoAWgI/AAAAAAAABUY/O1wWLTZ2CeQ/s1600/29-03-2014+22-45-34.png)
مشاهدة مباشرة (http://adf.ly/Lt8Un)
ننتقل الى شرح طريقة إضافة الأزرار الى المدونة blog
1- في لوحة تحكم بلوجر انقر على قالب template ثم تحرير HTML
ضع علامة في المربع ثم قم بالبحث عن الكود code التالي :
]]></b:skin>
قم بوضع هذا الكود code أعلاه مباشرة
رمز Code:
.social-buttons { position: fixed; top: 130px; width: 45px; z-index: 9999; } .button-left { left: 0; } .button-right { right: 0; } .social-buttons #twitter-btn .social-icon, .social-buttons #facebook-btn .social-icon, .social-buttons #google-btn .social-icon, .social-buttons #rss-btn .social-icon, .social-buttons #pinterest-btn .social-icon, .social-buttons #youtube-btn .social-icon { background-color: #33353B; background-image: url(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/s1600/mas-icons.png); } .button-left #facebook-btn span { background-position: right 10px; } .button-left #twitter-btn span { background-position: right -35px; } .button-left #google-btn span { background-position: right -127px; } .button-left #rss-btn span { background-position: right -80px; } .button-left #pinterest-btn span { background-position: 11px -177px; } .button-left #youtube-btn span { background-position: 11px -223px; } .button-right #facebook-btn span { background-position: 12px 10px; } .button-right #twitter-btn span { background-position: 11px -35px; } .button-right #google-btn span { background-position: 10px -127px; } .button-right #rss-btn span { background-position: 11px -80px; } .button-right #pinterest-btn span { background-position: 11px -177px; } .button-right #youtube-btn span { background-position: 11px -223px; } .social-buttons #facebook-btn:hover .social-icon { background-color: #3B5998; } .social-buttons #twitter-btn:hover .social-icon { background-color: #62BDB2; } .social-buttons #google-btn:hover .social-icon { background-color: #DB4A39; } .social-buttons #rss-btn:hover .social-icon { background-color: #FF8B0F; } .social-buttons #pinterest-btn:hover .social-icon { background-color: #D43638; } .social-buttons #youtube-btn:hover .social-icon { background-color: #C4302B; } .social-buttons a:hover .social-text { display: block; } .button-left .social-icon { -moz-transition: background-color 0.4s ease-in 0s; -webkit-transition: background-color 0.4s ease-in 0s; background-repeat: no-repeat; display: block; float: left; height: 43px; margin-bottom: 2px; width: 43px; } .button-left .social-text { display: none; float: right; font-size: 1em; font-weight: bold; margin: 11px 40px 11px 0px; white-space: nowrap; } .button-right .social-icon { -moz-transition: background-color 0.4s ease-in 0s; -webkit-transition: background-color 0.4s ease-in 0s; background-repeat: no-repeat; display: block; float: right; height: 43px; margin-bottom: 2px; width: 43px; } .button-right .social-text { display: none; float: left; font-size: 80%; font-weight: bold; margin: 11px 0 11px 40px; white-space: nowrap; } .social-buttons .social-text { color: #FFFFFF; }
2- قم بالبحث عن هذا الكود code
</head>
قم بوضع هذا الكود code أعلاه مباشرة
رمز Code:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/> <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/> <script> $(window).load(function(){ $('.social-buttons .social-icon').mouseenter(function(){ $(this).stop(); $(this).animate({width:'160'}, 500, 'easeOutBounce',function(){}); }); $('.social-buttons .social-icon').mouseleave(function(){ $(this).stop(); $(this).animate({width:'43'}, 500, 'easeOutBounce',function(){}); }); }); </script>
3- قم بالبحث عن الكود code التالي :
</body>
قم بوضع هذا الكود code أعلاه مباشرة
رمز Code:
<div class='social-buttons button-right hidden-phone hidden-tablet'> <a class='itemsocial' href='https://www.facebook.com/your FB' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a> <a class='itemsocial' href='https://twitter.com/your twitter' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a> <a class='itemsocial' href='https://plus.google.com/your G+' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a> <a class='itemsocial' href='http://pinterest.com/your ID' id='pinterest-btn' target='_blank'><span class='social-icon'> <span class='social-text'>Follow via Pinterest</span></span></a> <a class='itemsocial' href='https://www.youtube.com/user/your ID' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a> <a class='itemsocial' href='http://feeds.feedburner.com/your feed' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a> </div>
* قم باستبدال الروابط المؤشر عليها باللون الأحمر الى روابط حساباتك الخاصة
ومبروك عليك الإضافة الجديدة
أي استفسار أو مشكل اتركه في تعليق
في أمان الله http://www.dzbatna.com/images/smilies/cupidarrow.gif
للمزيد من الاضافات تابعنا : www.efada.net (http://www.efada.net)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
السلام عليكم ورحمة الله
في تدوينة اليوم سنتابع شرح طريقة إضافة أزرار عائمة للمواقع الاجتماعية في يمين المدونة blog تعطيها شكلا جميل واحترافية أكثر.
http://3.bp.blogspot.com/-m6HzP0MxfXk/UVYbQkoAWgI/AAAAAAAABUY/O1wWLTZ2CeQ/s320/29-03-2014+22-45-34.png (http://3.bp.blogspot.com/-m6HzP0MxfXk/UVYbQkoAWgI/AAAAAAAABUY/O1wWLTZ2CeQ/s1600/29-03-2014+22-45-34.png)
مشاهدة مباشرة (http://adf.ly/Lt8Un)
ننتقل الى شرح طريقة إضافة الأزرار الى المدونة blog
1- في لوحة تحكم بلوجر انقر على قالب template ثم تحرير HTML
ضع علامة في المربع ثم قم بالبحث عن الكود code التالي :
]]></b:skin>
قم بوضع هذا الكود code أعلاه مباشرة
رمز Code:
.social-buttons { position: fixed; top: 130px; width: 45px; z-index: 9999; } .button-left { left: 0; } .button-right { right: 0; } .social-buttons #twitter-btn .social-icon, .social-buttons #facebook-btn .social-icon, .social-buttons #google-btn .social-icon, .social-buttons #rss-btn .social-icon, .social-buttons #pinterest-btn .social-icon, .social-buttons #youtube-btn .social-icon { background-color: #33353B; background-image: url(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/s1600/mas-icons.png); } .button-left #facebook-btn span { background-position: right 10px; } .button-left #twitter-btn span { background-position: right -35px; } .button-left #google-btn span { background-position: right -127px; } .button-left #rss-btn span { background-position: right -80px; } .button-left #pinterest-btn span { background-position: 11px -177px; } .button-left #youtube-btn span { background-position: 11px -223px; } .button-right #facebook-btn span { background-position: 12px 10px; } .button-right #twitter-btn span { background-position: 11px -35px; } .button-right #google-btn span { background-position: 10px -127px; } .button-right #rss-btn span { background-position: 11px -80px; } .button-right #pinterest-btn span { background-position: 11px -177px; } .button-right #youtube-btn span { background-position: 11px -223px; } .social-buttons #facebook-btn:hover .social-icon { background-color: #3B5998; } .social-buttons #twitter-btn:hover .social-icon { background-color: #62BDB2; } .social-buttons #google-btn:hover .social-icon { background-color: #DB4A39; } .social-buttons #rss-btn:hover .social-icon { background-color: #FF8B0F; } .social-buttons #pinterest-btn:hover .social-icon { background-color: #D43638; } .social-buttons #youtube-btn:hover .social-icon { background-color: #C4302B; } .social-buttons a:hover .social-text { display: block; } .button-left .social-icon { -moz-transition: background-color 0.4s ease-in 0s; -webkit-transition: background-color 0.4s ease-in 0s; background-repeat: no-repeat; display: block; float: left; height: 43px; margin-bottom: 2px; width: 43px; } .button-left .social-text { display: none; float: right; font-size: 1em; font-weight: bold; margin: 11px 40px 11px 0px; white-space: nowrap; } .button-right .social-icon { -moz-transition: background-color 0.4s ease-in 0s; -webkit-transition: background-color 0.4s ease-in 0s; background-repeat: no-repeat; display: block; float: right; height: 43px; margin-bottom: 2px; width: 43px; } .button-right .social-text { display: none; float: left; font-size: 80%; font-weight: bold; margin: 11px 0 11px 40px; white-space: nowrap; } .social-buttons .social-text { color: #FFFFFF; }
2- قم بالبحث عن هذا الكود code
</head>
قم بوضع هذا الكود code أعلاه مباشرة
رمز Code:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/> <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/> <script> $(window).load(function(){ $('.social-buttons .social-icon').mouseenter(function(){ $(this).stop(); $(this).animate({width:'160'}, 500, 'easeOutBounce',function(){}); }); $('.social-buttons .social-icon').mouseleave(function(){ $(this).stop(); $(this).animate({width:'43'}, 500, 'easeOutBounce',function(){}); }); }); </script>
3- قم بالبحث عن الكود code التالي :
</body>
قم بوضع هذا الكود code أعلاه مباشرة
رمز Code:
<div class='social-buttons button-right hidden-phone hidden-tablet'> <a class='itemsocial' href='https://www.facebook.com/your FB' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a> <a class='itemsocial' href='https://twitter.com/your twitter' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a> <a class='itemsocial' href='https://plus.google.com/your G+' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a> <a class='itemsocial' href='http://pinterest.com/your ID' id='pinterest-btn' target='_blank'><span class='social-icon'> <span class='social-text'>Follow via Pinterest</span></span></a> <a class='itemsocial' href='https://www.youtube.com/user/your ID' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a> <a class='itemsocial' href='http://feeds.feedburner.com/your feed' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a> </div>
* قم باستبدال الروابط المؤشر عليها باللون الأحمر الى روابط حساباتك الخاصة
ومبروك عليك الإضافة الجديدة
أي استفسار أو مشكل اتركه في تعليق
في أمان الله http://www.dzbatna.com/images/smilies/cupidarrow.gif
للمزيد من الاضافات تابعنا : www.efada.net (http://www.efada.net)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
