Straight Tips: Blogger

elevateZoom (Requires jQuery)

Showing posts with label Blogger. Show all posts

Friday, October 22, 2021

Image Slider for Blogger

Download "Splide Slider + Examples + How to Notes for Blogger":
https://www.mediafire.com/file/d2z2ymxv4u5z5oj/Splide_Image_Slider_%2528Blogger%2529.rar/file

Monday, May 22, 2017

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

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

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

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

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

Straight Tips

jQuery

elevateZoom (Requires jQuery)

Microsoft Store (Donation)

Facebook Messenger (Donation)

Activation Code - Donation (Multiple Options)

Request Web\PHP\JavaScript\HTML Project !

Advertise On This Blog!

Ads (Reserved)

Friday, October 22, 2021

Image Slider for Blogger

Monday, May 22, 2017

Blogger - Image Zoom Plugin

Monday, April 17, 2017

Blogger - Customize Cross-Columns

Friday, April 14, 2017

Blogger - Hide Gadgets Elements

Tuesday, April 4, 2017

Blogger - Change Focused Elements Outline Color

Monday, April 3, 2017

Blogger - Change Selected Text Color

Wednesday, March 29, 2017

Blogger - Pages and Labels Tabs Border Color

Thursday, March 23, 2017

Firefox - Find Blog Elements CSS Code

Tuesday, March 21, 2017

Blogger Contact Form - Change Send Button Color

Blogger NavBar - Change Color

ADS - Multi Share Calculator