Pages

Ads 468x60px

Friday, October 23, 2015

Google followers widget code

<div align='center'>
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/b/114523714696857382263/114523714696857382263" data-source="blogger:blog:followers" data-width="200"></div>
</div>
Read more ...

Monday, June 22, 2015

Add a pencil under your post for quickedit.


quickedit pencil
Press Cntrl+F and look for photo floats.

You will find something like this.
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

You might find this multiple time.Find the last one.Right above the div tag add the following code.

<!-- quickedit pencil -->
<b:include data="post" name="postQuickEdit">
</b:include>
<div class="postQuickEdit">
<!--end of quickedit pencil -->

Read more ...

Thursday, July 31, 2014

SOLVED:'TEMPLATE ERROR: Invalid data reference post.canonicalurl: No dictionary named: 'post' in: ['blog', 'skin', 'view'] '

This error appeared on every individual post after adding facebook comments.

What was causing this was the facebook comments appearing twice in my xml.

<fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='600'/>

As well as...

<div class='fb-comments' data-type='button' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' locale='el_GR' width='600'/>

And this was causing a conflict.

So I removed the fb:comments and -problem solved.
Read more ...

SOLVED: links not clickable when inside position:absolute of position:fixed div

I used to have this problem a lot.Links could not be clicked.I've done a lot of reading around the net-many saying it is a z-index problem and I should change its' value to z-index:1 or z-index:-111,etc.None of this worked.

Finally I found a very simple solution that works.It was a 'left' problem set to 100% in my css.What I did was change the 'left' setting changing that to a percentage and added a margin-left in pixels.Width or right should also be set to a percentage.

This is what my code looked like.
#yourcss{
left:555px;}

I changed that to a percentage- 50% and then set a margin-left.
#yourcss{
left:50%
margin-left:505px;
}

And that was hit the spot!!
Read more ...

Wednesday, May 14, 2014

Cannot access google apps admin panel.

You are logged in your google account but you cannot access your google apps admin panel.In most probability your google apps account is connected with another email account which looks like this

myname@yoursite.com

Here is a quick fix for this problem.Just replace the 'your_site's_url' part with your site's url and you are good to go.After fillin in the catptch code you will recieve an email for Google with a link to reset password.

https://admin.google.com/your_site's_url/ForgotAdminAccountInfo

Read more ...

Saturday, April 12, 2014

code box in html







dddd



Read more ...

Friday, April 11, 2014

clickable map


Take a look at the image below.It is clickable!Play around a little bit.





Gredece




Germany


France


Italy


England





You need this piece of code to create an image like the one above.


First copy this code and add it into you head section.
<!--map highlight-->
<script src='https://dl.dropboxusercontent.com/s/e72eyj3cqi1yf1i/wz_jsgraphics.js' type='text/javascript'/>
<script src='https://dl.dropboxusercontent.com/s/m5f0lfhltt2jgr9/mapper.js' type='text/javascript'/>
<!--end of map highlight-->


Then the html part.
<div>
<img alt="" border="0" class="mapper" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw1YxGQgFv4UKegqqeHDRdGzvVhIqbVB2XSvwsiwN8X9dBdWD9Jn37_t5FmcpAP1iYjOMlsB1vskRbuDjSEF0Z6YbhcpBqnQGb3c2K2ZfMdb7-9BRnk_5zoXP42g6cJfToSk5Y9vBa7os/s1600/EUROPE3.png" height="600" id="Image-Maps-Com-image-maps-2014-04-11-062518" orgheight="600" orgwidth="720" usemap="#image-maps-2014-04-11-062518" width="720" />
<map id="ImageMapsCom-image-maps-2014-04-11-062518" name="image-maps-2014-04-11-062518">


<!--Greece-->
<area alt="Greece" coords="448,473.14288330078125,444,468.14288330078125,438,476.14288330078125,432,479.14288330078125,424,476.14288330078125,418,476.14288330078125,413,482.14288330078125,409,484.14288330078125,404,485.14288330078125,401,488.14288330078125,396,489.14288330078125,392,494.14288330078125,387,494.14288330078125,385,499.14288330078125,382,505.14288330078125,379,512.1428833007812,377,516.1428833007812,373,513.1428833007812,372,517.1428833007812,379,524.1428833007812,385,522.1428833007812,385,531.1428833007812,382,538.1428833007812,389,543.1428833007812,406,557.1428833007812,420,562.1428833007812,426,566.1428833007812,431,576.1428833007812,440.14286041259766,576.1428833007812,441.14286041259766,584.1428833007812,453.14286041259766,577.1428833007812,459.14286041259766,574.1428833007812,466.14286041259766,574.1428833007812,468.14286041259766,568.1428833007812,479.14286041259766,562.1428833007812,486.14286041259766,552.1428833007812,489.14286041259766,545.1428833007812,484.14286041259766,542.1428833007812,476.14286041259766,546.1428833007812,469.14286041259766,544.1428833007812,459.14286041259766,531.1428833007812,454.14286041259766,520.1428833007812,453.14286041259766,517.1428833007812,452.14286041259766,509.14288330078125,455.14286041259766,508.14288330078125,449.14286041259766,505.14288330078125,440.14286041259766,501.14288330078125,439.14286041259766,492.14288330078125,440.14286041259766,490.14288330078125,440.14286041259766,488.14288330078125" href="http://www.glossesweb.com/2011/06/oi-dialektoi-thw-ellhnikhs.html" shape="poly" style="outline: none;" target="_self" title="Greece"></area>


<!--Germany-->
<area alt="Germany" coords="239,286,241,295,241,302,237,305,229,306,224,312,224,321,223,324,222,333,216,335,215,342,211,350,215,360,216,367,220,376,232,379,230,392,228,398,237,401,242,400,253,404,265,403,272,401,281,398,287,394,293,383,283,372,280,358,286,353,293,351,303,350,304,344,302,334,298,323,297,320,294,310,294,300,285,296,285,290,275,295,266,300,265,292,260,296,253,290,248,287" href="http://www.glossesweb.com/2011/08/germanikh-glwssa.html" shape="poly" style="outline: none;" target="_self" title="Germany"></area>

<!--France-->
<area  alt="France" title="France" href="http://www.glossesweb.com/2011/10/gallikh-glwssa.html" shape="poly" coords="227,400,231,384,235,378,222,373,210,365,205,364,197,358,188,349,181,342,171,343,168,355,157,361,154,363,145,365,141,358,132,359,134,373,123,372,117,367,107,372,101,379,112,387,122,396,131,415,128,436,121,454,131,467,144,471,156,474,165,481,177,479,179,468,188,464,201,469,214,469,224,464,229,454,222,447,222,440,219,434,223,423,216,416,211,420,215,411" style="outline:none;" target="_self"     />

<!--Italy-->
<area  alt="Italy" title="Italy" href="http://www.glossesweb.com/2011/04/italian.html" shape="poly" coords="250,500,241,501,236,505,231,506,236,519,232,534,243,536,248,532,287,556,304,565,320,569,324,562,324,549,335,542,339,536,346,532,347,520,338,512,341,507,353,513,359,509,349,501,334,495,325,489,324,483,313,481,300,469,294,457,283,448,284,437,284,431,294,428,292,418,292,413,276,408,267,413,260,417,251,420,245,426,235,420,227,426,222,427,221,435,216,439,220,451,231,460,238,453,245,452,256,457,259,471,257,475" style="outline:none;" target="_self"     />

<!--England-->
<area  alt="England" title="England" href="http://www.glossesweb.com/2011/10/ekmathsh-agglikwn.html" shape="poly" coords="169,189,161,195,147,210,144,218,133,219,121,218,108,227,106,237,111,257,108,267,98,273,95,283,105,283,114,283,120,288,121,302,118,313,110,321,123,331,112,335,99,346,110,347,119,349,124,343,137,346,149,347,161,347,170,342,171,336,167,332,172,326,178,319,173,310,164,305,162,291,154,280,152,266,145,257,152,247,155,235,147,233,139,230,149,224,155,213,166,201,170,194" style="outline:none;" target="_self"     />

</map>
</div>

Orange is the Url of your main image.Yellow are the coordinates and green is target url.

Where to get the coordinates.
The coordinates are of this form coords='x1,y1,x2,y2,x3,y3...'

Now where can one get the coordinates of a shape.

You can do that either manually with Paint by placing the cursor where you want and marking the coordinates.Repeat process until you get all of them.That way requires painstaking work.

The second way is by using a programm such as Photoshop or doing it online is websites like this.

Read more ...

Monday, March 31, 2014

Fixed ad bar with close button!

This piece of code will create a fixed place for your ad with a close button!

<script type="text/javascript">
//<![CDATA[
function closeTopAds() {document.getElementById("exebar").style.display = "none";}
//]]>
</script>
<style>
#exebar{
background: #7d7e7d; /* Old browsers */
/* IE9 SVG, needs conditional override of &#39;filter&#39; to &#39;none&#39; */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkN2U3ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZTBlMGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, transparent 0%, transparent 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,transparent), color-stop(100%,transparent)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, transparent 0%,transparent 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, transparent 0%,transparent 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, transparent 0%,transparent 100%); /* IE10+ */
background: linear-gradient(top, transparent 0%,transparent 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;transparent&#39;, endColorstr=&#39;transparent&#39;,GradientType=0 ); /* IE6-8 */
text-align:center;

position:fixed;
top:10px;
left:50%;
margin-left:505px;
width:160px;
height:100%;
border-bottom: 1px solid transparent;
height: 890px;
position:fixed;
line-height: 2.2em;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: arial,&quot;Helvetica&quot;,sans-serif;
z-index:999
 }
#exebar a{color:#eeff00;text-decoration:none;}
#exebar a:hover{text-decoration:underline;}
  </style>
<!-- This Is A Copyrighted "EXE Top Fixed Bar" Widget, Don't Try To Theft It Otherwise... -->

<div id="exebar">
<!--adsense bar right-->

Your ad code here.

<span onclick="closeTopAds();return false;" style="color: red; padding: 0px;">X</span>

</div>
<!-- This Is A Copyrighted "EXE Top Fixed Bar" Widget, Don't Try To Steal It Otherwise... -->


No ,you got to get the bar in the right place.To do that just increase or decrease the value in green for width in red for height.


Read more ...

Tuesday, March 25, 2014

big facebook share button

This piece of code creates huge share buttons on facebook like the one below.



1st part
First put this code in the head section of your template.

<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=567348686666720";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
2nd part
Then this piece in your body section.I have noticed that if I put the css (the code between the style tags) in the skin section this causes problem with the comments box.I have no idea why.



<div id='fb-root'/>
<style>
  .fb-share-button
{
transform: scale(3.5);
-ms-transform: scale(3.5);
-webkit-transform: scale(3.5);
-o-transform: scale(3.5);
-moz-transform: scale(3.5);
transform-origin: top left;
-ms-transform-origin: top left;
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
-webkit-transform-origin: top left;
}
  </style>
3rd part
The third part goes to where ever you want your button to appear.You can put the second and third at the same place.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb-share-button' data-type='button' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id'>
</div>
</b:if>
Tweaking
Change the numbers in pink for size.
The code in yellow changes the language of your button.


Known issues.
If you already got a facebook comments box in your blog this conlifcts with your big share/like button it may not show at all.A solution that works for me is to leave out the <script> part and the<div id='fb-root'>.This code already exists in the comments code so you don't need to paste it twice.
Read more ...

Sunday, March 23, 2014







  •  



"Caps Lock" is on


  •  
    ё
     

  •  
    1
     

  •  
    2
     

  •  
    3
     

  •  
    4
     

  •  
    5
     

  •  
    6
     

  •  
    7
     

  •  
    8
     

  •  
    9
     

  •  
    0
     

  •  

     

     

  •  
    й
     

  •  
    ц
     

  •  
    у
     

  •  
    к
     

  •  
    е
     

  •  
    н
     

  •  
    г
     

  •  
    ш
     

  •  
    щ
     

  •  
    з
     

  •  
    х
     

  •  
    ъ
     

  •  
    ф
     

  •  
    ы
     

  •  
    в
     

  •  
    а
     

  •  
    п
     

  •  
    р
     

  •  
    о
     

  •  
    л
     

  •  
    д
     

  •  
    ж
     

  •  
    э
     

  •  

     

     

  •  
    я
     

  •  
    ч
     

  •  
    с
     

  •  
    м
     

  •  
    и
     

  •  
    т
     

  •  
    ь
     

  •  
    б
     

  •  
    ю
     

  •  
    .
     

  •  

     

     

  •  
     
     
Read more ...

Friday, March 14, 2014

Simplest way to add soundtrack to video file (ffmpeg)

Avidemux is a great program to process video but when it comes to sound it just sucks big time.I recently wanted to add a soundtrack to a video file.I struggled for hours,read extensively in various sites,tried every possible settings combination, but to no avail.Nothing worked.So I decided to give it a try with ffmpeg.

I am not a big fan of ffmpeg because it has tons of settings and commands you can need to learn and I wouldn't know what to do with most of them.So,I tried to find a command as simple as possible to join a soundtrack with a video file.And this what I came up with:

sudo ffmpeg -i videofile.avi vcodec copy acodec copy soundfile.mp3 output.avi

And that worked like a charm!

explanation of commands.
-i stands for input
vcodec is the video codec
acodec is the audio codec

Maybe it's time to switch to ffmpeg or so it seems.
Read more ...

Wednesday, October 30, 2013

custom fonts with css (@face-fonts command)




Want to embed your own fonts in your site to give it style or auto-load custom fonts for some exotic language?You can do that using css with the @font-face command.

In your <b:skin><b:/skin> section add the following code.


<!--custom fonts-->
<style>
@font-face
{font-family: segoe script;
src:url('http://dl.dropboxusercontent.com/s/8sao0jcc1o6fjso/ufonts.com_segoe_script.ttf');}

p.segoe {
font-family:segoe script;
}
</style>
<!--end of custom fonts-->


Replace segoe script with the name of your font and the url in purple with your url with the custom font.Dropbox is a very good place to upload your custom font.Other hosts may give you hard time with the custom font not displaying correctly.
  
Next add this code whereever you want the text to appear in your custom font.

<p class='segoe'>your text here</p>

Now ,whenever you open a <p class='segoe'></p> tag in your posts your custom font will load automatically within your tag.

Here is what my custom font looks like:

Segoe script custom fonts!


Taking it further
The same goes for all other tags like h1,h2,b  and so on.Instead of p.segoe you can define a b.segoe or a h1.segoe and call it with class='segoe'>

You can even create your tags.For example in this page of mine,I wanted to preload fonts for the coptic language so that the visitor does not have to install them on his/her computer.

So I came up with the <cpt> </cpt>.You can use any name you like for tag ,just make sure it does not exist already in html or the language you are coding in.

Then the code will look like this

<style>
@font-face
{font-family: name of your font;
src: url(http://mycopticfonturl.ttf);}

cpt {
font-family:name of my coptic font, Helvetica, Arial, sans-serif;
}
</style>

Now whenever I want to auto-load coptic text in my post I just put it between my new made cpt tags

<cpt>your text</cpt>


Read more ...

Monday, October 14, 2013

the simplest html document

Hello,today I will show how a basic html document should appear.First we got the document type (doctype) then the <html> tag followed by the <body> tag.At the end you need to close these tags using the / symbol.

<!DOCTYPE html>

<html>
<body>

<h1>heading</h1>
<h2> secondary heading</h2>
<p>paragraph.</p>

</body>
</html>
Read more ...

How to color your table cells.

If you are making an html table you might want to use different colours for individual cells.
 
Cell 1Cell 2
Cell 3Cell 4

So,you may want to paint one of your cells green.Like this.

Cell 1 Cell 2
Cell 3 Cell 4

That's easy to do using html.All you have to do is to insert the bgcolor attribute within the <td> tag,like this:

<td bgcolor='green'>

Read also
how to make a table using html.
Read more ...

Wednesday, October 9, 2013

How to create a simple hyperlink.

You might wander how to create a simple link to another document or a link to a position in the same page.This is called a hyperlink.The link can be text or image.

Here is the code for a simple text link.
<a href="url">Link text</a>

You can make a link to a position in the same document by using id.
<a id="top">top</a>
<a href="#top">go back on top</a>


And here is the code for an image link.
<a href="your url">
<img src="yourimage.gif" width="32" height="32"></a>

Read more ...

Monday, October 7, 2013

Creating simple headings with html

We continue with our short lessons of learning html with the headings tag.

You can easily create headings using the 'h' tag.You can use <h1> to <h6>.<h1>  is the biggest of them in size while <6> is the smallest.

Here is the code:

<h1>Hello</h1>
<h2>Hello 2</h2>
<h3>Hello 3</h3>
<h4>Hello 4</h4>
<h5>Hello 5</h5>
<h6>Hello 6</h6>

And this is the result using this code.


Read more ...

Saturday, October 5, 2013

Why learn html?

You might wonder why should you learn html coding.Because it can be very handy ,especially if you 're into making your own site,blogging etc.

Knowing some html will allow you to tweek your blog and correct some stuff that otherwise might be very annoying to you or your visitor.

For example you got a counter for your site that appears always on the left of the page looking completely out of place.You have no idea what to do to correct this and you do not to hire someone for such a simple task.Html is the answer.It will

Another important reason to learn Html is that it is rather easy to learn this clanguage in comparison with others.

To programm in html no editor is needed.A simple text editor will do.In many platforms such as blogger the text editor is not needed ,too.It comes with blogger.
Read more ...

How to make a table using html

Tables can be very useful in your site.For example you want to put to ads one next to each other.That can be easily done with the
tag.

<table>
<tbody>
<tr><td>1</td><td>2</td></tr>
<tr><td>2</td><td>3</td></tr>
</tbody>
</body>

The <td> s are lines and the<td>s are positioned within the same line. So if you want to put two ads next to each other just put the code of the first ad between <td>1</td> replacing the 1 with your code.For the second ad do the same replacing 2 with your code.

You can increase the number of the lines by adding <td></td> and the number of cells in each line using more <td></td> tags.
Read more ...

How to align text/image/table or anything else on your page.

Hello,today we will learn html,nothing completicated ,just a simple way to align anything on your page left,right or in the center. To do that you will need a div tag and the command align.Let's take a look.

<div align='center'> Your text/image to be aligned here. </div>
Aligning a table can be a little tricky.You should not use a div tag in this case but you should put the align command within the tag
<table align='left'> .... Your table here .... </table>
You can put left or right in place of center. And that's about it.
Read more ...
 

Sample text

Sample Text