Ning coding and styling Tool "GeocPlugin" v2.00.005

With this plug-in you'll easily be able to add standard CSS with !important, CSS stylesheets, any HTML and javascript links into either the head or the body of any network. These codes can also target nonmembers/visitors, just members, male members and/or female members.. These tiny snippets of javascript can be added to any javascript code you may be working on or are already using.

Important. You should only have one GeoPlugin code in your "custom code box". If you're adding an updated version of this plug-in remove the old one. All your old codes will still work with the new updates.

To view the codes in the plug-in click here

This is the main plug-in it must be used in order to use the following codes.

<script src="https://st3.ning.com/topology/rest/1.0/file/get/935791?profile=original" type="text/javascript"></script>

Targets all members and nonmembers ( Any network )

Now if you add the letter o in front of any of these 8 lines it will only inject the codes once per Session!!

Example -- Before GEOHTML( '<p></p>' ); -- ( After oGEOHTML( '<p></p>' );

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~
these four lines will inject your codes into the head

addGeoStyleh('BODY{background-image: url(none)!important;}');

GEONodeh.href = 'https://api.ning.com/your_css_stylesheet.css';

GEOScripth.src = 'https://api.ning.com/your_javascript.js';

GEOHTMLh( '<meta name="viewport" content="width=device-width, initial-scale=1" />' );

these four lines will inject your codes into the body

addGeoStyle('BODY{background-image: url(none)!important;}');

GEONode.href = 'https://api.ning.com/your_css_stylesheet.css';

GEOScript.src = 'https://api.ning.com/your_javascript.js';

GEOHTML( '<p id="GEOHTML_test">GEOHTML is working</p>' );

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
NEW Run a script every 15, 30, 45 or 60 seconds.

GEOScript15.src = 'https://api.ning.com/your_javascript.js';

GEOScript30.src = 'https://api.ning.com/your_javascript.js';

GEOScript45.src = 'https://api.ning.com/your_javascript.js';

GEOScript60.src = 'https://api.ning.com/your_javascript.js';

Targets nonmembers and visitors ( Ning networks )

these three lines will inject your codes into the head

addGeoStyleho('BODY{background-image: url(none)!important;}');

GEONodeho.href = 'https://api.ning.com/your_css_stylesheet.css';

GEOScriptho.src = 'https://api.ning.com/your_javascript.js';

these three lines will inject your codes into the body

addGeoStyleo('BODY{background-image: url(none)!important;}');

GEONodeo.href = 'https://api.ning.com/your_css_stylesheet.css';

GEOScripto.src = 'https://api.ning.com/your_javascript.js';

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
New Run a script every 15, 30, 45 or 60 seconds.

GEOScripto15.src = 'https://api.ning.com/your_javascript.js';

GEOScripto30.src = 'https://api.ning.com/your_javascript.js';

GEOScripto45.src = 'https://api.ning.com/your_javascript.js';

GEOScripto60.src = 'https://api.ning.com/your_javascript.js';

Targets members ( Ning networks )

these three lines will inject your codes into the head

addGeoStylehon('BODY{background-image: url(none)!important;}');

GEONodehon.href = 'https://api.ning.com/your_css_stylesheet.css';

GEOScripthon.src = 'https://api.ning.com/your_javascript.js';

these three lines will inject your codes into the body

addGeoStyleon('BODY{background-image: url(none)!important;}');

GEONodeon.href = 'https://api.ning.com/your_css_stylesheet.css';

GEOScripton.src = 'https://api.ning.com/your_javascript.js';

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
New Run a script every 15, 30, 45 or 60 seconds.

GEOScripton15.src = 'https://api.ning.com/your_javascript.js';

GEOScripton30.src = 'https://api.ning.com/your_javascript.js';

GEOScripton45.src = 'https://api.ning.com/your_javascript.js';

GEOScripton60.src = 'https://api.ning.com/your_javascript.js';

Targets male members ( Ning networks )

these three lines will inject your codes into the head

addGeoStylehm('BODY{background-image: url(none)!important;}');

GEONodehm.href = 'https://api.ning.com/your_css_stylesheet.css';

GEOScripthm.src = 'https://api.ning.com/your_javascript.js';

these three lines will inject your codes into the body

addGeoStylem('BODY{background-image: url(none)!important;}');

GEONodem.href = 'https://api.ning.com/your_css_stylesheet.css';

GEOScriptm.src = 'https://api.ning.com/your_javascript.js';

Targets female members ( Ning networks )

these three lines will inject your codes into the head

addGeoStylehf('BODY{background-image: url(none)!important;}');

GEONodehf.href = 'https://api.ning.com/your_css_stylesheet.css';

GEOScripthf.src = 'https://api.ning.com/your_javascript.js';

these three lines will inject your codes into the body

addGeoStylef('BODY{background-image: url(none)!important;}');

GEONodef.href = 'https://api.ning.com/your_css_stylesheet.css';

GEOScriptf.src = 'https://api.ning.com/your_javascript.js';

How to use and usage examples.

You may add as many "addGeoStyle" lines as you want.
In each "addNewStyle" line, you can add one line of CSS. ( No spaces or breaks in the CSS.)

addGeoStyle('BODY{background-image: url(none)!important;}');

You may add as many "GEONode" lines as you want. ( CSS Stylesheets )

GEONode.href = 'https://api.ning.com/your_css_stylesheet.css';

You may add as many "GEOScript" lines as you want. ( javascript links )

GEOScript.src = 'https://api.ning.com/your_javascript.js';

You may add as many "GEOHTML" lines as you want. ( Any HTML - Iframes, objects, H1, a, p, span, div virtually any HTML Element. ) Your HTML needs to be in one solid line, no breaks, which means do not press enter in the HTML!!! If your text needs a break in it just add <br/>...

To see more of what you can do with this line of code go to example #5... examples below

GEOHTML( '<p id="GEOHTML_test">GEOHTML is working</p>' );

Here are some fully functional examples.
In thies examples we'll be styling Ning Networks.

Working example #1 Ning 2&3 -- In this example your male members will have a different background imge than your female members. Ning 2&3

Working example #2 Ning 2.0 -- In this example we'll be styling the video pages on a Ning 2.0 Network.

Working example #3 Ning 3.0 -- In this example we'll be styling the photo pages on a Ning 3.0 Network. With this example We'll be giving the photo pages a completely different look/style for male and female members.

<script src="https://st3.ning.com/topology/rest/1.0/file/get/935791?profile=original" type="text/javascript"></script>


<script type="text/javascript">

/* start Targeting all photo pages" */
if(document.URL.indexOf("photo") >= 0){

/* background image all photo pages */
addGeoStyleh('BODY{background-image: url( http://bit.ly/1LwJD7U);background-attachment: fixed!important;background-size: cover!important;background-position: center!important;background-repeat: no-repeat!important;}');

/* background image all photo pages female members */
addGeoStylehf('BODY{background-image: url(null//storage.ning.com/topology/rest/1.0/file/get/932420?profile=original);background-attachment: fixed!important;background-size: cover!important;background-position: center!important;background-repeat: no-repeat!important;}');

/* background image all photo pages male members */
addGeoStylehm('BODY{background-image: url( http://bit.ly/1POdd7J);background-attachment: fixed!important;background-size: cover!important;background-position: center!important;background-repeat: no-repeat!important;}');

/* End tag for Targeting all photo pages" */
}

/* java closing tag" */
</script>


<script type="text/javascript">

/* START Targeting just the main photo page */
if (x$('.photoListPage.grid-frame').length) {

/* add HTML - vidieo, text and image to the main photo page */
GEOHTML( '<DIV id="GEOHTML_test_1" class="module-body"><center><iframe width="420" height="305" src="https://www.youtube.com/embed/qU5UmJ-XmQs?wmode=opaque&autoplay=1" frameborder="0"></iframe><p>Download the NEW Shockmachine 2000 v2015. I have created a portable and an install version. It has tons of cartoons, games and music videos. It works on Windows 98 through Windows 10. Download links below.<br/> <br/> <br/> When you click on the download link, press the big blue "download now" button.</p><p><a target="_self" href="https://storage.ning.com/topology/rest/1.0/file/get/11524238?profile=original"><img class="align-full" src="https://storage.ning.com/topology/rest/1.0/file/get/11524238?profile=RESIZE_1024x1024" width="721"/></a></p><p>Shockmachine full setup 112 MB<br/> <a href="http://d-h.st/18FV" target="_blank"> http://d-h.st/18FV</a><br/>; portable version 135 MB<br/> <a href="http://d-h.st/nFhy" target="_blank"> http://d-h.st/nFhy</a></p></center></DIV>;' );

/* Jquery to add the above HTML to the main photo page grid frame */
x$(document).ready(function() {
x$('DIV.photoListPage.grid-frame.sheet FOOTER.module-footer').after(x$('DIV#GEOHTML_test_1')); });

/* background image main photo page */
addGeoStyle('BODY{background-image: url(null//storage.ning.com/topology/rest/1.0/file/get/932449?profile=original)!important;background-attachment: fixed!important;background-size: cover!important;background-position: center!important;background-repeat: no-repeat!important;}');

/* The main styling for the main photo page only, CSS stylesheet */
GEONode.href = 'http://bit.ly/1hDrkBD';

/* The main styling for the main photo page male members only, CSS stylesheet */
GEONodem.href = 'http://bit.ly/1LwJL7t';

/* The main styling for the main photo page female members only, CSS stylesheet */
GEONodef.href = 'http://bit.ly/1NxLrOs';

/* End tag for Targeting just the main photo page */
}

/* javascript closing tag" */
</script>

Working example #4 Ning 2.0 -- In this example we'll be styling the photo pages on a Ning 2.0 Network.

Let's say you wanted to use my responsive fullwidth network tip on just your photo pages. You would just take the three major codes from that tip and add them to the corresponding lines of code in this tip. As you can see I added the viewport HTML to a GEOHTMLh line, the CSS stylesheet to a GEONodeh line and the JavaScript to a GEOScripth line. Then I just placed the three snippets of code in a page targeting JavaScript wrap.

<script type="text/javascript">
if(document.URL.indexOf("photo") >= 0){
GEOHTMLh( '<meta name="viewport" content="width=device-width, initial-scale=1" />' );
GEONodeh.href = 'null//storage.ning.com/topology/rest/1.0/file/get/932304?profile=originalponsive_fullwidth_network_v3.6.css';
GEOScripth.src = 'null//storage.ning.com/topology/rest/1.0/file/get/963872751?profile=originalponsive_fullwidth_network.js';
}
</script>

Working example #5 Ning 3.0 -- In this example we'll be adding HTML, a vidieo, text, a image and links to main photo page grid frame on a Ning 3.0 Network.. Notice all the HTML is in one GEOHTML line of code. Your HTML needs to be in one solid line, no breaks, which means do not press enter in the HTML!!! If your text needs a break in it just add <br/>...

<script type="text/javascript">

/* START Targeting just the main photo page */
if (x$('.photoListPage.grid-frame').length) {

/* adding HTML - vidieo, text, links and image to the main photo page */
GEOHTML( '<DIV id="GEOHTML_test" class="module-body"><center><iframe width="420" height="305" src="https://www.youtube.com/embed/qU5UmJ-XmQs?wmode=opaque&autoplay=1" frameborder="0"></iframe><p>Download the NEW Shockmachine 2000 v2015. I have created a portable and an install version. It has tons of cartoons, games and music videos. It works on Windows 98 through Windows 10. Download links below.<br/> <br/> <br/> When you click on the download link, press the big blue "download now" button.</p><p><a target="_self" href="null//storage.ning.com/topology/rest/1.0/file/get/11524238?profile=original"><img class="align-full" src="null//storage.ning.com/topology/rest/1.0/file/get/11524238?profile=RESIZE_1024x1024" width="721"/></a></p><p>Shockmachine full setup 112 MB<br/> <a href="http://d-h.st/18FV" target="_blank"> http://d-h.st/18FV</a><br/>; portable version 135 MB<br/> <a href="http://d-h.st/nFhy" target="_blank"> http://d-h.st/nFhy</a></p></center></DIV>;' );

/* Jquery to add the above HTML to the main photo page grid frame */
x$(document).ready(function() {
x$('DIV.photoListPage.grid-frame.sheet FOOTER.module-footer').after(x$('DIV#GEOHTML_test')); });

/* End tag for Targeting just the main photo page */
}

/* javascript closing tag" */
</script>

Thank you JFarrow, speaking of progress I just updated it. :)

Now if you add the letter o in front of any of those lines it will only run the codes one's per visit to the network.

Example

Before GEOScript

After oGEOScript

I'm also planning on adding grouped age targeting. You know like 40 and above, 25 to 39 and so on, it could be very useful for advertisements for instance. 40-year-old and above males might get an advertisement for balding or hemorrhoid cream while a teenager might get a advertisement for an Xbox or whatever. It could very well make you more money with your advertisements targeting them that way

Hope you like it and let me know what you think.

You have a great weekend.

Replies

J.Ayvar August 18, 2015 at 6:39pm

Thank you George :)
- George H. Compton IV > J.Ayvar August 21, 2015 at 4:23pm
  
  You're welcome Anastasia :)
Mandy August 20, 2015 at 2:50pm

aah, so this is the code you were talking about! Thanks @George H. Compton IV I'll be playing around with this!
- George H. Compton IV > Mandy August 21, 2015 at 4:23pm
  
  ;)
NC for Hire

⚡JFarrow⌁ August 21, 2015 at 3:32pm

this looks pretty cool G... hope to see this progress.. i may give it a whirl this weekend if I get a little free time
- George H. Compton IV > ⚡JFarrow⌁ August 21, 2015 at 4:33pm
  
  Thank you JFarrow, speaking of progress I just updated it. :)
  
  Now if you add the letter o in front of any of those lines it will only run the codes one's per visit to the network.
  
  Example
  
  Before GEOScript
  
  After oGEOScript
  
  I'm also planning on adding grouped age targeting. You know like 40 and above, 25 to 39 and so on, it could be very useful for advertisements for instance. 40-year-old and above males might get an advertisement for balding or hemorrhoid cream while a teenager might get a advertisement for an Xbox or whatever. It could very well make you more money with your advertisements targeting them that way
  
  Hope you like it and let me know what you think.
  
  You have a great weekend.
Jelena August 21, 2015 at 6:43pm

Hello George this is pretty amazing. i would like to see how works on the network.
- George H. Compton IV > Jelena August 24, 2015 at 5:46pm
  
  Thank you and Hello Jelena. :)
  
  You can go to this website (Click here) and navigate to the photo pages to see some of the changes, but in all reality you need to be a member in order to see the difference between male and female members. On that website. I'm using the exact same code as example #3
  
  You have a 3.0 network correct?
  
  Grab a copy of the example #3 and just paste it into your "Custom Code - End of Page Code box" to see all the changes. When you're done testing it you can simply remove it. :-)
  Well either remove it or customize it to your liking and keep it. :-)
  
  You have a wonderful day. :-)
George H. Compton IV August 30, 2015 at 2:17pm

Update 8/30/15, now you can also easily add HTML to the head or the body of your network.. TJ thank you for the compliment on this plug-in.
NC for Hire

Garfield Archivist August 30, 2015 at 4:27pm

Awesome in every sense of the word.

of 2

This reply was deleted.

FORUM

Ning coding and styling Tool "GeocPlugin" v2.00.005

Replies

Featured Discussions

Dear Ning: Please Update TinyMCE Editor Version

posting photos

Undelete a comment

posting an article

Note: this page contains paid content.

Announcements

Google Analytics 4 upgrade

View counter feature is live

Note: this page contains paid content.

Latest Activity