جعبه دانلود سبک فلت (اختصاصی)

[kingpower]

باسلام خدمت دانش پزوهای وردپرس. امروز جعبه دانلود بسیار زیبا و حرفه ای طرح فلت را براتون اماده کردم که در ان لینک اصلی ، لینک کمکی ،حجم و پسورد فایلهاتون رو میتوانید به نمایش در بیاورید.
ابتدا کدهای زیر را به انتهای فایل استایلتون اضافه نمائید.

#Download-box {
    border-top:0;
    border-left:1px solid #cecece;
    border-right:1px solid #cecece;
    border-bottom:5px solid #cecece;
    width:690px;
    background:#FFF;
    margin-bottom:10px;
    float:left;
    margin-top:20px
}
.Download-box-title {
    background:#000;
    width:690px; 
    height:40px;
}
.Download-box-title-logo {
    background:red;
    width:40px; 
    height:40px;
    margin-right:10px;
    float:right;
}
.Download-box-title-logo img{
    width:35px; 
    height:35x;
    margin:5px;float:right
}
.Download-box-title h3{color:#FFF;font-size:18px;float:right;margin-right:10px;width:auto;margin-top:5px;}
.download{
       width:97%; 
    height:40px;
    background:#8fc835;
    margin:0 auto;
    list-style:none;
    margin-top:15px;
    margin-bottom:10px;
    transition:600ms;
    font-family: 'BYekan';
}
.download:hover{background:#c3e58e;    border-left:4px solid #8fc835;transition:600ms;}
.download a{ font-family: 'BYekan';margin-top:5px;float:right;margin-right:5px;}
.download img {width:40px;height:40px;float:right}
.password{
       width:97%; 
    height:40px;
    font-family: 'BYekan';
    background:#f1852d;
    margin:0 auto;
    list-style:none;
    margin-top:15px;
    margin-bottom:10px;
    padding-top:5px;
    padding-right:5px;
    transition:600ms;
}
.password:hover{background:#fba763;    border-left:4px solid #f1852d;transition:600ms;}
.password a{margin-top:5px;float:right;margin-right:5px; font-family: 'BYekan';}
.password img {width:40px;height:40px;float:right}
.hajm{
       width:97%; 
    height:40px;
    background:#0aa6ff;
    margin:0 auto;
    font-family: 'BYekan';
    list-style:none;
    margin-top:15px;
    margin-bottom:10px;
    padding-top:5px;
    padding-right:5px;
    transition:600ms;
}
.hajm img {width:40px;height:40px;float:right}
.hajm:hover{background:#69c0f2;    border-left:4px solid #0aa6ff;transition:600ms;}

سپس کد های زیرا در فایل single.php در مکان دلخواه و در حلقه وردپرس قرار دهید

<div id="Download-box">
<div class="Download-box-title">
<div class="Download-box-title-logo"><img src="<?php bloginfo('template_directory'); ?>/image/dl.png"/></div><h3>اطلاعات دانلود</h3>
</div>
<?php $mid_var = get_post_meta($post->ID, 'download',true);
if(isset($mid_var) && !empty($mid_var)) : ?>
 <li class="download"><img src="<?php bloginfo('template_directory'); ?>/image/link.png" /><a href="<?php echo get_post_meta($post->ID, 'download',true); ?>">دانلود با لينک مستقيم</a></li> <?php endif; ?>
 
 <?php $mid_var = get_post_meta($post->ID, 'download2',true);
if(isset($mid_var) && !empty($mid_var)) : ?>
 <li class="download"><img src="<?php bloginfo('template_directory'); ?>/image/link.png" /><a href="<?php echo get_post_meta($post->ID, 'download2',true); ?>">دانلود - لينک کمکي</a></li> <?php endif; ?>

 <?php $mid_var = get_post_meta($post->ID, 'hajm',true);
if(isset($mid_var) && !empty($mid_var)) : ?>
 <li class="hajm"><img src="<?php bloginfo('template_directory'); ?>/image/hajm.png" />حجم : <?php echo get_post_meta($post->ID, 'hajm',true); ?></li> <?php endif; ?>

 
 <?php $mid_var = get_post_meta($post->ID, 'password',true);
if(isset($mid_var) && !empty($mid_var)) : ?>
 <li class="password"><img src="<?php bloginfo('template_directory'); ?>/image/pass.png" />رمز فايل : <?php echo get_post_meta($post->ID, 'password',true); ?></li> <?php endif; ?>

</div>

در نهایت عکس های رو ه براتون در انتها دبرای دانلود گذاشتم رو در فایل image کپی نمائید
خب میتونید از جعبه دانلتتون به شرح زیر استفاده کنید .که باید در صفحه ارسال پست زمینه دلخواه رو فعال کنید و مانند تصویر زیر آن را پر نمائید

امیدوارم خوشتتان امده باشد:دی

موفق باشید

منبع: مايكروسايت
صفحه مطلب: كليك كنيد