Magnolia: blogsablon

Blogsablon kisokos #2

<center>
</center>
<center>
</center>
<div style="text-align: left;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg20JLPucLFgTmTlKLAjuaUq17BMDdYKy-YlZ00G3KYNjASgEqdFLQc8bUV-BC-C5xP0_tARdldP-W_FxmIteufXQ9A-qsfDw9G93mqibcKhw60skar158R1WxihM7cJxUSUN9_ds_nyE/s1600/2014011103.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg20JLPucLFgTmTlKLAjuaUq17BMDdYKy-YlZ00G3KYNjASgEqdFLQc8bUV-BC-C5xP0_tARdldP-W_FxmIteufXQ9A-qsfDw9G93mqibcKhw60skar158R1WxihM7cJxUSUN9_ds_nyE/s1600/2014011103.png" /></a></div>
Az új design kialakítása közben sokat gondolkodtam mi lehet az, amit talán kevesebben tudnak a blogsablonok beállításáról.<br />
Ami sok mindenkit érdekelne, de nem tudni hogyan is kell alkalmazni, így végül a <b>Tovább olvasom... </b>(azaz a Read more <span style="font-size: small;">>></span>) mellett döntöttem. <br />
<br />
A legegyszerűbb módja a fenti szerkesztőben lévő <b>'Ugrás beszúrása'</b> (a videoklip beszúrása mellett), de ezt egy idő után már megunja az ember. Most leírom, hogy lehet az összes bejegyzésre alkalmazni az <b>automatikus Tovább olvasom... </b>gombot.<br />
Nagyon egyszerű, ne ijedjetek meg tőle :)<br />
<br />
<br />
<u><b>1. lépés:</b></u><br />
Sablon > HTML-kód szerkesztése <br />
<br />
<u><b>2. lépés:</b></u><br />
Keresd meg az alábbi sort a sablonban (CTRL+F)<span style="color: #3d85c6;">:</span><br />
<br />
<span style="color: #3d85c6;"><data:post.body/></span><br />
<br />
Ez többször is szerepel benne, nekünk a <b>második</b> találat kell!<br />
<br />
<u><b>3. lépés:</b></u><br />
Cseréld ki erre a kódra:<span style="color: #3d85c6;"> </span><br />
<br />
<span style="color: #3d85c6;"><b:if cond='data:blog.pageType != &quot;item&quot;'> </span><br />
<span style="color: #3d85c6;"><b:if cond='data:blog.pageType != &quot;static_page&quot;'> </span><br />
<span style="color: #3d85c6;"><div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div> </span><br />
<span style="color: #3d85c6;"><script type='text/<span class="IL_AD" id="IL_AD1">javascript</span>'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script></span><br />
<span style="color: #3d85c6;"><span class='readmore' style='float:right'><a 
expr:href='data:post.url'>Tovább olvasom... 
&#187;</a></span></b:if></b:if></span><br />
<span style="color: #3d85c6;"><b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if> </span><br />
<span style="color: #3d85c6;"><b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if> </span></div>
<div style="text-align: left;">
</div>
<div style="text-align: left;">
<br />
<u><b>4. lépés:</b></u></div>
<div style="text-align: left;">
Most az alábbi kódot keresd meg:</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="color: #3d85c6;"></head></span></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<u><b>5. lépés:</b></u></div>
<div style="text-align: left;">
Másold be a </head> tag elé az alábbi részt:</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="color: #3d85c6;"><script type='text/javascript'><br />
posts_no_thumb_sum = <span style="color: #990000;"><b>490</b>;</span><br />
posts_thumb_sum = <span style="color: #990000;"><b>400</b>;</span><br />
img_thumb_height = <span style="color: #6aa84f;"><b>120</b>;</span><br />
img_thumb_width = <span style="color: #6aa84f;"><b>120</b>;</span><br />
</script><br />
<script type='text/javascript'><br />
//<![CDATA[<br />
function removeHtmlTag(strx,chop){<br />
if(strx.indexOf("<")!=-1)<br />
{<br />
var s = strx.split("<");<br />
for(var i=0;i<s.length;i++){<br />
if(s[i].indexOf(">")!=-1){<br />
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);<br />
}<br />
}<br />
strx = s.join("");<br />
}<br />
chop = (chop < strx.length-1) ? chop : strx.length-2;<br />
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;<br />
strx = strx.substring(0,chop-1);<br />
return strx+'...';<br />
}<br />
function createSummaryAndThumb(pID){<br />
var div = document.getElementById(pID);<br />
var imgtag = "";<br />
var img = div.getElementsByTagName("img");<br />
var summ = posts_no_thumb_sum;<br />
if(img.length>=1) {<br />
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 
5px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" 
height="'+img_thumb_height+'px"/></span>';<br />
summ = posts_thumb_sum;<br />
}<br />
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';<br />
div.innerHTML = summary;<br />
}<br />
//]]><br />
</script></span></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<u><b>Megjegyzés:</b></u></div>
<div style="text-align: left;">
A <span style="color: #6aa84f;"><b>ZÖLD</b></span> számok a főoldalon megjelenő miniatűr képre vonatkoznak majd. A <b>height</b> a magasságot, míg a <b>width</b> a szélesség adatait jelenti. A <span style="color: #990000;"><b>PIROS</b></span> számok pedig a szövegre vonatkoznak, ezen lehet állítgatni tetszés szerint.<br />
<br />
Én ezen a blogon az alábbi méreteket használom:<br />
posts_thumb_sum = 600;<br />
img_thumb_height = 200;<br />
img_thumb_width = 140;</div>
<div style="text-align: left;">
</div>
<div style="text-align: left;">
<br />
<u><b>6. lépés:</b></u></div>
<div style="text-align: left;">
Sablon mentés. </div>
<div style="text-align: center;">
Kész is! :)</div>
<center>
</center>
<center>
</center>
<center>
<img alt="post signature" class="left" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_NBLmzAkKEbwFy4t4V2v31wd_OTtqZOAM1CODfumAX4b7Wop9hiyBt6SGKb_FOX-mjcIDPUItMTGX1bi766n6zgFVtYbOSSVHKrW98T68Uioyjzfr4ymBxo9UsijoGI02jk9-gAjh5fpv/w425-h50/" /></center>

Az új design kialakítása közben sokat gondolkodtam mi lehet az, amit talán kevesebben tudnak a blogsablonok beállításáról. Ami sok m...

Tovább olvasom...»

Blogsablon kisokos

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRI_x_ApHBaMcnkM9SAU15MOGMJLNwjSfePqA7QQPAEvecrqooAxLbGnZonqXWH8R4C4Ja_hag2jVyHlMpIBXA0b_CDql-dese-1a3jFku4RCNaLFoPyUhPYiqzG8qJhGGAcP_KupIeMk/s1600/2014011104.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRI_x_ApHBaMcnkM9SAU15MOGMJLNwjSfePqA7QQPAEvecrqooAxLbGnZonqXWH8R4C4Ja_hag2jVyHlMpIBXA0b_CDql-dese-1a3jFku4RCNaLFoPyUhPYiqzG8qJhGGAcP_KupIeMk/s1600/2014011104.png" /></a></div>
Ha ti az tudnátok, hogy milyen régóta terveztem már ezt a bejegyzést, el sem hinnétek! :) Összegyűjtöttem Nektek (és persze magamnak) egy kupacba azokat az oldalakat, amiket rendszeresen látogatok a blogsablonok miatt. <br />
Olyan vagyok a blog kinézetét illetően, mint az időjárás: igencsak változékony. Akik rendszeresen olvasnak, vagy csak idelátogatnak ezt már régóta tudják. Ennek roppant egyszerű az oka, még keresem az igazit ;) Mivel mi bloggerek szeretünk a kinézetre is adni, ezért összeszedtem tíz nagyobb oldalt, ahol előszeretettel csemegézek az ingyenes sablonok közt. Sok hasonló poszt van a neten, de miért pont én maradnék ki a sorból? :P<br />
Remélem lesz olyan blogger, aki hasznát veszi majd ennek a pár oldalnak:<br />
<div style="text-align: center;">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjel49xgDKxy33Ss1mvbSTE4q4bncayUfvXaStSOTLbj3-5j4WHQCO-Va1zpsg_xhZen5Ht8ygMlZZz0XtTNDdC4qU-lsfuXxHiUXFGWNLr44aVk3QVhNdYK_JB6AASN-0Q-MwIH-TWFZk/s1600/bt001.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjel49xgDKxy33Ss1mvbSTE4q4bncayUfvXaStSOTLbj3-5j4WHQCO-Va1zpsg_xhZen5Ht8ygMlZZz0XtTNDdC4qU-lsfuXxHiUXFGWNLr44aVk3QVhNdYK_JB6AASN-0Q-MwIH-TWFZk/s1600/bt001.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.lovelytemplates.com/" target="_blank">Lovely Templates</a> </div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioi_Yhexl5Q1hNbv1nQVYUezD1hxx3MDQWz3ruwYHlneuiZIbU1CJ8cdm-7ezQnCDDQFHF3F97JJiXX0HUb8UNvh1sPEHj_NcvGNrWdL7tldyWLVQ1MhGCgZN7kRP-xziX7P9TlFSrG3k/s1600/bt002.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioi_Yhexl5Q1hNbv1nQVYUezD1hxx3MDQWz3ruwYHlneuiZIbU1CJ8cdm-7ezQnCDDQFHF3F97JJiXX0HUb8UNvh1sPEHj_NcvGNrWdL7tldyWLVQ1MhGCgZN7kRP-xziX7P9TlFSrG3k/s1600/bt002.png" /></a></div>
<a href="http://www.premiumbloggertemplates.com/" target="_blank">Premium Blogger Templates</a><br />
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfpYxmeO2RaAKuNC3WLuEcknl5b4zsNjWl0NVRONp9y7h4z0JXNSrpiWEn8JQ1MvKD9qJmptt5pVblNobVHVWIlZYF026tdHlrPa9ZZPewI_-fbJRZAM_eYZC1J8CvsG4al9AgZGr4g7I/s1600/bt003.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfpYxmeO2RaAKuNC3WLuEcknl5b4zsNjWl0NVRONp9y7h4z0JXNSrpiWEn8JQ1MvKD9qJmptt5pVblNobVHVWIlZYF026tdHlrPa9ZZPewI_-fbJRZAM_eYZC1J8CvsG4al9AgZGr4g7I/s1600/bt003.png" /></a></div>
<a href="http://newbloggerthemes.com/" target="_blank">New Blogger Themes</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw9NwwgsrDgEvRIP77LFlhqAKeEJ4mD308eu-ADSokzrYGG2ICEGtb1MkUjflC9g2gSahv6ARRWIrxur_NKKIzgULPt_fadHhe0fDCztXq05BSOI8IYrNzZ0XNyZiC7pbfL1-E92ie9qE/s1600/bt004.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw9NwwgsrDgEvRIP77LFlhqAKeEJ4mD308eu-ADSokzrYGG2ICEGtb1MkUjflC9g2gSahv6ARRWIrxur_NKKIzgULPt_fadHhe0fDCztXq05BSOI8IYrNzZ0XNyZiC7pbfL1-E92ie9qE/s1600/bt004.png" /></a></div>
<a href="http://www.elegantthemes.com/gallery/" target="_blank">Elegant Themes</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyRey-nQOyxBNj4xrucY_UF-IqjWJVLxIiUhaYfoi3hNpFcAU7MAPQKPHFxthgO7IWO1qwuszMwCtU-BuVCro0-HQidUMS5udQIhPXz00cRmBtECL6wWE_lqKPUiy2K21BO13sz-hRNPk/s1600/bt005.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyRey-nQOyxBNj4xrucY_UF-IqjWJVLxIiUhaYfoi3hNpFcAU7MAPQKPHFxthgO7IWO1qwuszMwCtU-BuVCro0-HQidUMS5udQIhPXz00cRmBtECL6wWE_lqKPUiy2K21BO13sz-hRNPk/s1600/bt005.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://themesquirrel.com/themeblog/" target="_blank">Theme Squirrel</a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrqvcXgIFjsO-RzmPrPuGGLvJSaPkKKRnx-MiQUZ1BO_kOZTyxNRKJ2o8LSeJzwfIElTwC28SVkanMudzQU-p1rbPscgJs6X7yXqe9yU9L7BAHOY0ve0OMZL1OjTj0OfEVaI1ZtmRYHjQ/s1600/bt006.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrqvcXgIFjsO-RzmPrPuGGLvJSaPkKKRnx-MiQUZ1BO_kOZTyxNRKJ2o8LSeJzwfIElTwC28SVkanMudzQU-p1rbPscgJs6X7yXqe9yU9L7BAHOY0ve0OMZL1OjTj0OfEVaI1ZtmRYHjQ/s1600/bt006.png" /></a></div>
<a href="http://www.soratemplates.com/" target="_blank">Sora Templetes</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEiXTL2aFOEIARV7M2SlWkwVlRHwteLK_LEUpTrR8p5-6TPdNH0rfcjZskmjhKumMc9rjfdSBtOgtAn0BfRelkpNoK4HPuW3xzDMaOFVIWC-1A3KXDlcblzCh_jIB4J1N13-rfM9TNoO4/s1600/bt007.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEiXTL2aFOEIARV7M2SlWkwVlRHwteLK_LEUpTrR8p5-6TPdNH0rfcjZskmjhKumMc9rjfdSBtOgtAn0BfRelkpNoK4HPuW3xzDMaOFVIWC-1A3KXDlcblzCh_jIB4J1N13-rfM9TNoO4/s1600/bt007.png" /></a></div>
<a href="http://www.fabthemes.com/" target="_blank">Fab Themes</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6SBCuD-aiB11EC6IKgLvmpOw1swHl7k18NNiUGX4mMcP5f8-qrlZ1jaHoI6GYmoIFXeZ9AB67XDaeJrUtuHjZz1b_cf_PwGmr28iKIA22KNEj-SDt4PGkw87GDxpewwQ94_6hScAykho/s1600/bt008.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6SBCuD-aiB11EC6IKgLvmpOw1swHl7k18NNiUGX4mMcP5f8-qrlZ1jaHoI6GYmoIFXeZ9AB67XDaeJrUtuHjZz1b_cf_PwGmr28iKIA22KNEj-SDt4PGkw87GDxpewwQ94_6hScAykho/s1600/bt008.png" /></a></div>
<a href="http://www.ivythemes.com/" target="_blank">Ivy Themes</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0Yw2MZWEsr2um_cjNkzdcwk8wgz4d-YaftyB5OmPOZXFsgm0X13ENRWPrLZTGSNYIuJa0icsBFEPkrJy2DEk_rINF2MVWB218Lz-HSBb89hZaoje9CCI76ritoAQ1PCIkaErFDV-BQ5M/s1600/bt009.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0Yw2MZWEsr2um_cjNkzdcwk8wgz4d-YaftyB5OmPOZXFsgm0X13ENRWPrLZTGSNYIuJa0icsBFEPkrJy2DEk_rINF2MVWB218Lz-HSBb89hZaoje9CCI76ritoAQ1PCIkaErFDV-BQ5M/s1600/bt009.png" /></a></div>
<a href="http://www.coolbthemes.com/" target="_blank">Cool Blogger Themes</a><br />
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyDV13xGW7e-p4umWEFXMch9D0mqR1hR0PWZxwjJUqRpqcReppRsMOkhxw6gIISNMVsCqxD2eZ5NEFjp6yaxSkhyV8Ut2PIRFRnBw8qRS_lFRp1uHu62H6ENAOvSvIULyRPgvCUrBjmnA/s1600/bt010.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyDV13xGW7e-p4umWEFXMch9D0mqR1hR0PWZxwjJUqRpqcReppRsMOkhxw6gIISNMVsCqxD2eZ5NEFjp6yaxSkhyV8Ut2PIRFRnBw8qRS_lFRp1uHu62H6ENAOvSvIULyRPgvCUrBjmnA/s1600/bt010.png" /></a></div>
<div style="text-align: center;">
 <strike>Design Razzi </strike></div>
<div style="text-align: center;">
<br /></div>

Ha ti az tudnátok, hogy milyen régóta terveztem már ezt a bejegyzést, el sem hinnétek! :) Összegyűjtöttem Nektek (és persze magamnak) egy ...

Tovább olvasom...»

Blogsablon kisokos #2

Blogsablon kisokos

Heti kedvencek

Blogarchívum

Címkefelhő