إنشاء زر تنزيل جذاب على بلوجر دليل تفصيلي لتحسين تجربة المستخدم وزيادة بروز المحتوى في عالم المحتوى الرقمي، لا يعد إنشاء أزرار التنزيل مناسبًا للقراء فحسب، بل يعكس أيضًا احترافية الموقع. خاصة بالنسبة للمدونين الذين يستخدمون منصة بلوجر.
يمكن أن يؤدي إنشاء أزرار تنزيل جميلة إلى زيادة تجربة المستخدم بشكل كبير، وبالتالي تشجيع تنزيل المستندات أو الصور أو أي محتوى آخر. سترشدك هذه المقالة خطوة بخطوة حول كيفية إنشاء زر تنزيل جميل لمدونة بلوجر بدءًا من التصميم وحتى التكامل في مدونتك.
حاول مشاهدة العرض التوضيحي لزر التنزيل أدناه وقم بتقييم ما إذا كان قد أعجبك! حرك الماوس إلى زر التنزيل للتجربة.
كيفية إنشاء زر تنزيل جميل لمدونة بلوجر تعليمات مفصلة
.glow-on-hover svg{vertical-align: -6px; width: 21px; height: 21px;margin-right:6px}
.glow-on-hover{padding:10px 14px;border:none;outline:none;color:#fff;background:#111;cursor:pointer;position:relative;z-index:0;border-radius:6px!important}.glow-on-hover:before{content:'';background:linear-gradient(45deg,red,#ff7300,#fffb00,#48ff00,#00ffd5,#002bff,#7a00ff,#ff00c8,red);position:absolute;top:-2px;left:-2px;background-size:400%;z-index:-1;filter:blur(5px);width:calc(100% + 4px);height:calc(100% + 4px);animation:glowing 20s linear infinite;opacity:0;transition:opacity .3s ease-in-out;border-radius:10px}.glow-on-hover:active{color:#000}.glow-on-hover:active:after{background:0 0}.glow-on-hover:hover:before{opacity:1}.glow-on-hover:after{z-index:-1;content:'';position:absolute;width:100%;height:100%;background:#111;left:0;top:0;border-radius:10px}.home .glow-on-hover:after{background:#1e73be;border-radius:5px}@keyframes glowing{0%{background-position:0 0}50%{background-position:400% 0}100%{background-position:0 0}}@keyframes topBubbles{0%{background-position:5% 90%,10% 90%,10% 90%,15% 90%,25% 90%,25% 90%,40% 90%,55% 90%,70% 90%}50%{background-position:0 80%,0% 20%,10% 40%,20% 0%,30% 30%,22% 50%,50% 50%,65% 20%,90% 30%}100%{background-position:0 70%,0% 10%,10% 30%,20% -10%,30% 20%,22% 40%,50% 40%,65% 10%,90% 20%;background-size:0% 0%,0% 0%,0% 0%,0% 0%,0% 0%,0% 0%}}@keyframes bottomBubbles{0%{background-position:10% -10%,30% 10%,55% -10%,70% -10%,85% -10%,70% -10%,70% 0%}50%{background-position:0 80%,20% 80%,45% 60%,60% 100%,75% 70%,95% 60%,105% 0%}100%{background-position:0 90%,20% 90%,45% 70%,60% 110%,75% 80%,95% 70%,110% 10%;background-size:0% 0%,0% 0%,0% 0%,0% 0%,0% 0%,0% 0%}}
عند إنشاء منشور جديد، عليك المتابعة كالمعتاد. عندما تريد عرض زر التنزيل، ما عليك سوى لصق الكود التالي في الموضع المقابل في مقالتك وبذلك تكون قد انتهيت.
<div style="text-align: center;"><a href="LINK URL" rel="nofollow noopener"><button class="glow-on-hover" type="button"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /> </svg>Download Now</button></a></div>
لا يساعد ذلك في زيادة تجربة المستخدم فحسب، بل يُظهر أيضًا الاحترافية والإبداع للمدونة. جربه وشارك أفكارك! إذا كان لديك أي أسئلة، فلا تتردد في ترك تعليق، وسأكون سعيدًا بالإجابة عليها.
