إستيلات مختلفة للمواقع الإجتماعية بشكل مترو 2013 لمدونة بلوجر | مدونة الخبراء للبرامج
- الاستايل / الأول :
- طريقة التركيب :
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/AVvXsEjTnb-XfOdq1cF8_K62yGrkkEY37Q3NMV4xiVrpS6C0i4Cvdxd6V7pgROgORXgy_W0URCflrF7Lna1olf4qVqpL89QaNdwW5Vf8l9rWBOHvKsBk1MmEib-AU_MK9A2XseBTtqdP_ZwkLVBF/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/AVvXsEh6mhbHYwPhy5IcEueaheubaJByb-rASuWoD0xvdRBgf6cCOiYleB0LUx99vQuD2eZsd0X_jwQzh72NzW5lqwYLLeD6XXp80NEwn0NwjW-eT7aFiiVN9f5YEhnBVMEriIP8h7AxPz2wXixa/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/AVvXsEiC1RDbBX_AjWdrq6tSgfZh68u2Qb-fZJ7xAaz-c1rXwMlPfMEsEk6mHLZm2gIv91Y_0o0Eus_nEW5CHksmxZAJNTNr-JQx6xDiqMRRJXm_lrfxrl8ZQTeznI7Rj5vAVVc41D-w9zBe8449/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/AVvXsEggmgW_bDbJC6eqgHqWy2q59thYYXfD17zZZgn93di3jhB8W-2EjdbJACYKVrVirs1TeurGOGyruFQW1FrZkwThZwjMM5suiCBeUld-LUDx6IxzhrX0mVLtkKmesHPYUrpBeP_aBBMi2zrk/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/AVvXsEh6mhbHYwPhy5IcEueaheubaJByb-rASuWoD0xvdRBgf6cCOiYleB0LUx99vQuD2eZsd0X_jwQzh72NzW5lqwYLLeD6XXp80NEwn0NwjW-eT7aFiiVN9f5YEhnBVMEriIP8h7AxPz2wXixa/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/AVvXsEiC1RDbBX_AjWdrq6tSgfZh68u2Qb-fZJ7xAaz-c1rXwMlPfMEsEk6mHLZm2gIv91Y_0o0Eus_nEW5CHksmxZAJNTNr-JQx6xDiqMRRJXm_lrfxrl8ZQTeznI7Rj5vAVVc41D-w9zBe8449/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/AVvXsEggmgW_bDbJC6eqgHqWy2q59thYYXfD17zZZgn93di3jhB8W-2EjdbJACYKVrVirs1TeurGOGyruFQW1FrZkwThZwjMM5suiCBeUld-LUDx6IxzhrX0mVLtkKmesHPYUrpBeP_aBBMi2zrk/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/AVvXsEjH0uCIHwf_6t8CC6f2gG2ANeaEgdcABwNsvLTjtcb79P4lPSD5wNKYtfgJyd_hhJ3J1Od_rmbdZA9yXiHhyphenhyphenPWwqm5IsaTuSmcsuwNR7NAaKYNhyphenhyphen921GlcHf1-sjeYP513A5dAbYL-qkSnN/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/AVvXsEhS6ZKcwSUwY5DAWHU2HSCOJYVl8V-iO7I0kkBXaXZm6fqUolE09ZctrpxNF1VHkCNAnMXO_wXKfBRjrhEju0xwr8ClI__sp1DFKxt-KrY6PJWVvtP65b1debZiJWC5K3m0B9pEkqrL7Yhh/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/AVvXsEgD4R9B-Mvukr2W-yBLeGqk-JyFWM23FAvVm-Mm07qE9FuajrnKvN4KQj8pB5hgEHu-gg0OhV8PEx60zDICqa-xi2K6hynrCtH-hkT398bLY9HKitAz1tkKjRwlCbIalRwtaFogA8vEw7Pp/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/AVvXsEhzohbs4qN5NKCTpU-3oZGxVDDWbtIwtSH08eV9Hk6UZx7crzCfzPzroYVFrIOtm_F9yE5VlhJwgj6RYSLKZ3fYt-SqJ5VpM6b6gGBWW8Degzy7JDqo_QWK_Bb-5sXQ5jDBJacuhKA3n9AA/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/AVvXsEiy4HP4qpjRv8E6t_9aquqkesmxjcQBPqWM00Jn1NjLMCl1z4LHCne_t4ZcLsvA5xcpxfHAa6LJNchI1STtgvX4K-RNaX04VSCBwFgnUOABTk-whqi1DzANFM17XKKCaAOSkQanlO07Zmk0/s1600/rss-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRRny5MSS30B-snN-AmQUDop0qKeYLBHyfpaCCKOSlQU4YjtLVaa7IfKgK81YEPFUrvlb0fghNu2ICMzWrGyM80Vy_85pEx5aWG05L-sjDvTUSGHstDUbvMktvLOcaYpURe_bh0Jswc6_R/s1600/rss.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy4HP4qpjRv8E6t_9aquqkesmxjcQBPqWM00Jn1NjLMCl1z4LHCne_t4ZcLsvA5xcpxfHAa6LJNchI1STtgvX4K-RNaX04VSCBwFgnUOABTk-whqi1DzANFM17XKKCaAOSkQanlO07Zmk0/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/AVvXsEjtxfmKiDDhz7dymfwubuYpE9yJtuB57dTGw0tMRiKcfDDaoyRAO3R1nvYI7IwSe8Tt0XWunprOx9qdMKuur1VU5eNRnfGqOP5ZPd6dB_KdchjnJowGLpALEbPOycfL-GeBExqK3ETac0Cj/s1600/facebook-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqCXuWZUWBdz4PeQNLMZLykxQBC_TT-RspAz8VB42xEU6iv8twKCW8EOEmpDLCgeKZImJNM_YtT7I0BPl1Yp8sjr7p-bmg39WNYGY5rV_2zQ1AQhKoCRTwkcoWCG86i8HOmS9LnvmRPMZ4/s1600/facebook.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtxfmKiDDhz7dymfwubuYpE9yJtuB57dTGw0tMRiKcfDDaoyRAO3R1nvYI7IwSe8Tt0XWunprOx9qdMKuur1VU5eNRnfGqOP5ZPd6dB_KdchjnJowGLpALEbPOycfL-GeBExqK3ETac0Cj/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/AVvXsEiwJPEgV9bjAzeqFTtoxd2wp93g6p5qQoOjvH1aYUjdZ5ziGXsFRxEulMiAv3Q5uzlIrtH2H1lccyLVNJ2UujYuGN_ZHzioGlTNC54GjXqmIERDXjmFnAm1zuu3LInfcCWySsU317qhBPkZ/s1600/twitter-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZhdy1QxXQ7NQKiFKw_bX3KchOnvFUDhb9cPZQATy6l6254Xcm9avNp7nxZ77UVk6118WaSC4t3p09CLlYCTiLcEQLCl3mQ85_Jid2qL7gRg-RdkTPY30HgHlcGHUS_1bMy093SkfkO1rO/s1600/twitter.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwJPEgV9bjAzeqFTtoxd2wp93g6p5qQoOjvH1aYUjdZ5ziGXsFRxEulMiAv3Q5uzlIrtH2H1lccyLVNJ2UujYuGN_ZHzioGlTNC54GjXqmIERDXjmFnAm1zuu3LInfcCWySsU317qhBPkZ/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/AVvXsEjM3ZTBW_bPoqbvBJhh_ZrFbWl6JEEECjJkE8FfmxqiEcxt729KEAF2da9GLBEAqKwmGfMo3KqlnUMiEyH3_4I6PR9arhiOA3qOr1tuwfcTfM7gAwj_oYbQ9q_59ZTNOHa3-EhTifHoiqm2/s1600/google-plus-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4LePCxzN_FlDKdfCwaIDbB-uYvYbgoB_Flmkx6GrVYBb2fNUenrZ2OMr0iQr_s942QkGoykn8XzkFLmMDSPMOS3v7o5LEYnUzHOJZNtcds8g0ObqtYPCEB4c1SqAUTyLUJ16AUD5pnwpP/s1600/google-plus.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM3ZTBW_bPoqbvBJhh_ZrFbWl6JEEECjJkE8FfmxqiEcxt729KEAF2da9GLBEAqKwmGfMo3KqlnUMiEyH3_4I6PR9arhiOA3qOr1tuwfcTfM7gAwj_oYbQ9q_59ZTNOHa3-EhTifHoiqm2/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/AVvXsEjISY0SvqsIoybayJrDXExzTyluCUkILqjsLMz7E6xWIre0YJFtBGzZCs1zGarbuXQPCM7MC_ZEmHFxTAKCowXkQoxUy4CK5RO1ZyMJIyz-VEe5ktZb1JpWyCIUh147iDIPm6LsJcCL2Cgp/s1600/pinterest-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSlPeHtYjd23miHgL4pE7q4EcXfzEEs0C1Nsth75_CXDbEkzNwkjaMyPzzZzWrUBC64xVOob-ml-G8yhy6nfp5Whj9E2H5xeoRLHXVfc76eo-6jf78OyNUrWExaFtx22l6XqRFI4S1aUYH/s1600/pinterest.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjISY0SvqsIoybayJrDXExzTyluCUkILqjsLMz7E6xWIre0YJFtBGzZCs1zGarbuXQPCM7MC_ZEmHFxTAKCowXkQoxUy4CK5RO1ZyMJIyz-VEe5ktZb1JpWyCIUh147iDIPm6LsJcCL2Cgp/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/AVvXsEjLHDuHwJGUyVXdBU_Srz2FwCVQYj9cPqlQ0Ecn_k2sZlyb8IrRuk3VduZBCRVy-acuFDPoVyG8HkwrcJ02tUxJMQ26Y64t9hENEhZk82uZmU_IPIdRFNyrdvcpqFpkWDg3Re_2FHRtaHV5/s1600/email-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglj5rZbCUdyEHb988gFmFHKhZL2j5_7vHZzSodiaGgWybfQoM9j4VyolcWs8HG2Dxfc51D6Pe1WoWP26Js1cMKfleE6-5oCv3I-BV_qN9-Jr-XQNrr9K5LKFo7G_sqHKVVP5vSHupp1vx3/s1600/email-shadow.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLHDuHwJGUyVXdBU_Srz2FwCVQYj9cPqlQ0Ecn_k2sZlyb8IrRuk3VduZBCRVy-acuFDPoVyG8HkwrcJ02tUxJMQ26Y64t9hENEhZk82uZmU_IPIdRFNyrdvcpqFpkWDg3Re_2FHRtaHV5/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/AVvXsEiXaVVwG03A97ldWpaYZnGEN0GtYdtaM24papEnBGCPNP-bJ7Il3a8FoZzj9j5lqzvXZGQ3TKL2u1XTuaCGuf_sNpsKw4-cEazSFNIwifRV1TZQFHsczbdTtlQqf2Qw2wJ-XxYgMbJx-fk/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/AVvXsEjzHWgrEaTyRNhyphenhyphen2LTDmrnRUZVwQH4LynmsW7pqLoJpaVXJr0Nz9aNVI0nlBtnowq6CccaAmresqV9iiVpeAA5bRZPIAtlRG6klIDdPqIy742eRNABlLB3IWB5nKsXlIiI5i7nys1Jag1c/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/AVvXsEigv3-6PW7P64Rt2wTjukr0eXiSRq0qy4D9ajbeP7QU_OBxEKoqnBsvzWJEsXYSPvabQ7xABjoP3-fAQH-3qmmM6vLA1SthnPlQl7AmllKbLQtXlZYWry3_rub9RgCJiuSlJakmG6karZM/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/AVvXsEj_zojvN7Y_U3EELNtTZ9tYV-JTNFCMTzG1wVs7OPHPUTXJSwTg0UiP-Wh2Ds3PCniV0p11JIDNlyM1peFL8sjc-g-pSNV49L2PBP8Lufxlj0V-4bMhKU1Lpi8SVD_hEroxrgVsFXoJm3Q/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/AVvXsEj16HLfB37xOh8zgD6O6mvvSzNlQCOZBJ98ok-CUcY_9gJ5aCHIwowhZxrcoZHjUMz461I2a4stCx6-ITkz55FK9X4dLEcypzOxIgr92VxXcBPTs5XO4kPu8jBL8TEaz_RqYt9DwJ7afQM/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/AVvXsEhZ_EuVTJf2pXgV4n_Rbt_BdDdnZzJ2ak1nxjPHNjAFHwOo_I8nDDqDmMmWODsRzhKX_RM22hpNVmF85xBDNCsIycscKn-yxnnoMqBqvAnUVV6vt-3_6tbBE93yar1nDBWSYBhY0j_kN4k/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/AVvXsEg7R6niWx8OKlbdU3_dZuc89VwjBMQh1qwz-rmG4q-5kPeEgWZ3aHyc_Qz_dfUWQ_oVJst59D3BrTQMzObbIA7s9StSPHTBylb2bV916cD-lJ7ckl_XHnqujt5BYhPwZjSjefHB8Vg6sns/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/AVvXsEhzdkRyZtG2F8SvH_EhhGHoHfMbn7QIpJRzTLHiAGTgmeArZwMGXT7oLQFw7n9GbmYzwFRb6kLc35MR9aA2Dy_gO-Am5h5NzncPygMr1l9bwucZj7O5Icn4LvslwzL3a-RbiIw0OUXjqQQ/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/AVvXsEiPYTfu7CowHQ1YtYsNnjIKIsXWuEHQzmlw5KYKUkYLcb-3Nb2EwafIgHT__Xbl_MMXVCBkCmJe-2ODb-EkuwwtgEW9Lsaby49xCV0XKnJGfu358Pir_QkEdj2gAZFG025SUOrjhxDWNi0/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/AVvXsEgDggFrvV3z1hftj94DVsJaAzodkgqH7f-yZ95vWRLPau-rzlC20HR-P1I3UqkNAsgboVqwCcq7Hc0xVzHLP33vESIje3qvPgbS9tJPoEopFU8H3T7iq7nYme-xqvLTYvUFHE2QDkORopM/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- عدل ماهو بالون الأحمر بخاصيتك .
الرجاء من الأخوة الكرام : زوار المدونة عدم النسخ دون ذكر المصدر
ليست هناك تعليقات: