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

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

هذه هى صورة الشريط فى الجانب :

تم ازالة بعض الشبكات الاجتماعية الغير مشهورة 

>>>>   للمعاينة   <<<<

لتركيب هذه الاداة يرجى اتباع الخطوات الاتية :

1- الدخول الى لوجة التحكم فى المدونة .

2- ثم الذهاب الى القالب

3- ثم تحرير HTML

4- ابحث عن هذا الكود

]]></b:skin>

ثم اضف هذا الكود قبله مباشرة

/* The CSS Code for the menu starts here bloggertrix.com */
/* CoolDoood Social Network Tabs */
.MBC ul, .MBC li, .MBC h3 {
padding: 0;
margin: 0;
list-style: none!important;
}
.MBC {
font-size: 12px;
color: #666;
}
.active.MBC .mbc-slider {
-webkit-box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.6);
}
.MBC a {
text-decoration:none;
}
.MBC-content {
position: relative;
}
.social-tabs li {
padding: 4px;
width: 27px;
height: 26px;
z-index: 10;
}
.active .social-tabs li {
z-index: 10;
-webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6);
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6);
}
.active .social-tabs li.active {
z-index: 11;
-webkit-box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.6);
}
.static .social-tabs {
padding-left: 8px;
}
.static .social-tabs li {
float: left;
margin-right: 2px;
border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
}
.top .social-tabs {
padding-left: 8px;
}
.top.align-right .social-tabs {
padding-left: 0;
padding-right: 8px;
}
.top .social-tabs li {
padding: 3px 4px;
margin-right: 2px;
float: left;
border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
}
.right .social-tabs {
padding-top: 8px;
}
.right .social-tabs li {
margin: 0 0 2px 0;
border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
}
.bottom .social-tabs {
padding-left: 8px;
}
.bottom.align-right .social-tabs {
padding-left: 0;
padding-right: 8px;
}
.bottom .social-tabs li {
padding: 4px 4px 2px 4px;
margin: 0 2px 0 0;
float: left;
border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
}
.left .social-tabs {
padding-top: 8px;
}
.left .social-tabs li {
margin: 0 0 2px 0;
border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
}
.mbc-slider, .MBC-slider {
clear: both;
overflow: hidden;
}
.tab-content {
position: relative;
overflow: hidden;
z-index: 11;
background: url no-repeat center 200px;
}
.tab-content ul {
font-size: 11px;
}
.tab-content .tab-inner {
background: #fff;
overflow: hidden;
}
.tab-inner ul {
padding: 0 10px;
}
.tab-inner .profile {
position: relative;
padding: 10px;
border-bottom: 1px solid #ccc;
background: #ececec;
}
.tab-inner .profile h3 {
margin: 0;
padding: 3px 0 3px 26px;
position: relative;
}
.tab-inner .profile h3 a {
font-size: 14px;
text-decoration: none;
}
.tab-inner .profile h3, .tab-inner .profile h3 a {
color: #555;
text-shadow: 0 1px 0 #fff;
}
.tab-inner .MBC-btn {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
font: bold 12px/14px Arial, sans-serif;
display:inline-block;
text-decoration:none;
outline:none;
padding: 5px 8px;
background: #fcfcfc url repeat-x 0 0;
color: #fff;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}
.tab-inner .MBC-btn:hover{
background-position: 0 100%;
color: #fff;
}
.tab-inner .profile a.avatar{
display:block;
float:left;
text-decoration:none;
outline:none;
margin:0 10px 0 0
}
.tab-inner .profile a.avatar img{
padding:1px;
background: #fff;
border: 3px solid #ccc;
display:block
}
.tab-rss .profile h3 {
background: urlno-repeat 0 4px;
}
.tab-flickr .profile h3 {
background: url no-repeat 0 4px;
}
.tab-delicious .profile h3 {
background: url) no-repeat 0 4px;
}
.tab-twitter .profile h3 {
background: url no-repeat 0 4px;
}
.tab-facebook .profile h3 {
background: url no-repeat 0 4px;
}
.tab-fblike .profile h3 {
background: url no-repeat 0 4px;
}
.tab-fbrec .profile h3 {
background: url no-repeat 0 4px;
}
.tab-google .profile h3 {
background: url no-repeat 0 4px;
}
.tab-youtube .profile h3 {
background: url no-repeat 0 4px;
}
.tab-pinterest .profile h3 {
background: url no-repeat 0 4px;
}
.tab-lastfm .profile h3 {
background: url no-repeat 0 4px;
}
.tab-dribbble .profile h3 {
background: url no-repeat 0 4px;
}
.tab-vimeo .profile h3 {
background: url no-repeat 0 4px;
}
.tab-stumbleupon .profile h3 {
background: url no-repeat 0 4px;
}
.static .mbc-slider, .static .MBC-slider {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.static .tab-content {
padding: 10px;
}
.static .tab-inner {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.top .mbc-slider, .top .MBC-slider {
border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
}
.top .tab-inner {
border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
}
.top .tab-content {
padding: 0 10px 10px 10px;
}
.right .mbc-slider, .right .MBC-slider {
border-radius: 10px 0 0 10px;
-webkit-border-radius: 10px 0 0 10px;
-moz-border-radius: 10px 0 0 10px;
}
.right .tab-inner {
border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
}
.right .tab-content {
padding: 10px 0 10px 10px;
}
.bottom .mbc-slider, .bottom .MBC-slider {
border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
}
.bottom .tab-inner {
border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
}
.bottom .tab-content {
padding: 10px 10px 0 10px;
}
.left .mbc-slider, .left .MBC-slider {
border-radius: 0 10px 10px 0;
-webkit-border-radius: 0 10px 10px 0;
-moz-border-radius: 0 10px 10px 0;
}
.left .tab-inner {
border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
}
.left .tab-content {
padding: 10px 10px 10px 0;
}
.MBC .stream, .mbc .stream {
overflow: hidden;
}
.stream p {
margin: 0;
padding: 0;
}
.tab-inner ul li {
padding: 5px 0 20px 0;
margin: 0;
position: relative;
overflow: hidden;
background: none;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
}
.tab-inner ul li .thumb {
float: left;
margin: 0 10px 0 0;
}
.tab-inner ul li .thumb img {
border: 3px solid #ececec;
padding: 1px;
background: #fff;
}
.tab-inner ul li .logo {
margin-bottom: 3px;
}
.tab-inner ul li .title {
display: block;
font: bold 12px Arial, sans-serif;
margin-bottom: 3px;
}
.tab-inner ul li .title.clear {
clear: both;
}
.tab-inner ul li .text {
display: block;
}
.tab-inner ul li .text br{
display: none;
}
.tab-inner ul li .date {
position: absolute;
bottom: 5px;
left: 0;
font-style: italic;
color: #999;
font-size: 90%;
}
.tab-inner ul li .meta {
display: block;
font-size: 90%;
color: #999;
}
.tab-inner ul li .meta span {
margin: 0 8px 5px 0;
display: block;
float: left;
padding: 0 0 0 15px;
line-height: 12px;
}
.tab-dribbble .tab-inner ul li .thumb img {
margin-bottom: 5px;
}
.tab-lastfm .tab-inner ul li .title {
background: url no-repeat 0 0;
padding-left: 17px;
margin-bottom: 0;
}
.tab-google .tab-inner ul li .title {
margin-bottom: 5px;
}
.tab-vimeo .tab-inner ul li .text {
margin-bottom: 5px;
}
.tab-inner ul li .meta span.plusones {
padding-left: 0;
}
.tab-inner ul li .meta span.shares {
background: url no-repeat 0 0;
padding-left: 20px;
}
.tab-inner ul li .meta span.views {
background: url no-repeat 0 0;
padding-left: 18px;
}
.tab-inner ul li .meta span.likes {
background: url no-repeat 0 0;
padding-left: 16px;
}
.tab-inner ul li .meta span.comments {
background: url no-repeat 0 0;
}
.tab-inner ul li .meta span.users {
background: url no-repeat 0 0;
}
.tab-inner ul li .meta span.videos {
background: url no-repeat 0 0;
padding-left: 16px;
}
.tab-inner ul li.MBC-error {
color: #990000;
}
.MBC-loading {
background: url no-repeat 10px center;
padding: 10px 30px 10px 42px;
}
.controls {
position: absolute;
left: 10px;
height: 20px;
padding: 5px 0;
z-index: 12;
display: none;
background: url) repeat 0 0;
}
.controls ul {
padding: 0 10px;
}
.controls li {
display: inline;
}
.controls a {
display: block;
width: 20px;
height: 20px;
float: left;
margin-right: 4px;
background: url no-repeat 0 0;
}
.controls .prev {
background-position: -40px 0;
}
.controls .next {
background-position: -60px 0;
}
.controls .play {
background-position: 0 0;
}
.controls .pause {
background-position: -20px 0;
}
.controls .mbc-close {
background-position: -80px 0;
}
.controls .prev:hover {
background-position: -40px -20px;
}
.controls .next:hover {
background-position: -60px -20px;
}
.controls .play:hover {
background-position: 0 -20px;
}
.controls .pause:hover {
background-position: -20px -20px;
}
.controls .mbc-close:hover {
background-position: -80px -20px;
}
.static .controls {
bottom: 10px;
}
.top .controls {
bottom: 10px;
}
.right .controls {
bottom: 10px;
right: 0;
}
.bottom .controls {
bottom: 0;
}
.left .controls {
bottom: 10px;
left: 0;
}
.tab-google .tab-inner .google-page {
overflow: hidden;
height: 55px;
border-bottom: 1px solid #ccc;
}
.tab-google .tab-inner .google-page.standard {
height: 117px;
}
.tab-google .tab-inner .google-page.small iframe{
height: 69px;
margin-bottom: 0;
}
.tab-google .tab-inner .google-page.standard iframe{
height: 131px;
margin-bottom: 0;
}
.tab-flickr .tab-inner ul {
padding-top: 5px;
}
.tab-flickr .tab-inner li {
float: left;
padding: 0;
margin: 0 5px 5px 0;
border: none;
}
.tab-flickr .tab-inner li .thumb {
margin: 0;
}
.tab-flickr .tab-inner li img{
height: 70px;
}
.youtube-subscribe {
overflow: hidden;
height: 105px;
width: 100%;
border: 0;
}
.tab-digg .digg-widget .digg-widget-head.premium, .tab-digg .digg-widget .digg-widget-head {
height: auto;
overflow: hidden;
padding: 10px;
position: relative;
white-space: nowrap;
border: none;
border-radius: 0;
-webkit-border-radius: 0;
}
.tab-digg .digg-widget .digg-widget-head h2 {
font-size: 14px;
font-weight: bold;
line-height: 20px;
margin: 0;
overflow: hidden;
padding: 0 0 0 26px;
white-space: nowrap;
text-shadow: 0 1px 0 #fff;
background: url no-repeat 0 0;
}
.tab-digg .digg-widget .digg-widget-head a {
top: 12px;
}
.tab-digg .digg-widget-content {
border-top: 1px solid #ccc;
}
.tab-content.tab-linkedin .tab-inner {
background: #fff url(../images/loader.gif) no-repeat center center;
}
.tab-twitter,.tab-twitter .MBC-btn, li.active.MBC-twitter, li.MBC-twitter:hover{background-color:#4ec2dc;}.tab-facebook,.tab-facebook .MBC-btn, li.active.MBC-facebook, li.MBC-facebook:hover{background-color:#3b5998;}.tab-fblike,.tab-fblike .MBC-btn, li.active.MBC-fblike, li.MBC-fblike:hover{background-color:#3b5998;}.tab-fbrec,.tab-fbrec .MBC-btn, li.active.MBC-fbrec, li.MBC-fbrec:hover{background-color:#3b5998;}.tab-google,.tab-google .MBC-btn, li.active.MBC-google, li.MBC-google:hover{background-color:#2d2d2d;}.tab-rss,.tab-rss .MBC-btn, li.active.MBC-rss, li.MBC-rss:hover{background-color:#FF9800;}.tab-flickr,.tab-flickr .MBC-btn, li.active.MBC-flickr, li.MBC-flickr:hover{background-color:#f90784;}.tab-delicious,.tab-delicious .MBC-btn, li.active.MBC-delicious, li.MBC-delicious:hover{background-color:#3271CB;}.tab-youtube,.tab-youtube .MBC-btn, li.active.MBC-youtube, li.MBC-youtube:hover{background-color:#DF1F1C;}.tab-digg,.tab-digg .MBC-btn, li.active.MBC-digg, li.MBC-digg:hover{background-color:#195695;}.tab-pinterest,.tab-pinterest .MBC-btn, li.active.MBC-pinterest, li.MBC-pinterest:hover{background-color:#CB2528;}.tab-lastfm,.tab-lastfm .MBC-btn, li.active.MBC-lastfm, li.MBC-lastfm:hover{background-color:#C90E12;}.tab-dribbble,.tab-dribbble .MBC-btn, li.active.MBC-dribbble, li.MBC-dribbble:hover{background-color:#F175A8;}.tab-vimeo,.tab-vimeo .MBC-btn, li.active.MBC-vimeo, li.MBC-vimeo:hover{background-color:#4EBAFF;}.tab-stumbleupon,.tab-stumbleupon .MBC-btn, li.active.MBC-stumbleupon, li.MBC-stumbleupon:hover{background-color:#EB4924;}.tab-tumblr,.tab-tumblr .MBC-btn, li.active.MBC-tumblr, li.MBC-tumblr:hover{background-color:#365472;}.tab-deviantart,.tab-deviantart .MBC-btn, li.active.MBC-deviantart, li.MBC-deviantart:hover{background-color:#B8C529;}.tab-linkedin,.tab-linkedin .MBC-btn, li.active.MBC-linkedin, li.MBC-linkedin:hover{background-color:#006DA7;}.social-tabs li {background:#7d7d7d;}

ثم احفظ القالب ثم توجه الى التخطيط

و بعد ذلك اضف اداة  HTML&Java Script

ثم اضف فيها هذا الكود

<div id="MBC-2" class="MBC right align-top sliding" style="width: 360px; position: fixed; margin-right: -360px; top: 10px; right: 0px; "><div id="social-tabs" class="MBC-content">
<ul class="social-tabs" style="position: absolute; top: 0px; left: 0px; margin-left: -35px; width: 35px; ">
<li class="MBC-twitter first"><a href="رابط صفحة التويتر" rel="0" title="twitter"><img src="http://1.bp.blogspot.com/-xBOKgPOlVjY/UBVYAYzsGtI/AAAAAAAACQo/AMDko1yTznw/s320/twitter.png" alt="" rel="twitter" /></a></li>
<li class="MBC-facebook"><a href="http://www.facebook.com/pages/%D9%85%D8%AF%D9%88%D9%86%D8%A9-%D9%88%D9%8A%D9%86%D8%AF%D9%88%D8%B2-7-%D8%A7%D9%84%D8%B9%D8%B1%D8%A8%D9%8A%D8%A9/430164330353347?ref=hl" rel="1" title="facebook"><img src="http://1.bp.blogspot.com/--6Q5YLxZUKY/UBVWkh4rn1I/AAAAAAAACPI/HCcVF2YTJEI/s320/facebook.png" alt="" rel="facebook" /></a></li>
<li class="MBC-google"><a href="صفحة حساب جوجل" rel="4" title="google"><img src="http://1.bp.blogspot.com/-VpucjHQuLWk/UBVXYK-ZfbI/AAAAAAAACPs/WRJ3wLtJSfg/s320/google.png" alt="" rel="google" /></a></li>
<li class="MBC-linkedin"><a href="صفحة اللينكيد ان" rel="5" title="linkedin"><img src="http://1.bp.blogspot.com/-9EjdzY2Cvs8/UBVY0XugIFI/AAAAAAAACRM/W2afpfxj3cI/s320/linkedin.png" alt="" rel="linkedin" /></a></li>
<li class="MBC-rss"><a href="رابط الخلاصات" rel="6" title="rss"><img src="http://2.bp.blogspot.com/-iUNrYWpW988/UBVXYxBHMCI/AAAAAAAACQQ/WOyuBxGREkA/s320/rss.png" alt="" rel="rss" /></a></li>
<li class="MBC-delicious"><a href="رابط صفحة ديليشوس" rel="7" title="delicious"><img src="http://1.bp.blogspot.com/--FNvyhhovqU/UBVWkB89feI/AAAAAAAACOk/i1tBmlFgaV0/s320/delicious.png" alt="" rel="delicious" /></a></li>
<li class="MBC-youtube"><a href="رابط صفحة اليوتيوب" rel="8" title="youtube"><img src="http://4.bp.blogspot.com/-vbN6ifuNgGI/UBVYA3CJNOI/AAAAAAAACRA/YMiLLa8gW6w/s320/youtube.png" alt="" rel="youtube" /></a></li>
<li class="MBC-pinterest"><a href="رابط صفحتك فى بينتيريست" rel="10" title="pinterest"><img src="http://1.bp.blogspot.com/-O6jVOTHrd2Y/UBVXYus_ZjI/AAAAAAAACQE/KBGD_veEFj8/s320/pinterest.png" alt="" rel="pinterest" /></a></li>
</ul><ul class="MBC-slider"><li class="tab-content tab-twitter tab-active" style="height: 535px; width: 350px; position: relative; display: list-item; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
<li class="tab-content tab-facebook" style="height: 535px; width: 350px; position: relative; display: none; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
<li class="tab-content tab-fblike" style="height: 535px; width: 350px; position: relative; display: none; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
<li class="tab-content tab-fbrec" style="height: 535px; width: 350px; position: relative; display: none; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
<li class="tab-content tab-google" style="height: 535px; width: 350px; position: relative; display: none; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
<li class="tab-content tab-linkedin" style="height: 535px; width: 350px; position: relative; display: none; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
<li class="tab-content tab-rss" style="height: 535px; width: 350px; position: relative; display: none; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
<li class="tab-content tab-delicious" style="height: 535px; width: 350px; position: relative; display: none; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
<li class="tab-content tab-youtube" style="height: 535px; width: 350px; position: relative; display: none; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
<li class="tab-content tab-digg" style="height: 535px; width: 350px; position: relative; display: none; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
<li class="tab-content tab-pinterest" style="height: 535px; width: 350px; position: relative; display: none; ">
<div class="tab-inner" style="height: 535px; width: 350px; "></div></li>
</ul><div class="controls" style="width: 350px; display: none; "><ul><li><a href="#" class="pause"></a></li>
<li><a href="#" class="prev"></a></li><li><a href="#" class="next"></a></li><li><a href="#" class="mbc-close close"></a></li></ul></div></div></div>

قم بالضغط على ctrl+f و ابحث عن الاتى

رابط الفيسبوك

رابط صفحة تويتر

رابط صفحة اليوتيوب

رابط الخلاصات

صفحة حساب جوجل

صفحة اللينكد ان

صفحة ديليشيوس

ثم غيرهم الى روابطك الخاصة

و اخيرا قم بحفظ الاداة و استمتع بها 

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

بقلم جهاد صيام

جهاد صيام 21 سنة ، بلدي هو فلسطين ، أهتم بمتابعة جديد المعلوميات ، تطوير المدونات ، و مصمم صفحات HTML ، و دروس متنوعة حصرية

قسم : بلوجر