Բլոգի նյութերը վազող տողով-Գեներատոր BlogSpot-ի համար

Հերթական գեներատորը  Mrblogger.ru բլոգի կողմից: Գեներատորը նախատեսված է բլոգում վազող տողով վերջին նյութերը ներկայացնելու համար: 

Պետք է միայն նշել բոլոր ֆունկցիաները և սեղմել ՍՏԵՂԾԵԼ կոճակը, որից հետո արդեն մնում է պատրաստի գադջիթը ՏԵՂԱԴՐԵԼ բլոգում և վերջ:

Փորձնական տարբերակը կարող եք դիտել այստեղ:

«Facebook Recommendations Bar» գադջիթը Blogger-ի համար

Վերջերս Facebook-ը թողարկել է իր նոր սոցիալական հավելումը կայքերի համար, որը կոչվում է «Facebook Recommendations Bar»: Այս հավելումը թույլ է տալիս օգտվողներին տեսնել առավել հետաքրքիր նյութերը և կիսվել ընկերների հետ:

Հավելումը ավելացնելուց հետո կայքի աջ կամ ձախ անկյունում բացվում է փոքրիկ պատուհան, որտեղ և տեղադրված են հետաքրիքր նյութերը:
Այսօր կներկայացնեմ շատ հեշտ եղանակ, որի միջոցով Facebook Recommendations Bar-ը կարող եք տեղադրել նաև Blogger-ում:

Քայլ I-տեղադրում ենք Facebook Recommendations Bar գադջիթը

Բացում ենք բլոգի կառավարման էջը, ապա կատարում այս քայլերը՝

1. Edit HTML ---> Proceed
2. Միացնում ենք "Expand Widget Templates" ֆունկցիան 

Փնտրում ենք (Ctrl+F օգնությամբ) </head> կոդը և նրա վերևում տեղադրում ենք ներքոնշյալ կոդը.

<!-- Begin Open Graph metadata -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

 <meta content='article' property='og:type'/>

 <meta expr:content='data:blog.title' property='og:site_name'/>

 <meta expr:content='data:blog.pageName' property='og:title'/>

 <b:if cond='data:blog.postImageThumbnailUrl'>

<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>

 </b:if>

<b:else/>

 <meta expr:content='data:blog.title' property='og:title'/>

 <meta content='website' property='og:type'/>

</b:if>

<meta expr:content='&quot;en_US&quot;' property='og:locale'/>

<meta expr:content='data:blog.canonicalUrl' property='og:url'/>

<!-- End Open Graph metadata -->

Քայլ II-ստեղծում ենք Facebook Recommendations Bar գադջիթը

• Բացում ենք  Facebook Recommendations Bar պաշտոնական էջը
• Հետո սեղմում ենք «Ստանլ կոդը»

• Հաջորդ քայլում ստեղծում ենք նոր հավելում «create a new app».

• Ստեղծում եք նոր հավելում և սեղմում «Շարունակել»

• Եվս մեկ անգամ լրացնում և սեղմում ենք  «Ստանլ կոդը» կոճակը

• Բացված էջից պատճենում ենք կարմիր սլաքով նշված կոդը և տեղադրում ենք </body> կոդի վերևում:

• Վերջին քայլում գտնում ենք <data:post.body/> կոդը և նրա ներքևում տեղադրում այս կոդը՝

<b:if cond='data:blog.pageType == &quot;item&quot;'><div class="fb-recommendations-bar" expr:data-href="data:post.url" data-read-time="30" data-action="like" data-side="right" expr:data-site="data:blog.homepageUrl" data-num-recommendations="3"></div></b:if>

Ինչպես պատրաստել «Հետադարձ կապ» BlogSpot-ում

Այժմ յուրաքանչյուր բլոգի անբաժան մասը կարելի է համարել նաև հետադարձ կապը, որը թույլ է տալիս բոլոր ընթերցողներին կապնվել բլոգի հեղինակի հետ:
Հետադարձ կապ կարելի է պատրաստել մի շարք ծառայությունների միջոցով, սակայն այսօր ես կխոսեմ առավել հարմարավետ և հեշտ ծառայության մասին:

Ծառայությունը, որը պատրաստվում եմ ներկայացնել կոչվում է Emalmeform:

1) Բացում ենք www.emailmeform.com կայքը և գրանցվում այնտեղ: 

2) Գրանցումից հետո սեղմում ենք Create a Form и Go to the Template section և ընտրում ստեղծման տարբերակը` I'd like to choose from a list of pre-made forms (ընտրել պատրաստի տարբերակներից) կամ Take me to the Form Builder (պատրաստել ձեռքով):

3) Պատրաստման գործընթացը շատ հեշտ է, այդ իսկ պատճառով այն չեմ նշի քայլ առ քայլ:

 Պատրաստելուց հետո սեղմում ենք "Save Form" կոճակի վրա հետադարձ կապի վահանակը պահպանելու համար: Միայն նշեմ, որ ստեղծման ընթացքում նշեք ճիշտ ժամային գոտին, նամակները ճիշտ ժամանակում ստանալու համար:

4) Կայքում կարող եք փորձարկել նախնական տարբերակը, դրա համար սեղմեք Open new window and view my form կոճակը, իսկ քայլերը ավարտելուց հետո սեղմում եք Take me back to the Form Manager բաժնի վրա:

5) Բացված էջում Դուք կտեսնեք ձեր ստեղծած հետադարձ կապի անունը և գործիքների վահանակ նրա ներքևի հատվածում: Այդ վահանակի վրա սեղմեք «code» հղման վրա, որից հետո կստանաք հետադարձ կապի համար նախատեսված կոդերը:

6) Վերջին քայլում պետք է բլոգում ստեղծել նոր էջ և html ռեժիմում տեղադրել կոդը:

Ահա և այսքանը:

Ինչպես պատրաստել գեղեցիկ [մեջբերում] Blogger-ում

BlogSpot-ից օգտվողները հավանաբար տեղյակ են, որ նյութեր գրելուց կարող են օգտվել մի շարք հետաքրքիր ֆունկցիաներից, որոնք առաջարկում է Blogger-ը: Այդպիսի ֆունկցիաներից է նաև <blockquote> [մեջբերում] ֆունկցիան: Այսօր որոշեցի ներկայացնել 4 հետաքրքիր տարբերակ մեջբերումներ կատարելու համար:

Մինչ քայլերը սկսելը նախ պահպանենք մեր բլոգի կրկնօրինակը, հետագայում սխալներից խուսափելու համար: Այդ մասին կարող եք կարդալ այստեղ:

Դիտել փորձնական տարբերակը

Առաջին տարբերակ

ԲացելՓակել

Բացում ենք մեր բլոգի կառվարման էջը՝ --> Изменить HTML-->"Расширить шаблоны виджета": Հետո որոնում ենք ներքևում նշված կոդը (Ctrl+F):

]]></b:skin>

Կոդը գտնելուց հետո նրա վերևում տեղադրում ենք այս կոդը՝

blockquote { line-height:1.3em;

margin : 15px 15px 15px 15px;

padding : 40px 10px 10px 10px;

clear : both;

list-style-type : none;

background : #f9f9f9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb9Kj1GYARQraN6bbVzIJMIJGoGK4d8HseGvFo0k5F6UEEPMIgLxsRKWjaR6MZX8FsKmfGNHoJ8urWAkhBLdKgMUbu7oArX4BTztnA2ifRxQ967u5fmYv2OcBdQz2L0w38ZfjlqljpBK6W/s1600/code.gif) no-repeat left top;

border : 3px solid #eeeeee;

color : #7D7D7D; }

Բացում ենք մեր բլոգի կառվարման էջը՝ --> Изменить HTML-->"Расширить шаблоны виджета": Հետո որոնում ենք ներքևում նշված կոդը (Ctrl+F):

]]></b:skin>

Կոդը գտնելուց հետո նրա վերևում տեղադրում ենք այս կոդը՝

blockquote { margin : 15px 35px 15px 15px;

padding : 10px;

clear : both;

list-style-type : none;

background : #f9f9f9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMQ_rmVES_uIblyMkSSGUhDP2ila2ynXcrf9e4M-sNwbCB34dvooGUEoaEf4JU3BLchLMU5YRhuc6AWLwcsgGc7B1cqnYOmoPm-tJaQ099BYIpVYTcFZrEZAQ6X8geuZ2HdO7mR7XjOejO/s1600/code1.gif) no-repeat right bottom;

border-top : 1px solid #eeeeee;

border-right : 2px solid #cccccc;

border-bottom : 2px solid #cccccc;

border-left : 1px solid #eeeeee; }

Երրորդ տարբերակ

ԲացելՓակել

Բացում ենք մեր բլոգի կառվարման էջը՝ --> Изменить HTML-->"Расширить шаблоны виджета": Հետո որոնում ենք ներքևում նշված կոդը (Ctrl+F):

]]></b:skin>

Կոդը գտնելուց հետո նրա վերևում տեղադրում ենք այս կոդը՝

blockquote { margin : 0 20px;

padding: 70px 20px 20px 40px;

background : #F9F9F9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH0kOtlVVxB0wmy5rZo4dhQV36WkPLrx3Xgy4S_RYdwxyjGGRI-chEFZixmEWiF79iQoH1j4qmna27h-uo81KmoCwUH-lY0s8bM6jIlUXeokJ6ht2SZHlC_0kqGC1WTMF6szhHF2PII1WF/s1600/code3.gif) no-repeat top left;

font: bold 1em Helvetica, verdana, Georgia, &quot;Times New Roman&quot;, Times, serif;

color : #000;

border-bottom : 5px solid #BFBFBF; }

Բացում ենք մեր բլոգի կառվարման էջը՝ --> Изменить HTML-->"Расширить шаблоны виджета": Հետո որոնում ենք ներքևում նշված կոդը (Ctrl+F):

]]></b:skin>

Կոդը գտնելուց հետո նրա վերևում տեղադրում ենք այս կոդը՝

blockquote { margin : 10px;

padding: 0px 20px 5px 40px;

background : #fff url(http://i015.radikal.ru/1207/0f/00db3bb5891f.png) no-repeat top left;

font: 0.9em Helvetica, verdana, Georgia, &quot;Times New Roman&quot;, Times, serif;

color : #767675;

border: 1px solid #767675; }

Սոցիալական ցանցի կոճակներ Blogger-ի համար

Շարունակելով Blogger-ի դասընթացները, այսօր կխոսեմ սոցիալական ցանցի կոճակները՝ Blogger-ում տեղադրելու մասին: Նախորդ նյութերում արդեն մի քանի անգամ խոսել եմ այս մասին, սակայն այսօր կներկայացնեմ հենց MrBlogger-ում տեղադրված կոճակները:

Նախ նշեմ, որ կոճակները պատրաստվել են Addthis ծառայության հիման վրա, սակայն ենթարկվել որոշակի փոփոխությունների:

Կոճակները շատ հեշտ են տեղադրվում պետք է կատարել ընդամենը մի քանի քայլ.

Մինչ քայլերը սկսելը նախ պահպանենք մեր բլոգի կրկնօրինակը, հետագայում սխալներից խուսափելու համար: Այդ մասին կարող եք կարդալ այստեղ:

Բացում ենք մեր բլոգի կառվարման էջը՝ --> Изменить HTML-->"Расширить шаблоны виджета": Հետո որոնում ենք ներքևում նշված կոդը (Ctrl+F):

<div class='post-body entry-content'>   
<data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='sharebuttons'>

Հավանեցի՞ք: Տեղեկացրեք ընկերներին:

<div align='center'>

<!--Blogger-->

<a class='shareme' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'><img src='http://lh6.ggpht.com/_G92voTj-yF0/TLLOAEobABI/AAAAAAAAAsw/yJ6dutztXE0/blogger.png' style='border: 0pt none;' alt='в Blogger' title='Опубликовать в блоге' /></a>

<!--Twitter-->

<a class='shareme' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'><img src='http://lh3.ggpht.com/_G92voTj-yF0/TLLOJdXH6XI/AAAAAAAAAtE/EUy4mKyVa5A/twitter.png' style='border: 0pt none;' alt='в Twitter' title='Написать в Twitter' /></a>

<!--Живая лента Google-->

<a class='shareme' expr:href='&quot;http://www.google.com/buzz/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;srcURL=&quot; + data:blog.homePageUrl + &quot;&amp;srcTitle=&quot; + data:title' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=390,width=710\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' rel='nofollow' target='_blank'><img src='http://lh5.ggpht.com/_G92voTj-yF0/TLLOAQINkhI/AAAAAAAAAs4/8P7351Fd6VU/google.png' style='border: 0pt none;' alt='в Живую ленту' title='Написать в Живую Ленту' /></a>

<!--Вконтакте-->

<a class='shareme' expr:href='&quot;http://vkontakte.ru/share.php?url=&quot; + data:post.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=500,width=710\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' rel='nofollow' target='_blank'><img src='http://lh4.ggpht.com/_G92voTj-yF0/TLLOJlEHUjI/AAAAAAAAAtI/RcZxvCl0H-I/vkontakte.png' style='border: 0pt none;' alt='в Вконтакте' title='Опубликовать в ВКонтакте' /></a>

<!--Живой журнал-->

<a class='shareme' expr:href='&quot;http://www.livejournal.com/update.bml?subject=Ссылка: &quot; + data:post.title + &quot;&amp;event=&quot; + data:post.title + &quot;: &quot; + data:post.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' rel='nofollow' target='_blank'><img src='http://lh6.ggpht.com/_G92voTj-yF0/TLLOATbe0kI/AAAAAAAAAs8/l5eJU9ablaI/livejournal.png' style='border: 0pt none;' alt='в Живой Журнал' title='Опубликовать в ЖЖ' /></a>

<!--Мой мир-->

<a class='shareme' expr:href='&quot;http://connect.mail.ru/share?share_url=&quot; + data:post.url ' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=310,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' rel='nofollow' target='_blank'><img src='http://lh3.ggpht.com/_G92voTj-yF0/TLLOJaVDgXI/AAAAAAAAAtA/Y5T0udcpaIg/mailru.png' style='border: 0pt none;' alt='в Мой мир' title='Опубликовать в Моем Мире' /></a>

<!--Я.ру-->

<a class='shareme' expr:href='&quot;http://my.ya.ru/posts_add_link.xml?title=&quot; + data:post.title + &quot;&amp;URL=&quot; + data:post.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=500,width=900\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' rel='nofollow' target='_blank'><img src='http://lh5.ggpht.com/_G92voTj-yF0/TLLOJt5sA7I/AAAAAAAAAtM/ZyG0Z_4zO2g/yandex.png' style='border: 0pt none;' alt='в Я.ру' title='Опубликовать в Я.ру' /></a>

<!--Facebook-->

<a class='shareme' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url ' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' rel='nofollow' target='_blank'><img src='http://lh3.ggpht.com/_G92voTj-yF0/TLLOAdHTWII/AAAAAAAAAs0/KNND56PuU7A/facebook.png' style='border: 0pt none;' alt='в Facebook' title='Опубликовать в Facebook' /></a>

<!--Одноклассники-->

<a class='odkl-klass' expr:href='data:post.url' onclick='ODKL.Share(this);return false;'/>

<style type='text/css'>

.odkl-klass:hover {opacity:1.0;}

.odkl-klass {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLsHaBZDHK_hsvtqcxdgnN1Fe7wmXpQuMyY4V7s6n3xdIvdPGBmYZNeRPvMy1qfBiMXfMSuWBb2A9Usmhky92RHCodktiM9v1uHNBpZ5kw61NnJcTYFaA88ySIocqhZv94SIgB0NIS3Xk/) no-repeat; height:40px;

width:40px; vertical-align:top; opacity:0.5; } 

</style>

<!--AddThis-->

<a class='addthis_button' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'><img alt='в закладки' src='http://lh6.ggpht.com/_G92voTj-yF0/TLLOAIhLM6I/AAAAAAAAAss/MHg_jrwXQ18/addthis.png' /></a>

<script type='text/javascript'>var addthis_config = {&quot;data_track_clickback&quot;:true};</script>

<script src='http://s7.addthis.com/js/250/addthis_widget.js#username=amateurbloger' type='text/javascript'/>

</div>

</div>

</b:if>

Ահա և վերջ: Սակայն տեղադրված կոճակները դեռևս այդքան էլ գեղեցիկ չեն երևում, նրանց մի փոքր շունչ տալու համար, փորձենք կենդանացնել այս կոդի միջոցով.

.sharebuttons a img{

border: none;

opacity:0.5;

}

.sharebuttons a:hover img{

border: none;

opacity:1.0;

}

.sharebuttons img {

padding:0;

margin:0;

}

Վերևում գրված կոդը տեղադրում եք ]]></b:skin> կոդի վերևում:

HTML դասընթաց-գծեր (Մաս 4)

Այսօր կներկայացնեմ հերթական HTML դասընթացը և կխոսեմ այն մասին, թե ինչպես կարելի է HTML-ի օգնությամբ տարատեսակ գծեր ավելացնել բլոգում: Գծերը կարելի է օգտագործել բլոգը ձևավորելու, նյութերը գեղեցկացնելու և տարբեր բաժանումներ կատարելու համար:

---

<hr>-հասարակ գիծ տեղադրելու համար պետք է միայն օգտագործել այս կոդը: Եթե ցանկանում եք որոշակի երկարություն տալ, ապա օգտագործեք այսպիսի կոդ՝ <hr align=center width=60%>:

---

<hr noshade>-հաստ գծեր տեղադրելու համար օգտագործեք նմանատիպ կոդ, իսկ հաստությունը փոփխելու համար օգտագործեք <hr noshade width=60% size="3"> կոդը:

---

<hr color="#00B344">-այս կոդը կօգնի տեղադրել գունավոր գծեր, իսկ այս մեկը ՝<hr size=3 color="#FF0000">, կարող եք օգտագործել հաստ գունավոր գծեր տեղադրելու համար:

---

<hr color="blue" size="7" style="border: dotted 5pt; border-color: red ">, <hr color="red" size="9" style="border: dotted 5pt; border-color: blue ">, <hr color="black" size="4" style="border: dashed 5pt; border-color: aqua ">-այս կոդերը բլոգում օգտագործելու դեպքում կստանաք տարբեր տեսակի շախմատաձև գծեր:

---

Կետագծեր ստանալու համար օգտագործեք այս կոդը՝<p align=center style=color:blue;>. . . . . . . . . . . </p>

,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,

Կարելի է նաև գծերի փոխարեն օգտագործել նկարներ, որոնք, իհարկե, ավելի գեղեցիկ են երևում:

Գծերի փոխարեն նկարներ օգտագործելու համար կարող եք օգտագործել նմանատիպ կոդեր՝

<img src=http://img218.imageshack.us/img218/9140/line002va4.gif align=center>

<img src=http://img218.imageshack.us/img218/4139/line014aq3.gif align=center>

<img src=http://img87.imageshack.us/img87/6087/hline13lz2.gif align=center>

*Վերջում միայն ավելացնեմ, որ գունավոր գծերը 100% ճշգրտությամբ աշխատում են միայն IE բրաուզերում:

Տեղադրում ենք «Կարդալ ավելին» կոճակ Blogger-ում

Այսօր Ձեզ կներկայացնեմ ևս մեկ հետաքրքիր եղանակ, որի միջոցով կկարողանաք բլոգում տեղադրել CSS և անիմացիոն  «Կարդալ ավելին» կոճակներ: Նշեմ, որ նախորդ նյութերից երկուսում արդեն խոսել եմ  «Կարդալ ավելին» կոճակներ տեղադրելու մասին («Կարդալ ավելին» կոճակը Blogger-ում, «Կարդալ ավելին» կոճակ Blogger-ի համար):

Մինչ քայլերը սկսելը նախ պահպանենք մեր բլոգի կրկնօրինակը, հետագայում սխալներից խուսափելու համար:

Մինչ քայլերը սկսելը նախ պահպանենք մեր բլոգի կրկնօրինակը, հետագայում սխալներից խուսափելու համար: Այդ մասին կարող եք կարդալ այստեղ:

Եթե արդեն պատրաստ եք ուրեմն սկսենք տեղադրել կոճակները.

Տարբերակ I(Դիտել փորձնական տարբերակը)

• Բացում ենք բլոգի կառավարման էջը և կատարում այս քայլերը --> Изменить HTML-->"Расширить шаблоны виджета": Հետո որոնում ենք ներքևում նշված կոդը (Ctrl+F):

<b:if cond='data:post.hasJumpLink'>

Ամբողջական տեսքը՝

<b:if cond='data:post.hasJumpLink'>

<DIV class='jump-link'>

<A expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></A>

</DIV>

</b:if>

• Այժմ այս կոդը  պետք է փոխարինել ներքևում նշված կոդով:

<b:if cond='data:post.hasJumpLink'>

<div class='a-btn'>

<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>

<span class='a-btn-text'>Կարդալ ավելին</span>

<span class='a-btn-slide-text'><data:post.title/></span>

<span class='a-btn-icon-right'><span/></span>

</a>

</div>

</b:if>

• Այնուհետև որոնում ենք ]]></b:skin> կոդև և նրա վերևում տեղադրում ենք այս կոդը.

.a-btn{

    background:#80a9da;

    background:-webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1));

    background:-webkit-linear-gradient(top, #80a9da 0%, #6f97c5 100%);

    background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%);

    background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%);

    background:linear-gradient(top, #80a9da 0%, #6f97c5 100%);

    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 );

    padding-left:20px;

    padding-right:40px;

    height:28px;

    display:inline-block;

    position:relative;

    border:1px solid #5d81ab;

    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);

    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);

    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);

    -webkit-border-radius:20px;

    -moz-border-radius:20px;

    border-radius:20px;

    float:right;

    clear:both;

    margin:10px 0px;

    overflow:hidden;

    -webkit-transition:all 0.3s linear;

    -moz-transition:all 0.3s linear;

    -o-transition:all 0.3s linear;

    transition:all 0.3s linear;

font-size:13px; font-family:candara;

}

.a-btn-text{

font-size:13px; font-family:candara;

    padding-top:5px;

    display:block;

    white-space:nowrap;

    text-shadow:0px 1px 1px rgba(255,255,255,0.3);

    color:#446388;

    -webkit-transition:all 0.2s linear;

    -moz-transition:all 0.2s linear;

    -o-transition:all 0.2s linear;

    transition:all 0.2s linear;

}

.a-btn-slide-text{

font-size:13px; font-family:candara;

    position:absolute;

    height:100%;

    top:0px;

    right:52px;

    width:0px;

    background:#63707e;

    text-shadow:0px -1px 1px #363f49;

    color:#fff;

    white-space:nowrap;

    text-transform:uppercase;

    text-align:left;

    text-indent:10px;

    overflow:hidden;

    line-height:28px;

    -webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;

    -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;

    box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;

    -webkit-transition:width 0.3s linear;

    -moz-transition:width 0.3s linear;

    -o-transition:width 0.3s linear;

    transition:width 0.3s linear;

}

.a-btn-icon-right{

    position:absolute;

    right:0px;

    top:0px;

    height:100%;

    width:52px;

    border-left:1px solid #5d81ab;

    -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;

    -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;

    box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;

}

.a-btn-icon-right span{

    width:38px;

    height:38px;

    opacity:0.7;

    position:absolute;

    left:50%;

    top:50%;

    margin:-20px 0px 0px -20px;

    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ap7b1iapK4Tr-IjRnvt-BcXNx2_CA41K6fq2pp7iSn8h0pAbYCGb20gXTqncBP8pUT0HN0IZJe323B8zrh7RkfeE5vH9biyYhQV-xIhSulj-W59FM_4YfRq8bGqFuMlcwAbrYrcaikEV/s1600/arrow_right.png) no-repeat 50% 55%;

    -webkit-transition:all 0.3s linear;

    -moz-transition:all 0.3s linear;

    -o-transition:all 0.3s linear;

    transition:all 0.3s linear;

}

.a-btn:hover{

    padding-right:180px;

    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);

    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);

    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);

}

.a-btn:hover .a-btn-text{

    text-shadow:0px 1px 1px #5d81ab;

    color:#fff;

}

.a-btn:hover {

    width:100px;

}

.a-btn:hover .a-btn-slide-text{

    width:120px;

}

.a-btn:hover .a-btn-icon-right span{

    opacity:1;

}

.a-btn:active{

    position:relative;

    top:1px;

    background:#5d81ab;

    -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;

    -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;

    box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;

    border-color:#80a9da;

}

Տարբերակ II (Դիտել փորձնական տարբերակը)

Այս տարբերակում ևս կատարում ենք վերևում նշված քայլերը և որոնում ենք <data:post.jumpText/> կոդը:

• Ամբողջական կոդը

<b:if cond='data:post.hasJumpLink'>

<DIV class='jump-link'>

<A expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></A>

</DIV>

</b:if>

• Որից հետո այն փոխարինեք հետևյալ կոդով՝

<b:if cond='data:post.hasJumpLink'>

<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><span class='a_demo_four'>Կարդալ ավելին</span></a>

</b:if>

• Այս քայլը կատարելուց հետո որոնում ենք ]]></b:skin> կոդը և նրա վերևում տեղադրում ենք ներքևում տեղադրված կոդը:

.a_demo_four a{color:#fff; text-decoration:none;}

.a_demo_four a:hover{color:#fff; text-decoration:none;}

.a_demo_four {

float:right;

    background-color:#3bb3e0;

    font-family: 'Open Sans', sans-serif;

    font-size:12px;

font-family:candara;

    text-decoration:none;

    color:#fff;

    position:relative;

    padding:5px 10px;

    padding-right:40px;

    background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);

    background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);

    background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);

    background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);

    background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);

    background-image: -webkit-gradient(

    linear,

    left bottom,

    left top,

    color-stop(0, rgb(44,160,202)),

    color-stop(1, rgb(62,184,229))

    );

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    -o-border-radius: 5px;

    border-radius: 5px;

    -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;

    -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;

    -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;

    box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;

}

.a_demo_four:active {

    top:3px;

    background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);

    background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);

    background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);

    background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);

    background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);

    background-image: -webkit-gradient(

    linear,

    left bottom,

    left top,

    color-stop(0, rgb(62,184,229)),

    color-stop(1, rgb(44,160,202))

    );

    -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;

    -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;

    -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;

    box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;

}

.a_demo_four::before {

    background-color:#2591b4;

    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGSNeJonlfV5mFig0dlAfDZa9ngu4A1D5-M7vt6cJdv2JgWLoz8A-QvekPuOn2nH5EfhpAVtRooNjlqwWy9q9NYa9zXBD8DQtO9AaVWWBg_UxGjaHWS2hrTQOQrLtJL_b5UMZvcvsTvqfi/s1600/right_arrow.png);

    background-repeat:no-repeat;

    background-position:center center;

    content:"";

    width:20px;

    height:20px;

    position:absolute;

    right:15px;

    top:50%;

    margin-top:-9px;

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    -o-border-radius: 50%;

    border-radius: 50%;

    -webkit-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;

    -moz-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;

    -o-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;

    box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;

}

.a_demo_four:active::before {

    top:50%;

    margin-top:-12px;

    -webkit-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;

    -moz-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;

    -o-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;

    box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;

}