السلام عليكم طريقة اضافة ازرار التواصل الاجتماعي الى المدونة وهذه الطريقة يبحث عنها الكثيرون الخطوة الاولى اذهب الى المدونة ثم اختار التخطيط

كما موضح بصورة

بعده مباشرة سوف تضهر لك هذه الصفحة تقوم بضغط على صفحة جديدة. اضغط على الصورة لتكبير

بعدها سوف تضهر لك نافذه فيها عدة خيارات تضغط على خيار HTML/JavaScript والصق الكود ستجده اسفل التدوينة في الربع مع كتابة العنوان في المربع الفوق

بعدها قم بضغط على حفض لتضهر في الصفحة الرئسية

الكود الذي لونه ازرق غيره الى رابط حسابك

<ul class="pro-ayoub_nav">
<li><a class="pro-ayoub_navi" target="_blank" rel="nofollow" href="https://twitter.com/the4pro" id="twitr">تويتر</a></li>
<li><a class="pro-ayoub_navi" target="_blank" rel="nofollow" href="https://plus.google.com/u/0/100666226145759658343/posts" id="ggl">جوجل بلس</a></li>
<li><a class="pro-ayoub_navi" target="_blank" rel="nofollow" href="https://www.facebook.com/prochoro7ate/" id="face">فيس بوك</a></li>
</ul>
<ul class="pro-ayoub_nav">
<li><a class="pro-ayoub_navi" target="_blank" rel="nofollow" href="https://www.youtube.com/channel/UCg00rIlzsef3htmX9AWD9DA" id="you">يوتيوب</a></li>
<li><a class="pro-ayoub_navi" target="_blank" rel="nofollow" href="#" id="khamsat">خمسات</a></li>
<li> <a class="pro-ayoub_navi" target="_blank" rel="nofollow" href="#" id="rss">rss</a></li>
</ul>
<style>
.pro-ayoub_nav {
float: left;
width: 300px;
}
ol, ul {
list-style: none;
}
.pro-ayoub_nav li {
float: right;
margin-left: 5px;
}
a#twitr {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat 24px -73px #0ED6CE;
}
a#twitr:hover {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat -60px -73px #ffffff;
}
a#ggl {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat 24px -235px #ED5029;
}
a#ggl:hover {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat -60px -235px #ffffff;
}
a#face {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat 28px -151px #5157DF;
}
a#face:hover {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat -60px -151px #ffffff;
}
a#you {
background: url('http://im54.gulfup.com/Ft99u.png') no-repeat 26px -397px #ff0000;
}
a#you:hover {
background: url('http://im54.gulfup.com/Ft99u.png') no-repeat -67px -397px #ffffff;
}
a#khamsat {
background: url('http://im54.gulfup.com/Ft99u.png') no-repeat 24px -318px #f2bb12;
}
a#khamsat:hover {
background: url('http://im54.gulfup.com/Ft99u.png') no-repeat -65px -318px #ffffff;
}
a#rss {
background: url('http://im54.gulfup.com/Ft99u.png') no-repeat 24px -480px #ff5a00;
}
a#rss:hover {
background: url('http://im54.gulfup.com/Ft99u.png') no-repeat -65px -480px #ffffff;
}
.pro-ayoub_nav li .hdr_navi:hover {
background-color: #ffffff;
color: #df517f;
}
a:hover, body a:hover  {
color: #df517f;
text-decoration: none;
}
a {
text-decoration: none;
}
.pro-ayoub_nav li .pro-ayoub_navi {
display: block;
height: 35px;
width: 95px;
background: url('img/big_ics.png') no-repeat -202px 33px #2ad0ff;
color: #fff;
font-family: goth;
font-size: 14px;
text-align: center;
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-o-transition: all 600ms ease;
-ms-transition: all 600ms ease;
transition: all 600ms ease;
padding-top: 60px;
}
@font-face {
 font-family: 'goth';
 src: url(//:) format('no404'), url('https://themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
}
</style>

وهذا فديو من

مدونة محترف الشروحات اشترك في قناته واضغط على زر الايك

الاثنين، 8 فبراير 2016

أضافة ازرار التواصل الاجتماعي الى المدونة بأشكال رائعة وجذابة

مدونة محترف الشروحات اشترك في قناته واضغط على زر الايك

ليست هناك تعليقات:

إرسال تعليق

اعلان

المشاركات الشائعة