تخفیف ویژه

آموزش استفاده از mjml برای ساخت ایمیلهای واکنشگرا (جلسه 10) - طراحی قالب خبرنامه - قسمت 2

دسته بندی: آموزش
زمان مطالعه: 12 دقیقه
۰۹ آبان ۱۳۹۵

mjml

در این جلسه با ادامه آموزش mjml در خدمت شما هستیم.

اگر خاطرتون باشه در جلسه قبل ساخت قالب خبرنامه رو شروع کردیم و سه ردیف از اون رو با هم دیگه ساختیم و یاد گرفتیم. در این قسمت قصد داریم ساخت این قالب رو به پایان برسونیم. همونطور که میدونید قسمت مربوط به Editor دو تا ردیف یا Section لازم داره. یکی برای عنوانش و دیگری برای تصویرش. برای قرار دادن عنوان بصورت زیر عمل میکنیم:

<mj-section padding-bottom="0" background-color="#f3f3f3">
  <mj-column>
    <mj-text align="center" font-size="20" color="rgb(165, 176, 184)">
      Explore our new features
    </mj-text>
  </mj-column>
</mj-section>

میبینید که یک Section قرار دادیم و رنگ پس زمینه اون رو هم مشخص کردیم. بعد از اون با استفاده از mj-text یک متن رو قرار دادیم و اون رو وسط چین یا center کردیم. درون ویژگی color میتونیم رنگ فونت رو قرار بدیم. برای قرار دادن رنگ میتونیم از hex color یا hsl یا rgb استفاده کنیم. خروجی در مرورگر تا اینجا بصورت زیر هست:newsletter template 4

حالا بریم سراغ ردیف بعد که درون اون یک تصویر ادیتور قرار میگیره. کدهای اون بصورت زیر هستن:

<mj-section padding-top="0" background-color="#f3f3f3">
  <mj-column width="100%">
    <mj-image src="https://cloud.githubusercontent.com/assets/6558790/12450760/ee034178-bf85-11e5-9dda-98d0c8f9f8d6.png" />
  </mj-column>
</mj-section>

میبینید که با استفاده از mj-image یک تصویر رو قرار دادیم. آدرس تصویر رو درون ویژگی src قرار دادیم. خروجی در مرورگر بصورت زیر خواهد بود:newsletter template 5

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

<mj-section background-color="#fcfcfc" padding-top="20px">
  <mj-column width="130">
    <mj-image src="https://mjml.io/assets/img/easy-and-quick.png" width="100" />
  </mj-column>
  <mj-column width="350">
    <mj-text align="left" font-size="20" color="grey">
      Right on time!
    </mj-text>
    <mj-text align="left" color="grey">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
    </mj-text>
  </mj-column>
</mj-section>

توضیح کدهای بالا شبیه به کدهای قبلی هست. خروجی بصورت زیر میشه:newsletter template 6

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

<mj-section background-color="#f3f3f3">
  <mj-column>
    <mj-text align="center">Stay in touch!</mj-text>
    <mj-social mode="vertical" display="twitter facebook" />
  </mj-column>
</mj-section>

میبینید که در ابتدا یک متن کوتاه قرار دادیم و بعد از اون با استفاده از mj-social برای دو شبکه اجتماعی twitter و facebook، آیکونهاشونو قرار دادیم. با استفاده از ویژگی mode هم نحوه قرار گیری اونا رو vertical یا عمودی در نظر گرفتیم. خروجی در مرورگر بصورت زیر خواهد بود:newsletter template

کل کدهای mjml سازنده این قالب بصورت زیر هستن:

<mjml>
  <mj-body>
    <mj-container>

			<!-- Header -->
			<mj-section padding-bottom="0" background-color="white">
				<mj-column width="100%">
					<mj-image src="https://avatars0.githubusercontent.com/u/16115896?v=3&s=200" width="50px"/>

					<mj-divider	padding-top="20" padding-bottom="0" padding-left="0" padding-right="0" border-width="1px" border-color="#f8f8f8"/>
				</mj-column>
			</mj-section>

	    <!-- Banner -->
			<mj-section padding-bottom="0" background-color="#fcfcfc">
			  <mj-column width="100%">
			    <mj-text align="center" font-size="20" color="grey" font-family="Helvetica Neue" font-weight="200">
			      Here is what you've missed
			    </mj-text>
			    <mj-divider horizontal-spacing="0" vertical-spacing="0" padding-top="20" padding-bottom="0" padding-left="0" padding-right="0" border-width="1px" border-color="#f8f8f8" />
			  </mj-column>
			</mj-section>

	    <!-- Article -->
	    <mj-section background-color="white">
	      <mj-column width="130">
	        <mj-image src="https://mjml.io/assets/img/responsive.png" width="100" />
	      </mj-column>
	      <mj-column width="350">
	        <mj-text align="left" font-size="20" color="grey">
	          Sed ut perspiciatis
	        </mj-text>
	        <mj-text align="left" color="grey">
	          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
	        </mj-text>
	      </mj-column>
	    </mj-section>

	    <!-- Editor Header -->
			<mj-section padding-bottom="0" background-color="#f3f3f3">
			  <mj-column>
			    <mj-text align="center" font-size="20" color="rgb(165, 176, 184)">
			      Explore our new features
			    </mj-text>
			  </mj-column>
			</mj-section>

	    <!-- Editor Image -->
			<mj-section padding-top="0" background-color="#f3f3f3">
			  <mj-column width="100%">
			    <mj-image src="https://cloud.githubusercontent.com/assets/6558790/12450760/ee034178-bf85-11e5-9dda-98d0c8f9f8d6.png" />
			  </mj-column>
			</mj-section>

	    <!-- Article -->
			<mj-section background-color="#fcfcfc" padding-top="20px">
			  <mj-column width="130">
			    <mj-image src="https://mjml.io/assets/img/easy-and-quick.png" width="100" />
			  </mj-column>
			  <mj-column width="350">
			    <mj-text align="left" font-size="20" color="grey">
			      Right on time!
			    </mj-text>
			    <mj-text align="left" color="grey">
			      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
			    </mj-text>
			  </mj-column>
			</mj-section>

	    <!-- Social -->
	    <mj-section background-color="#f3f3f3">
	      <mj-column>
	        <mj-text align="center">Stay in touch!</mj-text>
	        <mj-social mode="vertical" display="twitter facebook" />
	      </mj-column>
	    </mj-section>

    </mj-container>
  </mj-body>
</mjml>

خروجی HTML اون بصورت زیر خواهد شد:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
  <title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
  #outlook a { padding: 0; }
  .ReadMsgBody { width: 100%; }
  .ExternalClass { width: 100%; }
  .ExternalClass * { line-height:100%; }
  body { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
  table, td { border-collapse:collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
  img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; }
  p { display: block; margin: 13px 0; }
</style>
<!--[if !mso]><!-->
<style type="text/css">
  @media only screen and (max-width:480px) {
    @-ms-viewport { width:320px; }
    @viewport { width:320px; }
  }
</style>
<!--<![endif]-->
<!--[if mso]>
<xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
</xml>
<![endif]-->

<!--[if !mso]><!-->
    <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">
    <style type="text/css">

        @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);

    </style>
  <!--<![endif]--><style type="text/css">
  @media only screen and (min-width:480px) {
    .mj-column-per-100, * [aria-labelledby="mj-column-per-100"] { width:100%!important; }
.mj-column-px-130, * [aria-labelledby="mj-column-px-130"] { width:130px!important; }
.mj-column-px-350, * [aria-labelledby="mj-column-px-350"] { width:350px!important; }
  }
</style>
</head>
<body>
  <div><!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
        <tr>
          <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
      <![endif]--><div style="margin:0 auto;max-width:600px;background:white;"><table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:white;" align="center" border="0"><tbody><tr><td style="text-align:center;vertical-align:top;font-size:0px;padding:20px 0px;padding-bottom:0px;"><!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;">
      <![endif]--><div aria-labelledby="mj-column-per-100" class="mj-column-per-100" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;"><table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"><tbody><tr><td style="word-break:break-word;font-size:0px;padding:10px 25px;" align="center"><table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;" align="center" border="0"><tbody><tr><td style="width:50px;"><img alt="" title="" height="auto" src="https://avatars0.githubusercontent.com/u/16115896?v=3&s=200" style="border:none;border-radius:;display:block;outline:none;text-decoration:none;width:100%;height:auto;" width="50"></td></tr></tbody></table></td></tr><tr><td style="word-break:break-word;font-size:0px;padding:10px 25px;padding-top:20px;padding-bottom:0px;padding-right:0px;padding-left:0px;"><p style="font-size:1px;margin:0 auto;border-top:1px solid #f8f8f8;width:100%;"></p><!--[if mso | IE]><table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0" style="font-size:1px;margin:0 auto;border-top:1px solid #f8f8f8;width:100%;" width="600"><tr><td style="height:0;line-height:0;"> </td></tr></table><![endif]--></td></tr></tbody></table></div><!--[if mso | IE]>
      </td></tr></table>
      <![endif]--></td></tr></tbody></table></div><!--[if mso | IE]>
      </td></tr></table>
      <![endif]-->
      <!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
        <tr>
          <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
      <![endif]--><div style="margin:0 auto;max-width:600px;background:#fcfcfc;"><table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:#fcfcfc;" align="center" border="0"><tbody><tr><td style="text-align:center;vertical-align:top;font-size:0px;padding:20px 0px;padding-bottom:0px;"><!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;">
      <![endif]--><div aria-labelledby="mj-column-per-100" class="mj-column-per-100" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;"><table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"><tbody><tr><td style="word-break:break-word;font-size:0px;padding:10px 25px;" align="center"><div style="cursor:auto;color:grey;font-family:Helvetica Neue;font-size:20px;font-weight:200;line-height:22px;">
			      Here is what you've missed
			    </div></td></tr><tr><td style="word-break:break-word;font-size:0px;padding:10px 25px;padding-top:20px;padding-bottom:0px;padding-right:0px;padding-left:0px;"><p style="font-size:1px;margin:0 auto;border-top:1px solid #f8f8f8;width:100%;"></p><!--[if mso | IE]><table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0" style="font-size:1px;margin:0 auto;border-top:1px solid #f8f8f8;width:100%;" width="600"><tr><td style="height:0;line-height:0;"> </td></tr></table><![endif]--></td></tr></tbody></table></div><!--[if mso | IE]>
      </td></tr></table>
      <![endif]--></td></tr></tbody></table></div><!--[if mso | IE]>
      </td></tr></table>
      <![endif]-->
      <!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
        <tr>
          <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
      <![endif]--><div style="margin:0 auto;max-width:600px;background:white;"><table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:white;" align="center" border="0"><tbody><tr><td style="text-align:center;vertical-align:top;font-size:0px;padding:20px 0px;"><!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:130px;">
      <![endif]--><div aria-labelledby="mj-column-px-130" class="mj-column-px-130" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;"><table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"><tbody><tr><td style="word-break:break-word;font-size:0px;padding:10px 25px;" align="center"><table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;" align="center" border="0"><tbody><tr><td style="width:80px;"><img alt="" title="" height="auto" src="https://mjml.io/assets/img/responsive.png" style="border:none;border-radius:;display:block;outline:none;text-decoration:none;width:100%;height:auto;" width="80"></td></tr></tbody></table></td></tr></tbody></table></div><!--[if mso | IE]>
      </td><td style="vertical-align:top;width:350px;">
      <![endif]--><div aria-labelledby="mj-column-px-350" class="mj-column-px-350" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;"><table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"><tbody><tr><td style="word-break:break-word;font-size:0px;padding:10px 25px;" align="left"><div style="cursor:auto;color:grey;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:20px;line-height:22px;">
	          Sed ut perspiciatis
	        </div></td></tr><tr><td style="word-break:break-word;font-size:0px;padding:10px 25px;" align="left"><div style="cursor:auto;color:grey;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;">
	          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
	        </div></td></tr></tbody></table></div><!--[if mso | IE]>
      </td></tr></table>
      <![endif]--></td></tr></tbody></table></div><!--[if mso | IE]>
      </td></tr></table>
      <![endif]-->
      <!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
        <tr>
          <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
      <![endif]--><div style="margin:0 auto;max-width:600px;background:#f3f3f3;"><table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:#f3f3f3;" align="center" border="0"><tbody><tr><td style="text-align:center;vertical-align:top;font-size:0px;padding:20px 0px;padding-bottom:0px;"><!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;">
      <![endif]--><div aria-labelledby="mj-column-per-100" class="mj-column-per-100" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;"><table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"><tbody><tr><td style="word-break:break-word;font-size:0px;padding:10px 25px;" align="center"><div style="cursor:auto;color:rgb(165, 176, 184);font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:20px;line-height:22px;">
			      Explore our new features
			    </div></td></tr></tbody></table></div><!--[if mso | IE]>
      </td></tr></table>
      <![endif]--></td></tr></tbody></table></div><!--[if mso | IE]>
      </td></tr></table>
      <![endif]-->
      <!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
        <tr>
          <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
      <![endif]--><div style="margin:0 auto;max-width:600px;background:#f3f3f3;"><table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:#f3f3f3;" align="center" border="0"><tbody><tr><td style="text-align:center;vertical-align:top;font-size:0px;padding:20px 0px;padding-top:0px;"><!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;">
      <![endif]--><div aria-labelledby="mj-column-per-100" class="mj-column-per-100" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;"><table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"><tbody><tr><td style="word-break:break-word;font-size:0px;padding:10px 25px;" align="center"><table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;" align="center" border="0"><tbody><tr><td style="width:550px;"><img alt="" title="" height="auto" src="https://cloud.githubusercontent.com/assets/6558790/12450760/ee034178-bf85-11e5-9dda-98d0c8f9f8d6.png" style="border:none;border-radius:;display:block;outline:none;text-decoration:none;width:100%;height:auto;" width="550"></td></tr></tbody></table></td></tr></tbody></table></div><!--[if mso | IE]>
      </td></tr></table>
      <![endif]--></td></tr></tbody></table></div><!--[if mso | IE]>
      </td></tr></table>
      <![endif]-->
      <!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
        <tr>
          <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
      <![endif]--><div style="margin:0 auto;max-width:600px;background:#fcfcfc;"><table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:#fcfcfc;" align="center" border="0"><tbody><tr><td style="text-align:center;vertical-align:top;font-size:0px;padding:20px 0px;padding-top:20px;"><!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:130px;">
      <![endif]--><div aria-labelledby="mj-column-px-130" class="mj-column-px-130" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;"><table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"><tbody><tr><td style="word-break:break-word;font-size:0px;padding:10px 25px;" align="center"><table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;" align="center" border="0"><tbody><tr><td style="width:80px;"><img alt="" title="" height="auto" src="https://mjml.io/assets/img/easy-and-quick.png" style="border:none;border-radius:;display:block;outline:none;text-decoration:none;width:100%;height:auto;" width="80"></td></tr></tbody></table></td></tr></tbody></table></div><!--[if mso | IE]>
      </td><td style="vertical-align:top;width:350px;">
      <![endif]--><div aria-labelledby="mj-column-px-350" class="mj-column-px-350" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;"><table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"><tbody><tr><td style="word-break:break-word;font-size:0px;padding:10px 25px;" align="left"><div style="cursor:auto;color:grey;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:20px;line-height:22px;">
			      Right on time!
			    </div></td></tr><tr><td style="word-break:break-word;font-size:0px;padding:10px 25px;" align="left"><div style="cursor:auto;color:grey;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;">
			      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
			    </div></td></tr></tbody></table></div><!--[if mso | IE]>
      </td></tr></table>
      <![endif]--></td></tr></tbody></table></div><!--[if mso | IE]>
      </td></tr></table>
      <![endif]-->
      <!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
        <tr>
          <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
      <![endif]--><div style="margin:0 auto;max-width:600px;background:#f3f3f3;"><table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:#f3f3f3;" align="center" border="0"><tbody><tr><td style="text-align:center;vertical-align:top;font-size:0px;padding:20px 0px;"><!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;">
      <![endif]--><div aria-labelledby="mj-column-per-100" class="mj-column-per-100" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;"><table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"><tbody><tr><td style="word-break:break-word;font-size:0px;padding:10px 25px;" align="center"><div style="cursor:auto;color:#000000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;">Stay in touch!</div></td></tr><tr><td style="word-break:break-word;font-size:0px;padding:10px 25px;" align="center"><div><table role="presentation" cellpadding="0" cellspacing="0" style="margin:0px;" align="center" border="0"><tbody><tr><td style="padding:4px;vertical-align:middle;"><table role="presentation" cellpadding="0" cellspacing="0" style="background:#55acee;border-radius:3px;width:20px;" border="0"><tbody><tr><td style="vertical-align:middle;width:20px;height:20px;"><a href="https://twitter.com/home?status=[[SHORT_PERMALINK]]"><img alt="twitter" height="20" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/twitter.png" style="display:block;border-radius:3px;" width="20"></a></td></tr></tbody></table></td><td style="padding:4px 4px 4px 0;vertical-align:middle;"><a href="https://twitter.com/home?status=[[SHORT_PERMALINK]]" style="text-decoration:none;text-align:left;display:block;border-radius:3px;color:#333333;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;">Tweet</a></td></tr><tr><td style="padding:4px;vertical-align:middle;"><table role="presentation" cellpadding="0" cellspacing="0" style="background:#3b5998;border-radius:3px;width:20px;" border="0"><tbody><tr><td style="vertical-align:middle;width:20px;height:20px;"><a href="https://www.facebook.com/sharer/sharer.php?u=[[SHORT_PERMALINK]]"><img alt="facebook" height="20" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/facebook.png" style="display:block;border-radius:3px;" width="20"></a></td></tr></tbody></table></td><td style="padding:4px 4px 4px 0;vertical-align:middle;"><a href="https://www.facebook.com/sharer/sharer.php?u=[[SHORT_PERMALINK]]" style="text-decoration:none;text-align:left;display:block;border-radius:3px;color:#333333;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;">Share</a></td></tr></tbody></table></div></td></tr></tbody></table></div><!--[if mso | IE]>
      </td></tr></table>
      <![endif]--></td></tr></tbody></table></div><!--[if mso | IE]>
      </td></tr></table>
      <![endif]--></div>
</body>
</html>

بهمین راحتی.

امیدوارم از این جلسه خوشتون اومده باشه.

موفق باشید

یا علی

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

جلسات دوره

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.