جستجو کردن
Close this search box.

فهرست مطالب

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

افزودن کد حرفه ای تبلیغات متنی با 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="https://uptheme.ir" target="_blank">
<span class="asd-headname">تبلیغات متنی شما در اینجا</span><br>

<span class="ads-linktext">این یک متن آزمایشی می باشد بعد از قرار دادن عنوان تبلیغ یک توضیح کوتاه بنویسید
</span><br>
&lt;span class=&quot;ads-footsite&quot;&gt;طراحی و پیاده سازی <a class="wpil_keyword_link " href="https://uptheme.ir"   title="آپ تم" data-wpil-keyword-link="linked">آپ تم</a>&lt;/span&gt;
&lt;/a&gt;
&lt;/li&gt;

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

&lt;/a&gt;
&lt;/li&gt;

&lt;li&gt;
&lt;a class=&quot;green&quot; rel=&quot;nofollow&quot; href=&quot;https://uptheme.ir&quot; target=&quot;_blank&quot;&gt;
&lt;span class=&quot;asd-headname&quot;&gt;آپ تم | <a class="wpil_keyword_link" href="https://uptheme.ir/product-category/wp-theme/"   title="قالب وردپرس" data-wpil-keyword-link="linked">قالب وردپرس</a> | فارسی سازی&lt;/span&gt;&lt;br&gt;
&lt;span class=&quot;ads-linktext&quot;&gt;<a class="wpil_keyword_link" href="https://uptheme.ir/"   title="آپ تم" data-wpil-keyword-link="linked">آپ تم</a> مرکز ارائه ی قالب های حرفه ای وردپرس به صورت رایگان و غیر رایگان. همرا با آموزش های فوق العاده
&lt;/span&gt;&lt;br&gt;
&lt;span class=&quot;ads-footsite&quot;&gt;uptheme.ir&lt;/span&gt;

&lt;/a&gt;
&lt;/li&gt;

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

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

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

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

&lt;/a&gt;
&lt;/li&gt;

&lt;li&gt;

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

&lt;/a&gt;
&lt;/li&gt;

&lt;/ul&gt;
&lt;/div&gt;

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


&lt;pre class=&quot;lang:default decode:true&quot;&gt;.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;
}

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

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

 

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

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

اولین نفری باش که به این مقاله امتیاز میدی 🙂
اشتراک
اطلاع از
guest
0 نظرات
بازخورد درون خطی
مشاهده همه نظرات
0
نظر خود را به اشتراک بگذاریدx
عضو شوید و همه محصولات را رایگان دانلود کنید!!!