وبلاگ سجاد SECAD.ir

۵ مطلب با موضوع «نمونه کار ها :: بسته آموزشی» ثبت شده است

فیلم آموزش ساخت پایگاه داده در اندروید

بسم الله الرحمن الرحیم

340

در این مطلب با آموزش ساخت یک پایگاه داده کاربردی  رو با استفاده از اپ اندرویدی memento datebase در خدمت هستم.

با دانلود این اپ از همین سایت و مشاهده آنلاین کلیپ 45 دقیقه و تمرین و کار با این اپ شما توانایی ساخت هرگونه پایگاه داده ای را خواهید داشت.

دریافت اپ
حجم: 15.4 مگابایت

۱۳۹۵/ارديبهشت/۱۷ ۲ نظر موافقین ۱ مخالفین ۰
دوشنبه ۱۲ مرداد
ساخت آنلاین نقشه تصویری

ساخت آنلاین نقشه تصویری

بسم الله الرحمن الرحیم

279

http://webpresencepartners.com

برای ساخ image map در مطلب مشابه قبلی درباره نحوه کد نویسی این تکنیک توضیحاتی داده شد . اما در این مطلب قصد دارم با معرفی سایت بسیار جالب کار ساخت یک نقشه تصویری خیلی راحت میشه. در این روش به صورت آنلاین و کاملا بدون کد فقط با چند کلیک ، میشه یه نقشه تصویری ساخت.

نقشه تصویری یا image map چیست ؟ یک تکنیک که با کمک CSS میتوان به قسمتی از یک عکس لینک داد . بیشتر برای سایت های پر حجم مورد استافده قرار میگیرد.

مرحله اول عکس مورد نظر رو با فتوشاپ یا نرم افزار های دیگه بسازید.

مرحله دوم : به آدرس لینک برید

                                            ( http://webpresencepartners.com/tools/css-image-map-generator )

مرحله سوم : عکس خودتون رو از تب آپلود عکس آپلود کنید . سایت خودش عکس شما را بعد از چند ثانیه با ابعاد کامل به تب بعدی می بره و فقط صبر کنید.

مرحله چهارم : در تب ویژوال ادیتور با دکمه ی Add link یک کادر درست میشه اون رو به محل لینک مورد نظر خود بکشید و اندازه رو تغییر بدید .

مرحله پنجم : گوشه کادر نقطه چین قرمز رنگ دو تا دکمه ی آیکون Edit , Delete هستند که میشه مقصد و عنوان لینک رو تنظیم یا درغیر این صورت لینک رو پاک                     کرد .

مرحله ششم : در تب Preview نتیجه کار خودتون رو ببینید.

مرحله هفتم : در تب Generated Code میتوانید کد CSS و HTML نهایی خودتون رو کپی بگیرید . (پایان ساخت)

                   در جایی از سایت یا وبلاگ خودتون که میخواهید این نقشه حضور داشته باشه اونجا پیست کنید

مرحله هشتم : (مهم) در اولین خط کد HTML در قسمت دارکتوری عکس یعنی اینجا

<div class="map_image" style="background-image: url('*************************');">

باید عکس خودتون رو در یک سایت مخصوص آپلود عکس آپلود کنید تا همیشه دردسترس باشه و لینک عکس رو با پسوند مخصوص عکس در جای ستاره ها کپی کنید .

۱۳۹۴/مرداد/۱۲ ۰ نظر موافقین ۰ مخالفین ۰

ترفند :: ابزار سرچ وبلاگ Google Custom Search

بسم الله الرحمن الرحیم.

ابزار سرچ گوگل custom seach

ابزار سرچ یا جستوجو برای وبلاگ ها بسیار حیاتی و مهم است . ابزار قدیمی گوگل که در بسیاری از سایت ها قرار گرفته کارایی خود را تا حدود بسیار زیادی از دست داده و حتی در مواردی به هیچ وجه کار نمی کند .

برای استفاده از سرچ جدید گوگل در صفحه مخصوص Google Custom Search آن پنل سرچ خود را سفارشی ترتیب دهید به اینگونه که

آدرس یا آدرس های مورد نظر خود را وارد کرده و زبان انتخابی را به All languege تغییر و برای جعبه سرچ خود یک نام انتخاب میکیند(برای تغییر آپشن ها در زمان های بعدی) و دکمه create را فشرده و کد آماده شده خود را به درون سایت یا وبلگ در جای دلخواه کپی کنید و دیگر ابزار آماده استفاده می باشد.

مزیت این کد آن جاست که بعد از سرچ درون خود صفحه شما لیست سرچ نمایش داده می شود.

۱۳۹۴/فروردين/۲۵ ۰ نظر موافقین ۰ مخالفین ۰

ترفند ساخت منوی تصویری - لینک دادن به قسمت های عکس

بسم الله ارحمن الرحیم

مطلب 167


روزنامه دیواری :: ترفندها

ساخت نقشه تصویری image map با استفاده از CSS

+ فیلم آموزشی

تا به حال شده که توی صفحات وب ببینید که سایت در تکه هایی از یک تصویر لینک داده؟!

نقشه تصویری راهکار جالبی است که می توان با استفاده از آن به قسمت های یک عکس لینک داد و حتی جلوه های بصری روی لینک های داخل عکس ایجاد نمود.

اموزش image map

این آموزش از کتاب مرجع html , css الگو گرفته است . لینک صفحه ی کتاب در انتهای این مطلب موجود است.

ادامه مطلب...
۱۳۹۳/مهر/۰۲ ۲ نظر موافقین ۰ مخالفین ۰

ترفند :: دکمه دانلود حرفه ای css

بسم الله الرحمن الرحیم

مطلب 162 | روزنامه دیواری :: ترفندها

کد دکمه ی دانلود حرفه ای

استفاده از CSS

download

.

.

کد زیر به CSS هست ، اون رو به فایل خارجی CSS سایت خودتون اضافه یا در متن html وارد کنید.


a.download {
    padding: 12px 20px 12px 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07rem;
    color: #c0c0c0 !important;
    position: absolute;
    
    
    overflow: hidden;
    width: auto;
    background-color: white;
    
    -moz-box-shadow: inset 0 0 0 4px #dedede;
    -webkit-box-shadow: inset 0 0 0 4px #dedede;
    box-shadow: inset 0 0 0 4px #dedede;

    background-image:
url(http://cld.persiangig.com/preview/LtUKbncIcf/501188402113973845.png);
    background-repeat: no-repeat;
    background-position: 112px -34px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;



}
a.download:link {
    text-decoration: none;
}

a.download:hover,
a.download:focus {
    color: #FFF !important;
    padding: 12px 50px 12px 20px;
    background-color: #53bf6b;
    background-position: 112px 18px;
    text-decoration: none !important;
    -moz-box-shadow: inset 0 0 0 0 #CCC;
-webkit-box-shadow: inset 0 0 0 0 #CCC;
box-shadow: inset 0 0 0 0 #CCC;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

a.download:active {

}

در کد بالا دکمه طراحی شده ؛ برای استفاده در مطلب وبلاگ یا سایت فقط نیاز به فراخوانی داره :

<p><a class="download" herf="secad.ir" >download</a></p>

فایل ضمیمه ی کد css برای لینک به سند : http://cld.persiangig.com/preview/lImAyMUhAM/download-b.css

* مورد توجه دوستان تازه کار :)

برای لینک دادن به فایل cssسه راه وجود داره:

         1- می توانید از سرویس بیان که به طور پیش فرض قابلیت کنترل کدهای css رو داره استفاده کنید.

         2- استفاده از سایت پرشین گیگ (آموزش استفاده از پرشین گیگ :  http://www.aparat.com/v/23BVO )

         3- وارد کردن کد css در داخل html به طور مستقیم :

<style type="text/css">
/* your CSS codes */
</style>

منبع : secad.ir

۱۳۹۳/شهریور/۲۴ ۰ نظر موافقین ۰ مخالفین ۰

secad.ir