آخر الأخبار

الخميس، 23 يناير 2014
الرئيسية > إضافات بلوجر > إستيلات مختلفة للمواقع الإجتماعية بشكل مترو لمدونات بلوجر

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



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

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

1- ادخل إلى مدونتك / ثم أختر تخطيط

2- اختر إضافة أداة  / ثم ضع الكود التالي في صندوق الأداة

3- حفظ الأداة
الكود



 <a href='ORKUT' onclick='javascript:window.open(this.href, &quot;hangoutBC&quot;, &quot;toolbar=0, location=0, statusbar=1, menubar=0, scrollbars=no, width=1000, height=700&quot;); 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, &quot;hangoutBC&quot;, &quot;toolbar=0, location=0, statusbar=1, menubar=0, scrollbars=no, width=1000, height=700&quot;); 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, &quot;hangoutBC&quot;, &quot;toolbar=0, location=0, statusbar=1, menubar=0, scrollbars=no, width=1000, height=700&quot;); 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, &quot;hangoutBC&quot;, &quot;toolbar=0, location=0, statusbar=1, menubar=0, scrollbars=no, width=1000, height=700&quot;); 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/AVvXsEjRYdIMKy7be59_-amOy1PC1iVlGsQWLED1t0FNvzXo5n3IRV9mR04nRr8A9zJfBVmG3VwNLpTdmGu1PUr1xFH-i2NbaIajHJyNcGP12hUeHx53p7MZ2DGiA_E7j2xU72rJoY9Dp7rG1amd/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/AVvXsEhIDxkZz7N-PaMDAVpm9a8XpWSTdMECU0UpSPG3IpShS2QysTP8bFBDv72p4dhbEVfWlj9-II1lrzjR-awczqbqC4xvWJO1cJM9wSIhuzKTKSV466vcxbHRQnDHdTOCytK-zgkaIN-FRvEl/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/AVvXsEjzpUirHH0HStJuVSKq4QSqFEv4wqxqe1e_FkLXi08H8XD0aXjZjdIV-Gk3xVhSoSE4UmWTgdNJwaGEFzBpyECieet5M8g29k4c-UMNkmLtLOIs-ICtVW5wp8icSIWEvj6XFsdsuA1x7tEy/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/AVvXsEjndnaetzW6pdLnpsNkB_A50wOv3ZyGITHPvqsyW0AvK0hIPf_oUd9yXsZjopvMFDKTokaq0BGdI9RSbrCJDfug0CHOQjBfngf-15VaMi0X6FmYpR2OHDcbgumr0kdCL34RshQf6bon9jjU/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/AVvXsEhIDxkZz7N-PaMDAVpm9a8XpWSTdMECU0UpSPG3IpShS2QysTP8bFBDv72p4dhbEVfWlj9-II1lrzjR-awczqbqC4xvWJO1cJM9wSIhuzKTKSV466vcxbHRQnDHdTOCytK-zgkaIN-FRvEl/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/AVvXsEjzpUirHH0HStJuVSKq4QSqFEv4wqxqe1e_FkLXi08H8XD0aXjZjdIV-Gk3xVhSoSE4UmWTgdNJwaGEFzBpyECieet5M8g29k4c-UMNkmLtLOIs-ICtVW5wp8icSIWEvj6XFsdsuA1x7tEy/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/AVvXsEjndnaetzW6pdLnpsNkB_A50wOv3ZyGITHPvqsyW0AvK0hIPf_oUd9yXsZjopvMFDKTokaq0BGdI9RSbrCJDfug0CHOQjBfngf-15VaMi0X6FmYpR2OHDcbgumr0kdCL34RshQf6bon9jjU/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/AVvXsEjdQV2WC-yF4HKHYZkg9OcdLSHtVr7apxvbYeNkdYc0PuYxFIpvx0iv8F9HOD1Iow_gIGaYIzd3033-J2RC1qW1j0EKSQe1gNWZlmyy26KmCbJ7X8ifSgop0DhLs_F1Kt-hDrM0vHbmeGfP/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/AVvXsEgpSWOcsDFWz577pvmk2R2X8NgPeIzIAS0fpscCbx-LlciKmJYOuvSrnPPACdeHYSAY7bjg9zCCkTZR_-dixIFZQCsuU7GoyjkGzZUNfB4rMSTtgpKN1nhyNzrnzM_31jh9CFijnnmhrBox/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/AVvXsEg_EN70i23oEA0sVjojxjrtL97ddngSgO-wWnnVc7uBNIJ9OOGic8VZMWbAfsvlnlruW_sWnow9ZJyiIh7L1KKnONmKMI1AjGJk_ShcBWCeSwB2-LWIfpdOSRmZGvv-fkz5M5qbOX5AwLtY/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/AVvXsEh8Q7mxoKcr2uLWz6PSQIaEHeSsr14_0Y7YsOs5cGh3Ai_4UxqMwqLPMEaUO_HRB8jDBnn76M_KV7GhWY7jhscCu5D5PU4arq3txKiBWZyL7NcL6MXuV6m__0Rtx5ndOVSXMapJ6JUDfGxq/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/AVvXsEgV9BflIJqNdfrdMnc_2-YXK1vs5IFvOPzeX3AG_DoUt9HrTGOn1hHqpvVVZHxWYZGQAa11q1-4tqms27h8TQGEdr0qVQt1oGcN7ka_7UdlAxufcQSqWmlK277ymIHU72alphvUUm6hbn7Y/s1600/rss-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFICh-0XPGAbPQ_K5MLIU_0TyhveLVEGNhjmJ3qCW7P1YNJK7Qf9DZJNH_HGgAcMK2-_NJrTnMfuOW8R-3qvTprXGG6KBVtkeMMx1VQ9F8OVAcBdL0bPZZjpuLc_keenAmi5l7pg5SAL7g/s1600/rss.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV9BflIJqNdfrdMnc_2-YXK1vs5IFvOPzeX3AG_DoUt9HrTGOn1hHqpvVVZHxWYZGQAa11q1-4tqms27h8TQGEdr0qVQt1oGcN7ka_7UdlAxufcQSqWmlK277ymIHU72alphvUUm6hbn7Y/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/AVvXsEh5TFswwik7-d_P05NMu3VxsfygcTD4X-53Id3oXX0BjyYfYQvh7ocTntQrNwK0YyTGCwrz9hZOQPDu_JGcC5xLOvK7lnMF3tQGGTrOMbQGQvyLJvOX4IQYXJnVOeQiIEPSFbvvf5gjsdjF/s1600/facebook-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwxVxNT7nleEhR_CqdzJ_m60mJQ9wlg4dj_9clZLU4vUJcTu4NpTtV2pqRW27SAvdKTVFpRzgaKLepY8k04N9hWOW9_MPfVQCXzV7z3CWaFjDMUcBndBcHQjnahlfXtWqPV_5VbAUUSteM/s1600/facebook.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5TFswwik7-d_P05NMu3VxsfygcTD4X-53Id3oXX0BjyYfYQvh7ocTntQrNwK0YyTGCwrz9hZOQPDu_JGcC5xLOvK7lnMF3tQGGTrOMbQGQvyLJvOX4IQYXJnVOeQiIEPSFbvvf5gjsdjF/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/AVvXsEhbeiWyHYdqQ_j4XFYm01KaNchiXd8H-3fNt22i3XfR3XhDVPMYBujX80bpnymi-AYBZnXEa7N_tVZS4H6v2AUOZdHD6ThJ0Y6pVUrlu-4F3lqxVeKqypEGVpgENuls5v99Z5htzBLSGCVE/s1600/twitter-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAVXB8mCMTORaK7iGBUN0MIEW05dv1VIobfjrvDvHPho2B1ZAPAUjJESe55DrNCShZAJ1RoSozGC2G_-L95SOw6njo4DGtNmeDQ3rIBUdHx9TIXcGkKEMXIc-8IgoBL3uR2D5St8dpWw1p/s1600/twitter.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbeiWyHYdqQ_j4XFYm01KaNchiXd8H-3fNt22i3XfR3XhDVPMYBujX80bpnymi-AYBZnXEa7N_tVZS4H6v2AUOZdHD6ThJ0Y6pVUrlu-4F3lqxVeKqypEGVpgENuls5v99Z5htzBLSGCVE/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/AVvXsEjUELG9QHwgNGscVGwTZCvA4NdYUpTSpH07mbiuAr0QlhQmG1TOVydxsb-e0helJCm_f7SWFzHLSTNm189WOLomXUguYC2YxsXmFbpAlmmjklE67fPnzTcOZEGgsAh43sZxLXxqesWNYyoq/s1600/google-plus-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXl5Uu-1J7pTAie8S7IdVQfd1iopyC7GVjWSwgVhibeGtWoTox9GOFKGz8ojZWTqlZmnLmX2l4hjkQVt7MyMwsaQ8NesiEF_Isz5YX4WQU26e0f4HminaYjIQoXZgNFEyNAesSF3HHOkSN/s1600/google-plus.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUELG9QHwgNGscVGwTZCvA4NdYUpTSpH07mbiuAr0QlhQmG1TOVydxsb-e0helJCm_f7SWFzHLSTNm189WOLomXUguYC2YxsXmFbpAlmmjklE67fPnzTcOZEGgsAh43sZxLXxqesWNYyoq/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/AVvXsEg3f-Y0JzWSufwnC8kKR7yqS9fodOdTHWtl5QBa6xTI97iSDwqjpzBzQdHmhpIGvyEq1JK56NnrIBaXGIbiooBig-A8TzK9VB_6TNXq7SPmg2m_B7WRqGX1nQplfyINXPJXB_C6Rhamw4ol/s1600/pinterest-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJMoaR1DtyHL_l-WGwZlUEJouqnNiOD5pNMvKyvMJMaLizkGXIP-7XuPM2W4HijwHxCuQRrvumXSpqC7HO5KGPlxcHQaFU9vrxLHm5EJxhD0IQCTnnwRWQtWCIU2EmVa6i5xLhgktKu7El/s1600/pinterest.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3f-Y0JzWSufwnC8kKR7yqS9fodOdTHWtl5QBa6xTI97iSDwqjpzBzQdHmhpIGvyEq1JK56NnrIBaXGIbiooBig-A8TzK9VB_6TNXq7SPmg2m_B7WRqGX1nQplfyINXPJXB_C6Rhamw4ol/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/AVvXsEh2jmPQ0THIiy7CpDPPP8tIc9yXlIFfmil86RvZN3Wwu85a8q-NcSrCHTUKBl-sJZGjZMml_gbgC2rDtPVVk6g3HpoZqM6nSQYDy5lp7IxC6vhJHr6kXs98XZz2RAiGILA5yWfEE-kIre60/s1600/email-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQeUrq915mgPtVDWy7XXskvoM63ltGq3wJj7pZsR9P1JiDbMHvMDqy2DZLVfSqar5aSGmTPZKyISfjMvKhWUnzql5h1pEsU8adprJuwi9m4viyrqgttiLDv4IFytXaBfTsu6ebpf7YXbYQ/s1600/email-shadow.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2jmPQ0THIiy7CpDPPP8tIc9yXlIFfmil86RvZN3Wwu85a8q-NcSrCHTUKBl-sJZGjZMml_gbgC2rDtPVVk6g3HpoZqM6nSQYDy5lp7IxC6vhJHr6kXs98XZz2RAiGILA5yWfEE-kIre60/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/AVvXsEiz7cxLOG7c_bOZlR146OpExtjzi6BZW9E807ezTtarQlhOFCZnZ2HNHvnpFGtwWCtqQGaYnx3eulfhllR26QWNY0vI3pMhLQQ8cnuj9yKf1I3238x9Jel2KwBSd38GxUwxO5TqRV5IRtc/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/AVvXsEjLDnnNUXKJP6sgouxhhoLsjhIPbiPoOyJyWO2_OuDtsWb1aJBZBUM5WYqhM0aZQYtTl6I4IWk33_m4KU35YtdpM6-I2WV85_OJ7E_EXhjhupya6alqtvC6nPSxnbRj0EleOHfZ8oKryyo/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/AVvXsEhGcV4gTTPSe8kNb0Olfk9HosLYjC7xi_KvsOtureeU3XX-RgyjneN2nmc3S1WQinx31eHvsJSEXFFVpMJJZoG0xEdKxpO-hLhah-8xf54mNFXNb77cRn0onM94pl_dvxRkMpL9LclmJKI/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/AVvXsEge8xFkJ6TaSqU5m0hxJjI6bUIJJI-l2_00CMaGibDdxNNSjllqlHbtJ3esCDKzBfVt2LXyUVFx_3h2hy3pu6ZhQ0F1cjpQSzPNWYzxwAgsCTBh0Ep2O8mr4PGLLB0xP5aNRgps-q-F5B8/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/AVvXsEgwAfrQb8AQmPfeTI3o7CbpOxah7gvRHRFrGd713-FHrDlXQgMm8RZfKln5IHQHj1km8DCsCUVnzP3w3rDuZWjQdNUyq1WdD0FmrVxGwqp9L4pXPyq2w7tvEFgWoT6G9DVh5F4JZyud7vQ/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/AVvXsEj70JghQKLgnpLIfCRQi_711cKipYPnIDxUed-BHh9sq1sWqsxylimv7U_lqRmv45thpn1O_Q33jTbC8x-3l86j9HiqCvpVemjpTdozomJ6gAE7OCK2_a2lMuamwiKlQb9NXBdXdLRLAu0/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/AVvXsEi8TyhtJ5oJsMbV2pTHjbFqjIYTWyERCP5Z_DDJ0jKjdRx67oxay_HAvsmkQ0j4IGLHSie29dAidDaZRFu8DrNR3QzvoSQlRyUCAZNd0TcqIp8uaSGSvL6paly4X-eFVsXm0vWaxaHeGH4/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/AVvXsEgeuwDQ_7hPv21LBUumO3Qw9OkkLo9xuGkoAMmrCuWp3eW5t9CVoLgonE5H0G5Wn1k7o94wkniXSQiMxNtTnLMzTTT_0pWXJYGnA6-0YokCXk9FpAnaQKNZx1h_0pYn85dZ5z3iEGBGPYE/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/AVvXsEjU20iEth4-XD-hrEBnlaZvfa9umuNAPyvDwgI4Uel7dod0Dapupx0FeoGKAkBjrwfFW-dkOTudyRwPITypA1u6mw6pSaP-U4JYXKZZIRmMSIvG-_xvxnyjJ5OOWg0aq0s4UrLwp6N0lYM/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/AVvXsEjs-X17mmGuCnCYGCd3e8JAWEW_qOjGSTysNpUtVbB9hKdO-JGiHC2i0HjBYY3Y87yDK9KXtPZ3SiE4RfB-alBohZJy6-7U7Yc2imXOUTcF82oGGd-rnT0Kj_Fwxlp3CnPCSoMkuEkk8EU/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- عدل ماهو بالون الأحمر بخاصيتك .

إذا كان لديكم أي إقتراحات أو تساؤلات حول الموضوع اضغط هنا وقدم اقتراحك أو تساؤلاتك ونحن على إستعداد للإطلاع على اقتراحاتكم والإجابة عن تساؤلاتكم ... أهلاً بكم على أرض الإبداع والتمييز

Note:- الرجاء من الأخوة الكرام : زوار المدونة عدم النسخ دون ذكر المصدر
by في 1/23/2014
إستيلات مختلفة للمواقع الإجتماعية بشكل مترو لمدونات بلوجر
موضوع المشاركة: إستيلات مختلفة للمواقع الإجتماعية بشكل مترو لمدونات بلوجر 9 من خلال 10 وعلى أساس 10 تصنيف. 9 تعليقات المستخدمين.
  • تعليقات بلوجر
  • تعليقات الفيس بوك

0 Comments:

رسالة تنبيه
    يسعدنا تفاعلكم بالتعليق لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق :
    أن لا تضع أي روابط خارجية
    أي سؤال خارج محتوى التدوينة يرجى استخدام صفحة الدعم الفني
    صفحة الدعم الفني
  • أن يكون التعليق خاص بمحتوى التدوينة إستيلات مختلفة للمواقع الإجتماعية بشكل مترو لمدونات بلوجر
    • لإضافة كود حوله أولا بمحول الأكواد
انقرهنا لتحويل الكود

إرسال تعليق

Item Reviewed: إستيلات مختلفة للمواقع الإجتماعية بشكل مترو لمدونات بلوجر Description: ستيلات مختلفة للمواقع الإجتماعية بشكل مترو لمدونات بلوجر Rating: 5 Reviewed By: home blogger
الاشتراك في: تعليقات الرسالة (Atom)