- الاستايل / الأول :
- طريقة التركيب :
1- ادخل إلى مدونتك / ثم أختر تخطيط
2- اختر إضافة أداة / ثم ضع الكود التالي في صندوق الأداة
3- حفظ الأداة
الكود
<a href='ORKUT' onclick='javascript:window.open(this.href, "hangoutBC", "toolbar=0, location=0, statusbar=1, menubar=0, scrollbars=no, width=1000, height=700"); return false;' style='text-decoration: none;' title='Orkut'><img alt='Orkut' src='http://icons.iconarchive.com/icons/danleech/simple/48/orkut-icon.png' style='border:0; width:45px; height:45px;'/></a> <a href='TWITTER' onclick='javascript:window.open(this.href, "hangoutBC", "toolbar=0, location=0, statusbar=1, menubar=0, scrollbars=no, width=1000, height=700"); return false;' style='text-decoration: none;' title='Twitter'><img alt='Twitter' src='http://icons.iconarchive.com/icons/danleech/simple/48/twitter-icon.png' style='border:0; width:45px; height:45px;'/></a> <a href='FACEBOOK' onclick='javascript:window.open(this.href, "hangoutBC", "toolbar=0, location=0, statusbar=1, menubar=0, scrollbars=no, width=1000, height=700"); return false;' style='text-decoration: none;' title='Facebook'><img alt='Facebook' src='http://icons.iconarchive.com/icons/danleech/simple/48/facebook-icon.png' style='border:0; width:45px; height:45px;'/></a> <a href='GOOGLE+' onclick='javascript:window.open(this.href, "hangoutBC", "toolbar=0, location=0, statusbar=1, menubar=0, scrollbars=no, width=1000, height=700"); return false;' style='text-decoration: none;' title='Google +'><img alt='Google +' src='http://icons.iconarchive.com/icons/danleech/simple/48/google-plus-icon.png' style='border:0; width:45px; height:45px;'/></a>
- الإستايل / الثاني :
- طريقة التركيب :
1- ادخل إلى مدونتك / ثم أختر تخطيط
2- اختر إضافة أداة / ثم ضع الكود التالي في صندوق الأداة
3- حفظ الأداة
الكود
<ul id='jocial'><li><a class='icon facebook' href='http://www.facebook.com/digitalhubinc fan page facebook/'></a></li><li><a class='icon twitter' href='http://twitter.com/username/'></a></li><li><a class='icon googleplus' href='https://plus.google.com/u/0/digitalhubinc profil google+/'></a></li><li><a class='icon rss' href='http://feeds.feedburner.com/digitalhubinc feed rss'></a></li></ul><style> #jocial{width: 310px;float: left;margin-top: 10px;} #jocial li{position:relative; cursor:pointer; padding: 0 !important;}#jocial .facebook, .googleplus, .rss, .twitter{position: relative;-moz-transition: all 0.4s ease-in-out;-webkit-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;z-index: 5;display: block;float: left;margin: 1px;}#jocial .icon{overflow:hidden;}#jocial .facebook{width: 150px; height: 150px; background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBFYsuYS9L9lcA_Hn1gWdRz4IuHdzUm8owQ3-HpUBpWBVegsTxgFzNqCuZs_axGXb1LyGxMo_PqrthQfU1__gwCPt863R0bQb7btXLn1mg7-7G-lrtpNEu2wJEK47l9Df2efdzNJ2TnwMk/s1600/facebook.png") no-repeat center center;}#jocial .twitter{width: 150px;height: 74px;background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXqUF3D6IDrhlZWZidatQMgmIWTzlz6du7YPAEOf5U1qM-urgHDihzvAORWbgbeQgBT60DbKxxLteM3Z3eYvScGAdP8WIkaM7uHKF1AKeH8mk18uFwAy1KcVtz8QB-0gL8UZsefaABKn5d/s1600/Twitter.png") no-repeat center center;}#jocial .googleplus{width: 150px;height: 74px;background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjJo1TsZOr5_zApihzIO1YlB4yyWvT7nG0yQmkG8QC7F7b0rDAKAQKHdDAShgvC92V1mbjVvxKYI4v9mbnpshDClhh7fQpTgkIUIumdARuT9FvAw-m7AwcUebNECrX6Z2xWQmjLardQUIm/s1600/google+plus.png") no-repeat center center;}#jocial .rss{ width: 302px;height: 74px;background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg98AkToFyDvJ1ciCZxtDD6rvM17t7UNXnuhHVsUWS5Qkm1KJqLYiDm5Z-D4HasCjWd22cCv4YH7SmS9H0gWjQBVNBAXt2gfgW5rHU2Fbomoq5n4o2dpsJ9iwmaWXLjO8oo8ALGXLzQ6clB/s1600/rss.png") no-repeat center center;}#jocial li:hover .facebook{background-color:#3468B6;-moz-transition: all 0.1s ease-in-out;-webkit-transition: all 0.1s ease-in-out;}#jocial li:hover .twitter{background:rgba(64,153,255,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXqUF3D6IDrhlZWZidatQMgmIWTzlz6du7YPAEOf5U1qM-urgHDihzvAORWbgbeQgBT60DbKxxLteM3Z3eYvScGAdP8WIkaM7uHKF1AKeH8mk18uFwAy1KcVtz8QB-0gL8UZsefaABKn5d/s1600/Twitter.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;-webkit-transition: all 0.1s ease-in-out;}#jocial li:hover .googleplus{background:rgba(228,69,36,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjJo1TsZOr5_zApihzIO1YlB4yyWvT7nG0yQmkG8QC7F7b0rDAKAQKHdDAShgvC92V1mbjVvxKYI4v9mbnpshDClhh7fQpTgkIUIumdARuT9FvAw-m7AwcUebNECrX6Z2xWQmjLardQUIm/s1600/google+plus.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;-webkit-transition: all 0.1s ease-in-out;}#jocial li:hover .rss{background:rgba(255,102,0,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg98AkToFyDvJ1ciCZxtDD6rvM17t7UNXnuhHVsUWS5Qkm1KJqLYiDm5Z-D4HasCjWd22cCv4YH7SmS9H0gWjQBVNBAXt2gfgW5rHU2Fbomoq5n4o2dpsJ9iwmaWXLjO8oo8ALGXLzQ6clB/s1600/rss.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;-webkit-transition: all 0.1s ease-in-out;}</style>
- الإستايل / الثالث :
- طريقة التركيب :
1- ادخل إلى مدونتك / ثم أختر تخطيط
2- اختر إضافة أداة / ثم ضع الكود التالي في صندوق الأداة
3- حفظ الأداة
الكود
<style type='text/css'>#sidebar-subscribe-box{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq8henQZohFG-IboR2mRu-BV0JMHIX18B5Uwm-cglEylc74-dbxZiH3rPK8VTB2yZVGmGDpLHg2NcN3UUl1oqngnTQkasQlBmKoR0fzLzFQys-7mFDiZzxV9JDGUsBQnolleU3S8cw7365/s1600/colored-strip.png) repeat scroll 0 0 transparent;border:1px solid #aaa;border-radius:3px;padding:3px 0}.sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji6Cjk3_sopLrVx6NsB4BBBDn3Wo8yg5r51eKn0N8qJeIA7kbk_aIoL_cOIu3cJxic9YNfjMs4y62gjTjAXBbIE-wZhs1WXp_yJeOZwMezkLlOxW_jWWoGAo37jFh04PeNPszZ1mLixOIC/s1600/bg-pattern.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXXUmhafiMbgJN1fOWzbIIX-hvNu1UVkSCclyHa5AWFk_sAIti808Dt-DENgOEyDF4fza_7KkSPFkHAek3LIgFybAbNEultvv7bBb0lV7aYaIy6123ZutVU_CBChzRKzus3DuuqzruYKfn/s1600/sprites.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}.sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:95%}.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}#footer-section{background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-V669qUy0oRf1vLrcKOrHu_5cyF1bg64wopyymn7zSmz0DDF4QG48nVyVnzjexoxBTnW4mxxnzCSYg-NX32C9mM94jbQwryG2nyhOxeuopFXcj5YtMUCFTV54WuRkfcdj4jAju1QSImgO/s0/bg-pattern.png) repeat top left;border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}p#rb_socialicons img { /* Spinning Social Icons Widget By www.experts-program.blogspot.com/ */ -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out;}p#rb_socialicons img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);}/* Spinning Social Icons Widget By www.experts-program.blogspot.com/ */</style><div id="sidebar-subscribe-box"><div class="sidebar-subscribe-box-wrapper"><div class="sidebar-subscribe-box-form"> <center><p id="rb_socialicons"><a href="http://feeds.feedburner.com/blogspot/pxrPG"> <img alt="Click Me" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4IZiD9a6beQ7FBUgMQvVHLxDKX0bLKU7kU-g9NMdW1E8Mxr6ijEFcdS-TLUfzjH-s4V1EV-VVqLaR-UkEh4ZtYOvPvO7AYeGcLH6TAGPwOtAEVXqKbq3ZaP-k_vPST7yJa73oF1vvuvht/s1600/rss-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj62vmTWbFm2cK5Qds2btrNm7W7Wk5b-7qjplTchFGOMtjtoZ3jgPNgHjYepi0pw178mqSql22BVet39KrFfmK5eV5o2rPkMPaX7zrPf_lfK5CITq36fP7PNrVAKwUsn02xwoNv9uh9L0X2/s1600/rss.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4IZiD9a6beQ7FBUgMQvVHLxDKX0bLKU7kU-g9NMdW1E8Mxr6ijEFcdS-TLUfzjH-s4V1EV-VVqLaR-UkEh4ZtYOvPvO7AYeGcLH6TAGPwOtAEVXqKbq3ZaP-k_vPST7yJa73oF1vvuvht/s1600/rss-inactive.png" /></a><a href="http://facebook.com/ChristiaUnion"><img alt="Click Me" hieght="100" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0Znt9t1TYsOiV3-O5O6cxdvCF93Kg3W0nwpje7gqax06GoJlWYfnuOJOYvUh8QmiQEFEvWdVOUy-4H5zbKiUoLM-IJkTr6nT43ighFIKmPu67rptPteHQGw-ybPUcaQb81EW1zL6CmnUi/s1600/facebook-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6Uh_mCUJ0rJ4grxVZF2qCcbw13v5uClZ8XfPwphPlkM8V8UJO_UDulqaIsC55WigbDX5V3NvTZy0qO-LTkEEEPV1eXvydeHpbUT3MGV4a6Wb65Stv0ip55Q8fSzO5-0o169u310BqowCD/s1600/facebook.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0Znt9t1TYsOiV3-O5O6cxdvCF93Kg3W0nwpje7gqax06GoJlWYfnuOJOYvUh8QmiQEFEvWdVOUy-4H5zbKiUoLM-IJkTr6nT43ighFIKmPu67rptPteHQGw-ybPUcaQb81EW1zL6CmnUi/s1600/facebook-inactive.png" /></a><a href="http://twitter.com/Qardardahjif"><img alt="Click Me" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUVjc18k5xN5l4eanZZDhW3oZLr5PBprhCHJwz7WfKQWeXd6-cuvO264TQB_ksovFopXBV67WINSLk1E4w4XqlU42L26tDJJ0YbIQR6ePx6jqj3zOX_n3_aS84nAbgV45XJX-OR1c26fgp/s1600/twitter-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXKrTOwnNa3ccirexaDit5GPaA50lvNj2FNq6_PWPbC7u5-Ab-nysPiqpZhyBY9q_Ig1ByecQgulK0jvCy_cE2lMbuqAcmlMsa4arCINDdrqcOKxuMMGOqYrll-Gs-Vqz1H8bIiLQ6Hyu3/s1600/twitter.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUVjc18k5xN5l4eanZZDhW3oZLr5PBprhCHJwz7WfKQWeXd6-cuvO264TQB_ksovFopXBV67WINSLk1E4w4XqlU42L26tDJJ0YbIQR6ePx6jqj3zOX_n3_aS84nAbgV45XJX-OR1c26fgp/s1600/twitter-inactive.png" /></a><a href="https://plus.google.com/111639037193968470844/"><img alt="Click Me" hieght="160" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguXyl6roRIIl95-13IVieUrLgwFUPBckKYhRgUkoU8k3hFx65dU_pieWiaFAr8BxOuI_wxO5CfN1i7uzO69VM4SEAZuOsJBKtww6H-8xGslarYPgmn-8TaFQ8HkQS2oJlMkeQqLPIX0F5s/s1600/google-plus-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJjEEP1DzyID7V9KnOqXiyZpTCrtx8oa76IbbDI1GuQzbRZF6S0y-wPfwdB7N41A5O0uRc64ckqmEQZCOcCQK265EH4Cstd7E5mXTvoyZyGVg5W70D-cQgRDUfVInk17icY9bgZpFXvaY9/s1600/google-plus.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguXyl6roRIIl95-13IVieUrLgwFUPBckKYhRgUkoU8k3hFx65dU_pieWiaFAr8BxOuI_wxO5CfN1i7uzO69VM4SEAZuOsJBKtww6H-8xGslarYPgmn-8TaFQ8HkQS2oJlMkeQqLPIX0F5s/s1600/google-plus-inactive.png" /></a><a href="http://pinterest.com/digitalhubinc/"><img alt="Click Me" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLJZQzZ1813zNpmFClZzAIpbq7RRU3JjncH50FCOSUl0yOs3p4ljI_yAtNh9kgldzhP7lgb00193JuvxXry0ojW6utd26OpX5T4YL9DP4EP6tnwuWQfLaWl1xJJKLITBDN7VaZvzH-oapt/s1600/pinterest-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpo1uPU2S4I2enrMRt1TQNwvaZz0UHtmmIrSeSLmq-N70bV18Czr2bFScfgyI01FsstDYNQIiiVSke0Tr4fiuRLtm5uXNXFmcxOBhJee0lghfsR_BRzvexGo-k3N3_N5dSPmL-Ci2FHNxO/s1600/pinterest.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLJZQzZ1813zNpmFClZzAIpbq7RRU3JjncH50FCOSUl0yOs3p4ljI_yAtNh9kgldzhP7lgb00193JuvxXry0ojW6utd26OpX5T4YL9DP4EP6tnwuWQfLaWl1xJJKLITBDN7VaZvzH-oapt/s1600/pinterest-inactive.png" /></a><a href="mailto:H.F.Qardahji@gmail.com"><img alt="Click Me" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9C8-zJkyXB-46H5t3DaUGzTLX6NxbhlnN7B4jKlTaq9OGdn4I5uG2LwHv4Vqynd_f-nPiPV20GCvdXNXqvQ-wXkWfCAPRjdJSHKtns2CYFXg4pPbCmIzc6U46nNGEzBvF-6s4IRw8jBgX/s1600/email-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOBMGnnzg0s-MsmGvCpFJdZexH9vzTlg9Xx1tgppGJcpkS673WcAOOSZ4wCtmPNBQEs2e-cnu4_I5mz_JcUvwy6cZ0ffI7dINnHIvsjmaR5BB4mgI0pWqonqA25LFR-iZs9M7iw02vYVoU/s1600/email-shadow.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9C8-zJkyXB-46H5t3DaUGzTLX6NxbhlnN7B4jKlTaq9OGdn4I5uG2LwHv4Vqynd_f-nPiPV20GCvdXNXqvQ-wXkWfCAPRjdJSHKtns2CYFXg4pPbCmIzc6U46nNGEzBvF-6s4IRw8jBgX/s1600/email-inactive.png" /> </a></p></center> <form action="http://feedburner.google.com/fb/a/mailverify?uri=blogspot/pxrPG" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/pxrPG', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="blogspot/pxrPG" /><input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address :)"/><input class="sidebar-subscribe-box-email-button" title="" type="submit" value="اشترك الآن !" /></form></div></div></div><style></style>
4- عدل ماهو بلون الأحمر بخاصيتك .
- الإستايل / الرابع :
- طريقة التركيب :
1- ادخل إلى مدونتك / ثم أختر تحرير قالب
2- إبحث عن الوسم ]]></b:skin>
3- ضع الكود التالي فوقه .
الكود
/*===METRO UI Menu==*/
body {
font-family:sans-serif;
}
a {
text-decoration:none;
}
.mblmetromenu {
width:960px;
margin:auto;
}
@media screen and (max-width:960px) {
.mblmetromenu {
width:100%;
}
}
/* MblMetroMenu */
.MblMetroMenu {
position:relative;
}
.om-nav {
position:absolute;
width:100%;
z-index:999;
display:none;
}
.om-ctrlbar {
width:100%;
height:48px;
}
.om-ctrlitems {
margin:auto;
padding:0px;
height:48px;
display:inline-block;
text-align:center;
}
.om-ctrlitem {
height:48px;
width:48px;
display:none;
cursor:pointer;
float:left;
opacity:0.5;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=50)" !important;
filter: alpha(opacity=50) !important; /* For IE8 and earlier */ }
.om-ctrlitem:hover {
opacity:0.8;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=80)" !important;
filter: alpha(opacity=80) !important; /* For IE8 and earlier */ }
.om-activectrlitem {
opacity:1 !important;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
filter: alpha(opacity=100) !important; /* For IE8 and earlier */ }
.om-controlitems {
width:960px;
margin:auto;
}
.om-controlitem {
height:48px;
cursor:pointer;
}
.om-closenav {
float:left;
}
.om-movenext {
float:right;
}
.om-itemholder {
margin:auto;
padding:20px 0px;
}
@media screen and (max-width:960px) {
.om-closenav {
position:absolute;
z-index:9999;
left:0;
top:0;
}
.om-movenext {
position:absolute;
z-index:9999;
right:0;
top:0;
}
.om-controlitems {
width:100%;
}
.om-itemholder {
width:100%;
}
}
.om-centerblock {
display:inline-block;
}
.om-item {
display:none;
}
.om-showitem {
margin:5px;
float:left;
display:none;
}
/* END MblMetroMenu */
/* TILE BUTTONS */
/* Standar Buttons */
.tile-bt {
text-align:center;
cursor:pointer;
width:90px;
height:90px;
}
.tile-bt a {
display:block;
padding-top:12px;
text-decoration: !important;
}
.tile-bt img {
margin:0 auto 0 auto;
padding-bottom:5px;
height:48px;
width:48px;
position:relative;
display:block;
}
.tile-bt span {
font-size:12px;
padding-bottom:10px;
display:block;
}
.tile-bt:active {
opacity:0.5;
}
/* End Standard Buttons */
/* Large Buttons */
.tile-bt-large {
width:190px;
height:90px;
line-height:90px;
text-align:center;
cursor:pointer;
}
.tile-bt-large a {
display:block;
text-decoration: !important;
}
.tile-bt-large img {
vertical-align: middle;
margin:auto;
padding:0px;
position:relative;
width:48px;
height:48px;
}
.tile-bt-large span {
vertical-align: middle;
display:inline;
}
.tile-bt-large:active {
opacity:0.5;
}
/* End Large Buttons */
/* Extralarge Buttons */
.tile-bt-extralarge {
text-align:center;
cursor:pointer;
width:190px;
height:190px;
}
.tile-bt-extralarge a {
display:block;
padding-top:52px;
text-decoration: !important;
}
.tile-bt-extralarge img {
margin:0 auto 0 auto;
padding-bottom:22px;
height:80px;
width:80px;
position:relative;
display:block;
}
.tile-bt-extralarge span {
font-size:14px;
padding-bottom:20px;
display:block;
}
.tile-bt-extralarge:active {
opacity:0.5;
}
/* End Extralarge Buttons */
/* END TILE BUTTONS */
/* SHADOW LIST */
.shadow-white, .shadow-black, .shadow-blue, .shadow-green, .shadow-red {
/*display:inline-block;*/
}
.shadow-white:hover {
box-shadow:0px 0px 6px 3px #fff;
-webkit-box-shadow:0px 0px 6px 3px #fff;
-moz-box-shadow:0px 0px 6px 3px #fff;
-o-box-shadow:0px 0px 6px 3px #fff;
-ms-box-shadow:0px 0px 6px 3px #fff;
}
.shadow-blue:hover {
box-shadow:0px 0px 6px 3px #38D1F7;
-webkit-box-shadow:0px 0px 6px 3px #38D1F7;
-moz-box-shadow:0px 0px 6px 3px #38D1F7;
-o-box-shadow:0px 0px 6px 3px #38D1F7;
-ms-box-shadow:0px 0px 6px 3px #38D1F7;
}
.shadow-green:hover {
box-shadow:0px 0px 6px 3px #AACA37;
-webkit-box-shadow:0px 0px 6px 3px #AACA37;
-moz-box-shadow:0px 0px 6px 3px #AACA37;
-o-box-shadow:0px 0px 6px 3px #AACA37;
-ms-box-shadow:0px 0px 6px 3px #AACA37;
}
.shadow-red:hover {
box-shadow:0px 0px 6px 3px #E81750;
-webkit-box-shadow:0px 0px 6px 3px #E81750;
-moz-box-shadow:0px 0px 6px 3px #E81750;
-o-box-shadow:0px 0px 6px 3px #E81750;
-ms-box-shadow:0px 0px 6px 3px #E81750;
}
.shadow-black:hover {
box-shadow:0px 0px 6px 3px #444;
-webkit-box-shadow:0px 0px 6px 3px #444;
-moz-box-shadow:0px 0px 6px 3px #444;
-o-box-shadow:0px 0px 6px 3px #444;
-ms-box-shadow:0px 0px 6px 3px #444;
}
/* END SHADOW LIST */
/* BACKGROUND LIST */
/* Solid Colors */
.solid-blue { background:#00BBE2; }
.solid-blue-2 { background:#2C84EE; }
.solid-darkblue { background:#044E94; }
.solid-violetred { background:#781766; }
.solid-red { background:#E51400;}
.solid-red-2 { background:#E81750; }
.solid-pink { background:#FF539B; }
.solid-purple { background:#D02090; }
.solid-orange { background:#FB8F02; }
.solid-orange-2 { background:#FF6600; }
.solid-orange-3 { background:#DD5F37; }
.solid-coral { background:#CD5B45; }
.solid-green { background:#67B239; }
.solid-green-2 {background:#96BF01; }
.solid-darkgreen { background:#016C38; }
.solid-olive { background:#999900}
.solid-grass { background:#CDCD00; }
.solid-darkred { background:#5F0000; }
.solid-gold { background:#FEE9AE; }
.solid-yellow { background:#F7D100; }
.solid-black { background:#000; }
.solid-smoke { background:#F5F5F5; }
/* End Solid Colors */
/* MISC */
.clearspace { clear: both; }
.floatleft { float:left; }
.floatright { float:right; }
.none { display: none !important; width:0px !important; }
.light-text {
color:#fff;
}
.dark-text {
color:#1e1e1e;
}
.gradient {
background: -moz-linear-gradient(-45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.3))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 00%,rgba(255,255,255,0.3) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* IE10+ */
background: linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* W3C */
}
.margin-5 { margin:5px; }
4- اذهب تخطيط / واختر إضافة أداة
5- ضع الكود التالي في صندوق الأداة .
الكود
<!-- mblmetromenu -->
<div class="mblmetromenu">
<div data-navid="om-nav" class="tile-bt-extralarge solid-violetred shadow-black margin-5 floatleft MblMetroMenu">
<a href="ضع هنا رابط الصفحة" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4JTGkTYngq6DPbHw37DQZepT6BR5phbKX9h1XPBAAKMrqQS2G9E4W_IhiaeADjK_jGTb2i3qvSdd-x2D2-kvrrEZ6IvxwqVOKA1NN350sWHngcV-NsKQ6h1zeGT9JxxOr2quNZy-sneI/s1600/home.png" alt="" />
<span class="light-text">الرئيسية</span>
</a>
</div>
<div data-navid="om-nav" class="tile-bt-large solid-coral shadow-red margin-5 floatleft MblMetroMenu">
<a href="ضع هنا رابط الصفحة" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwfiNbKjllnNBYJpzgooH0sodX5dIaf8loeb5GI9co2y4YWLkAog8KoiuxW21q1efH4gxbytF9xpALHREAyGzZO9J8dqj9mEdsCYLOXvmlW1sebsvPM_ROIHJZwSm2qtgzcg2lfIXZTpE/s1600/messanger.png" alt="" />
<span class="light-text">من نحن</span>
</a>
</div>
<div data-navid="om-nav2" class="tile-bt solid-purple shadow-blue margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsx7FI3DASpKaeNjaL3x2McpZ9eK9ixGsfw8b_2aVbyfWtZpobz0vneSbDv0N9KmYj1b9prAOXmB3efpn7PaeZH6ieBPLvYQD02MSFNcIW4Dvxd6XNrdU-eQs1ZYvQecws3aerYbwnUF0/s1600/rss.png" alt="" />
<span class="light-text">Rss Feeds</span>
</a>
</div>
<div data-navid="om-nav" class="tile-bt-large solid-red shadow-red margin-5 floatleft MblMetroMenu">
<a href="ضع هنا رابط الصفحة" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUH_in2wDhjpve6YqOzgG2bnIfiZEHQkASZxOw1VIB9_vIAM4TxO6tEO10F_mWkqTTMBCw2WluYOajY-OmSKNs-lmK2g-BOHxZf19m815223lYQo4D9ud0lDXpLA96hTv-w1woZhPzLkQ/s1600/search.png" alt="" />
<span class="light-text">بحث</span>
</a>
</div>
<div data-navid="om-nav2" class="tile-bt solid-darkred shadow-red margin-5 floatleft MblMetroMenu">
<a href="ضع هنا رابط الصفحة" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1SBOhStT471EnVDrsOIGfANdDuTdM5hJbTaXcGLMy42ID_2F90WUUxEJEWIduG_TEZgHvar6g66-h7h0nqBXUFeLlLWmvd0Ijhq0sChPvPrreVVB-BWwsd8xfXiu7yVYNrQ7eIbygbiQ/s1600/mail.png" alt="" />
<span class="light-text">اتصل بنا</span>
</a>
</div>
<div data-navid="om-nav2" class="tile-bt solid-black shadow-black margin-5 floatleft MblMetroMenu">
<a href="ضع هنا رابط الصفحة" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCidR3Xl_Ooxy2vcf61dFRT3FOC0kJIxoITcqk41JnftEoDen0hGoAVhGS2q3XTRI_HZl6Exy_2eBuZu1QKK-ed6BXMrq4VaX4GdIELmV-tdbA-b4Ydy7mHJWme8gMgW1DkjVge23D0vU/s1600/help.pn" alt="" />
<span class="light-text">الحصول على مساعدة</span>
</a>
</div>
<div data-navid="om-nav2" class="tile-bt solid-orange shadow-black margin-5 floatleft MblMetroMenu">
<a href="ضع هنا رابط الصفحة" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxCTvfjMad8msc_ACz0kOFeRRLm8Mc9uGyli6BERsoUvb09HtfcK5cIlcZOyDceJGtSLrWPtBV2mfSpCSakDM_NB2iqmEKBzU6PU-2DX1ohnY6r_pScmtCWlHW4KWWYpgdaS9_Gw_E-1Q/s1600/youtbe.png" alt="" />
<span class="light-text">اليوتيوب</span>
</a>
</div>
<div data-navid="om-nav2" class="tile-bt solid-darkblue shadow-blue margin-5 floatleft MblMetroMenu">
<a href="ضع هنا رابط الصفحة" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_rZqQ-WJRhvmkKpxHbRotb1hbinX-7B5pN-fXlGRj2BooP-pjqy5Eu-RopiFqsPOItb3y9bzYmuC7WnuosOIsrZFw9axm_5iSHLnmVD6kseFwl-p6HMGCfXiY2elOOnXz12bW6Ly-Jk4/s1600/face.png" alt="" />
<span class="light-text">الفيس بوك</span>
</a>
</div>
<div data-navid="om-nav" class="tile-bt-large solid-blue shadow-blue margin-5 floatleft MblMetroMenu">
<a href="ضع هنا رابط الصفحة" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7MR0tAnocreGZ17xgLuThllOKkg2HNmunqir-iNFbwK9iiapTrXXFUTbMWZ08fWeGLbToKEhZqr4so7WUbknmuh-GeJPqGt3nKYcsvmhBZQd5_bZXhv31nR3OEWhJqhgYlg-uyG-CKJU/s1600/photo.png" alt="" />
<span class="light-text">صور</span>
</a>
</div>
<div data-navid="om-nav2" class="tile-bt solid-olive shadow-green margin-5 floatleft MblMetroMenu">
<a href="ضع هنا رابط الصفحة" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidi3pHUWHlxbO2wbwIOKdu7J5kOK0uHTidWbddEuGneC7xz6KCvW2scM1zdx6CbDCS5gWRJfYGJF5Z0cmG3Om4s4nUNy5kBgW39e0db1U-9URUa9VnCucbmJ1EBOixtKCx5kHm6kF3OHY/s1600/music.png" alt="" />
<span class="light-text">موسيقا</span>
</a>
</div>
<div data-navid="om-nav" class="tile-bt-large solid-blue-2 shadow-blue margin-5 floatleft MblMetroMenu">
<a href="http://demooaxe.blogspot.com/" class="gradient">
<img src="https://lh3.googleusercontent.com/-wSxu4PbMPko/UZSTgEJFCWI/AAAAAAAAAGk/CSoTV_Kr8C8/w506-h281-o/Bloggeraxelogo.png" alt="" />
<span class="light-text">Bloggeraxe</span>
</a>
</div>
<!-- End MblMetroMenu -->
</div>
<!-- END mblmetromenu -->
6- احفظ الأداة .
7- عدل ماهو بالون الأحمر بخاصيتك .
الرجاء من الأخوة الكرام : زوار المدونة عدم النسخ دون ذكر المصدر
كتب بواسطة Expert Blogger
بلدي هو الأردن مشرف سابقا على عدة منتديات و مواقع و صفحات تعليمية على الفيسبوك و من عشاق البحت و الاكتشاف أشياء جديدة و حصرية حول شبكت الأنترنيت من أهمها مدونات بلوجر و وود دبرس و الصفحات على الفيسبوك أحب مساعدة المبتدئين لإنجاز طموحاتهم كما أسعى لتحقيقي طموحاتي من خلال هذا الموفع المتواضع أتمنى أن تنال مقالاتي إعجابكم و أن أكون أول من يدعمكم لشق طريقكم نحو التطور و الإحتراف و الإستفادة من خلال عرض مجموعة من المعلومات و المواضيع القيمة .
0 التعليقات:
إرسال تعليق