إستيلات مختلفة للمواقع الإجتماعية بشكل مترو لمدونات بلوجر

- الاستايل / الأول :

- طريقة التركيب :

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/AVvXsEgrsvBCF9GZsJCudsexlS_nRw8MqbttURtBECWs_riqwx-84hivQXP0NzdyA9v_sxcHJmn_-EtPzFdQbNV4fD9g_QciWYdbnTay4kno6gzLWyMrFqV8HzWeDa62yaKFyk-NdIY_kPfIG3_A/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/AVvXsEgCY0B0BIMrPVhmBhFyU_u5TvXVpWHjH02rlduhA_Sfoi5LSUF6omA9ao8Jz6bdgHMy3MJrRRX9xfe_PIOVjj2gvYNOyCOKiwuPYRhHxmOvIrbcO5LstwvRh1kN5WExEYvFEe-66lwT3ncF/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/AVvXsEh9wJX6glpAm_XLGVydu5-k3MxHo3k-OLqIAnU4AwtKiZBPNC96IX3ossD_CgLtRu38u8hMzJnY4iyOKKGBJNHEHCnEoYkGKX74vw-jaGmyGlcdDkuhEVCBBCOtF2b4OR9OvvqXNx6MO0hO/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/AVvXsEi5E40ib8XWWv57LMrY5-iQ7kp5oe1JgXEO4EG7jHCJV-U7WiajZ2rJPFgv4q89sIghHo8HbhyJpyPvkdZU7O3ryx7f2tfpPwF6juVfKK1G4TWzx_aVzbA7-_bGMoxxUZzCctLnHexr7miX/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/AVvXsEgCY0B0BIMrPVhmBhFyU_u5TvXVpWHjH02rlduhA_Sfoi5LSUF6omA9ao8Jz6bdgHMy3MJrRRX9xfe_PIOVjj2gvYNOyCOKiwuPYRhHxmOvIrbcO5LstwvRh1kN5WExEYvFEe-66lwT3ncF/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/AVvXsEh9wJX6glpAm_XLGVydu5-k3MxHo3k-OLqIAnU4AwtKiZBPNC96IX3ossD_CgLtRu38u8hMzJnY4iyOKKGBJNHEHCnEoYkGKX74vw-jaGmyGlcdDkuhEVCBBCOtF2b4OR9OvvqXNx6MO0hO/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/AVvXsEi5E40ib8XWWv57LMrY5-iQ7kp5oe1JgXEO4EG7jHCJV-U7WiajZ2rJPFgv4q89sIghHo8HbhyJpyPvkdZU7O3ryx7f2tfpPwF6juVfKK1G4TWzx_aVzbA7-_bGMoxxUZzCctLnHexr7miX/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/AVvXsEg9Xa-kFCg5PgVGMZNiAMdhTZ5alBIpSndykiQnIR_8_HXvJikIhqUiPAahKr69R3urJqr_iNq1Ilzf2o5QCph2MnXwNRk6I96vTNXQjblzJlvDQJp66RWfV6WYjHRD_1DQJ77Yzi3NG0lL/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/AVvXsEiZ-hQPm31Syq9m9IK1otC9V0_2rWLwDHOApKEjHxiMhiWY99QZxkn7MTPhMkXCv9ISMS09eL54Z2hHDNjL8sLvTPf0iJODm5EWiEYV51BHa0MrBHa2P9YuT_r9XMkIpbxUDxkAknTfg-5m/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/AVvXsEjLXyXgN_-Yf7NgbAmMAKBs9cLOzzwEnD3vHfabzUc_6Va2Tujbug1MrKWwI66wNaHwHaGuvsNXz3F7hCAgy3UPgOCrxfP76CHTCUocE-mez62MGy6I0gnrb9W2Tshg-Ol5uRDZtttwYO8a/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/AVvXsEhKlCsBwptQ1KS8-BwK908fV0g196tLvhEI726LDlU6QRQXwPWi9fDL1A6BaFhE-ePCBPmmeYixCkjxeJnZUn6Ra1ZbHO-egCIT2GbvsEqgJMFb8SLRzM28OYjAtKKD10gHjHG0PyJD1m02/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/AVvXsEhtwyXV2qGUr30jsfwaQoSwDgCUAAOhIvWIcctf9n1-_NWt_n7uJAZ1t0gOAFC2W_9lo5gKR0c6iRISBNJXiTrqmaDoSUJNUKf_TCtIfum38Tbl99P6qky8gqG-j2Xrsniv_69THlu0O30O/s1600/rss-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj74GLliiCkEUFGjXknSoVMhZjcbdQJRuth29DLFOyz6HOAgCDhyphenhyphende64aq_LKZDRZixomUGFVwYGnER1-jWOcKNT40XpcWECZIEiwCpf8zvC2QzVvoue2kyiyiTMl6rQSF6K4HFV62ApSBC/s1600/rss.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtwyXV2qGUr30jsfwaQoSwDgCUAAOhIvWIcctf9n1-_NWt_n7uJAZ1t0gOAFC2W_9lo5gKR0c6iRISBNJXiTrqmaDoSUJNUKf_TCtIfum38Tbl99P6qky8gqG-j2Xrsniv_69THlu0O30O/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/AVvXsEgbInXpVi2L61O1epkFH03sawlO01gfyzPIT2KTLWDG1YBjnFbww3EOdUuJ3jsYfUpJL0VyckaWaII5iVV4W7N4tNk3llhlvujd0Mt1kSSaYZUCW0cY2PegppZlGYxdPfxgh0AIijdxfo17/s1600/facebook-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja0o6nis80GciH33G3gzZJUoLD5osdsEJuZJnpNTL24WyMIOiBFaUDs-K6dbthiDzIVwSRz8GG6oVV4_rzsUHWVh0Cm98fZf43SouDt75lDIO0u103h9T9aV1YCtZaaPi8uc9FE5fxT-Cq/s1600/facebook.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbInXpVi2L61O1epkFH03sawlO01gfyzPIT2KTLWDG1YBjnFbww3EOdUuJ3jsYfUpJL0VyckaWaII5iVV4W7N4tNk3llhlvujd0Mt1kSSaYZUCW0cY2PegppZlGYxdPfxgh0AIijdxfo17/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/AVvXsEiQb9tO46Y_MvllefKYN7JWk82AneHrR-WxieCYqptbqz6NZryZSbD0vei8ghzlT3JY0KpmaheLmTued3hWQ3-r6Ft925b3k1-LdWnlDHi2NBIrwMViE9MaJRxHdPiqFtKAwMHgC8kSk3A2/s1600/twitter-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAWtMBrWh0O7hhsZdariK0ZvAlb6EptoE7R2eWJHxiNPYZUzs6KL7u8I2mJCtDkEIjqrGoVJaPEuKDNI84IxMZIGoFc07YxB-215xGTNPdnOncfWpAiTSRAvrKBkbpvSvYbdKmnRXLpWzC/s1600/twitter.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQb9tO46Y_MvllefKYN7JWk82AneHrR-WxieCYqptbqz6NZryZSbD0vei8ghzlT3JY0KpmaheLmTued3hWQ3-r6Ft925b3k1-LdWnlDHi2NBIrwMViE9MaJRxHdPiqFtKAwMHgC8kSk3A2/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/AVvXsEjnxyU83E5VZANqIJQEoRQvlrooW-UBg1jBiZPVhdCNXUyhFxYqvB6EMmqTiSKVE8mT6ydyHKL6FB13LtTVxvzbcMMYmmib83hQLl-qp_QKPR6WhpnR6BQgGwoaPOy0MJTOt_xpCxBN1S5d/s1600/google-plus-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLCSrmDqMKAlNfQfb9KVV3MuvvCiUvId2Nqyw0NcbbM3JPsycJL0dFTGvkKMDeBeW1FyvtnTP_NnNJySJRP07EkhJJ6HsfUiIAg3SsYOgyBZ57pYB0mtSaBpHnytK27ErOqHvGc4a33cdb/s1600/google-plus.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnxyU83E5VZANqIJQEoRQvlrooW-UBg1jBiZPVhdCNXUyhFxYqvB6EMmqTiSKVE8mT6ydyHKL6FB13LtTVxvzbcMMYmmib83hQLl-qp_QKPR6WhpnR6BQgGwoaPOy0MJTOt_xpCxBN1S5d/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/AVvXsEhYybGSEewIgnMkXw-jfjeB6uKuaoWPy_gB1i1Qa4MEug8Q5tImhUQjusvsb2QDKvZArYNEpR4RrkkicudfFv8S0nrwCFR2dS3cpxjaAw8IUTNCVD4QnR_y09ADqhcUM3vO9Kzj75jfx8_7/s1600/pinterest-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUW4fBVh58mwwvLL7qAcfroYu45kz9j1awINVh6IKl7n6YBTjaPwUIyQN43PxRwIJ0m-MYWswPHWaPut-hRVlbGGYusCFqiZi5pF1b45gNjyiVgOg139I2WhqdO2IyiH6B9HrMaqcWhGT4/s1600/pinterest.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYybGSEewIgnMkXw-jfjeB6uKuaoWPy_gB1i1Qa4MEug8Q5tImhUQjusvsb2QDKvZArYNEpR4RrkkicudfFv8S0nrwCFR2dS3cpxjaAw8IUTNCVD4QnR_y09ADqhcUM3vO9Kzj75jfx8_7/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/AVvXsEh1ESZBCfdNWHhtSickbBM69UHYbv2nTjpwHWhzQfQjHj_2Pq0972dA15JAvJFmCgLNkT9r-qpm3md_zpOXhS5WcBpl33TGap4hiucxE-BYBfbKoXM2fTPkNX2Dz1mRTb9ONEQLrnfixaFv/s1600/email-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMnc6zKn9yjQIWuERgbczT04Mqq37u0e7CSWDMvndh8mtS4IcqSHtBMF77FoV3HoAvzv1MhsJwaAXJPW7Z77TJv2_VDQ5oKFGUxXIcwrjmkN-UFle-1YBjDCmNNXc1hieZWdNPzTO34PWM/s1600/email-shadow.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ESZBCfdNWHhtSickbBM69UHYbv2nTjpwHWhzQfQjHj_2Pq0972dA15JAvJFmCgLNkT9r-qpm3md_zpOXhS5WcBpl33TGap4hiucxE-BYBfbKoXM2fTPkNX2Dz1mRTb9ONEQLrnfixaFv/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- ضع الكود التالي في صندوق الأداة .

الكود

<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/AVvXsEhiZUF0igfFvMOceYpw2SnABDNLYVgKNXev1gckTekD_NXfyxAYFg16rLr0YmiVbAAMcNBLQgc2TZpS2w8abUhO9g_Gc4XhlnoVjHnPwRif-WzDABnkf1Si6f1BJAoIj_k4Pe4N-dc_tZc/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/AVvXsEgHFhd5JMAIfIa0xiRZgc1ErQdPzwTYT8bdCmszRVoBKHEGj3UERcLuROxhJUPlmRIOuTHEddRZBCfy1g2TGhsDtlVceQqjLGrJcg1zrwherAIyKMb6r74DlDZ1GflBUmha_C9a3_7Ey5Y/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/AVvXsEgXf_97RafKvbcvrBElPLruN5BBJDaQj7R3OB8S0riO2mAXtehPdaF-KEx5hZ7pwWZ_MhQbu9wwCr3odOT0NLCjQDyKco94-XC8ihLzNd4yt9zzRe-cdyUHc2pfZ-YpOerX3_VCEdO29Js/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/AVvXsEgxgG47U2YjR2dsFITxMbhZKWyNj_Cw9fgjcHuR6DsxrFQefwglgOZ6KJp3G8eDCIcHATs-RkLn9ZFxKpNRqJ4BNH0OsByfZ8mlD6UvlDgnOJQetvwqxJhuzPnSYpGItkwoB5NADxBRbuY/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/AVvXsEiAs6rtgGS9JmNq8rPIbKQYRWXZxsS9Rz1M29BpExqfLplnZCtJJTI-PQi0YOqwB-nhfupb70iYZ5p4Rs-y-Vn_0PwckGT34SNkpn2voVIiv4W0NAA0wqqN6bb9vUSWJQur8oIrmdVNSEo/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/AVvXsEhvBnf47cBwJqY5xfS0fAgXF-3Yl8j1eLcIVbBI0mQfL_cbYdJjbTcHsmDMp2s3oFKXvFEurw_XZyJwsbjr7li5TO0cAnSs29w9uqfwmBKry42g_6cJxqE46NOaJ2O9hRQzgxl4G1wtlRI/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/AVvXsEi6qWaK5KKo8_ciGyJ8IotjA8FO1okYyFFnWUJ1yJpedz8wg59aXlWitYrRTzmLhkrSsDIYdY_T3g7dqbm7_hxjlpYu7JNLn48mPlqCxQwiG-PUJDp-OZPpb6eS7ukl1FWiQdm6yvcTaBY/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/AVvXsEhI3zRC6jTO1HvPcRnbi6Jhau01CkGdf2MLHWPjm9bVTIRoGPOxyCTOrC_-uIQRgqaJzSHjzUMMVyliOKAFMD_c5-ewa_MmN1EFTR2iuEtHZuKLaflX1pqlc8NMYbaEc1NE-2PlyJbY1U4/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/AVvXsEgx522neWjAOaL0nwAapVXKt5aP2MFWA3KC3mx77ishzEE9sFvhMi-4SmOVDXxnnvrhWIUdmVXCT2x_hPotnuUdWqg4mGB46bYkILwgMAQFpZU5yxoXsXSbkiW8ZfXFgWf0GwL2hc4u2iY/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/AVvXsEi1tdK5dbv6JAutBvbc5stRo3xVV_t33otyArlskeXWXy4ZbQFKsZLixvkFL61dO12hlIVAPQV-1l5SWd-MtXubMp23eSgR3aWu7TCVr_CxU3mtf_hHmc3rV3hQ4hgFdMjzJzVZzO-O4uM/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>

</div>