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

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

وهذا شكل زر المعاينة (ملاحظة لرؤية ميزة هذا الزر ضع المؤشر علي) :


الخطوات :

أولا : يا صديقي إبحث عن كلمة <b:skin><![CDATA[
ثم أضف هذه الأكواد أسفله مباشرة (ملاحظة قم بتغير نوع خط الإضافة بالخط المتوفر عندك)

/*=====================================
= Auters
=====================================*/
#cover-post{position:relative}.parallax-image{overflow:hidden;height:80vh}.parallax-image img{width:100%;height:100%;-webkit-filter:blur(4px);-moz-filter:blur(4px);-o-filter:blur(4px);-ms-filter:blur(4px);filter:blur(4px)}.parallax-image .overlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5SaB2qNv79UyCavTkFCY0UdTYqPV2-7g2qurXAaanfNvPA4vfV2e2TrZX-v0dZo2iUSICfehUC0oPymgOAfHpQhdB5cHPd5Z0paRrw1NsLXHRkLC1Wk6_Av7zNPuagOHrfwlgqHQT3lo/s1600/pattern-1.png) #243748;position:absolute;top:0;left:0;width:100%;height:100%;opacity:.5}.parallax-contents{position:absolute;top:45%;text-align:center;width:100%}.parallax-contents-inner{max-width:900px;margin:auto}.parallax-contents .post-title a, .parallax-contents .post-title{color:#FFF;font-size:20px;font-weight:200;position:relative}.parallax-contents .post-meta{position:relative;font-size:12px}.parallax-contents .post-meta a,.parallax-contents .post-meta .fa,.parallax-contents span{color:#ccc}.parallax-contents .post-meta .fa{margin-left:5px}.parallax-contents .post-timestamp{margin-right:10px}.share_button{position:relative;z-index:2;width:100%;padding:20px 0;display:inline-block;margin:20px auto;text-align:center}.share_button h1{font-size:25px;font-weight:100;font-family:droidkufi-regular;padding-bottom:3%}.share_button >a{margin:0 1%}.hided{text-align:center;display:none;margin:20px auto}.item .hided{display:block}.authorBox{border-top:1px solid #E7E7E7;padding-top:30px;border-bottom:1px solid #E7E7E7;padding-bottom:30px;margin-bottom:30px;overflow:hidden}.authorBox .author-img{margin-left:20px;width:130px;height:130px;border-radius:50%;float:right;overflow:hidden;border-left: 3px solid #243748;border-right: 3px solid #243748;border-bottom: 3px solid #0099cc;border-top: 3px solid #3fb64d;}.authorBox .author-info{color:#555;padding:15px 25px}.authorBox .author-info h4{margin-bottom:10px;font-size:20px;color:#333}.authorBox .author-bio{font-size:12px;line-height:21px}.authorBox .author-soc{float:left;margin-top:10px}.authorBox .author-soc a{margin-right:10px;font-size:13px;color:#111}.socialcounter li{margin-bottom:10px;width:50%;padding:0 5px;float:right}.socialcounter ul li a{display:block;height:50px;line-height:50px;background-color:#F6F6F6;margin-right:20px;color:#FFF;position:relative;-webkit-transition:all ease-in-out .3s;-moz-transition:all ease-in-out .3s;-ms-transition:all ease-in-out .3s;-o-transition:all ease-in-out .3s;transition:all ease-in-out .3s}.socialcounter ul li a .fa{border-radius:2px;font-size:14px;line-height:40px;position:relative;width:40px;text-align:center;left:20px}.socialcounter li a.social_facebook .fa,.socialcounter li a.social_facebook:hover{background-color:#3b5998}.socialcounter li a.social_github .fa,.socialcounter li a.social_github:hover{background-color:#333}.socialcounter li a.social_instagram .fa,.socialcounter li a.social_instagram:hover{background-color:#3f729b}.socialcounter li a.social_linkedin .fa,.socialcounter li a.social_linkedin:hover{background-color:#0077b5}.socialcounter li a.social_soundcloud .fa,.socialcounter li a.social_soundcloud:hover{background-color:#f50}.socialcounter li a.social_vine .fa,.socialcounter li a.social_vine:hover{background-color:#00b488}.socialcounter li a.social_wordpress .fa,.socialcounter li a.social_wordpress:hover{background-color:#21759b}.socialcounter li a.social_yelp .fa,.socialcounter li a.social_yelp:hover{background-color:#af0606}.socialcounter li a.social_codepen .fa,.socialcounter li a.social_codepen:hover{background-color:#000}.socialcounter li a.social_flickr .fa,.socialcounter li a.social_flickr:hover{background-color:#ff0084}.socialcounter li a.social_google-plus .fa,.socialcounter li a.social_google-plus:hover{background-color:#dc4e41}.socialcounter li a.social_lastfm .fa,.socialcounter li a.social_lastfm:hover{background-color:#d51007}.socialcounter li a.social_reddit .fa,.socialcounter li a.social_reddit:hover{background-color:#ff4500}.socialcounter li a.social_skype .fa,.socialcounter li a.social_skype:hover{background-color:#00aff0}.socialcounter li a.social_spotify .fa,.socialcounter li a.social_spotify:hover{background-color:#2ebd59}.socialcounter li a.social_whatsapp .fa,.socialcounter li a.social_whatsapp:hover{background-color:#43d854}.socialcounter li a.social_youtube .fa,.socialcounter li a.social_youtube:hover{background-color:#cd201f}.socialcounter li a.social_yahoo .fa,.socialcounter li a.social_yahoo:hover{background-color:#410093}.socialcounter li a.social_xing .fa,.socialcounter li a.social_xing:hover{background-color:#026466}.socialcounter li a.social_vk .fa,.socialcounter li a.social_vk:hover{background-color:#45668e}.socialcounter li a.social_vimeo .fa,.socialcounter li a.social_vimeo:hover{background-color:#1ab7ea}.socialcounter li a.social_twitter .fa,.socialcounter li a.social_twitter:hover{background-color:#55acee}.socialcounter li a.social_pinterest .fa,.socialcounter li a.social_pinterest:hover{background-color:#bd081c}.socialcounter li a.social_dribbble .fa,.socialcounter li a.social_dribbble:hover{background-color:#ea4c89}.socialcounter li a.social_behance .fa,.socialcounter li a.social_behance:hover{background-color:#1769ff}.socialcounter li a.social_amazon .fa.socialcounter li a.social_amazon:hover{background-color:#f90}.socialcounter li a.social_tumblr .fa,.socialcounter li a.social_tumblr:hover{background-color:#35465c}.socialcounter li a.social_tripadvisor .fa,.socialcounter li a.social_tripadvisor:hover{background-color:#589442}.socialcounter li a.social_stumbleupon .fa,.socialcounter li a.social_stumbleupon:hover{background-color:#eb4924}.socialcounter li a.social_slack .fa,.socialcounter li a.social_slack:hover{background-color:#6ecadc}.socialcounter li a.social_rss .fa,.socialcounter li a.social_rss:hover{background-color:#f60}.socialcounter li a:hover .social_num{color:#f6f6f6}.social-counter li a .social_num{float:left;margin-left:10%;font-size:14px;color:#555}.related-posts{line-height:28px;margin-bottom:30px;background:#fefefe;padding:2%;border-radius:4px;border-bottom:3px solid rgba(214,223,222,.25);-webkit-box-shadow:0 2px 3px 0 rgba(0,0,0,0.08);-moz-box-shadow:0 2px 3px 0 rgba(0,0,0,0.08);box-shadow:0 2px 3px 0 rgba(0,0,0,0.08)}.related-posts h1{color:#2D4059;font-family:DroidKufi-regular;font-size:18px;text-align:center;padding-bottom:15px;border-bottom:1px solid #f6f6f6;margin-bottom:30px;font-weight:700;margin-top:0}.related-posts .owl-controls{text-align:center}.related-posts .owl-prev,.related-posts .owl-next{width:40px;height:40px;font-size:25px;line-height:40px;color:#fff;margin:0 5px;background-color:#2d4059;display:inline-block;border-radius:4px}.related-posts li{padding:5%}.related-posts .overlay{font-size:15px;color:#555;padding-top:10px;font-family:'DroidKufi-regular';line-height:2;text-align:center}.relaimg{height:150px;overflow:hidden}.relaimg img{height:100%;border-radius:5px}blockquote{background:#f6f6f6;padding:30px;border-radius:5px;box-shadow:inset 0 2px 0 #243748 -5px -4px 25px rgba(0,0,0,0.3);width:60%;margin:0 auto;font-family:flat-jooza;font-size:16px;color:#212121;font-weight:400;line-height:40px;font-style:normal;text-indent:100px;position:relative}blockquote:before,blockquote:after{top:100%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}blockquote:before{border-top-color:#cacaca;border-width:11px;left:65%;margin-left:-11px}blockquote:after{border-top-color:#f6f6f6;border-width:10px;left:65%;margin-left:-10px}blockquote span:before{content:'\201C';font-family:serif;font-style:normal;font-weight:700;position:absolute;font-size:190px;top:30px;right:-80px;color:#243748;text-shadow:7px 14px 10px rgba(0,0,0,0.1)}.prob h2{border:1px solid #fe4d4d;background-color:#ffdada;color:#fe4d4d;padding:20px;font-size:16px}.bttn-unite.bttn-primary{border-color:#14a246}.bttn-unite{margin:0;border-width:0;font-weight:400;cursor:pointer;position:relative;font-size:18px;font-family:flat-jooza;padding:5px 12px;z-index:0;overflow:hidden;border:1px solid #14a246;border-radius:100px;background:#fff;color:#14a246;-webkit-transition:color .3s cubic-bezier(.02,.01,.47,1),border-color .3s cubic-bezier(.02,.01,.47,1);transition:color .3s cubic-bezier(.02,.01,.47,1),border-color .3s cubic-bezier(.02,.01,.47,1)}.bttn-unite:after,.bttn-unite:before{position:absolute;top:0;left:0;width:100%;height:120%;content:'';opacity:0;z-index:-1;-webkit-transition:opacity .15s cubic-bezier(.02,.01,.47,1),-webkit-transform .15s cubic-bezier(.02,.01,.47,1);transition:opacity .15s cubic-bezier(.02,.01,.47,1),-webkit-transform .15s cubic-bezier(.02,.01,.47,1);transition:transform .15s cubic-bezier(.02,.01,.47,1),opacity .15s cubic-bezier(.02,.01,.47,1);transition:transform .15s cubic-bezier(.02,.01,.47,1),opacity .15s cubic-bezier(.02,.01,.47,1),-webkit-transform .15s cubic-bezier(.02,.01,.47,1)}.bttn-unite:before{-webkit-transform:translate3d(-110%,-10%,0) skewX(-20deg);transform:translate3d(-110%,-10%,0) skewX(-20deg)}.bttn-unite.bttn-primary:before{background:#4CAF50}.bttn-unite.bttn-primary a{color:#1fcd5d}.bttn-unite.bttn-primary:after{background:#8BC34A}.bttn-unite:after{-webkit-transform:translate3d(110%,-10%,0) skewX(-20deg);transform:translate3d(110%,-10%,0) skewX(-20deg)}.bttn-unite.bttn-md:focus,.bttn-unite.bttn-md:hover{box-shadow:0 1px 8px rgba(58,51,53,.3);border:3px solid}.bttn-unite:hover a{color:#fff}.bttn-unite:focus:before,.bttn-unite:hover:before{-webkit-transform:translate3d(-50%,-10%,0) skewX(-20deg);transform:translate3d(-50%,0,0) skewX(-20deg)}.bttn-unite:focus:after,.bttn-unite:focus:before,.bttn-unite:hover:after,.bttn-unite:hover:before{opacity:1;-webkit-transition:opacity .25s cubic-bezier(.02,.01,.47,1),-webkit-transform .25s cubic-bezier(.02,.01,.47,1);transition:opacity .25s cubic-bezier(.02,.01,.47,1),-webkit-transform .25s cubic-bezier(.02,.01,.47,1);transition:transform .25s cubic-bezier(.02,.01,.47,1),opacity .25s cubic-bezier(.02,.01,.47,1);transition:transform .25s cubic-bezier(.02,.01,.47,1),opacity .25s cubic-bezier(.02,.01,.47,1),-webkit-transform .25s cubic-bezier(.02,.01,.47,1);opacity:1;-webkit-transition:opacity .25s cubic-bezier(.02,.01,.47,1),-webkit-transform .25s cubic-bezier(.02,.01,.47,1);transition:opacity .25s cubic-bezier(.02,.01,.47,1),-webkit-transform .25s cubic-bezier(.02,.01,.47,1);transition:transform .25s cubic-bezier(.02,.01,.47,1),opacity .25s cubic-bezier(.02,.01,.47,1);transition:transform .25s cubic-bezier(.02,.01,.47,1),opacity .25s cubic-bezier(.02,.01,.47,1),-webkit-transform .25s cubic-bezier(.02,.01,.47,1)}.bttn-unite:focus:after,.bttn-unite:hover:after{-webkit-transform:translate3d(50%,-10%,0) skewX(-20deg);transform:translate3d(50%,-10%,0) skewX(-20deg)}

ثانيا : لأظهار الإضافة قم بكتابة هذا الكود في داخل HTML التي تكون داخل المشاركة

<button class="bttn-unite bttn-md bttn-primary" style="text-align: center;"><a href="http://www.Techn7ical.com/">معاينة</a></button>

لا تنسى مشاركة التدوينة لتعم الفائدة إن شاء الله