«Կարդալ ավելին» կոճակ Blogger-ի համար

Եթե հիշում եք մի քանի օր առաջ բլոգում տեղադրեցի նմանատիպ վերնագրով ևս մեկ նյութ: Այս նյութում խոսվում է այն մասին, թե ինչպես կարելի է «Read more» կամ նույն ինքը՝ «Կարդալ ավելին» կոճակ տեղադրել Blogger-ում նկարի միջոցով:

Ի տարբերություն անցած նյութի, այս նյութում խոսելու ենք այն մասին, թե ինչպես կարելի է փոխել «Read more» գրվածը առանց նկարի օգնությամբ: 

Նախքան ինչ որ բան ավելացնելը կամ ջնջելը,  կրկնօրինակեք բլոգը: Այդ մասին կարող եք կարդալ այստեղ:

Քայլ 1-Ավելացնում ենք Css կոդը: Մուտք են գործում Blogger-ի կառավարման էջ և կատարում ենք այս քայլերը՝ Design > Edit Html կամ (Шаблон › Изменить HTML>Расширить шаблоны виджета): Որից հետո գտնում ենք ներքևում նշավծ կոդը 

<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>

Քայլ 2- այս կոդը գտնելուց հետո, այն ամբողջությամբ փոխարինում ենք ներքևում տեղադրված կոդով: 

<b:if cond='data:post.hasJumpLink'><a class='jump-link' expr:href='data:post.url + &quot;#more&quot;'>Կարդալ ավելին </a><b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<a class='jump-link' expr:href='data:post.url' rel='nofollow'>Կարդալ ավելին </a>
</b:if></b:if><div class='clear'/>

Քայլ 3- այս քայլում տեղադրում ենք CSS կոդը, այն տեղադրելու համար փնտրում ենք </b:skin> կոդը և նրա վերևում տեղադրում ենք ներքևում գրված կոդը:

a.jump-link {color:#fff;text-decoration:none}
.jump-link {
float:right;
padding:6px 12px;
margin:20px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
text-align: center;
display:inline-block; 
background: #f48423;
background: -moz-linear-gradient(top, #ffdf9e, #f5b026 5%, #f48423);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffd683), color-stop(.03, #f5b026), to(#f48423)); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5b026', EndColorStr='#f48423'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5b026', EndColorStr='#f48423')"; /* IE8 only */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px; 
border:1px solid #e6791c;
border-bottom:1px solid #d86f15;
color:#FFF;
text-shadow: 0 1px 1px #6f3a02; }


.jump-link:hover {
background: #eb7d1d;
background: -moz-linear-gradient(top, #ffdf9e, #f1a91a 5%, #f07810);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffdf9e), color-stop(.03, #f1a91a), to(#f07810)); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f1a91a', EndColorStr='#f07810'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f1a91a', EndColorStr='#f07810')"; /* IE8 only */
border-bottom:1px solid #d86f15; }


.jump-link:focus {
padding:7px 13px;
color:#FFF;
text-shadow: 0 -1px 1px #894906;
border:none;
background: #e47412;
background: -moz-linear-gradient(top, #f07810, #f1a91a 95%, #f07810);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f07810), color-stop(.9, #f1a91a), to(#f07810)); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f07810', EndColorStr='#f1a91a'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f07810', EndColorStr='#f1a91a')"; /* IE8 only */
box-shadow: inset 0px 2px 5px #9b5901, 0 1px 0px #e0d5c7;
-webkit-box-shadow: inset 0px 2px 5px #9b5901, 0 1px 0px #e0d5c7;
-moz-box-shadow: inset 0px 2px 5px #9b5901, 0 1px 0px #e0d5c7; }

Ավելացնելուց հետո պահպանում ենք փոփոխությունները և տեսնում ենք արդյունքը:
*Կոճակի գույնը և չափսերը կարող եք փոփոխության ենթարկել:

Posted by Hayk on 04:00. Filed under Blogger . You can follow any responses to this entry through the RSS 2.0

16 коммент. for «Կարդալ ավելին» կոճակ Blogger-ի համար

1. 

   Արտավազդ Եղիազարյան

   3 декабря 2011 г. в 21:49

   Հայկ Ջան Փաթիլները Չեն Թողնում որ տեքստը նշենք մի բան արա

2. 

   Hayk Grigoryan

   4 декабря 2011 г. в 08:26

   Արտավազդ ջան ես նակտել էի դա , ուղակի ժամանակ չկար հանելու....կհանեմ փաթիլները :):d

3. 

   NAREK

   30 декабря 2011 г. в 06:47

   Հայկ ջան որ խնդրեմ միատ նյութ կարող ես պատրաստել թե ինչպես են հանում read more -ն

4. 

   Hayk Grigoryan

   30 декабря 2011 г. в 07:27

   Կտեղադրեմ բայց երևի արդեն Հունվար ամսվա մեջ

5. 

   a

   24 января 2012 г. в 21:26

   axper et kode manem galis cem karum gtnem inch dev grem menak shut kpatasxanes

6. 

   Հայկ Գրիգորյան

   25 января 2012 г. в 01:33

   Ման արի կոդի միայն առաջի երկու տողը, եթե չգտնես փորձի մենակ առաջին տողը...կարողա կոդը մի քիչ ուրիշ տեսք ունենա

7. 

   Առաքելյան Արտյոմ

   4 февраля 2012 г. в 23:54

   axper xia kardal avelin kwchak@ nyuti verjum berum

8. 

   Հայկ Գրիգորյան

   5 февраля 2012 г. в 03:38

   Բացի կոճակը տեղադրելուց, պետք է նաև բլոգում նյութ գրելուց, միացնել Կարդալ Ավելին կոճակը ....իսկ եթե դա էլ էս արել ու նորից չի եղել ուրեմն ինչ որ բան սխալ էս արել...

9. 

   Առաքելյան Արտյոմ

   5 февраля 2012 г. в 11:59

   blogis anun@ asem mi har mti nayi

10. 

    Հայկ Գրիգորյան

    6 февраля 2012 г. в 01:46

    Ասա կնայեմ...

11. 

    Գեորգի Սարգսյան

    20 мая 2012 г. в 06:14

    axpers ba heto vonc jnjenq jnjeci bayc hima vapshem cuyc chi talis vochmiban

12. 

    PARON

    11 июня 2012 г. в 01:21

    axper karas ases guyn@ vonc poxem SEV?

13. 

    MR.Blogger

    20 июня 2012 г. в 06:43

    @PARONԿարդա Ֆեյսբուքի կոմենտները

14. 

    Arsen Toneyan

    30 июля 2012 г. в 00:24

    Hayk jan im@ vor anumem nmanatip hodvacneri nerqevum e linum vonc anem vor verevum lini nmanatip hodvacneri?

15. 

    MR.Blogger

    30 июля 2012 г. в 05:48

    @Arsen Toneyan-փորձի նմանատիպ հոդվածների կոդը տեղադրել նշված կոդի ներքևում

16. 

    Էդմոն Մանուկյան

    5 февраля 2013 г. в 10:43

    AXPER ESI NYUTI VERJUMA DNUM VONC ANEM?
    

Leave comment