إضافة مواقع التواصل الإجتماعي إحترافية بتقنية

الجمعة، 30 مايو 2014

السلام عليكم ورحمة الله وبركاته

عندما إنتهيت من تصميم هذه الإضافة أحببت أن أشارك معكم هي إضافة فريدة من نوعها وهي تحمل عدت مواقع ربحية و تواصلية و مواقع خاص بالفديوهات أتمنا أن تنال إعجابكم .

مثال مباشر : هنا

طريقة إضافتها إلى مدونتكم :

اقرأ ايضا

1- الذهاب إلى التخطيط .

2- ثم اذهب إلى javascript/HTML .

3- وأضف الكود التالي .

الكود :

<ul
 class="alam-geek_nav">
<li><a class="alam-geek_navi" 
href="#" id="home">الرئيسية</a></li>
<li><a 
class="alam-geek_navi" target="_blank" rel="nofollow" href="#" 
id="twitr">تويتر</a></li>
<li><a 
class="alam-geek_navi" target="_blank" rel="nofollow" href="#" 
id="ggl">جوجل بلس</a></li>
</ul>
<ul 
class="alam-geek_nav">
<li><a class="alam-geek_navi" 
target="_blank" rel="nofollow" href="#" id="face">فيس 
بوك</a></li>
<li><a class="alam-geek_navi" 
target="_blank" rel="nofollow" href="#" 
id="you">يوتيوب</a></li>
<li><a 
class="alam-geek_navi" target="_blank" rel="nofollow" href="#" 
id="khamsat">خمسات</a></li>
</ul>
<ul 
class="alam-geek_nav">
<li><a class="alam-geek_navi" 
target="_blank" rel="nofollow" href="#" 
id="rss">rss</a></li>
<li><a 
class="alam-geek_navi" href="#" 
id="envato">envato</a></li>
<li><a 
class="alam-geek_navi" href="#" id="vimeo">    فيميو   
</a></li>
</ul>
<style>    .alam-geek_nav { float:
 left; width: 300px; } ol, ul { list-style: none; } .alam-geek_nav li { 
float: right; margin-left: 5px; } a#twitr { background: 
url('http://2.bp.blogspot.com/-Zg4RmFTwbB0/Uy7MsjIYndI/AAAAAAAAAI4/tRW3V39QwQA/s1600/icns+(1).png')
 no-repeat 24px -73px #0ED6CE; } a#twitr:hover { background: 
url('http://2.bp.blogspot.com/-Zg4RmFTwbB0/Uy7MsjIYndI/AAAAAAAAAI4/tRW3V39QwQA/s1600/icns+(1).png')
 no-repeat -60px -73px #333; } a#ggl { background: 
url('http://2.bp.blogspot.com/-Zg4RmFTwbB0/Uy7MsjIYndI/AAAAAAAAAI4/tRW3V39QwQA/s1600/icns+(1).png')
 no-repeat 24px -235px #ED5029; } a#ggl:hover { background: 
url('http://2.bp.blogspot.com/-Zg4RmFTwbB0/Uy7MsjIYndI/AAAAAAAAAI4/tRW3V39QwQA/s1600/icns+(1).png')
 no-repeat -60px -235px #333; } a#face { background: 
url('http://2.bp.blogspot.com/-Zg4RmFTwbB0/Uy7MsjIYndI/AAAAAAAAAI4/tRW3V39QwQA/s1600/icns+(1).png')
 no-repeat 28px -151px #5157DF; } a#face:hover { background: 
url('http://2.bp.blogspot.com/-Zg4RmFTwbB0/Uy7MsjIYndI/AAAAAAAAAI4/tRW3V39QwQA/s1600/icns+(1).png')
 no-repeat -60px -151px #333; } a#you { background: 
url('http://4.bp.blogspot.com/-NMQPqof8FHk/Uy7NkCjoooI/AAAAAAAAAJA/_a3Eecli1KY/s1600/Ft99u.png')
 no-repeat 26px -397px #ff0000; } a#you:hover { background: 
url('http://4.bp.blogspot.com/-NMQPqof8FHk/Uy7NkCjoooI/AAAAAAAAAJA/_a3Eecli1KY/s1600/Ft99u.png')
 no-repeat -67px -397px #333; } a#rss { background: 
url('http://4.bp.blogspot.com/-NMQPqof8FHk/Uy7NkCjoooI/AAAAAAAAAJA/_a3Eecli1KY/s1600/Ft99u.png')
 no-repeat 24px -480px #ff5a00; } a#rss:hover { background: 
url('http://4.bp.blogspot.com/-NMQPqof8FHk/Uy7NkCjoooI/AAAAAAAAAJA/_a3Eecli1KY/s1600/Ft99u.png')
 no-repeat -65px -480px #333; } a#khamsat { background: 
url('http://4.bp.blogspot.com/-NMQPqof8FHk/Uy7NkCjoooI/AAAAAAAAAJA/_a3Eecli1KY/s1600/Ft99u.png')
 no-repeat 24px -318px #f2bb12; } a#khamsat:hover { background: 
url('http://4.bp.blogspot.com/-NMQPqof8FHk/Uy7NkCjoooI/AAAAAAAAAJA/_a3Eecli1KY/s1600/Ft99u.png')
 no-repeat -65px -318px #333; } a#home { background: 
url('http://2.bp.blogspot.com/-Zg4RmFTwbB0/Uy7MsjIYndI/AAAAAAAAAI4/tRW3V39QwQA/s1600/icns+(1).png')
 no-repeat 24px -322px #df517f; } a#home:hover { background: 
url('http://2.bp.blogspot.com/-Zg4RmFTwbB0/Uy7MsjIYndI/AAAAAAAAAI4/tRW3V39QwQA/s1600/icns+(1).png')
 no-repeat -64px -322px #333; } a#envato { background: 
url('http://4.bp.blogspot.com/-kLqd3YULB58/Uy7bBfzERcI/AAAAAAAAAJc/wClGmRgk_IE/s1600/99u.png')
 no-repeat 24px -150px #78c312; } a#envato:hover { background: 
url('http://4.bp.blogspot.com/-kLqd3YULB58/Uy7bBfzERcI/AAAAAAAAAJc/wClGmRgk_IE/s1600/99u.png')
 no-repeat -65px -150px #333; } a#vimeo { background: 
url('http://2.bp.blogspot.com/-al_tFvnZFOo/Uy7fyyVy5_I/AAAAAAAAAJs/lbArw_YIztk/s1600/Ft99u.pn')
 no-repeat 24px -150px #CC3333; } a#vimeo:hover { background: 
url('http://2.bp.blogspot.com/-al_tFvnZFOo/Uy7fyyVy5_I/AAAAAAAAAJs/lbArw_YIztk/s1600/Ft99u.png')
 no-repeat -65px -150px #333; } .alam-geek_nav li .hdr_navi:hover { 
background-color: #ffffff; color: #df517f; } a:hover, body a:hover  { 
color: #df517f; text-decoration: none; } a { text-decoration: none; } 
.alam-geek_nav li .alam-geek_navi { display: block; height: 35px; width:
 95px;   border-radius: 10px;  background: url('img/big_ics.png') 
no-repeat -202px 33px #2ad0ff; color: #fff; font-family: goth; 
font-size: 20px; 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>

أريد طلب واحد هو ترك التعليق

الجمعة، 30 مايو 2014