آپ تم مرجع ارائه قالب وردپرس فروشگاهی | شرکتی | تجاری | خبری و... , افزونه وردپرس , آموزش وردپرس

کاربران گرامی ، جهت دسترسی سریع و آسان تر به محصول و مطلب مورد نظر از جستجوی سایت استفاده نمایید

خانه / آموزش وردپرس / آموزش های وردپرس / کد تبلیغات متنی حرفه ای به همراه css برای سایت
tablhghatmatni

کد تبلیغات متنی حرفه ای به همراه css برای سایت

کد تبلیغات متنی حرفه ای به همراه css برای سایتReviewed by سعید حبیبی on Jul 17Rating: 5.0

افزودن کد حرفه ای تبلیغات متنی با css ( سی اس اس) برای سایت

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

کد تبلیغات متنی حرفه ای به همراه css برای سایت

قبل از هرچیزی باید یک محل مناسب در سایت خود مدنظر قرار دهین مثلا ستون کناری سایت (سایدبار) اگر قالبی که استفاده می کنید از ابزارک پشتیبانی میکنه که هیچ ما از این طریق قصد داریم آموزش خود را ارائه کنیم اما اگر نمیکنه باید وارد کد های قالب خود شوید و این دسته کد تبلیغ متنی را آنجا اضافه کنید.حال برگردیم به قسمت ابزارک های قالب،لازم به ذکر است آموزشی در این زمینه یعنی ایجاد قسمت ابزارک در قالب وردپرس مراجعه کنید.خب وارد ابزارک شوید و یک ابزار برای کد انتخاب و در ستون کناری قرار دهید.همانند تصویر زیر

افزودن کد حرفه ای تبلیغات متنی با css

خب شما باید کد زیر را درون ابزارک خود که ساخته اید قرار دهیم.


<pre class="lang:default decode:true crayon-selected"><div class="text-ads">
<h2 class="head-ads">تبلیغات متنی سایت</h2>
<ul>

<li>
<a class="blue" rel="nofollow" href="http://uptheme.ir" target="_blank">
<span class="asd-headname">تبلیغات متنی شما در اینجا</span><br>

<span class="ads-linktext">این یک متن آزمایشی می باشد بعد از قرار دادن عنوان تبلیغ یک توضیح کوتاه بنویسید
</span><br>
<span class="ads-footsite">طراحی و پیاده سازی آپ تم</span>
</a>
</li>

<li>
<a class="firouzeh" rel="nofollow" href="http://neodownload.blogfa.com" target="_blank">
<span class="asd-headname">دانلود قالب هاب زیبای بلوگفا</span><br>
<span class="ads-linktext">نئو نوین دانلود مرکز ارائه ی انواع قالب های وبلاگ همراه با آموزش
</span><br>
<span class="ads-footsite">نئو نوین دانلود</span>

</a>
</li>

<li>
<a class="green" rel="nofollow" href="http://uptheme.ir" target="_blank">
<span class="asd-headname">آپ تم | قالب وردپرس | فارسی سازی</span><br>
<span class="ads-linktext">آپ تم مرکز ارائه ی قالب های حرفه ای وردپرس به صورت رایگان و غیر رایگان. همرا با آموزش های فوق العاده
</span><br>
<span class="ads-footsite">uptheme.ir</span>

</a>
</li>

<li>
<a class="firouzeh" rel="nofollow" href="http://uptheme.ir" target="_blank">
<span class="asd-headname">افزونه های حرفه ای وردپرس</span><br>
<span class="ads-linktext">آپ تم مرکز ارائه ی بهترین و کاربردی ترین افزونه های وردپرس همرا با آموزش و پشتیبانی</span><br>
<span class="ads-footsite">آپ تم</span>
</a>
</li>

<li>
<a class="purple" rel="nofollow" href="http://uptheme.ir" target="_blank">
<span class="asd-headname">تبلیغات متنی شما در اینجا</span><br>
<span class="ads-linktext">وب سایت ما در این مکان تبلیغات متنی می پذیرد شما عزیزان می توانید تبلیغ محصولات خود را به ما بسپارید</span><br>
<span class="ads-footsite">نام سایت یا هر چیز دیگری</span>
</a>
</li>

<li>
<a class="red" rel="nofollow" href="http://uptheme.ir" target="_blank">
<span class="asd-headname">دانلود رایگان قالب وردپرس</span><br>
<span class="ads-linktext">آیا دنبال قالب های حرفه ای می باشید دوست دارید قالب تخصصی داشته باشید؟؟؟ اها ... با آپ تم همراه باشید
</span><br>
<span class="ads-footsite">دانلود رایگان قالب های حرفه ای</span>
</a>
</li>

<li>
<a class="blue" rel="nofollow" href="http://uptheme.ir" target="_blank">
<span class="asd-headname">آموزش حرفه ای وردپرس </span><br>
<span class="ads-linktext">اینبار شاهد آموزشی حرفه ای از آپ تم خواهیم بود , آموزش کار با وردپرس از مبتدی تا پیشرفته
</span><br>
<span class="ads-footsite">آپ تم</span>

</a>
</li>

<li>

<a class="red" rel="nofollow" href="http://uptheme.ir" target="_blank" style="text-decoration: blink">
<span class="asd-headname">مکان تبلیغ شما در اینجا</span><br>
<span class="ads-linktext">تبلیغات متنی شما در اینجا با کمترین هزینه و بیشترین بازدهی , جهت سفارش کلیک کنید
</span><br>
<span class="ads-footsite">متنی برای پایین نوشته ی بالا</span>

</a>
</li>

</ul>
</div>

سپس کد زیر که مختص css می باشد را در داخل فایل استایل قالب خود قرار دهید.(فایل style.css)


<pre class="lang:default decode:true">.text-ads ul {
margin:0 5px 10px;
border:1px solid #ddd;
}

.text-ads {text-align:center}
.text-ads li a, .text-ads li a:link {
background:none repeat scroll 0 0 #f3f2f2;
color:#FFFFFF;
display:block;
margin:5px;
padding:7px;
font-size:1.1em;
-webkit-transition:all .5s ease 0s;
-moz-transition:all .5s ease 0s;
-o-transition:all .5s ease 0s;
-ms-transition:all .5s ease 0s;
transition:all .5s ease 0s;
}

.text-ads li a:hover, .text-ads li a:focus {
-moz-border-radius:0 15px 0 15px;
-webkit-border-radius:0 15px 0 15px;
border-radius:0 15px 0 15px;
color:#f7f6f6;
}

.text-ads li a.blue:hover, .text-ads li a.blue:focus {
background:none repeat scroll 0 0 #003982;
}

.text-ads li a.red:hover, .text-ads li a.red:focus {
background:none repeat scroll 0 0 #f06;
}

.text-ads li a.purple:hover, ebar-l .text-ads li a.purple:focus {
background:none repeat scroll 0 0 #945fbf;
}

.text-ads li a.green:hover, .text-ads li a.green:focus {
background:none repeat scroll 0 0 #6e9000;
}

.text-ads li a.firouzeh:hover, .text-ads li a.firouzeh:focus {
background:none repeat scroll 0 0 #00bed3;
}

.text-ads li a:hover *, .text-ads li a:focus * {
color:#f7f6f6;
}

.text-ads span {
display:block;
line-height:18px;
}

.text-ads .asd-headname, .text-ads .ads-footsite {
color: #555;
text-align: center;
font-family: Tahoma;
font-size: 10pt;
font-weight: bold;
}

.text-ads .ads-linktext{
color:#666;
text-align:center;
}

.text-ads h2 {
display:block;
height:21px;
width:290px;

margin:10px 5px 0 5px;
overflow:hidden;
text-indent:-999em;
}

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

امید وارم از این تبلیغات متنی نهایت استفاده را ببرید.

 

لینک کوتاه ایم مطلب: http://uptheme.ir/?p=498

منبع: آپ تم  مرجع:آموزش های وردپرس

باکس دانلود

  • کاربران گرامی از ارسال دیدگاه جهت پشتیبانی محصولات ویژه ( خریداری شده) خود داری کنید برای این امر از قسمت پشتیبانی اقدام کنید.

هنوز هیچ دیدگاهی وجود ندارد