wesamdev

افلام هندية$type=sticky$count=4$show=home

$show=home

|روبوتات_$type=slider$source=random-posts$snippet=hide$cate=20$show=home

|اضافات بلوجر$type=three$m=0$rm=0$h=400$c=3$show=home

$show=home

wesamdev

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

اضافة كود زر المعاينة زر التحميل داخل مواضيع بلوجر بشكل جميل واحترافي، ويحتوي الكود على ازرار اثنين زر التحميل وزر المعاينة،وهذه الكود قد يعطي الروابط

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

الكود الاول



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

اضافة كود زر المعاينة زر التحميل داخل مواضيع بلوجر بشكل جميل واحترافي، ويحتوي الكود على ازرار اثنين زر التحميل وزر المعاينة،وهذه الكود قد يعطي الروابط اكثر تنسيق وجمالية داخل مواضيع بلوجر ومقالات المدونة وبشكل احترافي.

طريقة اضافة زر التحميل وزر المعاينة داخل مواضع بلوجر .

 توجه الى ادارة المدونة اختار المظهر تعديل HTML .

 اضغط من الكيبورد على Ctrl + F وابحث عن هذا الوسم " ]]></b:skin> " ثم قم بنسخ ولصق الكود الاسفل اعلاه تماماً، واضغط على حفظ .

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


#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}

طريقة اضافة الكود الثاني اذهب لتحرير الموضوع اختارHTML .

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


انسخ الكود الاسفل ولصقه في الاخير،
ملاحظة: قم بتغيير الروابط الموجود باللون الازرق الى الروابط الخاص بك.
<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>

 اخيراً قم بالرجوع الى تأليف ومعاينة الموضوع. وستشاهد قد تمت اضافة زر تحميل وزر معاينة.

الكود الثاني


بنفس الطريقة
 توجه الى ادارة المدونة اختار المظهر تعديل HTML .

 اضغط من الكيبورد على 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}

طريقة اضافة الكود الثاني اذهب لتحرير الموضوع اختارHTML .


انسخ الكود الاسفل ولصقه في الاخير،
ملاحظة: قم بتغيير الروابط الموجود باللون الازرق الى الروابط الخاص بك.
<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"/>

طريقة اضافة الكود الثاني اذهب لتحرير الموضوع اختارHTML .

انسخ الكود الاسفل ولصقه في الاخير،
ملاحظة: قم بتغيير الروابط الموجود باللون الازرق الى الروابط الخاص بك.

<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}

طريقة اضافة الكود الثاني اذهب لتحرير الموضوع اختارHTML .

انسخ الكود الاسفل ولصقه في الاخير،
ملاحظة: قم بتغيير الروابط الموجود باللون الازرق الى الروابط الخاص بك.
<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

BLOGGER
الاسم

اخبار,45,اداة للكمبيوتر,7,اضافات بلوجر,88,افلام اجنبي,9,افلام روسية,32,افلام عربي مترجمة الي الروسية,1,افلام قديمة,2,افلام هندي,8,البرمجة,8,الجديد في التكنولوجيا,46,العاب,9,النمر,7,اليوتيوب,16,اندرويد,15,اندرويد استوديو,3,برامج كمبيوتر,11,بلوجر,8,تركيا,6,تصميم,3,تطبيقات,20,جافاسكريبت,3,حوادث,5,حول العالم,65,حيوانات,25,خلفيات,1,دروس HTML| بالعربية,2,روبوتات,8,روسيا,60,سياحة,4,سيارات,12,سياسة,17,شروحات,34,شريط الاخبار,1,صحتي,2,طائرات,22,فن,35,قناة الوعي نور,4,قناة قعدة تاريخ,8,قوالب بلوجر,3,كتب الكترونية,7,مالتي ميديا,6,متصفح,2,محليات,4,مسلسل لعبة الحبار,1,مسلسلات اجنبية,2,مسلسلات رمضان 2022,1,مسلسلات رمضان 2120,1,مصر والعرب,2,معدات حربية,34,معدات زراعية,6,مقالات,101,مواصلات النقل,1,مواقع للتصميم,14,وثائقي,14,وسوم بلوجر,2,ويندوز,15,Antivirus,3,Button,1,c++,1,css,37,HTML,11,wesam,2,
rtl
item
Wesam: اجمل 4 اضافت كود زر المعاينة وزر التحميل بشكل احترافي لمواضيع بلوجر
اجمل 4 اضافت كود زر المعاينة وزر التحميل بشكل احترافي لمواضيع بلوجر
اضافة كود زر المعاينة زر التحميل داخل مواضيع بلوجر بشكل جميل واحترافي، ويحتوي الكود على ازرار اثنين زر التحميل وزر المعاينة،وهذه الكود قد يعطي الروابط
https://1.bp.blogspot.com/-wqriAPQTd0U/YO8Jg_4qVaI/AAAAAAAAV8w/NGIq9OWgiywRrW1BN9oDzpRraJtH58FZwCLcBGAsYHQ/s16000/Black%2Band%2BRed%2BPhotocentric%2BCivil%2BSociety%2BGroup%2BProgress%2BReport%2BSustainable%2BDevelopment%2BGoals%2BPresentation.png
https://1.bp.blogspot.com/-wqriAPQTd0U/YO8Jg_4qVaI/AAAAAAAAV8w/NGIq9OWgiywRrW1BN9oDzpRraJtH58FZwCLcBGAsYHQ/s72-c/Black%2Band%2BRed%2BPhotocentric%2BCivil%2BSociety%2BGroup%2BProgress%2BReport%2BSustainable%2BDevelopment%2BGoals%2BPresentation.png
Wesam
https://www.wesamdev.com/2021/07/Preview-button-and-Download-button.html
https://www.wesamdev.com/
https://www.wesamdev.com/
https://www.wesamdev.com/2021/07/Preview-button-and-Download-button.html
true
1297279864306511161
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content