اضافة كود زر المعاينة زر التحميل داخل مواضيع بلوجر بشكل جميل واحترافي، ويحتوي الكود على ازرار اثنين زر التحميل وزر المعاينة،وهذه الكود قد يعطي الروابط
الكود الاول
طريقة اضافة زر التحميل وزر المعاينة داخل مواضع بلوجر .
توجه الى ادارة المدونة اختار المظهر تعديل HTML .
اضغط من الكيبورد على Ctrl + F وابحث عن هذا الوسم " ]]></b:skin> " ثم قم بنسخ ولصق الكود الاسفل اعلاه تماماً، واضغط على حفظ .
#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 #09c;margin:10px;transition:.5s}.btn-slide2{border:2px solid #efa666}.btn-slide:hover{background-color:#09c}.btn-slide2:hover{background-color:#efa666}.btn-slide:hover span.circle,.btn-slide2:hover span.circle2{left:100%;margin-left:-45px;background-color:#fdfdfd;color:#09c}.btn-slide2:hover span.circle2{color:#efa666}.btn-slide:hover span.title,.btn-slide2:hover span.title2{left:40px;opacity:0}.btn-slide:hover span.title-hover,.btn-slide2:hover span.title-hover2{opacity:1;left:40px}.btn-slide span.circle,.btn-slide2 span.circle2{display:block;background-color:#09c;color:#fff;position:absolute;float:left;margin:5px;line-height:42px;height:40px;width:40px;top:0;left: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;left: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;left:80px}.btn-slide span.title-hover,.btn-slide2 span.title-hover2{left:80px;opacity:0}.btn-slide span.title-hover,.btn-slide2 span.title-hover2{color:#fff}
ملاحظة: قم بتغيير الروابط الموجود باللون الازرق الى الروابط الخاص بك.
<div id="wrap">
<a class="btn-slide" href="https://cnetjo.blogspot.com/" target="_blank">
<span class="circle"><i class="fa fa-rocket"></i></span>
<span class="title">معاينة</span>
<span class="title-hover">اضغط هنا</span>
</a>
<a class="btn-slide2" href="https://cnetjo.blogspot.com/" target="_blank">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">تحميل</span>
<span class="title-hover2">اضغط هنا</span>
</a>
</div>
الكود الثاني
اضغط من الكيبورد على Ctrl + F وابحث عن هذا الوسم " ]]></b:skin> " ثم قم بنسخ ولصق الكود الاسفل اعلاه تماماً، واضغط على حفظ .
button-m{width:260px;height:70px;text-align:center;text-decoration:none;background:rgba(0,0,0,0);color:#c30909!important;font-size:30px;font-weight:bold;line-height:60px;border:2px solid #c30909;border-radius:10px;transition:.5s;display:inline-block}.button-m:hover{background:#c30909;color:#ffffff!important;transition:.5s}.button-s{width:260px;height:70px;text-align:center;text-decoration:none;font-size:30px;font-weight:bold;line-height:70px;border-radius:10px;transition:.5s;display:inline-block;margin:20px 0;position:relative}.button-s:hover{background:#108e97;color:#e2e2e2!important;transition:.5s}.button-s:before{content:'للتحميل';position:absolute;top:0;left:0;right:0;bottom:0;background:#09;color:#ffffff!important;border-radius:10px;opacity:1;transition:.5s}.button-s:hover:before{opacity:0;transition:.5s;filter:blur(40px)}.button-g{width:260px;height:70px;text-align:center;text-decoration:none;font-size:30px;font-weight:bold;line-height:70px;border-radius:10px;transition:.5s;color:#e2e1e1!important;background:#6a1cb3;display:inline-block;position:relative}.button-g:hover{transition:.5s}.button-g:before{content:'للتحميل';position:absolute;top:0;right:40px;left:0;bottom:0;background:black;border-radius:10px 0 0 10px;transition:.5s}.button-g:hover:before{right:220px;transition:.5s;color:transparent!important}.div-button{text-align:center}
ملاحظة: قم بتغيير الروابط الموجود باللون الازرق الى الروابط الخاص بك.
<div class="div-button">
<a class="button-m" href="https://wiisam21.blogspot.com/" rel="dofllow" target="_blank">اضغط للتحميل</a>
<br />
<a class="button-s" href="https://wiisam21.blogspot.com/" rel="dofllow" target="_blank">اضغط هنا</a>
<br />
<a class="button-g" href="https://wiisam21.blogspot.com/" rel="dofllow" target="_blank">اضغط هنا</a>
</div>
الكود الثالث
توجه الى ادارة المدونة اختار المظهر تعديل HTML .
اضغط من الكيبورد على Ctrl + F وابحث عن هذا الوسم " ]]></b:skin> " ثم قم بنسخ ولصق الكود الاسفل اعلاه تماماً، واضغط على حفظ .
.btn-1{background-color:#f27935}.btn-1 .round{background-color:#f59965}.btn-2{background-color:#00afd1}.btn-2 .round{background-color:#00c4eb}.btn-3{background-color:#5a5b5e}.btn-3 .round{background-color:#737478}a{text-decoration:none;-moz-border-radius:30px;-webkit-border-radius:30px;border-radius:30px;padding:12px 53px 12px 23px;color:#fff;text-transform:uppercase;font-family:sans-serif;font-weight:bold;position:relative;-moz-transition:all .3s;-o-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;display:inline-block}a span{position:relative;z-index:3}a .round{-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;width:38px;height:38px;position:absolute;right:3px;top:3px;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;z-index:2}a .round i{position:absolute;top:50%;margin-top:-6px;left:50%;margin-left:-4px;-moz-transition:all .3s;-o-transition:all .3s;-webkit-transition:all .3s;transition:all .3s}.txt{font-size:14px;line-height:1.45}.type-1 a:hover{padding-left:48px;padding-right:28px}.type-1 a:hover .round{width:calc(100% - 6px);-moz-border-radius:30px;-webkit-border-radius:30px;border-radius:30px}.type-1 a:hover .round i{left:12%}.type-2 a:hover .round{background:0}.type-2 a:hover .round i{left:70%}.type-3 .round{background:transparent}.type-3 a{position:relative;overflow:hidden}.type-3 a.btn-1:after{background-color:#f59965}.type-3 a.btn-2:after{background-color:#00c4eb}.type-3 a.btn-3:after{background-color:#737478}.type-3 a:after{content:"";-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;width:37px;height:38px;position:absolute;right:3px;top:3px;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.type-3 a:hover:after{right:100%;width:50%}.type-3 a:hover i{margin-left:4px}
ابحث عن وسم </head> فوقه قم بوضع هذا الكود التالي.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
ملاحظة: قم بتغيير الروابط الموجود باللون الازرق الى الروابط الخاص بك.
<div class="type-1">
<div>
<a href="https://wiisam21.blogspot.com/" class="btn btn-1">
<span class="txt">Hover me</span>
<span class="round"><i class="fa fa-chevron-right"></i></span>
</a>
</div>
<div>
<a href="https://wiisam21.blogspot.com/" class="btn btn-2">
<span class="txt">Hover me</span>
<span class="round"><i class="fa fa-chevron-right"></i></span>
</a>
</div>
<div>
<a href="https://wiisam21.blogspot.com/" class="btn btn-3">
<span class="txt">Hover me</span>
<span class="round"><i class="fa fa-chevron-right"></i></span>
</a>
</div>
</div>
<div class="type-2">
<div>
<a href="https://wiisam21.blogspot.com/" class="btn btn-1">
<span class="txt">Hover me</span>
<span class="round"><i class="fa fa-chevron-right"></i></span>
</a>
</div>
<div>
<a href="https://wiisam21.blogspot.com/" class="btn btn-2">
<span class="txt">Hover me</span>
<span class="round"><i class="fa fa-chevron-right"></i></span>
</a>
</div>
<div>
<a href="https://wiisam21.blogspot.com/" class="btn btn-3">
<span class="txt">Hover me</span>
<span class="round"><i class="fa fa-chevron-right"></i></span>
</a>
</div>
</div>
<div class="type-3">
<div>
<a href="https://wiisam21.blogspot.com/" class="btn btn-1">
<span class="txt">Hover me</span>
<span class="round"><i class="fa fa-chevron-right"></i></span>
</a>
</div>
<div>
<a href="https://wiisam21.blogspot.com/" class="btn btn-2">
<span class="txt">Hover me</span>
<span class="round"><i class="fa fa-chevron-right"></i></span>
</a>
</div>
<div>
<a href="https://wiisam21.blogspot.com/" class="btn btn-3">
<span class="txt">Hover me</span>
<span class="round"><i class="fa fa-chevron-right"></i></span>
</a>
</div>
</div>
الكود الرابع
توجه الى ادارة المدونة اختار المظهر تعديل HTML .
اضغط من الكيبورد على Ctrl + F وابحث عن هذا الوسم " ]]></b:skin> " ثم قم بنسخ ولصق الكود الاسفل اعلاه تماماً، واضغط على حفظ .
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400');.button{display:inline-flex;height:40px;width:150px;border:2px solid #bfc0c0;margin:20px 20px 20px 20px;color:#bfc0c0;text-transform:uppercase;text-decoration:none;font-size:.8em;letter-spacing:1.5px;align-items:center;justify-content:center;overflow:hidden}a{color:#bfc0c0;text-decoration:none;letter-spacing:1px}#arrow-hover{width:15px;height:10px;position:absolute;transform:translateX(60px);opacity:0;-webkit-transition:all .25s cubic-bezier(.14,.59,1,1.01);transition:all .15s cubic-bezier(.14,.59,1,1.01);margin:0;padding:0 5px}a#button-1:hover img{width:15px;opacity:1;transform:translateX(50px)}#button-2{position:relative;overflow:hidden;cursor:pointer}#button-2 a{position:relative;transition:all .35s ease-Out}#slide{width:100%;height:100%;left:-200px;background:#bfc0c0;position:absolute;transition:all .35s ease-Out;bottom:0}#button-2:hover #slide{left:0}#button-2:hover a{color:#2d3142}#button-3{position:relative;overflow:hidden;cursor:pointer}#button-3 a{position:relative;transition:all .45s ease-Out}#circle{width:0;height:0;opacity:0;line-height:40px;border-radius:50%;background:#bfc0c0;position:absolute;transition:all .5s ease-Out;top:20px;left:70px}#button-3:hover #circle{width:200%;height:500%;opacity:1;top:-70px;left:-70px}#button-3:hover a{color:#2d3142}#button-4{position:relative;overflow:hidden;cursor:pointer}#button-4 a{position:relative;transition:all .45s ease-Out}#underline{width:100%;height:2.5px;margin-top:15px;align-self:flex-end;left:-200px;background:#bfc0c0;position:absolute;transition:all .3s ease-Out;bottom:0}#button-4:hover #underline{left:0}#button-5{position:relative;overflow:hidden;cursor:pointer}#button-5 a{position:relative;transition:all .45s ease-Out}#translate{transform:rotate(50deg);width:100%;height:250%;left:-200px;top:-30px;background:#bfc0c0;position:absolute;transition:all .3s ease-Out}#button-5:hover #translate{left:0}#button-5:hover a{color:#2d3142}#button-6{position:relative;overflow:hidden;cursor:pointer}#button-6 a{position:relative;transition:all .45s ease-Out}#spin{width:0;height:0;opacity:0;left:70px;top:20px;transform:rotate(0deg);background:0;position:absolute;transition:all .5s ease-Out}#button-6:hover #spin{width:200%;height:500%;opacity:1;left:-70px;top:-70px;background:#bfc0c0;transform:rotate(80deg)}#button-6:hover a{color:#2d3142}#button-7{position:relative;overflow:hidden;cursor:pointer}#button-7 a{position:relative;left:0;transition:all .35s ease-Out}#dub-arrow{width:100%;height:100%;background:#bfc0c0;left:-200px;position:absolute;padding:0;display:flex;align-items:center;justify-content:center;transition:all .35s ease-Out;bottom:0}#button-7 img{width:20px;height:auto}#button-7:hover #dub-arrow{left:0}#button-7:hover a{left:150px}
ملاحظة: قم بتغيير الروابط الموجود باللون الازرق الى الروابط الخاص بك.
<a id="button-1" class="button" href="https://wiisam21.blogspot.com/">تحميل<img id="arrow-hover" src="https://github.com/atloomer/atloomer.github.io/blob/master/img/iconmonstr-paper-plane-1-120.png?raw=true"/></a>
<div class="button" id="button-2">
<div id="slide"></div>
<a href="https://wiisam21.blogspot.com/">تحميل</a>
</div>
<div class="button" id="button-3">
<div id="circle"></div>
<a href="https://wiisam21.blogspot.com/">تحميل</a>
</div>
<div class="button" id="button-4">
<div id="underline"></div>
<a href="https://wiisam21.blogspot.com/">تحميل</a>
</div>
<div class="button" id="button-5">
<div id="translate"></div>
<a href="https://wiisam21.blogspot.com/">تحميل</a>
</div>
<div class="button" id="button-6">
<div id="spin"></div>
<a href="https://wiisam21.blogspot.com/">تحميل</a>
</div>
<div class="button" id="button-7">
<div id="dub-arrow"><img src="https://github.com/atloomer/atloomer.github.io/blob/master/img/iconmonstr-arrow-48-240.png?raw=true" alt="" /></div>
<a href="https://wiisam21.blogspot.com/">تحميل</a>
</div>
wesam developer
إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا
COMMENTS