قالب وجهاتْ النسخة الثالثة

»1- اضافة الايقونات الاجتماعية بتقنية CSS

1- اضافة الايقونات الاجتماعية بتقنية CSS

1- اضافة الايقونات الاجتماعية بتقنية CSS

 [IMG]https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJIYbe_7VeTi2fYsWcGUIQvLxV58HsW_8tTO-I88CaEoeu7Vy1tponhsa5s5jWM9xPpdweBGI3N1qKp2qdGnoLSy1_c9jzKRRXFqY9UWdILf0rBmmeF8b_gsfncCWuuD_QYKztRHbsu3A/s1600/1.PNG
[/IMG]

 معاينة مباشرة هـــــــــــــــــــــنــــــــــــــــــــا
الكود::
رمز Code:
<style type="text/css" >
#followq {clear: both;width: 300px;height: 40px;margin: 10px auto;}
#followq ul { margin: 0px;padding: 0px;}
#followq ul li {position: relative;list-style-type: none;display: inline-block;}
.ikonz .ikonz-tooltip {display: block;padding: 5px 10px;position: absolute;bottom: 100%;
left: 0px;z-index: 77;margin-bottom: 40px;background-color: #141414;font: bold 12px "Trebuchet MS",Arial,Sans-Serif;
color: white;text-align: center;-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.4);box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
-webkit-border-radius: 5px;-moz-border-radius: 5px;
border-radius: 5px;opacity: 0;
visibility: hidden;-webkit-transition: all 0.26s ease-out;
-moz-transition: all 0.26s ease-out;
-ms-transition: all 0.26s ease-out;
-o-transition: all 0.26s ease-out;
transition: all 0.26s ease-out;}
.ikonz .ikonz-tooltip:before {content: "";width: 0px;height: 0px;border: 7px solid transparent;border-top-color: #141414;position: absolute;top: 100%;left: 13px;}
.ikonz:hover .ikonz-tooltip {visibility:visible;opacity:1;margin-bottom:10px;z-index:99999;}
#followq .ikonz {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV9utsLvlSgf3-wuvHNjsRgHBmfePZFpyS2EIM4Q4m4ZwyANwMAFsHYsEo_zc-F5fN2yJnJys6-yFOJJps7UoDJyB0yVx5tmwxCzi3a6pWvJY9rbtPIN1RnD4wmZ38QbfdGNr1tXLh5g0/s1600/social3d.png') 0 0 no-repeat;display: block;
color: #141414;float: none;height: 39px;width: 39px;line-height: 39px;position: relative;z-index: 5;}
#followq .ikonz:active {bottom: -2px;}
#followq .fb {background-position: 0px 0px;}
#followq .twitter {background-position: -40px 0px;}
#followq .google {background-position: -80px 0px;}
#followq .delcis {background-position: -120px 0px;}
#followq .stumble {background-position: -200px 0px;}
#followq .mail {background-position: -280px 0px;}
#followq .rss {background-position: -360px 0px;}
</style>
<div id="followq">
<ul>
<li><a href="Link Facebook" class="ikonz fb"><span class="ikonz-tooltip">Facebook</span></a></li>
<li><a href="Link Twitter" class="ikonz twitter"><span class="ikonz-tooltip">Twitter</span></a></li>
<li><a href="Link Google+" class="ikonz google"><span class="ikonz-tooltip">Google+</span></a></li>
<li><a href="Link Delicious " class="ikonz delcis"><span class="ikonz-tooltip">Delicious</span></a></li>
<li><a href="Link StumbleUpon" class="ikonz stumble"><span class="ikonz-tooltip">StumbleUpon</span></a></li>
<li><a href="XXXXXXXXXX" class="ikonz mail"><span class="ikonz-tooltip">Mail</span></a></li>
<li><a href="Link RSS " class="ikonz rss"><span class="ikonz-tooltip">RSS</span></a></li>
</ul>
</div>
قم بستبدال الكلمات الملونة برابط موقعك في تلك الشبكات الاجتماعية
.................................................. .................................................. ....................

 2- ادراج شبكات التواصل الاجتماعي بطريقة رائعة

 معاينة مباشرة هـــــــــــــــــــــنــــــــــــــــــــا

 او هــــــــــــنـــــــــــــــــــــــا



الكود::
رمز Code:
<style type="text/css">
#buttonbg {width: 260px;margin: 10px 20px;padding: 0;}
#buttonbg li {cursor: pointer;height: 48px;position: relative;list-style-type: none;  }
#buttonbg .icon {background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoVWwwIqFekpImdCakfxOkCdG7AEGL2XfwOpzGlhhX0JZ6-uYfcN2L1KMt-7YSEvbnzyagzu7CaMxrmxzk0dhCdNFmYKa7ssL9NAMvitE78YHvYdu4Grwo1_8XzYbJUF0xKMDheUvRyjI/s1600/blsocial12.png') 0 0 no-repeat;
background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block;
color: #141414;float: none;height: 48px;line-height: 48px;
margin: 5px 0;position: relative;text-align: left;text-indent: 90px;
text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5;
-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;
-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;
-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
-moz-box-shadow: rgba(0,0,0, .28) 0 2px 3px;
-o-box-shadow: rgba(0,0,0, .28) 0 2px 3px;
box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
text-decoration: none;}
#buttonbg span:hover {visibility: hidden;}
#buttonbg span {display: block;top: 15px;position: absolute;left: 90px;}
#buttonbg .icon {color: #fafafa;overflow: hidden;}
#buttonbg .fb {background-color: rgba(45,118,185, .42); background-position: 0 -382px;}
#buttonbg .twit {background-color: rgba(0, 161, 223, .42); background-position: 0 -430px;}
#buttonbg .google {background-color: rgba(167, 0, 0, .42); background-position: 0 -478px;}
#buttonbg .pint {background-color: rgba(204, 0, 0, .42);background-position: 0 -526px;}
#buttonbg .linked {background-color: rgba(0, 87, 114, .42);  background-position: 0 -574px;}
#buttonbg .deviant {background-color: rgba(76, 122, 74, .42); background-position: 0 -622px;}
#buttonbg .ytube {background-color: rgba(170, 0, 0, .42); background-position: 0 -670px;}
#buttonbg .rss {background-color: rgba(255,109, 0, .42); background-position: 0 -718px;}
#buttonbg li:hover .icon {width: 250px; }
#buttonbg li:hover .icon {background-color: #d91e76; }
#buttonbg li:hover .fb {background-color: #2d76b9;background-position: 0 2px;}
#buttonbg li:hover .twit {background-color: #00A1DF; background-position: 0 -46px; }
#buttonbg li:hover .google {background-color: #A70000;background-position: 0 -94px;}
#buttonbg li:hover .pint {background-color: #C00;background-position: 0 -142px; }
#buttonbg li:hover .linked {background-color: #005772;background-position: 0 -190px;}
#buttonbg li:hover .deviant {background-color: #4C7A4A;background-position: 0 -238px;}
#buttonbg li:hover .ytube {background-color: #A00;background-position: 0 -286px; }
#buttonbg li:hover .rss {background-color: #EC5601;background-position: 0 -334px; }
#buttonbg .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}
</style>

<ul id="buttonbg">
<li ><a href="Link Facebook Anda" class="icon fb">Like us on Facebook</a><span>Like us on Facebook</span></li>
<li ><a href="Link Twitter Anda" class="icon twit" >Follow us on Twitter</a><span>Follow us on Twitter</span></li>
<li ><a href="Link Google+ Anda" class="icon google" >Follow us on Google+</a><span>Follow us on Google+</span></li>
<li ><a href="Link Pinterest Anda" class="icon pint">Follow us on Pinterest</a><span>Follow us on Pinterest</span></li>
<li ><a href="Link Linkedin Anda" class="icon linked" >Follow us on LinkedIn</a><span>Follow us on LinkedIn</span></li>
<li ><a href="Link Deviant Art Anda" class="icon deviant" >Follow us on DeviantArt</a><span>Follow us on DeviantArt</span></li>
<li ><a href="Link Youtube Anda" class="icon ytube">Follow us on Youtube</a><span>Follow us on Youtube</span></li>
<li ><a href="Link RSS/Feed Anda" class="icon rss" >Subscribe via RSS</a><span>Subscribe via RSS</span></li>
</ul>
* يمكنك تغير الجمل حسب ماتريد مثلا
Like us on Facebook تخليها تابعنا على فيس بوك

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

 .................................................. .................................................. ..........................
3- اضافات تويتر رائعة جدا Twitter Friends Widget ver 2.0 jQuery Plugin) 

 معاينة مباشرة هـــــــــــــــــــــنــــــــــــــــــــا

الكود
رمز Code:
<!-- Include javascript and CSS once -->
<link href="http://twitter-friends-widget.googlecode.com/svn/v2/light.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://twitter-friends-widget.googlecode.com/files/jquery.twitter-friends-2.0.min.js" type="text/javascript"></script>

<!-- Required HTML -->
<div class="twitter-friends" data-options="{ username:'RamzyatCom' }"></div>
فقط قم بتغيير RamzyatCom الى معرفك في تويتر

 .................................................. .................................................. .....

 4- اضافة كرة المشاركة المتممدده


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

 معاينة مباشرة هـــــــــــــــــــــنــــــــــــــــــــا
لاحض اسفل يسار الشاشة
الكود:::

 اذهب الى تعديل القالب 

 من ثم

 ابحث عن 
رمز Code:
</head>
والصق فوقه
رمز Code:
<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>
ابحث عن 
رمز Code:
</body>
والص فوقه
رمز Code:
<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>
ومبروك عليك

 .................................................. .................................................. .............................

الستايل الثاني


ابحث عن
رمز Code:
</head>

 الصق فوقه
رمز Code:
<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher: &quot;bea50586-2b9f-448d-947a-01385f28e305&quot;, onhover:false}); </script><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>
ابحث عن
رمز Code:
</body>
والص فوقه
رمز Code:
<div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg('shareThisShareEgg', ['facebook','twitter','googleplus','linkedin','blogger','stumbleupon','sharethis'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'shareegg'});</script>
.................................................. .....

 انتهى الشرح ... الشرح مقدم حصريا لمنتديات ترانديت برعاية رمزيات دوت كوم

 ارجو عند النقل ذكر المصدر وشكرا انتضرونا في الجزئ الثاني قريبا 
Hm

اسامة عبد الرضا : من الجمهورية العراقية, اهتمامي وحبي لتدوين هو ما جعلني أستمر ليس فقط لتقديم المواضيع بل أيضا لمساعدة الأشخاص المبتدئين ، كما كنت سابقا إلا أني لم أجد من يساعدني ! مع ذلك كافحة وواضبة على ما أحبه من عمل لأصل إلى ما أريده ، ليس كمستقبل لكن كهدف حققته ,لدي إهتمامات اخرى منها الرياضة ، ألعاب الفيديو ، والتصميم بحد ذاته ومدونة ويب نايت تعبر عما أهواه .

معلومات عن التدوينة الكاتب : Unknown في عدد التعليقات: تعليق 0 ، للإبلاغ عن رابط معطوب اضغط هنا
إرسال تعليق
شكرا لتعليقك

إتصل بنا

الإسم الكريم البريد الإلكتروني مهم الرسالة مهم
تصميم برو ويب