5 خمس اشكال احترافيه لاداة مشاركة مميزه

السلام عليكم ورحمه الله وبركاته

اليوم معنا موضوع مميز عن اداه مشاركة مميزة

الان انا اضع بين ايضيكم اشكال احتارفيه لى اداه مشاركة مميزة

اكدم لكم 5 اشكال احترافيه  

لماذا تستخدم هذه الاشكال مع مميزة المشاركة ؟

الشكل الافتراضى لأداة شكل سئ جدأ لهذا السبب قررت اضع لكم اشكال احترافيه للاداة لى جعل القالب لهو شكل احترافى ومتواضع ويجزب للذائر

قبل استخدام اى شيء عليك اولأ البحث عن الكود </head> واضافه الكود لالتالى فوقه

<link href='https://fonts.googleapis.com/css?family=Oswald|Lobster:400' rel='stylesheet' type='text/css'/>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

كيف استخدم الاشكال التاليه لاداة مشاركة موضوع مميز

اذهب للمدونه الخاصه بك -->قالب-->تحرير HTML.اضغط على Ctrl + F

وابحث عن ]]></b:skin> واضف كود الشكل الممز لديك من الاشكال التاليه

مشاركة مميزه 1

/********************************************
Featured Post
********************************************/
.post-summary { background: #132df2; color: #FFF; padding: 20px; box-shadow: 2px 4px 2px 2px #E4E4E4; margin-top: 19px; padding-top: 10px; } .post-summary a { color: #FFF; font-family: Oswald; font-weight: 100; text-decoration: none; } .post-summary:hover:before { opacity: 1; } .post-summary:before { content: "متميز"; background: #000; opacity: .7; font-family: Lobster; padding: 10px; position: relative; float: right; top: -10px; right: -20px; transition: .3s; } .post-summary .image { box-shadow: 2px 2px 4px 0px #0088C1; border: 2px solid #0088C1; }

مشاركة مميزه 2

/********************************************
Featured Post
********************************************/
.post-summary:before { content: "\f123 متميز"; background: #000; opacity: 1; font-family: Lobster, FontAwesome; padding: 10px; transition: .3s; position: relative; float: right; color: #FFB300; top: -10px; right: -20px; } .post-summary { background: #eabd19; color: #fff; padding: 20px; box-shadow: 2px 2px 7px -1px #777777; margin-top: 19px; padding-top: 10px; border-radius: 10%; border-bottom-left-radius: 0%; border-top-right-radius: 0%; } .post-summary a { color: #000; font-family: Oswald; font-weight: 100; text-shadow: 0px 0px 1px #000; text-decoration: none; } .post-summary p { color: #4A4A4A; font-family: sans-serif; font-size: 14px; line-height: 20px;} .post-summary .image { box-shadow: 2px 2px 4px 0px #000000; border: 2px solid #E6A200; } .post-summary:hover p { color: #000; }

مشاركة مميزه 3

/********************************************
Featured Post
********************************************/
.post-summary { background: #1F1F1F; color: #FFF; padding: 20px; box-shadow: 2px 4px 2px 2px #E4E4E4; margin-top: 19px; padding-top: 10px; border-radius: 10%; border-bottom-left-radius: 0%; border-top-right-radius: 0%; } .post-summary:before { content: "\f123 متميز"; background: #000; opacity: .7; font-family: Oswald, FontAwesome; padding: 10px; position: relative; float: right; color: #FFB300; top: -10px; right: -20px; text-transform: uppercase; } .post-summary a { color: #FFF; font-family: Oswald; font-weight: 100; text-shadow: 2px 2px 2px #000; text-decoration: none; } .post-summary .image { box-shadow: 2px 2px 4px 0px #000000; border: 2px solid #E6A200; } .post-summary:hover:before { opacity: 1; }

مشاركة مميزه 4

/********************************************
Featured Post
********************************************/
.post-summary:before { content: "\f123 متميز"; background: #000; opacity: 1; font-family: Lobster, FontAwesome; padding: 10px; transition: .3s; position: relative; float: right; color: #FFB300; top: -10px; right: -20px; } .post-summary { background: #FF0000; color: #000000; padding: 20px; box-shadow: 2px 2px 7px -1px #777777; margin-top: 19px; padding-top: 10px; border-radius: 10%; border-bottom-left-radius: 0%; border-top-right-radius: 0%; } .post-summary a { color: #000; font-family: Oswald; font-weight: 100; text-shadow: 0px 0px 1px #000; text-decoration: none; } .post-summary p { color: #4A4A4A; font-family: sans-serif; font-size: 14px; line-height: 20px; } .post-summary .image { box-shadow: 2px 2px 4px 0px #000000; border: 2px solid #E6A200; } .post-summary:hover p { color: #000; }

مشاركة مميزه 5

 /********************************************
Featured Post
********************************************/
.post-summary { background: #19eac0; color: #fff; padding: 20px; box-shadow: 2px 4px 2px 2px #EF4C4C; margin-top: 19px; padding-top: 20px; font-size: 18px; } .post-summary:before { content: "متميز"; background: #32ea19; font-family: Lobster; width: 93%; padding: 10px; position: relative; overflow: hidden; float: right; z-index: 10; top: -20px; right: -20px; box-shadow: 2px 2px 2px 2px #EF4C4C; transition: .3s; } .post-summary:after { content: "\f123"; position: relative;
font-family: FontAwesome; box-shadow: 2px 2px 2px 2px #EF4C4C; background: #EF4C4C; top: -482px; left: -20px; padding-left: 14px!important; padding: 11px; padding-right: 14px!important; } .post-summary a { color: #444444; font-size: 26px; font-family: Oswald; font-weight: 100; text-decoration: none; } .post-summary .image { box-shadow: 4px 4px 4px 0px #EF4C4C; border: 4px solid #444444; }

الخلاصه

اتمنى ان يكون الموضوع نال اعجابكم ورجاءا لا تبخلوا ع بتعليقتكم المشجعه

إضافة لوحة المفاتيح مفاتيح تأثير على النص في مدونة مع CSS

السلام عليكم

اضافه لوحه المفاتيح ليها اهميه لكل المبرمجين عندما تريد ان تقول لى شخص اضغط على مثا لCtr+f

الزائر راح يفتكر  ان فى زر فى الشاشه راح يضغط على لكن مع الاضافه المميذه اشف الحروف داخل المربح يظهر على شل ظر فى لوحه المفاتيح راح تصل اصرع لى الزائر

معاينه

See the Pen إضافة لوحة المفاتيح مفاتيح تأثير على النص في مدونة مع CSS by ‪Hussein Almasry‬‏ (@husseinhussein) on CodePen.

الان شاهد كيف اضافتها الى مدونتك

 ابحث عن هذا الوسم ]]></b:skin> واضف الكود التالى فوقه

kbd{
border:1px solid gray;
font-size:1.2em;
box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:2px 3px;
padding:1px 5px;
}

والان عند كتابه اى موضوع حول الموضوع من تأليف الى HTML
واضف الكود التالى

<kbd>Ctrl</kbd> + <kbd>F</kbd>

والان انتهى الموضوع لو واجهتك اى مشكله يمكنك ان ترسلها الى فى تعليك

كيف اخذ صورة كاملة للقالب بدون برامج

السلام عليكم راح اقدم لك تدوينه رائعه للتصوير القالب بى القالب او على حجم الشاشه فقط الشرح راح يكون عبر اداه بسيطه يمكنك اتغدمها فى اى وقط وهيا لا تصور فقط بل تقوم بى عمل مونتاج بسيط على الصوره وهيا متاحه لى جوجل كروم

معاينه.

الشاشه | الكامل

اولأ.

اضافه الاداه الى المتصفح

1. لى اضافه الاداه اضغط هنا

2.اضغط على( ‏إضافة إلى Chrome)

ثانيأ.

اضغط على( تثبيت إضافه)

الان تم اضافه الاداه الى المتصفح

ثانيأ.كيف التعامل معها

1.افتح القالب او المدونه المراد تصورها 

2.واضغط على الاداه

الخيار الاول لى تصوير الشاشه فقط

الخيا الثانى لى تصوير القالب او المدونه لى الكامل

بعد الضغط على اى اخطيار يمكنك التعديل على الصوره من الخيارات الموتاحه امامك

ثالثأ.

لحفظ الصوره اضغط على (Share)

واخطار الصيغه الى عيزه واضغط عليها يحمل الصوره تلقائى

وشكرأ للى المتابعه والى القاء

قالب Inverter Grid معرب ومطور بجميع اضافاته

بسم الله الرحمن الرحيم السلام عليكم ورحمة الله وبركاته قالب حصري من تعريبى , قالب ( Invert Grid - انفريت جريد ) هو نسخة من قالب ( Invert Pro ) . هاذا القالب له الكثير من اللميزات ثوف نتعرف عليها فى الصفل التدوينه الان شاهد صوره كامله لى القالب

صوره اخرا من داخل القالب

مميزات القالب

1. متوافق .
2. سيو 100% .
3. سلايد شو .
4. اعلاني مقاس 920×90 .
5. صندوق البحث .
6. صندوق مشاركة الموضوع .
7. قائمة فى الاعلي .
8. زر لى ازهار واخفاء النحتوى.
9. جدول لى الموضيع المهمه.
10. ازرار التحميل والمعاينه.
11. زر الصعود لأعلى .
12. فوتر احترافي .
13. ازرار المواقع الاجتماعية .
14. المشاركات الشائعة بشكل احترافي .
15. تعريف الكاتب .
16. مواضبع ذات صلة .
17. الاشتراك فى القائمة البريدية .
18. اضافه كلمه كبل التعليك
19. النف بار متحرك

معاينه القالب

معاينه

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

تحميل

ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لى اضافه كلمه قبل التعليقات الذهب المدونه توجه الى الاعدادات -->مشاركات وتعليقات-->رسالة نموذج التعليق
اضغط على اضافه واكتب كل ما تريد
ولى معرفه باقى الاداه مع تحملي الاقالب

مربع الاشتراك مثبت على المدونه يظهر مره واحدة

السلام عليكم

اضافه مربع الاشتراك مثبت على المدونه يظهر مره واحدة لكل زائر فى المدونه بى شكل انيك واحتراقى

الصندوق بشكل انيق واحترافى يمكن ان اضيف فى مدونتي بى شكله الاحترافى وهوا سهل الاضافه وكل ما عليك ان ضيف الكوج وتغير الرابط بى مدونتك فقط

تابع الاضافه

اذهب--> الى لوحة تحكم بلوجر-->قالب -->تحرير

ابحث عن </head> واضف الجود التالى فوقه

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><script type="text/javascript" src="http://codingcrazy.com/demo/cookie.js"></script>

ايضأ ابحث عن </body> واضف الكود التالى فوقه

<!--husseinhtech Feedburner OTP--><style>@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);#popupcc{   background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfwMd_7V10Kz_AJfHzcMQj5u7j6WKUPbWXGYlA7rKlh_Ao5xf5UVngum7rhmdP3NSP4CuvhpVmlt2CQJUgGnv4_ZgtOUH0cqEnbhk3IKHbK8GH4PmKvFaQ8DgnIa2Zid77xmWRSdUV_THi/s1600/overlay.png&#39;);position:fixed;z-index: 9999990;width:100%;color:#fff;    height:100%;top:0;font-family: &#39;Open Sans Condensed&#39;, sans-serif;display:none;}#main-box {   position:fixed;top:100px;left:50%;margin-left: -265px;padding:15px;background: #353535;   box-shadow: 0px 0px 3px #000;-moz-box-shadow: 0px 0px 3px #000;-webkit-box-shadow: 0px 0px 3px #000;width:500px;height:auto;z-index:9999999;    }#main-box h2 {   margin:5px;color:#fafafa; text-align:center;font-weight:normal;text-transform:uppercase;    font-family: &#39;Open Sans Condensed&#39;, sans-serif; }#popup-body h2{text-align:left; width:300px;}#popup-body h2 img{width:25px; position:relative; right:5px; }.body-inner{float:left;width:300px;} .popup-image{float:right} .popup-image img{position:relative;top:10px;}#main-box h2 img {   border:0; position:relative;top:3px; right:5px;}#main-box-in {   padding:10px; border-radius: 5px;-webkit-border-radius: 5px;   box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3) inset, 0px 1px 0px rgba(255, 255, 255, 0.1), 0px -1px 0px rgba(0, 0, 0, 0.5);-webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3) inset, 0px 1px 0px rgba(255, 255, 255, 0.1), 0px -1px 0px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3) inset, 0px 1px 0px rgba(255, 255, 255, 0.1), 0px -1px 0px rgba(0, 0, 0, 0.5);    }#buttonfeed {    width:30%; color: #fff;-moz-box-shadow:inset 0px 1px 0px 0px #cf866c;-webkit-box-shadow:inset 0px 1px 0px 0px #cf866c;box-shadow:inset 0px 1px 0px 0px #cf866c;background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #d0451b), color-stop(1, #bc3315));    background:-moz-linear-gradient(top, #d0451b 5%, #bc3315 100%);    background:-webkit-linear-gradient(top, #d0451b 5%, #bc3315 100%);    background:-o-linear-gradient(top, #d0451b 5%, #bc3315 100%);    background:-ms-linear-gradient(top, #d0451b 5%, #bc3315 100%);    background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);    background-color:#d0451b;-moz-border-radius:3px;-webkit-border-radius:3px;    border-radius:3px;border:1px solid #942911;cursor:pointer;font-size:15px;    padding:9px 2px;text-decoration:none;margin: 5px 0px; font-family: &#39;Open Sans Condensed&#39;, sans-serif;   }#buttonfeed:hover {background: #d0451b;}#boxfeed {outline: none;padding:10px 2%;width:60%;-moz-boder-radius:3px;-webkit-border-radius:3px;border-radius:3px;background: #333;    color: #fafafa;font-size:15px;   border: 1px solid #333;    box-shadow: inset 0 0 3px #000;    -moz-box-shadow: inset 0 0 3px #000;-o-box-shadow: inset 0 0 3px #000;-webkit-box-shadow: inset 0 0 3px #000;    font-family: &#39;Open Sans Condensed&#39;, sans-serif;   }#main-box a {   margin:5px;color:#fff;text-decoration:none;text-transform:uppercase;   }#main-box a img {   position:relative;    right:3px;    top:2px;border:0;   }#creditcc {   width:200px;padding:5px;margin:auto;text-align:center;   }</style><div id='popupcc'><div id='main-box'><div id='main-box-in'><h2><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ORe34gAECMjT6FuimcTmfMRS6ydhbL6fxP3P-Jq1I_AKIEwP_BwqrzTi-lQj6whWJH5Cii5HcH4wrP56J532H8gNYqFN_9uwvwsVi82-4oiUCqcVkvj4FhUh61l2Wdlrky4N2-m8yYW_/s1600/634c55_2bf916eeff084210a1d8970bcebc3aaa.png' width='32px'/>   الاشتراك لنا</h2><div id='popup-body'><div class='body-inner'><h2><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5V0RUUXbAqYrKZkkxW3Q84Mpj5aeKohKqUy_GCptPvgcIZ7QNFr_fAgCercHfc9DN8MJ70SekDWjy_4MXtGXtxjgSTHv9532UZKHI_NwPoKR9nX7aLJ5viJKGsPqIR4jXuGGcdXJ_YBl_/s1600/check-mark-11-256.png'/>  مجاني %100 </h2><h2><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5V0RUUXbAqYrKZkkxW3Q84Mpj5aeKohKqUy_GCptPvgcIZ7QNFr_fAgCercHfc9DN8MJ70SekDWjy_4MXtGXtxjgSTHv9532UZKHI_NwPoKR9nX7aLJ5viJKGsPqIR4jXuGGcdXJ_YBl_/s1600/check-mark-11-256.png'/>  احصل على كل جديد</h2><h2><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5V0RUUXbAqYrKZkkxW3Q84Mpj5aeKohKqUy_GCptPvgcIZ7QNFr_fAgCercHfc9DN8MJ70SekDWjy_4MXtGXtxjgSTHv9532UZKHI_NwPoKR9nX7aLJ5viJKGsPqIR4jXuGGcdXJ_YBl_/s1600/check-mark-11-256.png'/>  إلغاء الاشتراك في أي وقت</h2></div><div class='popup-image'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQG7m-jKL0f9of8bjeZpoO_Wy2zbJov8sn0EU0HvZG1Y5Q_sf-U_AztDk5tNTbZCLiwRyPf84yeIOzwPRiBM9sByneELvY5DYfOjZNpmD8QbWsguMjEPtuIO1UWRVXxvIj48hYmTRnwrsn/s1600/Email_icon.png'/></div></div><!--The Subscribtion Box. Make sure you edit it before saving--><center><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&quot;http://feedburner.google.com/fb/a/mailverify?uri=husseinhtech&quot; , &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;);return true' target='popupwindow'><input name='uri' type='hidden' value='husseinhtech'/><input name='loc' type='hidden' value='en_US'/><input class='emailinput' id='boxfeed' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email&quot;;}' onfocus='if (this.value == &quot;Enter your email&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email'/><input id='buttonfeed' type='submit' value='اضغط هنا'/></form></center><div id='creditcc'><a href='#' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgegUDK7hgLEHcyfYW_Czk8FpttdnyDVjIGxnzP_7Ucz19xxJhwfgAJ85TxCbd4I3w4uTNk1V_sXN9OMiN4dg4zFATaiJGY8yXUGCAHNYpJRprgoDkgxdP8nGHFnN29UMgPknvDMh-K59ip/s1600/Download_icon.png' width='12px'/>احصل عليه</a>~ <a href='JavaScript:void(0)' id='closecc'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaEju0F9hy7XEtlnbn3pISYYU7TaS1VshLCkwtKoqWU_mXE8wy6LYOylSl6hmbVpdbIUncnNZCojFJ0xYgu-9svpyWVNyc6-2FqhuwO_kCHCCDZxuS9_pmbkESzv4h78DFXexq2I2BpRjl/s1600/icon-close.png' width='15px'/>   أغلق</a></div></div><!--Main in--></div><!--main-box--></div><!--husseinhtech popup-->

ولا تنسى حذف husseinhtech و اضافة مدونتك وهذا هو الكود

http://feedburner.google.com/fb/a/mailverify?uri=husseinhtech<input name='uri' type='hidden' value='codingcrazy'/>

والان الف مبروك على الصندوق ولا تنسى التعليم المشجع

اضافه زر 3D فى بلوجر لى التحميل والمعاينه

السلام عليكم

الان اضف فى مدونتك زر لى التحميل والمعاينه لو اى شيئ فى مدونتك الزرار3Dالزر اكثر من رائع انهو بى تقنيه عاليه الدقك اسرع ىل الاضافه فى مدونتك

معاينه الزر

تحميل

معاينه

الاضافه اكثر من رائعه 
لى الاضافه فى مدونتك تابع 

كوم بى الدخول الى مدونتك من هنا


قالب-->تحرير HTML
وابحث عن الوسم ]]></b:skin>

اضف الكود قبله تماما

body {
font-family: Impact;
}
.button {
height: 80px;
width: 180px;
cursor: pointer;
margin: 50px auto;
}
.button .outer {
position: relative;
width: 100%;
height: 100%;
padding: 10px;
background: rgba(0,0,0,0.65);
border-radius: 14px;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
box-shadow: inset rgba(0,0,0,0.85) 0px 1px 5px;
-webkit-box-shadow: inset rgba(0,0,0,0.85) 0px 1px 5px;
-moz-box-shadow: inset rgba(0,0,0,0.85) 0px 1px 5px;
-webkit-transform: perspective(500px) rotateX(35deg);
-moz-transform: perspective(500px) rotateX(35deg);
}
.button .outer .height {
position: relative;
height: 100%;
margin-top: -15px;
padding-bottom: 15px;
background: #39a02d;
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
box-shadow: rgba(0,0,0,0.85) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 8px;
-webkit-box-shadow: rgba(0,0,0,0.85) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 8px;
-moz-box-shadow: rgba(0,0,0,0.85) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 8px;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
}    
.button:hover .outer .height {
margin-top: -10px;
padding-bottom: 10px;
background: #3aaf2d;
box-shadow: rgba(0,0,0,0.25) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 6px;
-webkit-box-shadow: rgba(0,0,0,0.25) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 6px;
-moz-box-shadow: rgba( 0,0,0,0.25) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 6px;
}
.button:active .outer .height {
margin-top: 0px;
padding-bottom: 0px;
}
.button .outer .height .inner {
line-height: 2.8em;
font-size: 30px;
letter-spacing: .05em;
position: relative;
height: 100%;
text-align: center;
text-shadow: #8aff7b 0px 0px 1px;
background: #44d135;
background: -moz-linear-gradient(top, #80ec75 0%, #43d034 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#80ec75), color-stop(100%,#43d034)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #80ec75 0%,#43d034 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(top, #80ec75 0%,#43d034 100%); /* W3C */
border-radius: 12px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
box-shadow: inset rgba(255,255,255,0.85) 0px 0px 1px;
-webkit-box-shadow: inset rgba(255,255,255,0.85) 0px 0px 1px;
-moz-box-shadow: inset rgba(255,255,255,0.85) 0px 0px 1px;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
}
.button:hover .outer .height .inner{
text-shadow: #99f48d 0px 0px 1px;
background: #43d034; /* Old browsers */
background: -moz-linear-gradient(top, #43d034 0%, #67e45c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#43d034), color-stop(100%,#67e45c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #43d034 0%,#67e45c 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(top, #43d034 0%,#67e45c 100%); /* W3C */
}
.button:active .outer .height .inner{
text-shadow: #319926 0px 1px 0px;
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
box-shadow: inset rgba(0,0,0,0.9) 0px 0px 8px;
-webkit-box-shadow: inset rgba(0,0,0,0.9) 0px 0px 8px;
-moz-box-shadow: inset rgba(0,0,0,0.9) 0px 0px 8px;
background: #1d7d12; /* Old browsers */
background: -moz-linear-gradient(top, #1d7d12 0%, #4fd342 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1d7d12), color-stop(100%,#4fd342)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1d7d12 0%,#4fd342 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(top, #1d7d12 0%,#4fd342 100%); /* W3C */
}

والان عند كتابه موضوع حول الموضوع الى HTML

اضف الكود التالى  فى المكان المناسب 

<div class="button"><div class="outer"><div class="height"><div class="inner">DOWNLOAD</div></div></div></div>

وغير DOWNLOAD بى اى كلمه اخرى مثل .معاينه.تحميل.شاهد ايضا.الخ

لى اضافه الرابط بعد اضافه الكود فى المكان المناسب علم على الكلمه الزى اضفتها واضغط على الارتباط

   واضف الرابط 

والى اللقاء

تم افتتاح مدونه حسين هاي تيك بدل ماجيك كومب

السلام عليكم ورحمه الله وبركاته تم بفضل الله بناء مدونه حسين هاى تيك بدل مدونه ماجيك كومب 

ادعولي بالنجاح لكى اجعله اكثر شهرا واحسن من ماجيك كومب

وربنا يعوض عليا فى مدونه ماجيك كومب

المميزات الجديده باذن الله

1. قالب رائع
2. موضوع اكثر جمالأ 
3. وانشاء الله الاكثر حصرى

انضمو الى المدونه الان للحصول على قل جديد من هنا