الكثير منا يحتاج لاضافة مواقع التواصل الاجتماعي مثل صندوق فيس بوك وصندوق تويتر والاهم صندوق الانضمام بالمدونة
لذالك قمت بتصميم صندوق يضم هذه الاضفات ب 3 اشكال مختلفة وجميلة .
تركيب الإضافة
1. من لوحة التحكم >> التخطيط>>أضف أداة "HTML/Javascript "جديدة وضع بها كود الاضافة:الشكل الأول
<div class="widget HTML" id="HTML7"> <div class="widget-content"> <style>
a.libya-btn{border:none;cursor:pointer;padding:10px 20px;display:inline-block;margin:15px;text-transform:uppercase;letter-spacing:1px;font-weight:700;outline:0;position:relative;border-radius:3px;-webkit-animation: anim 2s ease-in infinite;animation: anim 2s ease-in infinite;transition:all .3s}
a.libya-btn:after {
content: '';position:absolute;z-index:-1;transition:all .3s;}
a.libya-btn:before{font-family:Fontawesome;font-style:normal;font-weight:400;font-variant:normal}
a.libya-button{background:#4f93c5;color:#fff!important;overflow:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden}
a.libya-button:active {background:#4786b5;top:2px;}
a.libya-button span {display:inline-block;width:100%;height:100%;transition:all 0.3s;backface-visibility:hidden;}
a.libya-button:before{position:absolute;height:100%;width:100%;line-height:2.2;font-size:130%;transition:all .3s}
a.libya-button:active:before {color:#fff;}
a.libya-buttona:hover span {-webkit-transform: translateY(300%);-moz-transform: translateY(300%);-ms-transform: translateY(300%);transform: translateY(300%);}
a.libya-buttona:before {left:0;top:-110%;}
a.libya-buttona:hover:before {top:0;}
a.icon-result:before {content: "";}
@-webkit-keyframes anim{5%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}10%{-webkit-transform:scale(.9,1.1) translateY(-.5rem);transform:scale(.9,1.1) translateY(-.5rem)}15%{-webkit-transform:scale(1);transform:scale(1)}}
@keyframes anim{5%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}10%{-webkit-transform:scale(.9,1.1) translateY(-.5rem);transform:scale(.9,1.1) translateY(-.5rem)}15%{-webkit-transform:scale(1);transform:scale(1)}}
.socialv3
{width:220px;
}
.bagidua
{
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
</style>
<style> #HTML7 { background: URL (http://a.top4top.net/p_852fac1.gif); } #fanpages{padding: 0; position: relative; text-align: center; list-style: none!important; background: #fafafa; border-radius: 4px!important; box-shadow: inset 0 0 0 1px #e8e8e8;} #fanpages p{list-style:none;padding:0;margin:0 0 5px} #fanpages a.a-fans{clear:both;background:#39599a;color:#fff;display:inline-block;font-weight:700;width:100%;max-width:100%;font-size:22px;list-style:none;text-align:center;margin:0 auto;padding:30px 0;border-radius:4px 4px 0 0!important;overflow:hidden;font-family: 'Droid Arabic Naskh',sans-serif;} #fanpages a.a-fans:hover{background:#292929;color:#fff; text-decoration: none!important;} #fanpages a.a-fans p{color:#f1d657!important;display:inline-block} #fanpages a.a-fans:hover p{color:#fff!important} #fanpages a.a-fans span{font-size:13px;font-weight:normal;text-align:center} #libyaw-fbtw,#libyaw-fbtw-msg{margin:0 auto;text-align:center;padding:0 5px 5px;position:relative;line-height:1.3em} #libyaw-fbtw-msg:before{content:"إنضم الينا";font-weight:700;display:table;text-align:center;color:#555;font-size:15px;bottom:0;margin:10px auto} #libyaw-fbtw ul{margin:0 auto;padding:0;text-align:center;margin:0 auto;width:100%} #libyaw-fbtw ul li{display:inline-block;margin:20px 0 0;position:relative} a.libyaw-fbtw-you { float: left; background: #444!important; border: 3px solid #676564!important; } #libyaw-fbtw ul li a{display:inline-block;color:#fff;padding:5px 10px;width:auto;font-weight:700;transition:all .3s} #libyaw-fbtw ul li a.libyaw-fbtw-gp{float:left;background: #CE3838; border: 3px solid #e74c3c;}#libyaw-fbtw ul li a.libyaw-fbtw-tw{float:right;background: #61BBE6; border: 3px solid #5BB0D8;} a.libyaw-fbtw-you:hover {background:#555!important;border-color:#414344!important} #libyaw-fbtw ul li a:hover,a.libyaw-fbtw-you:hover{background:#555;border-color:#414344} </style> <div id="fanpages"> <ul> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk-_EHQ-36UR_65tAIg4kjAFPxQx_7NV4LEwFJfALtGadK6AtVHl18rPK8T2ywam4pAdjCnZ59XlSubIGhi0kUa4IiCO68gjWoEngxfc7heHyl74WKeSIh59kpLOfaLPPWfBTxfPNwsJro/w220-c-h160/realmadrid.png" id="img12" style="width: 50px;height: 50px;margin: 24px 0px 0px 0px;border: 3px solid #FFFFFF;border-radius: 33px 33px 33px 33px;position: relative;:" /></a> <a class="g-profile" href="https://plus.google.com/116459745946626497910" rel="author" title="author profile" data-gapiscan="true" data-onload="true" data-gapiattached="true"><img src="http://b.top4top.net/p_85pufo1.jpg" id="img12" style="width: 50px;height: 50px;margin: 24px 0px 0px 0px;border: 3px solid #FFFFFF;border-radius: 33px 33px 33px 33px;" /></a> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk-_EHQ-36UR_65tAIg4kjAFPxQx_7NV4LEwFJfALtGadK6AtVHl18rPK8T2ywam4pAdjCnZ59XlSubIGhi0kUa4IiCO68gjWoEngxfc7heHyl74WKeSIh59kpLOfaLPPWfBTxfPNwsJro/w220-c-h160/realmadrid.png" id="img12" style="width: 50px;height: 50px;margin: 24px 0px 0px 0px;border: 3px solid #FFFFFF;border-radius: 33px 33px 33px 33px;" /></a> </ul> <div class="clear"> </div>
<div class="widget-content">
<div style="text-align: center;">
<a class="libya-btn libya-button" href="#" target="_blank">إنضم الينا</a></div>
</div></div></div></div>
<div class="widget HTML" id="HTML7"> <div class="widget-content"> <style>
a.libya-btn{border:none;cursor:pointer;padding:10px 20px;display:inline-block;margin:15px;text-transform:uppercase;letter-spacing:1px;font-weight:700;outline:0;position:relative;border-radius:3px;-webkit-animation: anim 2s ease-in infinite;animation: anim 2s ease-in infinite;transition:all .3s}
a.libya-btn:after {
content: '';position:absolute;z-index:-1;transition:all .3s;}
a.libya-btn:before{font-family:Fontawesome;font-style:normal;font-weight:400;font-variant:normal}
a.libya-button{background:#4f93c5;color:#fff!important;overflow:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden}
a.libya-button:active {background:#4786b5;top:2px;}
a.libya-button span {display:inline-block;width:100%;height:100%;transition:all 0.3s;backface-visibility:hidden;}
a.libya-button:before{position:absolute;height:100%;width:100%;line-height:2.2;font-size:130%;transition:all .3s}
a.libya-button:active:before {color:#fff;}
a.libya-buttona:hover span {-webkit-transform: translateY(300%);-moz-transform: translateY(300%);-ms-transform: translateY(300%);transform: translateY(300%);}
a.libya-buttona:before {left:0;top:-110%;}
a.libya-buttona:hover:before {top:0;}
a.icon-result:before {content: "";}
@-webkit-keyframes anim{5%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}10%{-webkit-transform:scale(.9,1.1) translateY(-.5rem);transform:scale(.9,1.1) translateY(-.5rem)}15%{-webkit-transform:scale(1);transform:scale(1)}}
@keyframes anim{5%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}10%{-webkit-transform:scale(.9,1.1) translateY(-.5rem);transform:scale(.9,1.1) translateY(-.5rem)}15%{-webkit-transform:scale(1);transform:scale(1)}}
.socialv3
{width:220px;
}
.bagidua
{
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
</style>
<style> #HTML7 { background: URL (http://a.top4top.net/p_852fac1.gif); } #fanpages{padding: 0; position: relative; text-align: center; list-style: none!important; background: #fafafa; border-radius: 4px!important; box-shadow: inset 0 0 0 1px #e8e8e8;} #fanpages p{list-style:none;padding:0;margin:0 0 5px} #fanpages a.a-fans{clear:both;background:#39599a;color:#fff;display:inline-block;font-weight:700;width:100%;max-width:100%;font-size:22px;list-style:none;text-align:center;margin:0 auto;padding:30px 0;border-radius:4px 4px 0 0!important;overflow:hidden;font-family: 'Droid Arabic Naskh',sans-serif;} #fanpages a.a-fans:hover{background:#292929;color:#fff; text-decoration: none!important;} #fanpages a.a-fans p{color:#f1d657!important;display:inline-block} #fanpages a.a-fans:hover p{color:#fff!important} #fanpages a.a-fans span{font-size:13px;font-weight:normal;text-align:center} #libyaw-fbtw,#libyaw-fbtw-msg{margin:0 auto;text-align:center;padding:0 5px 5px;position:relative;line-height:1.3em} #libyaw-fbtw-msg:before{content:"إنضم الينا";font-weight:700;display:table;text-align:center;color:#555;font-size:15px;bottom:0;margin:10px auto} #libyaw-fbtw ul{margin:0 auto;padding:0;text-align:center;margin:0 auto;width:100%} #libyaw-fbtw ul li{display:inline-block;margin:20px 0 0;position:relative} a.libyaw-fbtw-you { float: left; background: #444!important; border: 3px solid #676564!important; } #libyaw-fbtw ul li a{display:inline-block;color:#fff;padding:5px 10px;width:auto;font-weight:700;transition:all .3s} #libyaw-fbtw ul li a.libyaw-fbtw-gp{float:left;background: #CE3838; border: 3px solid #e74c3c;}#libyaw-fbtw ul li a.libyaw-fbtw-tw{float:right;background: #61BBE6; border: 3px solid #5BB0D8;} a.libyaw-fbtw-you:hover {background:#555!important;border-color:#414344!important} #libyaw-fbtw ul li a:hover,a.libyaw-fbtw-you:hover{background:#555;border-color:#414344} </style> <div id="fanpages"> <ul> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk-_EHQ-36UR_65tAIg4kjAFPxQx_7NV4LEwFJfALtGadK6AtVHl18rPK8T2ywam4pAdjCnZ59XlSubIGhi0kUa4IiCO68gjWoEngxfc7heHyl74WKeSIh59kpLOfaLPPWfBTxfPNwsJro/w220-c-h160/realmadrid.png" id="img12" style="width: 50px;height: 50px;margin: 24px 0px 0px 0px;border: 3px solid #FFFFFF;border-radius: 33px 33px 33px 33px;position: relative;:" /></a> <a class="g-profile" href="https://plus.google.com/116459745946626497910" rel="author" title="author profile" data-gapiscan="true" data-onload="true" data-gapiattached="true"><img src="http://b.top4top.net/p_85pufo1.jpg" id="img12" style="width: 50px;height: 50px;margin: 24px 0px 0px 0px;border: 3px solid #FFFFFF;border-radius: 33px 33px 33px 33px;" /></a> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk-_EHQ-36UR_65tAIg4kjAFPxQx_7NV4LEwFJfALtGadK6AtVHl18rPK8T2ywam4pAdjCnZ59XlSubIGhi0kUa4IiCO68gjWoEngxfc7heHyl74WKeSIh59kpLOfaLPPWfBTxfPNwsJro/w220-c-h160/realmadrid.png" id="img12" style="width: 50px;height: 50px;margin: 24px 0px 0px 0px;border: 3px solid #FFFFFF;border-radius: 33px 33px 33px 33px;" /></a> </ul> <div class="clear"> </div>
<div class="widget-content">
<div style="text-align: center;">
<a class="libya-btn libya-button" href="#" target="_blank">إنضم الينا</a></div>
</div></div></div></div>
الشكل التاني
<style> a.libya-btn{border:none;cursor:pointer;padding:10px 80px;display:inline-block;margin:15px;text-transform:uppercase;letter-spacing:1px;font-weight:700;outline:0;position:relative;border-radius:3px;-webkit-animation: anim 2s ease-in infinite;animation: anim 2s ease-in infinite;transition:all .3s} a.libya-btn:after { content: '';position:absolute;z-index:-1;transition:all .3s;} a.libya-btn:before{font-family:Fontawesome;font-style:normal;font-weight:400;font-variant:normal} a.libya-button{background:#4f93c5;color:#fff!important;overflow:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden} a.libya-button:active {background:#4786b5;top:2px;} a.libya-button span {display:inline-block;width:100%;height:100%;transition:all 0.3s;backface-visibility:hidden;} a.libya-button:before{position:absolute;height:100%;width:100%;line-height:2.2;font-size:130%;transition:all .3s} a.libya-button:active:before {color:#fff;} a.libya-buttona:hover span {-webkit-transform: translateY(300%);-moz-transform: translateY(300%);-ms-transform: translateY(300%);transform: translateY(300%);} a.libya-buttona:before {left:0;top:-110%;} a.libya-buttona:hover:before {top:0;} a.icon-result:before {content: "";} @-webkit-keyframes anim{5%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}10%{-webkit-transform:scale(.9,1.1) translateY(-.5rem);transform:scale(.9,1.1) translateY(-.5rem)}15%{-webkit-transform:scale(1);transform:scale(1)}} @keyframes anim{5%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}10%{-webkit-transform:scale(.9,1.1) translateY(-.5rem);transform:scale(.9,1.1) translateY(-.5rem)}15%{-webkit-transform:scale(1);transform:scale(1)}} .socialv3 {width:220px; } .bagidua { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }#HTML7 { background: #EEF3F6; } #fanpages{padding: 0; position: relative; text-align: center; list-style: none!important; background: #EEF3F6; border-radius: 4px!important; box-shadow: inset 0 0 0 1px #e8e8e8;} #fanpages p{list-style:none;padding:0;margin:0 0 5px} #fanpages a.a-fans{clear:both;background:#39599a;color:#fff;display:inline-block;font-weight:700;width:100%;max-width:100%;font-size:22px;list-style:none;text-align:center;margin:0 auto;padding:30px 0;border-radius:4px 4px 0 0!important;overflow:hidden;font-family: 'Droid Arabic Naskh',sans-serif;} #fanpages a.a-fans:hover{background:#292929;color:#fff; text-decoration: none!important;} #fanpages a.a-fans p{color:#f1d657!important;display:inline-block} #fanpages a.a-fans:hover p{color:#fff!important} #fanpages a.a-fans span{font-size:13px;font-weight:normal;text-align:center} #libya-fbtw,#libya-fbtw-msg{margin:0 auto;text-align:center;padding:0 5px 5px;position:relative;line-height:1.3em} #libya-fbtw-msg:before{content:"تابع جديدنا";font-weight:700;display:table;text-align:center;color:#555;font-size:15px;bottom:0;margin:10px auto} #libya-fbtw ul{margin:0 auto;padding:0;text-align:center;margin:0 auto;width:100%} #libya-fbtw ul li{display:inline-block;margin:20px 0 0;position:relative} a.libya-fbtw-you { float: left; background: #444!important; border: 3px solid #676564!important; } #libya-fbtw ul li a{display:inline-block;color:#fff;padding:5px 10px;width:auto;font-weight:700;transition:all .3s} #libya-fbtw ul li a.libya-fbtw-gp{float:left;background: #CE3838; border: 3px solid #e74c3c;}#libya-fbtw ul li a.libya-fbtw-tw{float:right;background: #61BBE6; border: 3px solid #5BB0D8;} a.libya-fbtw-you:hover {background:#555!important;border-color:#414344!important} #libya-fbtw ul li a:hover,a.libya-fbtw-you:hover{background:#555;border-color:#414344} </style> <style> a.libya-btn{border:none;cursor:pointer;padding:10px 80px;display:inline-block;margin:15px;text-transform:uppercase;letter-spacing:1px;font-weight:700;outline:0;position:relative;border-radius:3px;-webkit-animation: anim 2s ease-in infinite;animation: anim 2s ease-in infinite;transition:all .3s} a.libya-btn:after { content: '';position:absolute;z-index:-1;transition:all .3s;} a.libya-btn:before{font-family:Fontawesome;font-style:normal;font-weight:400;font-variant:normal} a.libya-button{background:#4f93c5;color:#fff!important;overflow:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden} a.libya-button:active {background:#4786b5;top:2px;} a.libya-button span {display:inline-block;width:100%;height:100%;transition:all 0.3s;backface-visibility:hidden;} a.libya-button:before{position:absolute;height:100%;width:100%;line-height:2.2;font-size:130%;transition:all .3s} a.libya-button:active:before {color:#fff;} a.libya-buttona:hover span {-webkit-transform: translateY(300%);-moz-transform: translateY(300%);-ms-transform: translateY(300%);transform: translateY(300%);} a.libya-buttona:before {left:0;top:-110%;} a.libya-buttona:hover:before {top:0;} a.icon-result:before {content: "";} @-webkit-keyframes anim{5%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}10%{-webkit-transform:scale(.9,1.1) translateY(-.5rem);transform:scale(.9,1.1) translateY(-.5rem)}15%{-webkit-transform:scale(1);transform:scale(1)}} @keyframes anim{5%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}10%{-webkit-transform:scale(.9,1.1) translateY(-.5rem);transform:scale(.9,1.1) translateY(-.5rem)}15%{-webkit-transform:scale(1);transform:scale(1)}} .socialv3 {width:220px; } .bagidua { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }#HTML7 { background: #EEF3F6; } #fanpages{padding: 0; position: relative; text-align: center; list-style: none!important; background: #EEF3F6; border-radius: 4px!important; box-shadow: inset 0 0 0 1px #e8e8e8;} #fanpages p{list-style:none;padding:0;margin:0 0 5px} #fanpages a.a-fans{clear:both;background:#39599a;color:#fff;display:inline-block;font-weight:700;width:100%;max-width:100%;font-size:22px;list-style:none;text-align:center;margin:0 auto;padding:30px 0;border-radius:4px 4px 0 0!important;overflow:hidden;font-family: 'Droid Arabic Naskh',sans-serif;} #fanpages a.a-fans:hover{background:#292929;color:#fff; text-decoration: none!important;} #fanpages a.a-fans p{color:#f1d657!important;display:inline-block} #fanpages a.a-fans:hover p{color:#fff!important} #fanpages a.a-fans span{font-size:13px;font-weight:normal;text-align:center} #libya-fbtw,#libya-fbtw-msg{margin:0 auto;text-align:center;padding:0 5px 5px;position:relative;line-height:1.3em} #libya-fbtw-msg:before{content:"تابع جديدنا";font-weight:700;display:table;text-align:center;color:#555;font-size:15px;bottom:0;margin:10px auto} #libya-fbtw ul{margin:0 auto;padding:0;text-align:center;margin:0 auto;width:100%} #libya-fbtw ul li{display:inline-block;margin:20px 0 0;position:relative} a.libya-fbtw-you { float: left; background: #444!important; border: 3px solid #676564!important; } #libya-fbtw ul li a{display:inline-block;color:#fff;padding:5px 10px;width:auto;font-weight:700;transition:all .3s} #libya-fbtw ul li a.libya-fbtw-gp{float:left;background: #CE3838; border: 3px solid #e74c3c;}#libya-fbtw ul li a.libya-fbtw-tw{float:right;background: #61BBE6; border: 3px solid #5BB0D8;} a.libya-fbtw-you:hover {background:#555!important;border-color:#414344!important} #libya-fbtw ul li a:hover,a.libya-fbtw-you:hover{background:#555;border-color:#414344} </style> <div id="fanpages"> <ul> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk-_EHQ-36UR_65tAIg4kjAFPxQx_7NV4LEwFJfALtGadK6AtVHl18rPK8T2ywam4pAdjCnZ59XlSubIGhi0kUa4IiCO68gjWoEngxfc7heHyl74WKeSIh59kpLOfaLPPWfBTxfPNwsJro/w220-c-h160/realmadrid.png" id="img12" style="width: 50px;height: 50px;margin: 24px 0px 0px 0px;border: 3px solid #FFFFFF;border-radius: 33px 33px 33px 33px;position: relative;:" /></a> <a class="g-profile" href="https://plus.google.com/116459745946626497910" rel="author" title="author profile" data-gapiscan="true" data-onload="true" data-gapiattached="true"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk-_EHQ-36UR_65tAIg4kjAFPxQx_7NV4LEwFJfALtGadK6AtVHl18rPK8T2ywam4pAdjCnZ59XlSubIGhi0kUa4IiCO68gjWoEngxfc7heHyl74WKeSIh59kpLOfaLPPWfBTxfPNwsJro/w220-c-h160/realmadrid.png" id="img12" style="width: 50px;height: 50px;margin: 24px 0px 0px 0px;border: 3px solid #FFFFFF;border-radius: 33px 33px 33px 33px;" /></a> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk-_EHQ-36UR_65tAIg4kjAFPxQx_7NV4LEwFJfALtGadK6AtVHl18rPK8T2ywam4pAdjCnZ59XlSubIGhi0kUa4IiCO68gjWoEngxfc7heHyl74WKeSIh59kpLOfaLPPWfBTxfPNwsJro/w220-c-h160/realmadrid.png" id="img12" style="width: 50px;height: 50px;margin: 24px 0px 0px 0px;border: 3px solid #FFFFFF;border-radius: 33px 33px 33px 33px;" /></a> </ul> <div class="clear"> </div> <div id="libya-fbtw-msg"> </div></div> <div> <div style="text-align: center;"> <a class="libya-btn libya-button" href="#" target="_blank"> إنضم الينا</a></div></div>
<style> a.libya-btn{border:none;cursor:pointer;padding:10px 80px;display:inline-block;margin:15px;text-transform:uppercase;letter-spacing:1px;font-weight:700;outline:0;position:relative;border-radius:3px;-webkit-animation: anim 2s ease-in infinite;animation: anim 2s ease-in infinite;transition:all .3s} a.libya-btn:after { content: '';position:absolute;z-index:-1;transition:all .3s;} a.libya-btn:before{font-family:Fontawesome;font-style:normal;font-weight:400;font-variant:normal} a.libya-button{background:#4f93c5;color:#fff!important;overflow:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden} a.libya-button:active {background:#4786b5;top:2px;} a.libya-button span {display:inline-block;width:100%;height:100%;transition:all 0.3s;backface-visibility:hidden;} a.libya-button:before{position:absolute;height:100%;width:100%;line-height:2.2;font-size:130%;transition:all .3s} a.libya-button:active:before {color:#fff;} a.libya-buttona:hover span {-webkit-transform: translateY(300%);-moz-transform: translateY(300%);-ms-transform: translateY(300%);transform: translateY(300%);} a.libya-buttona:before {left:0;top:-110%;} a.libya-buttona:hover:before {top:0;} a.icon-result:before {content: "";} @-webkit-keyframes anim{5%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}10%{-webkit-transform:scale(.9,1.1) translateY(-.5rem);transform:scale(.9,1.1) translateY(-.5rem)}15%{-webkit-transform:scale(1);transform:scale(1)}} @keyframes anim{5%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}10%{-webkit-transform:scale(.9,1.1) translateY(-.5rem);transform:scale(.9,1.1) translateY(-.5rem)}15%{-webkit-transform:scale(1);transform:scale(1)}} .socialv3 {width:220px; } .bagidua { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }#HTML7 { background: #EEF3F6; } #fanpages{padding: 0; position: relative; text-align: center; list-style: none!important; background: #EEF3F6; border-radius: 4px!important; box-shadow: inset 0 0 0 1px #e8e8e8;} #fanpages p{list-style:none;padding:0;margin:0 0 5px} #fanpages a.a-fans{clear:both;background:#39599a;color:#fff;display:inline-block;font-weight:700;width:100%;max-width:100%;font-size:22px;list-style:none;text-align:center;margin:0 auto;padding:30px 0;border-radius:4px 4px 0 0!important;overflow:hidden;font-family: 'Droid Arabic Naskh',sans-serif;} #fanpages a.a-fans:hover{background:#292929;color:#fff; text-decoration: none!important;} #fanpages a.a-fans p{color:#f1d657!important;display:inline-block} #fanpages a.a-fans:hover p{color:#fff!important} #fanpages a.a-fans span{font-size:13px;font-weight:normal;text-align:center} #libya-fbtw,#libya-fbtw-msg{margin:0 auto;text-align:center;padding:0 5px 5px;position:relative;line-height:1.3em} #libya-fbtw-msg:before{content:"تابع جديدنا";font-weight:700;display:table;text-align:center;color:#555;font-size:15px;bottom:0;margin:10px auto} #libya-fbtw ul{margin:0 auto;padding:0;text-align:center;margin:0 auto;width:100%} #libya-fbtw ul li{display:inline-block;margin:20px 0 0;position:relative} a.libya-fbtw-you { float: left; background: #444!important; border: 3px solid #676564!important; } #libya-fbtw ul li a{display:inline-block;color:#fff;padding:5px 10px;width:auto;font-weight:700;transition:all .3s} #libya-fbtw ul li a.libya-fbtw-gp{float:left;background: #CE3838; border: 3px solid #e74c3c;}#libya-fbtw ul li a.libya-fbtw-tw{float:right;background: #61BBE6; border: 3px solid #5BB0D8;} a.libya-fbtw-you:hover {background:#555!important;border-color:#414344!important} #libya-fbtw ul li a:hover,a.libya-fbtw-you:hover{background:#555;border-color:#414344} </style> <style> a.libya-btn{border:none;cursor:pointer;padding:10px 80px;display:inline-block;margin:15px;text-transform:uppercase;letter-spacing:1px;font-weight:700;outline:0;position:relative;border-radius:3px;-webkit-animation: anim 2s ease-in infinite;animation: anim 2s ease-in infinite;transition:all .3s} a.libya-btn:after { content: '';position:absolute;z-index:-1;transition:all .3s;} a.libya-btn:before{font-family:Fontawesome;font-style:normal;font-weight:400;font-variant:normal} a.libya-button{background:#4f93c5;color:#fff!important;overflow:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden} a.libya-button:active {background:#4786b5;top:2px;} a.libya-button span {display:inline-block;width:100%;height:100%;transition:all 0.3s;backface-visibility:hidden;} a.libya-button:before{position:absolute;height:100%;width:100%;line-height:2.2;font-size:130%;transition:all .3s} a.libya-button:active:before {color:#fff;} a.libya-buttona:hover span {-webkit-transform: translateY(300%);-moz-transform: translateY(300%);-ms-transform: translateY(300%);transform: translateY(300%);} a.libya-buttona:before {left:0;top:-110%;} a.libya-buttona:hover:before {top:0;} a.icon-result:before {content: "";} @-webkit-keyframes anim{5%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}10%{-webkit-transform:scale(.9,1.1) translateY(-.5rem);transform:scale(.9,1.1) translateY(-.5rem)}15%{-webkit-transform:scale(1);transform:scale(1)}} @keyframes anim{5%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}10%{-webkit-transform:scale(.9,1.1) translateY(-.5rem);transform:scale(.9,1.1) translateY(-.5rem)}15%{-webkit-transform:scale(1);transform:scale(1)}} .socialv3 {width:220px; } .bagidua { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }#HTML7 { background: #EEF3F6; } #fanpages{padding: 0; position: relative; text-align: center; list-style: none!important; background: #EEF3F6; border-radius: 4px!important; box-shadow: inset 0 0 0 1px #e8e8e8;} #fanpages p{list-style:none;padding:0;margin:0 0 5px} #fanpages a.a-fans{clear:both;background:#39599a;color:#fff;display:inline-block;font-weight:700;width:100%;max-width:100%;font-size:22px;list-style:none;text-align:center;margin:0 auto;padding:30px 0;border-radius:4px 4px 0 0!important;overflow:hidden;font-family: 'Droid Arabic Naskh',sans-serif;} #fanpages a.a-fans:hover{background:#292929;color:#fff; text-decoration: none!important;} #fanpages a.a-fans p{color:#f1d657!important;display:inline-block} #fanpages a.a-fans:hover p{color:#fff!important} #fanpages a.a-fans span{font-size:13px;font-weight:normal;text-align:center} #libya-fbtw,#libya-fbtw-msg{margin:0 auto;text-align:center;padding:0 5px 5px;position:relative;line-height:1.3em} #libya-fbtw-msg:before{content:"تابع جديدنا";font-weight:700;display:table;text-align:center;color:#555;font-size:15px;bottom:0;margin:10px auto} #libya-fbtw ul{margin:0 auto;padding:0;text-align:center;margin:0 auto;width:100%} #libya-fbtw ul li{display:inline-block;margin:20px 0 0;position:relative} a.libya-fbtw-you { float: left; background: #444!important; border: 3px solid #676564!important; } #libya-fbtw ul li a{display:inline-block;color:#fff;padding:5px 10px;width:auto;font-weight:700;transition:all .3s} #libya-fbtw ul li a.libya-fbtw-gp{float:left;background: #CE3838; border: 3px solid #e74c3c;}#libya-fbtw ul li a.libya-fbtw-tw{float:right;background: #61BBE6; border: 3px solid #5BB0D8;} a.libya-fbtw-you:hover {background:#555!important;border-color:#414344!important} #libya-fbtw ul li a:hover,a.libya-fbtw-you:hover{background:#555;border-color:#414344} </style> <div id="fanpages"> <ul> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk-_EHQ-36UR_65tAIg4kjAFPxQx_7NV4LEwFJfALtGadK6AtVHl18rPK8T2ywam4pAdjCnZ59XlSubIGhi0kUa4IiCO68gjWoEngxfc7heHyl74WKeSIh59kpLOfaLPPWfBTxfPNwsJro/w220-c-h160/realmadrid.png" id="img12" style="width: 50px;height: 50px;margin: 24px 0px 0px 0px;border: 3px solid #FFFFFF;border-radius: 33px 33px 33px 33px;position: relative;:" /></a> <a class="g-profile" href="https://plus.google.com/116459745946626497910" rel="author" title="author profile" data-gapiscan="true" data-onload="true" data-gapiattached="true"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk-_EHQ-36UR_65tAIg4kjAFPxQx_7NV4LEwFJfALtGadK6AtVHl18rPK8T2ywam4pAdjCnZ59XlSubIGhi0kUa4IiCO68gjWoEngxfc7heHyl74WKeSIh59kpLOfaLPPWfBTxfPNwsJro/w220-c-h160/realmadrid.png" id="img12" style="width: 50px;height: 50px;margin: 24px 0px 0px 0px;border: 3px solid #FFFFFF;border-radius: 33px 33px 33px 33px;" /></a> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk-_EHQ-36UR_65tAIg4kjAFPxQx_7NV4LEwFJfALtGadK6AtVHl18rPK8T2ywam4pAdjCnZ59XlSubIGhi0kUa4IiCO68gjWoEngxfc7heHyl74WKeSIh59kpLOfaLPPWfBTxfPNwsJro/w220-c-h160/realmadrid.png" id="img12" style="width: 50px;height: 50px;margin: 24px 0px 0px 0px;border: 3px solid #FFFFFF;border-radius: 33px 33px 33px 33px;" /></a> </ul> <div class="clear"> </div> <div id="libya-fbtw-msg"> </div></div> <div> <div style="text-align: center;"> <a class="libya-btn libya-button" href="#" target="_blank"> إنضم الينا</a></div></div>
الشكل الثالث
<div class="widget HTML" id="HTML7">
<div class="widget-content">
<style>
#HTML7 { background: #EEF3F6; }
#fanpages{padding: 0; position: relative; text-align: center; list-style: none!important; background: #fafafa; border-radius: 4px!important; box-shadow: inset 0 0 0 1px #e8e8e8;}
#fanpages p{list-style:none;padding:0;margin:0 0 5px}
#fanpages a.a-fans{clear:both;background:#39599a;color:#E62117;display:inline-block;font-weight:700;width:100%;max-width:100%;font-size:22px;list-style:none;text-align:center;margin:0 auto;padding:30px 0;border-radius:4px 4px 0 0!important;overflow:hidden;font-family: 'Droid Arabic Naskh',sans-serif;}
#fanpages a.a-fans:hover{background:#292929;color:#fff; text-decoration: none!important;}
#fanpages a.a-fans p{color:#f1d657!important;display:inline-block}
#fanpages a.a-fans:hover p{color:#fff!important}
#fanpages a.a-fans span{font-size:13px;font-weight:normal;text-align:center}
#libyaw-fbtw,#libyaw-fbtw-msg{margin:0 auto;text-align:center;padding:0 5px 5px;position:relative;line-height:1.3em}
#libyaw-fbtw-msg:before{content:"تابعنا عبر المواقع الاجتماعية";font-weight:700;display:table;text-align:center;color:#555;font-size:15px;bottom:0;margin:10px auto}
#libyaw-fbtw ul{margin:0 auto;padding:0;text-align:center;margin:0 auto;width:100%}
#libyaw-fbtw ul li{display:inline-block;margin:20px 0 0;position:relative}
a.libyaw-fbtw-you { float: left; background:#3B5998!important; border: 3px solid #676564!important; }
#libyaw-fbtw ul li a{display:inline-block;color:#fff;padding:5px 10px;width:auto;font-weight:700;transition:all .3s}
#libyaw-fbtw ul li a.libyaw-fbtw-gp{float:left;background: #CE3838;
border: 3px solid #e74c3c;}#libyaw-fbtw ul li a.libyaw-fbtw-tw{float:right;background: #61BBE6; border: 3px solid #5BB0D8;}
a.libyaw-fbtw-you:hover {background:#555!important;border-color:#414344!important}
#libyaw-fbtw ul li a:hover,a.libyaw-fbtw-you:hover{background:#555;border-color:#414344}
</style>
<div id="fanpages">
<ul>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk-_EHQ-36UR_65tAIg4kjAFPxQx_7NV4LEwFJfALtGadK6AtVHl18rPK8T2ywam4pAdjCnZ59XlSubIGhi0kUa4IiCO68gjWoEngxfc7heHyl74WKeSIh59kpLOfaLPPWfBTxfPNwsJro/w220-c-h160/realmadrid.png" id="img12" style="width: 50px;height: 50px;margin: 24px 0px 0px 0px;border: 3px solid #FFFFFF;border-radius: 33px 33px 33px 33px;position: relative;:" /></a>
<a class="g-profile" href="https://plus.google.com/116459745946626497910" rel="author" title="author profile" data-gapiscan="true" data-onload="true" data-gapiattached="true"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk-_EHQ-36UR_65tAIg4kjAFPxQx_7NV4LEwFJfALtGadK6AtVHl18rPK8T2ywam4pAdjCnZ59XlSubIGhi0kUa4IiCO68gjWoEngxfc7heHyl74WKeSIh59kpLOfaLPPWfBTxfPNwsJro/w220-c-h160/realmadrid.png" id="img12" style="width: 50px;height: 50px;margin: 24px 0px 0px 0px;border: 3px solid #FFFFFF;border-radius: 33px 33px 33px 33px;" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk-_EHQ-36UR_65tAIg4kjAFPxQx_7NV4LEwFJfALtGadK6AtVHl18rPK8T2ywam4pAdjCnZ59XlSubIGhi0kUa4IiCO68gjWoEngxfc7heHyl74WKeSIh59kpLOfaLPPWfBTxfPNwsJro/w220-c-h160/realmadrid.png" id="img12" style="width: 50px;height: 50px;margin: 24px 0px 0px 0px;border: 3px solid #FFFFFF;border-radius: 33px 33px 33px 33px;" /></a>
</ul>
<div class="clear">
</div>
<div id="libyaw-fbtw-msg">
</div></div>
</div><div id="libyaw-fbtw">
<ul>
<li><a class="libyaw-fbtw-gp" href="#" rel="nofollow" target="_blank" title="">Youtube</a></li>
<li><a class="libyaw-fbtw-you" href="#" rel="nofollow" target="_blank">facebook</a></li>
<li><a class="libyaw-fbtw-tw" href="#" rel="nofollow" target="_blank">Twitter</a></li>
</ul></div>
<div class="clear"></div>
<div class="clear"></div>
</div>
* استبدل الذي لونه أصفر بروابط الصور
<div class="widget HTML" id="HTML7">
<div class="widget-content">
<style>
#HTML7 { background: #EEF3F6; }
#fanpages{padding: 0; position: relative; text-align: center; list-style: none!important; background: #fafafa; border-radius: 4px!important; box-shadow: inset 0 0 0 1px #e8e8e8;}
#fanpages p{list-style:none;padding:0;margin:0 0 5px}
#fanpages a.a-fans{clear:both;background:#39599a;color:#E62117;display:inline-block;font-weight:700;width:100%;max-width:100%;font-size:22px;list-style:none;text-align:center;margin:0 auto;padding:30px 0;border-radius:4px 4px 0 0!important;overflow:hidden;font-family: 'Droid Arabic Naskh',sans-serif;}
#fanpages a.a-fans:hover{background:#292929;color:#fff; text-decoration: none!important;}
#fanpages a.a-fans p{color:#f1d657!important;display:inline-block}
#fanpages a.a-fans:hover p{color:#fff!important}
#fanpages a.a-fans span{font-size:13px;font-weight:normal;text-align:center}
#libyaw-fbtw,#libyaw-fbtw-msg{margin:0 auto;text-align:center;padding:0 5px 5px;position:relative;line-height:1.3em}
#libyaw-fbtw-msg:before{content:"تابعنا عبر المواقع الاجتماعية";font-weight:700;display:table;text-align:center;color:#555;font-size:15px;bottom:0;margin:10px auto}
#libyaw-fbtw ul{margin:0 auto;padding:0;text-align:center;margin:0 auto;width:100%}
#libyaw-fbtw ul li{display:inline-block;margin:20px 0 0;position:relative}
a.libyaw-fbtw-you { float: left; background:#3B5998!important; border: 3px solid #676564!important; }
#libyaw-fbtw ul li a{display:inline-block;color:#fff;padding:5px 10px;width:auto;font-weight:700;transition:all .3s}
#libyaw-fbtw ul li a.libyaw-fbtw-gp{float:left;background: #CE3838;
border: 3px solid #e74c3c;}#libyaw-fbtw ul li a.libyaw-fbtw-tw{float:right;background: #61BBE6; border: 3px solid #5BB0D8;}
a.libyaw-fbtw-you:hover {background:#555!important;border-color:#414344!important}
#libyaw-fbtw ul li a:hover,a.libyaw-fbtw-you:hover{background:#555;border-color:#414344}
</style>
<div id="fanpages">
<ul>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk-_EHQ-36UR_65tAIg4kjAFPxQx_7NV4LEwFJfALtGadK6AtVHl18rPK8T2ywam4pAdjCnZ59XlSubIGhi0kUa4IiCO68gjWoEngxfc7heHyl74WKeSIh59kpLOfaLPPWfBTxfPNwsJro/w220-c-h160/realmadrid.png" id="img12" style="width: 50px;height: 50px;margin: 24px 0px 0px 0px;border: 3px solid #FFFFFF;border-radius: 33px 33px 33px 33px;position: relative;:" /></a>
<a class="g-profile" href="https://plus.google.com/116459745946626497910" rel="author" title="author profile" data-gapiscan="true" data-onload="true" data-gapiattached="true"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk-_EHQ-36UR_65tAIg4kjAFPxQx_7NV4LEwFJfALtGadK6AtVHl18rPK8T2ywam4pAdjCnZ59XlSubIGhi0kUa4IiCO68gjWoEngxfc7heHyl74WKeSIh59kpLOfaLPPWfBTxfPNwsJro/w220-c-h160/realmadrid.png" id="img12" style="width: 50px;height: 50px;margin: 24px 0px 0px 0px;border: 3px solid #FFFFFF;border-radius: 33px 33px 33px 33px;" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk-_EHQ-36UR_65tAIg4kjAFPxQx_7NV4LEwFJfALtGadK6AtVHl18rPK8T2ywam4pAdjCnZ59XlSubIGhi0kUa4IiCO68gjWoEngxfc7heHyl74WKeSIh59kpLOfaLPPWfBTxfPNwsJro/w220-c-h160/realmadrid.png" id="img12" style="width: 50px;height: 50px;margin: 24px 0px 0px 0px;border: 3px solid #FFFFFF;border-radius: 33px 33px 33px 33px;" /></a>
</ul>
<div class="clear">
</div>
<div id="libyaw-fbtw-msg">
</div></div>
</div><div id="libyaw-fbtw">
<ul>
<li><a class="libyaw-fbtw-gp" href="#" rel="nofollow" target="_blank" title="">Youtube</a></li>
<li><a class="libyaw-fbtw-you" href="#" rel="nofollow" target="_blank">facebook</a></li>
<li><a class="libyaw-fbtw-tw" href="#" rel="nofollow" target="_blank">Twitter</a></li>
</ul></div>
<div class="clear"></div>
<div class="clear"></div>
</div>
*استبدل الذي لونه احمر بروابطك فيس بوك،تويتر،يوتيوب،جوجل بلس
اتمنى ان يكون اعجبتكم الاضافة اذا واجهة مشكلة باب التعليقات مفتوح .
0 تعليق على موضوع : الشكل الأول
الأبتساماتأخفاء الأبتسامات