Straight Tips: 2017

Sunday, October 1, 2017

Stretch to Screen Games while in Fullscreen Mode

When Windows Desktop uses the recommend or the highest resolution, most gpu control panels don't show the "Stretch to Screen" image scale option in order to prevent black areas on the screen edges while using applications, such games, in fullscreen mode with low resolutions!

- all you have to do is to change your Windows desktop resolution to a lower resolution

(When you do this, you will notice black areas on your screen edges! If not, lower the resolution even more!)

- Then go to the gpu control panel, and select "Stretch to Screen" in image scale option. (the black areas on your screen edges will go away!)

(if "Stretch to Screen" option is still not available, lower your desktop resolution even more and try again!)

- then change your desktop resolution back to it's recommended or highest resolution

(the gpu control panel may hide "Stretch to Screen" option again, but the option is already saved\enabled! - No need to worry!)

- After that, when you play a video game with low resolutions in fullscreen mode, you will notice no black areas on your screen edges!

Tested with Intel HD Graphics 3000 gpu, some Nvidea and ATI\AMD gpus!

Keywords:
Stretch to Screen Games while in Fullscreen Mode
Gpu Stretch to Screen Image Scale option missing
Graphic Control Panel Stretch to Screen Image Scale option missing
Intel HD Graphics 3000 how to stretch to screen image

Friday, May 26, 2017

jQuery - Load Text from Files into Elements

Load text from files into elements using <Object> tag, jQuery .get() or jQuery .ajax()!

jQuery .get() is easier to use, it is a shorthand to jQuery .ajax()!

- To "set" or "get" the values of form elements such as "input", "select" and "textarea", jQuery ".val()" is recommended over ".text()"!
- for example, in Internet Explorer 10, ".val()" prevents "Line Feed\carriage return" problems caused by ".text()" while setting text into a "textarea" element!

- File from GitHub! (Click Here)

Browsers\Websites\Servers may or not allow jQuery ".get()" or ".ajax()" to access files!

Due to browser security restrictions, most ".ajax()\.get()" requests are subject to the "same origin policy"!

The request can not successfully retrieve data from a different domain, subdomain, port, or protocol.

(Script and JSONP requests are not subject to the same origin policy restrictions. )

Keywords:
jQuery - Load Text from Files into Elements
jQuery .get() - Load Text from Files into Elements
jQuery .ajax() - Load Text from Files into Elements
Html <Object> tag - Load Text from Files into Elements

Monday, May 22, 2017

Blogger - Image Zoom Plugin

First of all, I'm not the one who developed "elevateZoom" plugin! This is the original plugin website! This is the plugin modified version website (elevateZoom Plus)! (I use the modified version, elevateZoom Plus, since it seems to be more up to date!)

elevateZoom is a jQuery plugin, so, it requires jQuery library in order to work! (Tested with jQuery 1.7.0, 1.8.3 and 3.2.1)

Google Blogger and almost all websites nowadays use html 5 doctype declaration, which is, <!DOCTYPE html> ! Just in case, make sure your html code has a doctype declaration in order to allow jQuery to work properly! (<!DOCTYPE html> is the recommended one!)

Step 1 - Load jQuery library into your blog

(If you already use jQuery library in your blog, skip this step!)

Go to the blog layout and add a "HTML/JavaScript" Gadget! Copy and past there the following code:

<!-- Hide Gadget -->
<style> #HTML_Id { display: none; } </style>

<!-- If you don't have jQuery on your website, load jQuery hosted by Google using the code below -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

- This Image shows how to create a Gadget!
- Visit this link to see how to hide any Gadget!

Step 2 - Load "elevateZoom Plus" plugin into your blog

(Note): "elevateZoom Plus" Gadget must be placed below "jQuery" Gadget! (See Image)

Go to the blog layout and add a "HTML/JavaScript" Gadget! Copy and past there the following code:

Note that, by default, the "Screen Mode" zoom effect is applied to all <img> elements in your blog! If you don't want such a behavior, remove the "Default Option" from the code or just choose another option to be used as default option!

You can modify the options to fit your needs, or, add your own custom option if you want! (There is an example in "Step 3" below!)

Mouse Wheel Scroll Zoom In/Out is enabled by default for all the options! (You can turn it off if you want!)

- This Image shows how to create a Gadget!
- Visit this link to see how to hide any Gadget!

Step 3 - How to and Examples

There are basically 2 ways to use this plugin:

Using a Small and Large Image (This is the recommended one):
<img id="elevateZoom Option" src="Small Image Url" data-zoom-image="Large Image Url" />
(Note that, the Small Image must be proportionally scaled down from the Large Image!)

Using only a Large Image (not recommended):
<img id="elevateZoom Option" src="Large Image Url" width="put a number smaller than the Large Image width" />
(Your page load time will increase if you are loading Larger Images)

(Note) Some Blogger Templates automatically add "padding" style to <img> tags, causing some Zoom effect position problems! To fix this problem, include style="padding:0px;" inside the <img> tags!

Default Screen Mode Zoom effect in use!
<img src="Small Image Url" data-zoom-image="Large Image Url" />

Default Screen Mode zoom effect Disabled!

(If a <img> tag "id" attribute contains "ZoomImg_" string, "Default Screen Mode zoom effect" is automatically disabled for that <img> tag)

Disable "Default Screen Mode" and enable "Inside" (Inner) zoom effect!
<img id="ZoomImg_Inside" src="Small Image Url" data-zoom-image="Large Image Url" />

Disable "Default Screen Mode" and enable "Window Right\Up\Down\Left" zoom effect!

Disable "Default Screen Mode" and enable "LensSquare\Round" zoom effect!
<img id="ZoomImg_LensSquare" src="Small Image Url" data-zoom-image="Large Image Url" />
<img id="ZoomImg_LensRound" src="Small Image Url" data-zoom-image="Large Image Url" />

Disable "Default Screen Mode" and enable "Screen" zoom effect!
<img id="ZoomImg_Screen" src="Small Image Url" data-zoom-image="Large Image Url" />

You can disable "Default Screen Mode" and enable your own custom option while editing a post!
(<img> tag must be placed above the <script> code)

<img id="ZoomImg_MyOption" src="Small Image Url" data-zoom-image="Large Image Url" />

<script>

$("img#ZoomImg_MyOption").ezPlus({
zoomType:'lens',
lensShape:'round',
lensSize:200,
borderSize:0,
lensColour:'red',
scrollZoom: true,
});

</script>

If you want to create more advanced custom options, visit the modified elevateZoom Plus website, or, visit the original elevateZoom website which is basically almost the same thing!

Some Extra Files from GitHub!

Keywords:
Blogger - Image Zoom Plugin
Blogger - elevateZoom Plugin
Blogger - elevateZoom Plus Plugin
Blogger - Image Zoom Magnifier
Blogger - Image Zoom Magnifying glass

Thursday, May 18, 2017

jQuery - Get Browser ViewPort Size in Real Time

Your ViewPort size is:

ViewPort size here

Resize window (Width\Height will be updated in Real Time!)

Html Code (from GitHub):
https://github.com/coder4589/jQuery/blob/master/get%20viewport%20size%20in%20Real%20Time%20-%201_%20from%20ViewPort%20(jQuery).html

Keywords:
jQuery - Get Browser ViewPort Size in Real Time

Wednesday, May 3, 2017

GitHub - Render Html Files From Repositories

Github page links are case-sensitive (Example: "Test.html" is not the same as "test.html")

The link to render the "index.html" file is: UserNameHere.github.io/RepositoryNameHere/

The link to render others ".html" files is: UserNameHere.github.io/RepositoryNameHere/HtmlFileNameHere.html

The link to render an ".html" file inside a folder: UserNameHere.github.io/RepositoryNameHere/FolderPathHere/HtmlFileNameHere.html

More examples from GitHub: https://github.com/coder4589/GitHub-Pages

Keywords:
GitHub - Render Html Files From Repositories

Monday, April 24, 2017

JavaScript - Execute JS codes after DOM or Page load

In the most cases, some CSS/JavaScript/jQuery codes require only "DOM" to be completely loaded in order to work properly!

Document Object Model (DOM) load:

- When HTML document has been completely loaded and parsed
- Does not include stylesheets, images, and subframes loads!

Page load:

- When HTML document has been completely loaded and parsed
- Includes stylesheets, images, and subframes loads!

From all the alternatives demonstrated below, "JQuery" is the recommended one because it allows multiple onload calls!

DOM onload - with anonymous functions (jQuery)

Execute anonymous Functions after Document Object Model (DOM) is fully loaded!

<p> P _________________________________________________________________________ </p>

<!-- If you don't have jQuery on your website, load jQuery hosted by Google using the code below -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<p> P0 _________________________________________________________________________ </p>

<script>

/* Instruct jQuery to execute the anonymous function below after DOM is fully loaded */

$(function() {

alert("1");      /* Replace "alert("1");" with your JavaScript Code */

});

</script>

<p> P1 _________________________________________________________________________ </p>

<script>

/* Instruct jQuery to execute the anonymous function below after DOM is fully loaded */

$(function() {

alert("2");      /* Replace "alert("2");" with your JavaScript Code */

});

</script>

<p> P2 _________________________________________________________________________ </p>

<script> alert("3") </script>

<!-- "Alert 3" will be executed first, then "Alert 1" and "Alert 2" will be executed when  DOM is fully loaded -->

<p> P3 _________________________________________________________________________ </p>

DOM onload - with named functions (jQuery)

Execute named Functions after Document Object Model (DOM) is fully loaded!

<p> P _________________________________________________________________________ </p>

<!-- If you don't have jQuery on your website, load jQuery hosted by Google using the code below -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<p> P0 _________________________________________________________________________ </p>

<!-- Defining "Test1" and "Test2" JavaScript Functions -->
<script>

function Test1() {

alert("1");      /* Replace "alert("1");" with your JavaScript Code */

}

function Test2() {

alert("2");      /* Replace "alert("2");" with your JavaScript Code */

}

</script>

<p> P1 _________________________________________________________________________ </p>

<!-- Instruct jQuery to execute "Test1" function after DOM is fully loaded -->
<script> $(Test1); </script>

<p> P2 _________________________________________________________________________ </p>

<!-- Instruct jQuery to execute "Test2" function after DOM is fully loaded -->
<script> $(Test2); </script>

<p> P3 _________________________________________________________________________ </p>

<script> alert("3") </script>

<!-- "Alert 3" will be executed first, then "Alert 1" and "Alert 2" will be executed when  DOM is fully loaded -->

window onload - with anonymous functions (JavaScript)

<script>

window.onload = function() {

alert("1");      /* Replace "alert("1");" with your JavaScript Code */

/* (Limitation) This anonymous function will not be executed after page load, because there is another "window.onload" below */

}

</script>

<p> P1 _________________________________________________________________________ </p>

<script>

window.onload = function() {

alert("2");      /* Replace "alert("2");" with your JavaScript Code */

/* (Limitation) Only this anonymous function will be executed after page load */

}

</script>

<p> P2 _________________________________________________________________________ </p>

<script> alert("3"); </script>

<!-- "alert 3" will be executed first, then "alert 2" ("alert 1" will not be executed) -->

<p> P3 _________________________________________________________________________ </p>

window onload - with named functions (JavaScript)

<!-- Defining "Test1" and "Test2" JavaScript Functions -->
<script>

function Test1() {

alert("1");      /* Replace "alert("1");" with your JavaScript Code */

}

function Test2() {

alert("2");      /* Replace "alert("2");" with your JavaScript Code */

}

</script>

<p> P1 _________________________________________________________________________ </p>

<script> window.onload = Test1; </script>
<!-- (Limitation) This function will not be executed after page load, because there is another "window.onload" below -->

<p> P2 _________________________________________________________________________ </p>

<script> window.onload = Test2; </script>
<!-- (Limitation) Only this function will be executed after page load -->

<p> P3 _________________________________________________________________________ </p>

<script> alert("3"); </script>

<!-- "alert 3" will be executed first, then "alert 2" ("alert 1" will not be executed) -->

body onload - with named functions (Html)

<!-- Defining "Test1" and "Test2" JavaScript Functions -->
<script>

function Test1() {

alert("1");      /* Replace "alert("1");" with your JavaScript Code */

}

function Test2() {

alert("2");      /* Replace "alert("2");" with your JavaScript Code */

}

</script>

<p> P1 _________________________________________________________________________ </p>

<body onload="Test1()">
<!-- (Limitation) Only this function will be executed after page load -->

<p> P2 _________________________________________________________________________ </p>

<body onload="Test2()">
<!-- (Limitation) This function will not be executed after page load, because there is already a "body onload" above -->

<p> P3 _________________________________________________________________________ </p>

<script> alert("3"); </script>

<!-- "alert 3" will be executed first, then "alert 1" ("alert 2" will not be executed) -->

document onload - with anonymous functions (JavaScript)

<script>

document.onload = function() {

alert("1");      /* Replace "alert("1");" with your JavaScript Code */

}

/* Tested on FireFox, Chrome, IE, Opera but did not work */

</script>

<p> P1 _________________________________________________________________________ </p>

<script>

document.onload = function() {

alert("2");      /* Replace "alert("2");" with your JavaScript Code */

}

/* Tested on FireFox, Chrome, IE, Opera but did not work */

</script>

<p> P2 _________________________________________________________________________ </p>

<script> alert("3"); </script>

<!-- only "alert 3" will be executed, "alert 1" and "alert 2" did not work -->

<p> P3 _________________________________________________________________________ </p>

document onload - with named functions (JavaScript)

<!-- Defining "Test1" and "Test2" JavaScript Functions -->
<script>

function Test1() {

alert("1");      /* Replace "alert("1");" with your JavaScript Code */

}

function Test2() {

alert("2");      /* Replace "alert("2");" with your JavaScript Code */

}

</script>

<p> P1 _________________________________________________________________________ </p>

<script> document.onload = Test1; </script>
<!-- Tested on FireFox, Chrome, IE, Opera but did not work -->

<p> P2 _________________________________________________________________________ </p>

<script> document.onload = Test2; </script>
<!-- Tested on FireFox, Chrome, IE, Opera but did not work -->

<p> P3 _________________________________________________________________________ </p>

<script> alert("3"); </script>

<!-- only "alert 3" will be executed, "alert 1" and "alert 2" did not work -->

Keywords:
JavaScript - Execute JS codes after DOM or Page load

Wednesday, April 19, 2017

CSS - Attribute and Negation Selectors

Negation selector: :not( )

If attribute contains a given string: *= (Attributes such as Id, Class, Style, etc)

<style>

/* Apply gold "dotted outline" to any elements inside body, except <li> tags  */
body  :not(li) {outline:5px dotted gold;}

/* Apply Border to any Element in which its "Id" attribute contains "Apply" string */
[id*=Apply]{border:5px solid black;}

/* Text color "yellow" to any Element in which its "Id" attribute does not contain "Apply" string */
Body *:not([id*=Apply]){color:yellow;} /* "Body *" must be used in order to work */

/* Orange background to any "div" element in which its "id" attribute contains "Apply" string */
div[id*=Apply] {background:orange !important;}

/* Grey background to any "div" element in which its "id" attribute does not contain "Apply" string */
div:not([id*=Apply]) {background:grey !important;}

/* Red background to any "p" element in which its "id" attribute contains "Apply" string */
p[id*=Apply] {background:Red !important;}

/* Green background to any "p" element in which its "id" attribute does not contain "Apply" string */
p:not([id*=Apply]) {background:Green !important;}

</style>


<div id="1_Apply" style="background:red; width:50; height:50; float:left; margin:5px;"> Div </div>

<div id="2_kjkkiApplyXffgg" style="background:green; width:50; height:50; float:left; margin:5px;"> Div </div>

<div id="3_" style="background:blue; width:50; height:50; float:left; margin:5px;"> Div </div>

<p id="4_Apply" style="clear:left;"> p1 </p>

<p id="5_jhhApplyLkkjj"> p2 </p>

<p id="6_"> p3 </p>

<li id="7_ hhjjjApply"> Li </li>

*= CSS3 - chrome 4.0, Internet Explorer 7.0, Firefox 3.5, Safari 3.2, Opera 9.6
(For this selector to work in IE8 and earlier, a <!DOCTYPE> must be declared.)

:not( ) CSS3 - chrome 4.0, Internet Explorer 9.0, Firefox 3.5, Safari 3.2, Opera 9.6

Keywords:
CSS - Attribute and Negation Selectors
CSS - Select any Element in which its "Id", "Class" or any other attribute contains or does not contain a given string

Monday, April 17, 2017

Blogger - Customize Cross-Columns

How to:

from the code below, replace any "_Id" with your Gadget Id (Click here: How to find a Gadget Id)

<style>

/* Hide Gadget */
#HTML_Id { display: none; }

/* Cross-Columns\Main Sections */
.tabs-outer, .tabs-cap-top, .tabs-cap-bottom{
background:transparent; border:0px;
}

/* Pages - Separate Tabs */
#PageList_Id a{border:0px;}
#PageList_Id li{background:#2f2d2d;
border:1px solid #424141; margin:2px;}

/* Labels - Show Tabs instead List \ Remove borders  */
#Label_Id li{display:inline;}
#Label_Id a{border:0px;}

</style>

Keywords:
Blogger - Customize Cross-Columns
Blogger - Customize Main Columns
Blogger - Pages and Labels as Tabs instead List

Sunday, April 16, 2017

CSS - Selectors (Parent Children)

<style>

#Example1 > *{border: 3px dashed black;}
/* Selector ">" applies style only to "Example1" childrens */

#Example2 *{border: 3px dashed black;}
/* Apply style to any element inside "Example2"  */

</style>

<div id="Example1" style="background:Yellow; width:250px; height:130; display:inline-block;">
Green is my Children

    <div style="background:green; width:200px; height:80; margin: auto;">
    Yellow is my Parent <br> Blue is my Children

          <div style="background:blue; width:150px; height:30; margin: auto;">
          Green is my parent

          </div>

    </div>   
Example 1
</div>


<div id="Example2" style="background:Yellow; width:250px; height:130; display:inline-block;">
Green is my Children

    <div style="background:green; width:200px; height:80; margin: auto;">
    Yellow is my Parent <br> Blue is my Children

          <div style="background:blue; width:150px; height:30; margin: auto;">
          Green is my parent

          </div>

    </div>   
Example 2
</div>

Keywords:
CSS - Selectors (Parent Children)

Saturday, April 15, 2017

CSS - Tag + #Id or .Class

Tag + #Id:

<!-- Combining a "tag" + "id(#)"  -->
<style> p#d1, div#d2, h4#d3 {display:none;} </style>
<!-- "display:none" Hides Selected Elements -->

<p id="D1" style="background:red;">P 1111111111111</p>
<p id="D2" style="background:green;">P 22222222222</p>
<p id="D3" style="background:blue;">P 3333333333333</p>

<div id="D1" style="background:green;">Div 11111111111111111</div>
<div id="D2" style="background:red;">Div 22222222222222222</div>
<div id="D3" style="background:blue;">Div 333333333333333333</div>

<h4 id="D1" style="background:green;">h4 11111111111111111</h4>
<h4 id="D2" style="background:red;">h4 22222222222222222</h4>
<h4 id="D3" style="background:blue;">h4 333333333333333333</h4>

Tag + .Class:

<!-- Combining a "tag" + "class(.)"  -->
<style> p.d1, div.d2, h4.d3 {display:none;} </style>
<!-- "display:none" Hides Selected Elements -->

<p class="D1" style="background:red;">P 1111111111111</p>
<p class="D2" style="background:green;">P 22222222222</p>
<p class="D3" style="background:blue;">P 3333333333333</p>

<div class="D1" style="background:green;">Div 11111111111111111</div>
<div class="D2" style="background:red;">Div 22222222222222222</div>
<div class="D3" style="background:blue;">Div 333333333333333333</div>

<h4 class="D1" style="background:green;">h4 11111111111111111</h4>
<h4 class="D2" style="background:red;">h4 22222222222222222</h4>
<h4 class="D3" style="background:blue;">h4 333333333333333333</h4>

Keywords:
CSS - Tag + #Id or .Class
CSS - Tag + #Id
CSS - Tag + .Class

Friday, April 14, 2017

Blogger - Hide Gadgets Elements

- After creating a Gadget, click on the Gadget "Edit" link in order to see its "Id" in the browser url bar, at the end of the link!

- "Gadget_Id" is Case-Sensitive (Example: "HTML2" is not the same as "html2")

Hide a Gadget at All:

<!-- Hide Gadget -->
<style> #Gadget_Id { display: none; } </style>

Hide Gadget Title and Gadget Content Area Top Border:

<!-- Hide Gadget Title -->
<style>
#Gadget_Id > h2{display:none;}
#Gadget_Id > div.widget-content{border-top:0px;}
</style>

Titles from any Gadget (Image Gadget, Text Gadget, AdSense Gadget, etc etc etc) can be hidden through a single "Html\JavaScript" Gadget (Example below):

<!-- Hide Gadget Title -->
<style>
#HTML1 > h2{display:none;}
#HTML1 > div.widget-content{border-top:0px;}

#Text1 > h2{display:none;}
#Text1 > div.widget-content{border-top:0px;}

#Image1 > h2{display:none;}
#Image1 > div.widget-content{border-top:0px;}
</style>

Keywords:
Blogger - Hide Gadgets Elements
Blogger - Hide Gadget Title

Friday, April 7, 2017

Illustrator - How to Vectorize

Convert Raster images to Vector images

How to:

Some examples below using "High Fidelity Photo" option to vectorize:


This is a 5888 x 4384 Image File (4,14 MB) Put the mouse over the image or Click it to better visualize it!

Keywords:
Illustrator - How to Vectorize
Illustrator - convert raster images to vector images

Photoshop - Show Transparent ArtBoard

While creating new files (Alternative 1):

For existing files with non-transparent ArtBoard (Alternative 2):

Keywords:
Photoshop - Show Transparent ArtBoard

Illustrator - Show Transparent ArtBoard

Keywords:
Illustrator - Show Transparent ArtBoard

Tuesday, April 4, 2017

Blogger - Change Focused Elements Outline Color

First of all, note that "Outline" is not the same as "Border", they are different things!

An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".

How to:

/* __ Apply CSS Style to any focused Element __ */
:focus {
border-color: green !important;
outline-color: green !important;
}
/* "!important" ensures that nothing can override what you've set in this style  */
/* so, "!important" will ensure that any focused Element will have the same style */
/* Note that CSS styles can't be applied to Elements inside  "iframes" */

Keywords:
Blogger - Apply CSS Style to any focused Element
Blogger - Change Focused Elements Outline Color
Blogger - Change Focused Elements Border Color

Monday, April 3, 2017

Blogger - Change Selected Text Color

How to:

/* Selected Text Color (All Page) - Firefox and others Gecko Engine based browsers */
::-moz-selection {
background-color: red;
color: black;
}

/* Selected Text Color (All Page) - Chrome, Edge, Internet Explorer, Opera, Safari, etc */
::selection {
background-color: red;
color: black;
}

/* ______ for  <textarea> tags (different colors from "All Page" above) ______ */

/* Selected Text Color (textarea tag) - Firefox and others Gecko Engine based browsers */
textarea::-moz-selection {
background-color: gold;
color: red;
}

/* Selected Text Color (textarea tag) - Chrome, Edge, Internet Explorer, Opera, Safari, etc */
textarea::selection {
background-color: gold;
color: red;
}

/* ______ for  "Contact Form" Text Fields (different colors from "All Page" above) ______ */

/* Selected Text Color ("Contact Form" Text Fields) - Firefox and others Gecko Engine based browsers */
.contact-form-name::-moz-selection,
.contact-form-email::-moz-selection,
.contact-form-email-message::-moz-selection {
background-color: green;
color: black;
}

/* Selected Text Color ("Contact Form" Text Fields) - Chrome, Edge, Internet Explorer, Opera, Safari, etc */
.contact-form-name::selection,
.contact-form-email::selection,
.contact-form-email-message::selection {
background-color: green;
color: black;
}

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/::selection#Summary

keywords:
Blogger - Change Selected Text Color
Blogger - Change highlighted Text Color

Wednesday, March 29, 2017

Blogger - Pages and Labels Tabs Border Color

Alternative 1:

Alternative 2:

Keywords:
Blogger - Pages and Labels Tabs Border Color

Tuesday, March 28, 2017

Resize or Crop Image (Canvas)

Crop Image \ Resize Canvas (Alternative 1):

Crop Image \ Resize Canvas (Alternative 2):

Resize Image \ Canvas:

Keywords:
Resize or Crop Image (Canvas)

Photoshop - Transparent Background

Save as ".png" file in order to preserve the "transparent" colors:

Keywords:
Photoshop - Transparent Background (Remove colors)

Facebook - Fix YouTube Videos Thumbnail

1 - Go to this link:

https://developers.facebook.com/tools/debug

2 - Then paste your YouTube video link inside the input field and click on "Debug" button

3 - Look for "When and how we last scraped the URL" and click on the "Scrap Again" button

4 - After that, if the correct video thumbnail is displayed, the problem is fixed!

Go to your Facebook page and share the youtube video again!

Keywords:
Facebook - Fix YouTube Videos Thumbnail

Monday, March 27, 2017

Photoshop - How to Fill (Paint Bucket Tool)

Keywords:
Photoshop - How to Fill (Paint Bucket Tool)

Thursday, March 23, 2017

Firefox - Find Blog Elements CSS Code

Element CSS code found below:

.contact-form-button-submit {
    color: red;
    background: white;
    border-color: red;
}

from the code above, you can get the following ones:

/* Submit button style (on mouseover) */
.contact-form-button-submit:hover{
    color: white;
    background: red;
    border-color: white;
}

/* Submit button style (while sending message) */
.contact-form-button-submit.disabled{
    color: white;
    background: red;
    border-color: white;
}

then the codes can be applied in the blog Theme\Customize\Advanced\Add CSS

Tuesday, March 21, 2017

Blogger Contact Form - Change Send Button Color

/* Submit button style */
.contact-form-button-submit{color:red; background:green ;border-color:red;}

/* Submit button style (on mouseover) */
.contact-form-button-submit:hover{
color:white;
background:green;
border: 1px solid white;
}

/* Submit button style (While Sending Message) */
.contact-form-button-submit.disabled{
color:white;
background:green;
border: 1px solid white;
}

/* Contact Form - Send Button and Text Fields Border\Outline Color on Focus */
.contact-form-name:focus,
.contact-form-email:focus,
.contact-form-email-message:focus,
.contact-form-button-submit:focus {
border-color: green;
outline-color: green;
}

/* Selected Text Color ("Contact Form" Text Fields) - Firefox and others Gecko Engine based browsers */
.contact-form-name::-moz-selection,
.contact-form-email::-moz-selection,
.contact-form-email-message::-moz-selection {
background-color: green;
color: black;
}

/* Selected Text Color ("Contact Form" Text Fields) - Chrome, Edge, Internet Explorer, Opera, Safari, etc */
.contact-form-name::selection,
.contact-form-email::selection,
.contact-form-email-message::selection {
background-color: green;
color: black;
}

Source: http://helplogger.blogspot.com/2013/05/new-blogger-widget-contact-form-change.html

keywords:
Blogger - change Contact Form colors
Blogger - customize Contact Form
Blogger Contact Form - Change Send Button Color

Blogger NavBar - Change Color

#navbar-iframe{background-color:green;}

Instead of "green", the following can be used:

red, green, pink, purple, yellow, etc

HTML color codes can be used too:

#000 or #000000 (for Black)
#56db2b (for green)
#e01308 (for red)
etc

jQuery

elevateZoom (Requires jQuery)

Facebook Messenger (Donation)

Activation Code - Donation (Multiple Options)

Request Web\PHP\JavaScript\HTML Project !

Advertise On This Blog!

ADS - Multi One Password

Ads (Reserved)

Sunday, October 1, 2017

Friday, May 26, 2017

Monday, May 22, 2017

Thursday, May 18, 2017

Wednesday, May 3, 2017

Monday, April 24, 2017

Wednesday, April 19, 2017

Monday, April 17, 2017

Sunday, April 16, 2017

Saturday, April 15, 2017

Friday, April 14, 2017

Friday, April 7, 2017

Tuesday, April 4, 2017

Monday, April 3, 2017

Wednesday, March 29, 2017

Tuesday, March 28, 2017

Monday, March 27, 2017

Thursday, March 23, 2017

Tuesday, March 21, 2017

ADS - Multi Share Calculator