اضافة ازرار معاينة و تحميل بشكل رائع

Thursday, March 5, 2015

اضافة ازرار معاينة و تحميل بشكل رائع

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

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

اذهب الى تعديل القالب الخاص بمدونتك
ثم ابحث عن </head> و اضف الكود التالي قبله اى فوقه

ابحث عن

و اضف الكود التالي فوقه

#wrap {     margin: 20px auto;     text-align: center; }  #wrap br {     display: none; }  .btn-slide, .btn-slide2 {     position: relative;     display: inline-block;     height: 50px;     width: 200px;     line-height: 50px;     padding: 0;     border-radius: 50px;     background: #fdfdfd;     border: 2px solid #0099cc;     margin: 10px;     transition: .5s; }  .btn-slide2 {     border: 2px solid #efa666; }  .btn-slide:hover {     background-color: #0099cc; }  .btn-slide2:hover {     background-color: #efa666; }  .btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {     right: 100%;     margin-right: -45px;     background-color: #fdfdfd;     color: #0099cc; }  .btn-slide2:hover span.circle2 {     color: #efa666; }  .btn-slide:hover span.title, .btn-slide2:hover span.title2 {     right: 40px;     opacity: 0; }  .btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {     opacity: 1;     right: 40px; }  .btn-slide span.circle, .btn-slide2 span.circle2 {     display: block;     background-color: #0099cc;     color: #fff;     position: absolute;     float: right;     margin: 5px;     line-height: 42px;     height: 40px;     width: 40px;     top: 0;     right: 0;     transition: .5s;     border-radius: 50%; }  .btn-slide2 span.circle2 {     background-color: #efa666; }  .btn-slide span.title,   .btn-slide span.title-hover, .btn-slide2 span.title2,   .btn-slide2 span.title-hover2 {     position: absolute;     right: 90px;     text-align: center;     margin: 0 auto;     font-size: 16px;     font-weight: bold;     color: #30abd5;     transition: .5s; }  .btn-slide2 span.title2,   .btn-slide2 span.title-hover2 {     color: #efa666;     right: 80px;   }  .btn-slide span.title-hover, .btn-slide2 span.title-hover2 {     right: 80px;     opacity: 0; }  .btn-slide span.title-hover, .btn-slide2 span.title-hover2 {     color: #fff; }

عند كتابة موضوع انتقل إلى وضع HTML
و اضف الكود فى المكان الذى تريده
مع تغيير # برابط المعاينة و التحميل

صاحب المدونة : هشام العروجي