Blogger трикове

От: От: Blogger трикове

Здравейте!

Не мога да намеря как да променя адресите на етикетите? В момента излизат така: styleoflifebg.blogspot.com/search/label/%D0%BA%D0%B8%D0%BD%D0%BE/

Ако искаш да премахнеш "%D0%BA%D0%B8%D0%BD%D0%BE/" от адреса, можеш да редиректнеш към нов адрес с името на етикета с латински букви.
 
От: Blogger трикове

Как да добавим адсенс реклами в края на всяка статия.

Създаваме си резервно копие на шаблона, за всеки случай!
Влизате в блоггър, в меню шаблон на блога ви и отваряте хтмл кода.
Намирате следното:
HTML:
post-header-line-1
при мен излизат два реда с това име, поставих кода под втория ред. След като сме вече на този ред, скролваме леко надолу и под този ред
HTML:
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
поставяме следният код.
HTML:
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div style='float:left'>
<--- Вашият адсенс код тук --->
</div>
</b:if>
Запазваме шаблона и сме готови!
 
От: Blogger трикове

Пуснах афилиейт към Грабо и искам да сложа wallpaper banner в blogger. Ще ме упътите ли как да сложа кода и от кое меню?
 
От: Blogger трикове

Винаги съм мразил при създаването на нова страница, да ми излиза фуутера, характерен за публикациите.
Ето как да премахнем фуутера от статичните страници на блоггър.

Стъпка 1: Правим резервно копие и влизаме в кода на шаблона.
Стъкпа 2: Намираме
HTML:
]]></b:skin>

и директно под него постваме следният код

HTML:
<b:if cond='data:blog.pageType == "static_page"'>
<style>
.post-footer{
display: none;
}
</style>
</b:if>

Стъпка 3: Запазваме.

Три прости стъпки и досадният фуутер, вече го няма в статичните страници, като "Контакти", "За мен" и прочие. :)

П.С: @tedkata_m, имаш ли още нужда от помощ?
 
От: Blogger трикове

Много полезна информация.Благодаря на всички за перфектните примери :D:D
 
От: Blogger трикове

За нищо, темата е за това. Наистина тук има доста полезни работи, а само да допълня, че последният ми пост тук за премахването на фуутъра важи само за декстоп версията. При мобилната версия си има фуутър, трябва да видя да го разкарам и него.

Лека вечер. Ако имаш въпроси пиши в раздела. :)
 
Съживявам темата с нещо полезно за блогър - от може би година и повече, всички български блогове в blogspot редиректват към българската версия - blogspot.bg. Това води до следните проблеми:

- дублирано съдържание, тъй като блогът ви се индексира както на blogspot.com, така и на blogspot.bg.
- по слаб авторитет на blogspot.bg в сравнение с blogspot.com - като ще ползвате поддомейн, нека да с максимална тежест
- ако вече имате изградени линкове към стария адрес на сайта си (blogspot.com) след редиректа към blogspot.bg губите част от тяхната тежест, тъй като не са директни линкове
- по мои наблюдения почти всички резултати, които се класират в България са с индексирана .com версия, т.е при всяко отваряне на сайта се изпълнява редирект към .bg версията, което бави сайта и е дразнещо дори за самите потребители.

Ето и решението на този проблем с няколко реда код:

Код:
<script type='text/javascript'>
  /* Get the full URL of the current blogger page */
  var blog = document.location.href.toLowerCase();

  /* Do not redirect if the domain is .com already */
  if (!blog.match(/\.blogspot\.com/)) {

    /* Replace the country TLD with .com and ncr switch */
    blog = blog.replace(/\.blogspot\..*?\//, &quot;.blogspot.com/ncr/&quot;);

    /* Redirect to the new .com URL in the current tab */
    window.location.replace(blog);
  }
</script>

Кодът го слагате след <head> тага (в началото на темплейта).
 
Как да променим дизайна на коментарите в блогър.

Преди промяната
koments.png


След промяната
koments%2Bsled.png


Направете си резервно копие и влезте в контролния панел. Отидете на шаблон, изберете редактиране на хтмл кода, намерете ]]></b:skin> и преди него сложете следния код:

Код:
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#eb1e1e}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #eb1e1e;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#eb1e1e}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px;}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(http://techprevue.com/wp-content/uploads/2013/07/red-author.png);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:100%!important}
.comment-form{width:100%;max-width:100%}

Запазете промените и честито, вече имате нова визия на показваните коментари!

Как да правим промени по стила на коментарите?

- За да промените цветовата схема, поставете избраният от вас код на мястото на сегашния #eb1e1e, които може да намерите в кода с търсачката ctlr+f.

- За да направите аватарите кръгли, добавете на нов ред най-отдолу към кода:
Код:
.comments .avatar-image-container{border-radius: 50%;}

Ако искате различна от сегашната значка за автор, може да си изберете друга от тук >>> http://www.iliqnktz.com/2017/01/blogger.html значките съм ги поставил накрая на статията!
 
Последно редактирано:
Да възродя малко темата с нещо от кухнята. Смених темата и какво да видя в мобилната версия нямало меню страници, защото някой не е дописал или направо си е оставил ръцете, с две думи псувах доста. За всички, които са с респонсибъл теми (на всички устройства да се показва симетрично и т.н, предполагам всеки знае) на блогър и решат, че ще им е от полза да заповядат, а ако някой оптимизира още нещата, ще стане още по-добре.

Така да започваме!

Меню страници за мобилни теми на блогър (работи само за ваши теми, фабричните предлагани от блогър не могат да се редактират).

Правите си нов widget (джаджа) и слагате вътре следният код:

Код:
<select name="formal1" id="menumobile1" onchange="javascript:handleSelect(this)">
 <option style="display:none" />Меню
<optgroup label="Страници">
<option value="http://blogspot.com/" />Начална страница
<option value="http://blogspot.com/" />Страница 2
<option value="http://blogspot.com/" />Страница 3</optgroup>
<optgroup label="Страници категория 2">
<option value="http://blogspot.com/" />RSS абонамент
<option value="http://blogspot.com/" />Google+ профил
</optgroup></select>

<script type="text/javascript">
function handleSelect(elm)
{
window.location = elm.value+"";
}
</script>

Ако не се нуждаете от категории, изтрийте <optgroup label="Страници"> и <optgroup label="Страници категория 2"> и затварящите към тях два броя </optgroup>. За добавяне на още страници, просто добавете още редове и променете хипервръзките и имената срещу тях.

Направете си резервно копие и влезте в контролния панел. Отидете на шаблон, изберете редактиране на хтмл кода, намерете ]]></b:skin> и преди него сложете следния код:

Код:
#menumobile1 {display:none}
#menumobile1{width:100%; height:30px; font-size:14px;}

Така в десктоп версията на блога ви няма да се показва мобилното меню. Големината за самото меню е width:100% широчина и height:30px височина, а font-size:14px е големината на текста, променяйте ги по ваш вкус.

След като запазите промените, намерете в хтмл кода ви

Код:
@media only screen

и изберете за кои устройства да се показва менюто като поставите следният код точно под избраната от вас медия:

Код:
#menumobile1 {display:block;}

Аз съм избрал

Код:
@Media only screen and (max-width: 559px)

с максимална широчина от 559px, а за по-големи устройства работи десктоп менюто, което седи прилично.

Поздрави!
 
Последно редактирано:

Горе