CSS Shortcodes
Handy pre-built CSS classes available when you need it.
How to embed Shortcodes
Add this CSS link to any page and you're ready to go!
<link rel="stylesheet" type="text/css" href="shortcodes/shortcodes.css">
Social Buttons
Add button styles from popular sitesFacebook Style
Silver Button Purple Button Green Button Red Button Black Button
View code:
<!-- DC Social Buttons Start --> <a href="#" class="dc_fb_button">Silver Button</a> <a href="#" class="dc_fb_button purple">Purple Button</a> <a href="#" class="dc_fb_button green">Green Button</a> <a href="#" class="dc_fb_button red">Red Button</a> <a href="#" class="dc_fb_button black">Black Button</a> <!-- DC Social Buttons End -->
Google + Microsoft Style
White Button Silver Button Blue Button   Red Button   Green Button   Gray Button   Black Button  
View code:
<!-- DC Social Buttons Start --> <a href="#" class="dc_g_button white">White Button</a> <a href="#" class="dc_g_button silver">Silver Button</a> <a href="#" class="dc_g_button blue">Blue Button</a> <a href="#" class="dc_g_button red">Red Button</a> <a href="#" class="dc_g_button green">Green Button</a> <a href="#" class="dc_g_button gray">Gray Button</a> <a href="#" class="dc_g_button black">Black Button</a> <!-- DC Social Buttons End -->
Apple Style
Normal:
Disabled: |
|
|
|
View code:
<!-- DC Social Buttons Start --> <button class="dc_ibutton">Buy now</button> <button class="dc_ibutton" disabled>Buy now</button> <button class="dc_ibutton-red">Sign up</button> <button class="dc_ibutton-red" disabled>Sign up</button> <button class="dc_ibutton-green">Download</button> <button class="dc_ibutton-green" disabled>Download</button> <button class="dc_ibutton-gray">Specifications</button> <button class="dc_ibutton-gray" disabled>Specifications</button> <!-- DC Social Buttons End -->
Pixelated Style
View code:
<!-- DC Social Buttons Start --> <a href="#" class="dc_pixel_button lightbg-blue">Blue</a> <a href="#" class="dc_pixel_button lightbg-pink">Pink</a> <a href="#" class="dc_pixel_button lightbg-orange">Orange</a> <a href="#" class="dc_pixel_button lightbg-green">Green</a> <a href="#" class="dc_pixel_button lightbg-black">Black</a> <!-- DC Social Buttons End -->
Bevel Style
Blue Button Red Button Green Button Gray Button White Button
View code:
<!-- DC Social Buttons Start --> <a href="#" class="dc_bevel_button blue">Blue Button</a> <a href="#" class="dc_bevel_button red">Red Button</a> <a href="#" class="dc_bevel_button green">Green Button</a> <a href="#" class="dc_bevel_button gray">Gray Button</a> <a href="#" class="dc_bevel_button white">White Button</a> <!-- DC Social Buttons End -->
Bright Style
Blue Button Red Button Green Button Yellow Button Purple Button Orange Button Gray Button
View code:
<!-- DC Social Buttons Start --> <a href="#" class="dc_bright_button bright-blue bright-bubble">Blue Button</a> <a href="#" class="dc_bright_button bright-red bright-round">Red Button</a> <a href="#" class="dc_bright_button bright-green bright-square">Green Button</a> <a href="#" class="dc_bright_button bright-yellow bright-square">Yellow Button</a> <a href="#" class="dc_bright_button bright-purple bright-square">Purple Button</a> <a href="#" class="dc_bright_button bright-orange bright-square">Orange Button</a> <a href="#" class="dc_bright_button bright-gray bright-square">Gray Button</a> <!-- DC Social Buttons End -->
Flat buttons
Add flat web button stylesLarge flat buttons
Super Flat Button » Flat Gray Button » Flat Blue Button » Flat Teal Button » Flat Green Button » Flat Purple Button » Flat Pink Button » Flat Magenta Button » Flat Red Button » Flat Orange Button » Flat Yellow Button » Flat Silver Button » Flat White Button »
View code:
<!-- DC Flat Buttons Start --> <a class="dc_awb_large dc_flat" href="#">Super Flat Button »</a> <a class="dc_awb_large dc_awb_gray dc_flat" href="#">Flat Gray Button »</a> <a class="dc_awb_large dc_awb_blue dc_flat" href="#">Flat Blue Button »</a> <a class="dc_awb_large dc_awb_teal dc_flat" href="#">Flat Teal Button »</a> <a class="dc_awb_large dc_awb_green dc_flat" href="#">Flat Green Button »</a> <a class="dc_awb_large dc_awb_purple dc_flat" href="#">Flat Purple Button »</a> <a class="dc_awb_large dc_awb_pink dc_flat" href="#">Flat Pink Button »</a> <a class="dc_awb_large dc_awb_magenta dc_flat" href="#">Flat Magenta Button »</a> <a class="dc_awb_large dc_awb_red dc_flat" href="#">Flat Red Button »</a> <a class="dc_awb_large dc_awb_orange dc_flat" href="#">Flat Orange Button »</a> <a class="dc_awb_large dc_awb_yellow dc_flat" href="#">Flat Yellow Button »</a> <a class="dc_awb_large dc_awb_silver dc_flat" href="#">Flat Silver Button »</a> <a class="dc_awb_large dc_awb_white dc_flat" href="#">Flat White Button »</a> <!-- DC Flat Buttons End -->
Medium flat buttons
Super Flat Button » Flat Gray Button » Flat Blue Button » Flat Teal Button » Flat Green Button » Flat Purple Button » Flat Pink Button » Flat Magenta Button » Flat Red Button » Flat Orange Button » Flat Yellow Button » Flat Silver Button » Flat White Button »
View code:
<!-- DC Flat Buttons Start --> <a class="dc_awb_medium dc_flat" href="#">Super Flat Button »</a> <a class="dc_awb_medium dc_awb_gray dc_flat" href="#">Flat Gray Button »</a> <a class="dc_awb_medium dc_awb_blue dc_flat" href="#">Flat Blue Button »</a> <a class="dc_awb_medium dc_awb_teal dc_flat" href="#">Flat Teal Button »</a> <a class="dc_awb_medium dc_awb_green dc_flat" href="#">Flat Green Button »</a> <a class="dc_awb_medium dc_awb_purple dc_flat" href="#">Flat Purple Button »</a> <a class="dc_awb_medium dc_awb_pink dc_flat" href="#">Flat Pink Button »</a> <a class="dc_awb_medium dc_awb_magenta dc_flat" href="#">Flat Magenta Button »</a> <a class="dc_awb_medium dc_awb_red dc_flat" href="#">Flat Red Button »</a> <a class="dc_awb_medium dc_awb_orange dc_flat" href="#">Flat Orange Button »</a> <a class="dc_awb_medium dc_awb_yellow dc_flat" href="#">Flat Yellow Button »</a> <a class="dc_awb_medium dc_awb_silver dc_flat" href="#">Flat Silver Button »</a> <a class="dc_awb_medium dc_awb_white dc_flat" href="#">Flat White Button »</a> <!-- DC Flat Buttons End -->
Small flat buttons
Super Flat Button » Flat Gray Button » Flat Blue Button » Flat Teal Button » Flat Green Button » Flat Purple Button » Flat Pink Button » Flat Magenta Button » Flat Red Button » Flat Orange Button » Flat Yellow Button » Flat Silver Button » Flat White Button »
View code:
<!-- DC Flat Buttons Start --> <a class="dc_awb_small dc_flat" href="#">Super Flat Button »</a> <a class="dc_awb_small dc_awb_gray dc_flat" href="#">Flat Gray Button »</a> <a class="dc_awb_small dc_awb_blue dc_flat" href="#">Flat Blue Button »</a> <a class="dc_awb_small dc_awb_teal dc_flat" href="#">Flat Teal Button »</a> <a class="dc_awb_small dc_awb_green dc_flat" href="#">Flat Green Button »</a> <a class="dc_awb_small dc_awb_purple dc_flat" href="#">Flat Purple Button »</a> <a class="dc_awb_small dc_awb_pink dc_flat" href="#">Flat Pink Button »</a> <a class="dc_awb_small dc_awb_magenta dc_flat" href="#">Flat Magenta Button »</a> <a class="dc_awb_small dc_awb_red dc_flat" href="#">Flat Red Button »</a> <a class="dc_awb_small dc_awb_orange dc_flat" href="#">Flat Orange Button »</a> <a class="dc_awb_small dc_awb_yellow dc_flat" href="#">Flat Yellow Button »</a> <a class="dc_awb_small dc_awb_silver dc_flat" href="#">Flat Silver Button »</a> <a class="dc_awb_small dc_awb_white dc_flat" href="#">Flat White Button »</a> <!-- DC Flat Buttons End -->
Gradient Buttons
Add modern gradient web buttonsSilver/Grey
Mini Button Default Button Large Button Mini Rounded Default Rounded Large Rounded
Mini Button Default Button Large Button Mini Rounded Default Rounded Large Rounded
Mini Button Default Button Large Button Mini Rounded Default Rounded Large Rounded
View code:
<!-- DC Gradient Buttons Start --> <a href="#" class="dc_gradient_button small">Mini Button</a> <a href="#" class="dc_gradient_button">Default Button</a> <a href="#" class="dc_gradient_button large">Large Button</a> <a href="#" class="dc_gradient_button small rounded">Mini Rounded</a> <a href="#" class="dc_gradient_button rounded">Default Rounded</a> <a href="#" class="dc_gradient_button large rounded">Large Rounded</a> <a href="#" class="dc_gradient_button small grey">Mini Button</a> <a href="#" class="dc_gradient_button grey">Default Button</a> <a href="#" class="dc_gradient_button large grey">Large Button</a> <a href="#" class="dc_gradient_button small rounded grey">Mini Rounded</a> <a href="#" class="dc_gradient_button rounded grey">Default Rounded</a> <a href="#" class="dc_gradient_button large rounded grey">Large Rounded</a> <a href="#" class="dc_gradient_button small black">Mini Button</a> <a href="#" class="dc_gradient_button black">Default Button</a> <a href="#" class="dc_gradient_button large black">Large Button</a> <a href="#" class="dc_gradient_button small rounded black">Mini Rounded</a> <a href="#" class="dc_gradient_button rounded black">Default Rounded</a> <a href="#" class="dc_gradient_button large rounded black">Large Rounded</a> <!-- DC Gradient Buttons End -->
Light blue/Blue
Mini Button Default Button Large Button Mini Rounded Default Rounded Large Rounded
Mini Button Default Button Large Button Mini Rounded Default Rounded Large Rounded
View code:
<!-- DC Gradient Buttons Start --> <a href="#" class="dc_gradient_button small light_blue">Mini Button</a> <a href="#" class="dc_gradient_button light_blue">Default Button</a> <a href="#" class="dc_gradient_button large light_blue">Large Button</a> <a href="#" class="dc_gradient_button small rounded light_blue">Mini Rounded</a> <a href="#" class="dc_gradient_button rounded light_blue">Default Rounded</a> <a href="#" class="dc_gradient_button large rounded light_blue">Large Rounded</a> <a href="#" class="dc_gradient_button small blue">Mini Button</a> <a href="#" class="dc_gradient_button blue">Default Button</a> <a href="#" class="dc_gradient_button large blue">Large Button</a> <a href="#" class="dc_gradient_button small rounded blue">Mini Rounded</a> <a href="#" class="dc_gradient_button rounded blue">Default Rounded</a> <a href="#" class="dc_gradient_button large rounded blue">Large Rounded</a> <!-- DC Gradient Buttons End -->
Green/Yellow
Mini Button Default Button Large Button Mini Rounded Default Rounded Large Rounded
Mini Button Default Button Large Button Mini Rounded Default Rounded Large Rounded
View code:
<!-- DC Gradient Buttons Start --> <a href="#" class="dc_gradient_button small green">Mini Button</a> <a href="#" class="dc_gradient_button green">Default Button</a> <a href="#" class="dc_gradient_button large green">Large Button</a> <a href="#" class="dc_gradient_button small rounded green">Mini Rounded</a> <a href="#" class="dc_gradient_button rounded green">Default Rounded</a> <a href="#" class="dc_gradient_button large rounded green">Large Rounded</a> <a href="#" class="dc_gradient_button small yellow">Mini Button</a> <a href="#" class="dc_gradient_button yellow">Default Button</a> <a href="#" class="dc_gradient_button large yellow">Large Button</a> <a href="#" class="dc_gradient_button small rounded yellow">Mini Rounded</a> <a href="#" class="dc_gradient_button rounded yellow">Default Rounded</a> <a href="#" class="dc_gradient_button large rounded yellow">Large Rounded</a> <!-- DC Gradient Buttons End -->
Orange/Red
Mini Button Default Button Large Button Mini Rounded Default Rounded Large Rounded
Mini Button Default Button Large Button Mini Rounded Default Rounded Large Rounded
View code:
<!-- DC Gradient Buttons Start --> <a href="#" class="dc_gradient_button small orange">Mini Button</a> <a href="#" class="dc_gradient_button orange">Default Button</a> <a href="#" class="dc_gradient_button large orange">Large Button</a> <a href="#" class="dc_gradient_button small rounded orange">Mini Rounded</a> <a href="#" class="dc_gradient_button rounded orange">Default Rounded</a> <a href="#" class="dc_gradient_button large rounded orange">Large Rounded</a> <a href="#" class="dc_gradient_button small red">Mini Button</a> <a href="#" class="dc_gradient_button red">Default Button</a> <a href="#" class="dc_gradient_button large red">Large Button</a> <a href="#" class="dc_gradient_button small rounded red">Mini Rounded</a> <a href="#" class="dc_gradient_button rounded red">Default Rounded</a> <a href="#" class="dc_gradient_button large rounded red">Large Rounded</a> <!-- DC Gradient Buttons End -->
Pink/Purple
Mini Button Default Button Large Button Mini Rounded Default Rounded Large Rounded
Mini Button Default Button Large Button Mini Rounded Default Rounded Large Rounded
View code:
<!-- DC Gradient Buttons Start --> <a href="#" class="dc_gradient_button small pink">Mini Button</a> <a href="#" class="dc_gradient_button pink">Default Button</a> <a href="#" class="dc_gradient_button large pink">Large Button</a> <a href="#" class="dc_gradient_button small rounded pink">Mini Rounded</a> <a href="#" class="dc_gradient_button rounded pink">Default Rounded</a> <a href="#" class="dc_gradient_button large rounded pink">Large Rounded</a> <a href="#" class="dc_gradient_button small purple">Mini Button</a> <a href="#" class="dc_gradient_button purple">Default Button</a> <a href="#" class="dc_gradient_button large purple">Large Button</a> <a href="#" class="dc_gradient_button small rounded purple">Mini Rounded</a> <a href="#" class="dc_gradient_button rounded purple">Default Rounded</a> <a href="#" class="dc_gradient_button large rounded purple">Large Rounded</a> <!-- DC Gradient Buttons End -->
Text Highlighter
Highlight text paragraphs or important keywordsSuspendisse potenti sample text example of silver dc_highlight purus varius nibh.
Lorem ipsum dolor sit amet, consectetur adipiscing elit and another sample text example of silver dc_highlight2 quis nisl mauris.
View code:
<!-- DC Text Highlighter Start --> <span class="dc_highlight silver">sample text example of silver dc_highlight</span> <span class="dc_highlight2 silver_text">another sample text example of silver dc_highlight2</span> <!-- DC Text Highlighter End -->
Suspendisse potenti sample text example of steelblue dc_highlight purus varius nibh.
Lorem ipsum dolor sit amet, consectetur adipiscing elit and another sample text example of steelblue dc_highlight2 quis nisl mauris.
View code:
<!-- DC Text Highlighter Start --> <span class="dc_highlight steelblue">sample text example of steelblue dc_highlight</span> <span class="dc_highlight2 steelblue_text">another sample text example of steelblue dc_highlight2</span> <!-- DC Text Highlighter End -->
Suspendisse potenti sample text example of black dc_highlight purus varius nibh.
Lorem ipsum dolor sit amet, consectetur adipiscing elit and another sample text example of black dc_highlight2 quis nisl mauris.
View code:
<!-- DC Text Highlighter Start --> <span class="dc_highlight black">sample text example of black dc_highlight</span> <span class="dc_highlight2 black_text">another sample text example of black dc_highlight2</span> <!-- DC Text Highlighter End -->
Suspendisse potenti sample text example of orange dc_highlight purus varius nibh.
Lorem ipsum dolor sit amet, consectetur adipiscing elit and another sample text example of orange dc_highlight2 quis nisl mauris.
View code:
<!-- DC Text Highlighter Start --> <span class="dc_highlight orange">sample text example of orange dc_highlight</span> <span class="dc_highlight2 orange_text">another sample text example of orange dc_highlight2</span> <!-- DC Text Highlighter End -->
Suspendisse potenti sample text example of red dc_highlight purus varius nibh.
Lorem ipsum dolor sit amet, consectetur adipiscing elit and another sample text example of red dc_highlight2 quis nisl mauris.
View code:
<!-- DC Text Highlighter Start --> <span class="dc_highlight red">sample text example of red dc_highlight</span> <span class="dc_highlight2 red_text">another sample text example of red dc_highlight2</span> <!-- DC Text Highlighter End -->
Suspendisse potenti sample text example of yellow dc_highlight purus varius nibh.
Lorem ipsum dolor sit amet, consectetur adipiscing elit and another sample text example of yellow dc_highlight2 quis nisl mauris.
View code:
<!-- DC Text Highlighter Start --> <span class="dc_highlight yellow">sample text example of yellow dc_highlight</span> <span class="dc_highlight2 yellow_text">another sample text example of yellow dc_highlight2</span> <!-- DC Text Highlighter End -->
Suspendisse potenti sample text example of green dc_highlight purus varius nibh.
Lorem ipsum dolor sit amet, consectetur adipiscing elit and another sample text example of green dc_highlight2 quis nisl mauris.
View code:
<!-- DC Text Highlighter Start --> <span class="dc_highlight green">sample text example of green dc_highlight</span> <span class="dc_highlight2 green_text">another sample text example of green dc_highlight2</span> <!-- DC Text Highlighter End -->
Suspendisse potenti sample text example of olive dc_highlight purus varius nibh.
Lorem ipsum dolor sit amet, consectetur adipiscing elit and another sample text example of olive dc_highlight2 quis nisl mauris.
View code:
<!-- DC Text Highlighter Start --> <span class="dc_highlight olive">sample text example of olive dc_highlight</span> <span class="dc_highlight2 olive_text">another sample text example of olive dc_highlight2</span> <!-- DC Text Highlighter End -->
Suspendisse potenti sample text example of teal dc_highlight purus varius nibh.
Lorem ipsum dolor sit amet, consectetur adipiscing elit and another sample text example of teal dc_highlight2 quis nisl mauris.
View code:
<!-- DC Text Highlighter Start --> <span class="dc_highlight teal">sample text example of teal dc_highlight</span> <span class="dc_highlight2 teal_text">another sample text example of teal dc_highlight2</span> <!-- DC Text Highlighter End -->
Suspendisse potenti sample text example of blue dc_highlight purus varius nibh.
Lorem ipsum dolor sit amet, consectetur adipiscing elit and another sample text example of blue dc_highlight2 quis nisl mauris.
View code:
<!-- DC Text Highlighter Start --> <span class="dc_highlight blue">sample text example of blue dc_highlight</span><br /> <span class="dc_highlight2 blue_text">another sample text example of blue dc_highlight2</span> <!-- DC Text Highlighter End -->
Suspendisse potenti sample text example of deepblue dc_highlight purus varius nibh.
Lorem ipsum dolor sit amet, consectetur adipiscing elit and another sample text example of deepblue dc_highlight2 quis nisl mauris.
View code:
<!-- DC Text Highlighter Start --> <span class="dc_highlight deepblue">sample text example of deepblue dc_highlight</span> <span class="dc_highlight2 deepblue_text">another sample text example of deepblue dc_highlight2</span> <!-- DC Text Highlighter End -->
Suspendisse potenti sample text example of purple dc_highlight purus varius nibh.
Lorem ipsum dolor sit amet, consectetur adipiscing elit and another sample text example of purple dc_highlight2 quis nisl mauris.
View code:
<!-- DC Text Highlighter Start --> <span class="dc_highlight purple">sample text example of purple dc_highlight</span> <span class="dc_highlight2 purple_text">another sample text example of purple dc_highlight2</span> <!-- DC Text Highlighter End -->
Suspendisse potenti sample text example of hotpink dc_highlight purus varius nibh.
Lorem ipsum dolor sit amet, consectetur adipiscing elit and another sample text example of hotpink dc_highlight2 quis nisl mauris.
View code:
<!-- DC Text Highlighter Start --> <span class="dc_highlight hotpink">sample text example of hotpink dc_highlight</span> <span class="dc_highlight2 hotpink_text">another sample text example of hotpink dc_highlight2</span> <!-- DC Text Highlighter End -->
Suspendisse potenti sample text example of slategrey dc_highlight purus varius nibh.
Lorem ipsum dolor sit amet, consectetur adipiscing elit and another sample text example of slategrey dc_highlight2 quis nisl mauris.
View code:
<!-- DC Text Highlighter Start --> <span class="dc_highlight slategrey">sample text example of slategrey dc_highlight</span> <span class="dc_highlight2 slategrey_text">another sample text example of slategrey dc_highlight2</span> <!-- DC Text Highlighter End -->
Suspendisse potenti sample text example of mauve dc_highlight purus varius nibh.
Lorem ipsum dolor sit amet, consectetur adipiscing elit and another sample text example of mauve dc_highlight2 quis nisl mauris.
View code:
<!-- DC Text Highlighter Start --> <span class="dc_highlight mauve">sample text example of mauve dc_highlight</span> <span class="dc_highlight2 mauve_text">another sample text example of mauve dc_highlight2</span> <!-- DC Text Highlighter End -->
Suspendisse potenti sample text example of pearl dc_highlight purus varius nibh.
Lorem ipsum dolor sit amet, consectetur adipiscing elit and another sample text example of pearl dc_highlight2 quis nisl mauris.
View code:
<!-- DC Text Highlighter Start --> <span class="dc_highlight pearl">sample text example of pearl dc_highlight</span> <span class="dc_highlight2 pearl_text">another sample text example of pearl dc_highlight2</span> <!-- DC Text Highlighter End -->
Suspendisse potenti sample text example of mossgreen dc_highlight purus varius nibh.
Lorem ipsum dolor sit amet, consectetur adipiscing elit and another sample text example of mossgreen dc_highlight2 quis nisl mauris.
View code:
<!-- DC Text Highlighter Start --> <span class="dc_highlight mossgreen">sample text example of mossgreen dc_highlight</span> <span class="dc_highlight2 mossgreen_text">another sample text example of mossgreen dc_highlight2</span> <!-- DC Text Highlighter End -->
Suspendisse potenti sample text example of wheat dc_highlight purus varius nibh.
Lorem ipsum dolor sit amet, consectetur adipiscing elit and another sample text example of wheat dc_highlight2 quis nisl mauris.
View code:
<!-- DC Text Highlighter Start --> <span class="dc_highlight wheat">sample text example of wheat dc_highlight</span> <span class="dc_highlight2 wheat_text">another sample text example of wheat dc_highlight2</span> <!-- DC Text Highlighter End -->
Suspendisse potenti sample text example of coffee dc_highlight purus varius nibh.
Lorem ipsum dolor sit amet, consectetur adipiscing elit and another sample text example of coffee dc_highlight2 quis nisl mauris.
View code:
<!-- DC Text Highlighter Start --> <span class="dc_highlight coffee">sample text example of coffee dc_highlight</span> <span class="dc_highlight2 coffee_text">another sample text example of coffee dc_highlight2</span> <!-- DC Text Highlighter End -->
Suspendisse potenti sample text example of copper dc_highlight purus varius nibh.
Lorem ipsum dolor sit amet, consectetur adipiscing elit and another sample text example of copper dc_highlight2 quis nisl mauris.
View code:
<!-- DC Text Highlighter Start --> <span class="dc_highlight copper">sample text example of copper dc_highlight</span> <span class="dc_highlight2 copper_text">another sample text example of copper dc_highlight2</span> <!-- DC Text Highlighter End -->
Pullquotes
Create quotations or excerpt from articlesPullquote Style 1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.This is pullquote 1a. Nam sit amet sem liberi nec gravida vehicula a nisl Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.This is pullquote 1b. Nam sit amet sem liberi nec gravida vehicula a nisl Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
Nam sit amet sem. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.This is pullquote align 1c. Nam sit amet sem liberi nec gravida vehicula a nisl. Nunc iaculis sem a suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
View code:
<!-- DC Pullquotes 1a:Right Start --> <span class="dc_pullquote quotes alignright">This is pullquote 1a. Nam sit amet sem liberi nec gravida vehicula a nisl</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse consequat vulputate turpis, non sodales lectus fringilla at. Duis mi dolor, feugiat et porttitor vel, rhoncus sed justo. Pellentesque non lorem a lorem lacinia pharetra. Vivamus lobortis enim ut sapien porta vel vulputate arcu tempor. <!-- DC Pullquotes:Right End --> <!-- DC Pullquotes 1b:Left Start --> <span class="dc_pullquote alignleft">This is pullquote 1b. Nam sit amet sem liberi nec gravida vehicula a nisl</span><br /><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse consequat vulputate turpis, non sodales lectus fringilla at. Duis mi dolor, feugiat et porttitor vel, rhoncus sed justo. Pellentesque non lorem a lorem lacinia pharetra. Vivamus lobortis enim ut sapien porta vel vulputate arcu tempor. <!-- DC Pullquotes:Left End --> <!-- DC Pullquotes 1c:Center Start --> <span class="dc_pullquote quotes aligncenter">This is pullquote 1c. Nam sit amet sem liberi nec gravida vehicula a nisl. Nunc iaculis sem a suscipit dui.</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse consequat vulputate turpis, non sodales lectus fringilla at. Duis mi dolor, feugiat et porttitor vel, rhoncus sed justo. Pellentesque non lorem a lorem lacinia pharetra. Vivamus lobortis enim ut sapien porta vel vulputate arcu tempor. <!-- DC Pullquotes:Center End -->
Pullquote Style 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.This is pullquote 2a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas mattis tortor, vel vulputate eros porta quis. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.This is pullquote 2b. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas mattis tortor, vel vulputate eros porta quis. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
Nam sit amet sem. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.This is pullquote 2c. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas mattis tortor, vel vulputate eros porta quis.. Nunc iaculis sem a suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
View code:
<!-- DC Pullquotes 2a:Right Start --> <span class="dc_pullquote2 quotes alignright">This is pullquote 2a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas mattis tortor, vel vulputate eros porta quis.</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse consequat vulputate turpis, non sodales lectus fringilla at. Duis mi dolor, feugiat et porttitor vel, rhoncus sed justo. Pellentesque non lorem a lorem lacinia pharetra. Vivamus lobortis enim ut sapien porta vel vulputate arcu tempor. <!-- DC Pullquotes:Right End --> <!-- DC Pullquotes 2b:Left Start --> <span class="dc_pullquote2 alignleft">This is pullquote 2b. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas mattis tortor, vel vulputate eros porta quis.</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse consequat vulputate turpis, non sodales lectus fringilla at. Duis mi dolor, feugiat et porttitor vel, rhoncus sed justo. Pellentesque non lorem a lorem lacinia pharetra. Vivamus lobortis enim ut sapien porta vel vulputate arcu tempor. <!-- DC Pullquotes:Left End --> <!-- DC Pullquotes 2c:Center Start --> <span class="dc_pullquote2 quotes aligncenter">This is pullquote 2c. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas mattis tortor, vel vulputate eros porta quis.. Nunc iaculis sem a suscipit dui.</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse consequat vulputate turpis, non sodales lectus fringilla at. Duis mi dolor, feugiat et porttitor vel, rhoncus sed justo. Pellentesque non lorem a lorem lacinia pharetra. Vivamus lobortis enim ut sapien porta vel vulputate arcu tempor. <!-- DC Pullquotes:Center End -->
Pullquote Style 3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.This is pullquote 3a. Nam sit amet sem liberi nec gravida vehicula a nisl Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.This is pullquote 3b. Nam sit amet sem liberi nec gravida vehicula a nisl Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
Nam sit amet sem. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.This is pullquote 3c. Nam sit amet sem liberi nec gravida vehicula a nisl. Nunc iaculis sem a suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
View code:
<!-- DC Pullquotes 3a:Right Start --> <span class="dc_pullquote3 quotes alignright">This is pullquote 3a. Nam sit amet sem liberi nec gravida vehicula a nisl</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse consequat vulputate turpis, non sodales lectus fringilla at. Duis mi dolor, feugiat et porttitor vel, rhoncus sed justo. Pellentesque non lorem a lorem lacinia pharetra. Vivamus lobortis enim ut sapien porta vel vulputate arcu tempor. <!-- DC Pullquotes:Right End --> <!-- DC Pullquotes 3b:Left Start --> <span class="dc_pullquote3 alignleft">This is pullquote 3b. Nam sit amet sem liberi nec gravida vehicula a nisl</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse consequat vulputate turpis, non sodales lectus fringilla at. Duis mi dolor, feugiat et porttitor vel, rhoncus sed justo. Pellentesque non lorem a lorem lacinia pharetra. Vivamus lobortis enim ut sapien porta vel vulputate arcu tempor. <!-- DC Pullquotes:Left End --> <!-- DC Pullquotes 3c:Center Start --> <span class="dc_pullquote3 quotes aligncenter">This is pullquote 3c. Nam sit amet sem liberi nec gravida vehicula a nisl. Nunc iaculis sem a suscipit dui.</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse consequat vulputate turpis, non sodales lectus fringilla at. Duis mi dolor, feugiat et porttitor vel, rhoncus sed justo. Pellentesque non lorem a lorem lacinia pharetra. Vivamus lobortis enim ut sapien porta vel vulputate arcu tempor. <!-- DC Pullquotes:Center End -->
Pullquote Style 4
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.This is pullquote 4a. Nam sit amet sem liberi nec gravida vehicula a nisl Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.This is pullquote 4b. Nam sit amet sem liberi nec gravida vehicula a nisl Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
Nam sit amet sem. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.This is pullquote 4c. Nam sit amet sem liberi nec gravida vehicula a nisl. Nunc iaculis sem a suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
View code:
<!-- DC Pullquotes 4a:Right Start --> <span class="dc_pullquote4 quotes alignright">This is pullquote 4a. Nam sit amet sem liberi nec gravida vehicula a nisl</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse consequat vulputate turpis, non sodales lectus fringilla at. Duis mi dolor, feugiat et porttitor vel, rhoncus sed justo. Pellentesque non lorem a lorem lacinia pharetra. Vivamus lobortis enim ut sapien porta vel vulputate arcu tempor. <!-- DC Pullquotes:Right End --> <!-- DC Pullquotes 4b:Left Start --> <span class="dc_pullquote4 alignleft">This is pullquote 4b. Nam sit amet sem liberi nec gravida vehicula a nisl</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse consequat vulputate turpis, non sodales lectus fringilla at. Duis mi dolor, feugiat et porttitor vel, rhoncus sed justo. Pellentesque non lorem a lorem lacinia pharetra. Vivamus lobortis enim ut sapien porta vel vulputate arcu tempor. <!-- DC Pullquotes:Left End --> <!-- DC Pullquotes 4c:Center Start --> <span class="dc_pullquote4 quotes aligncenter">This is pullquote 4c. Nam sit amet sem liberi nec gravida vehicula a nisl. Nunc iaculis sem a suscipit dui.</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse consequat vulputate turpis, non sodales lectus fringilla at. Duis mi dolor, feugiat et porttitor vel, rhoncus sed justo. Pellentesque non lorem a lorem lacinia pharetra. Vivamus lobortis enim ut sapien porta vel vulputate arcu tempor. <!-- DC Pullquotes:Center End -->
Dividers
Divide content with these elegant dividersDivider Style 1
View code:
<!-- DC Divider Start --> <div class="dc_divider1"></div> <div class="dc_divider1_black"></div> <!-- DC Divider End -->
Divider Style 2
View code:
<!-- DC Divider Start --> <div class="dc_divider2"></div> <div class="dc_divider2_black"></div> <!-- DC Divider End -->
Divider Style 3
View code:
<!-- DC Divider Start --> <div class="dc_divider3"></div> <div class="dc_divider3_black"></div> <!-- DC Divider End -->
Divider Style 4
View code:
<!-- DC Divider Start --> <div class="dc_divider4"></div> <div class="dc_divider4_black"></div> <!-- DC Divider End -->
Divider Style 5
View code:
<!-- DC Divider Start --> <div class="dc_divider5"></div> <div class="dc_divider5_black"></div> <!-- DC Divider End -->
Divider Style 6
View code:
<!-- DC Divider Start --> <div class="dc_divider6"></div> <div class="dc_divider6_black"></div> <!-- DC Divider End -->
Divider Style 7
View code:
<!-- DC Divider Start --> <div class="dc_divider7"></div> <div class="dc_divider7_black"></div> <!-- DC Divider End -->
Divider Style 8
View code:
<!-- DC Divider Start --> <div class="dc_divider8"></div> <div class="dc_divider8_black"></div> <!-- DC Divider End -->
Divider Style 9
View code:
<!-- DC Divider Start --> <div class="dc_divider9"></div> <div class="dc_divider9_black"></div> <!-- DC Divider End -->
Divider Style 10
View code:
<!-- DC Divider Start --> <div class="dc_divider10"></div> <div class="dc_divider10_black"></div> <!-- DC Divider End -->
Embed Videos
Add web videos to your website in secondsVimeo
View code:
<!-- DC Vimeo Embed Start --> <iframe src="http://player.vimeo.com/video/4749536" width="700" height="300" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <!-- <iframe src="http://player.vimeo.com/video/VIDEO_ID_HERE" width="700" height="300" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> --> <!-- DC Vimeo Embed End --> Parameters: --------------------- title - Show the title on the video. Defaults to 1. byline - Show the user’s byline on the video. Defaults to 1. portrait - Show the user’s portrait on the video. Defaults to 1. color - Specify the color of the video controls. Defaults to 00adef. Make sure that you don’t include the #. autoplay - Play the video automatically on load. Defaults to 0. Note that this won’t work on some devices. loop - Play the video again when it reaches the end. Defaults to 0. api - Set to 1 to enable the Javascript API. player_id - An unique id for the player that will be passed back with all Javascript API responses. allowFullScreen - allow fullscreen maximize mozallowfullscreen - allow fullscreen maximize in Firefox webkitAllowFullScreen - allow fullscreen maximize in Chrome/Safari
YouTube
View code:
<!-- DC YouTube Embed Start --> <iframe width="700" height="300" src="http://www.youtube.com/embed/FG0fTKAqZ5g?rel=0" frameborder="0" allowfullscreen></iframe> <!-- <iframe width="700" height="300" src="http://www.youtube.com/embed/VIDEO_ID_HERE?rel=0" frameborder="0" allowfullscreen></iframe> --> <!-- DC YouTube Embed End --> Parameters: --------------------- ?rel=0 - indicates whether the player should show related videos when playback of the initial video ends ?autoplay=0 (default) OR autoplay=1 - Set whether or not the initial video will autoplay when the player loads. ?#t=XmYs - Link your viewers to the most interesting part of the video: Make your video play starting from X minutes and Y seconds ?loop=0 (default) OR loop=1 - makes the video start again without user intervention after it reaches the end. ?controls=0 - indicates whether the video player controls will display. If set to 0, player controls will not display.
HTML 5
Works with IE 9+, Firefox4+, Chrome 6+, Opera 10+, Safari 5+
View code:
<!-- DC HTML 5 Video Embed Start --> <video poster="http://cdn.dcodes.net/sc-samples/sample-clip.png" controls preload="metadata" width="700" height="300"> <source src="http://cdn.dcodes.net/sc-samples/sample-clip.mp4" type="video/mp4; codecs="avc1.42E01E, mp4a.40.2""> <!-- for IE --> <source src="http://cdn.dcodes.net/sc-samples/sample-clip.webm" type="video/webm; codecs="vp8, vorbis""> <!-- for Firefox --> If you see this message, your browser does not support the video tag. </video> <!-- DC HTML 5 Video Embed End --> Parameters: --------------------- autoplay - Specifies that the video will start playing as soon as it is ready controls - Specifies that video controls should be displayed (such as a play/pause button etc). height - Sets the height of the video player loop - Specifies that the video will start over again, every time it is finished muted - Specifies that the audio output of the video should be muted poster - Specifies an image url to be shown while the video is downloading preload (auto/metadata/none) - Specifies if and how the author thinks the video should be loaded when the page loads src - Specifies the URL of the video file width - Sets the width of the video player Note: If your video fails to load due to a MIME types error, make sure your root .htaccess file contains: AddType video/webm webm AddType video/mp4 mp4
Dailymotion
View code:
<!-- DC DailyMotion Embed Start --> <iframe src="http://www.dailymotion.com/embed/video/xq2cmn?logo=1" width="700" height="300" frameborder="0"></iframe> <!-- <iframe src="http://www.dailymotion.com/embed/video/VIDEO_ID_HERE?logo=1" width="700" height="300" frameborder="0"></iframe> --> <!-- DC DailyMotion Embed End --> Parameters: --------------------- src - Specifies the URL of the video file logo (0/1) - Shows dailymotion logo (default is 1 = on) height - Sets the height of the video player width - Sets the width of the video player
Embed Document Files
Embed Adobe PDF/MS Office files internally or externally on a webpageSupported File Formats:
|
|
|
Embed File
View code:
<!-- DC PDF Embed Start --> <iframe src="http://docs.google.com/viewer?url=http://cdn.dcodes.net/sc-samples/sample.pdf&embedded=true" style="width:760px; height:400px;" frameborder="0"> Your browser should support iFrame to view this PDF document</iframe> <!-- DC PDF Embed End --> Parameters: --------------------- url - path to PDF file embedded (true/false) - embed into page width - width of pdf frame height - height of pdf frame
File - Open External
View PDF File (opens new window)
View code:
<!-- DC PDF Embed Start --> <a href="http://docs.google.com/viewer?url=http://cdn.dcodes.net/sc-samples/sample.pdf" target="_blank">View PDF File</a> <!-- DC PDF Embed End --> Parameters: --------------------- url - path to PDF file
Social Networking
Add Facebook Like Boxes/Buttons, Twitter Follower Counts, Tweet buttons, Google +1 buttonsGoogle +1 Button
View code:
<!-- Place this tag in your head or just before your close body tag --> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <!-- Place this tag where you want the +1 button to render --> <div class="g-plusone" data-size="medium" data-annotation="inline" data-href="http://www.google.com"></div> Parameters: --------------------- size (small/medium/tall) - Google +1 button size data-annotation (none/inline) - show text "xx People recommend this on Google" width - Google +1 layout width data-href - page url to Google +1
Facebook Likes Button
View code:
<!-- DC Facebook Likes Start --> <iframe src="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com&send=false&layout=standard&width=250&show_faces=false&action=like&colorscheme=light&font&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:35px;" allowTransparency="true"></iframe> <!-- DC Facebook Likes End --> Parameters: --------------------- href - URL of page to like layout (standard/button_count/box_count) - button layout width - width of FB likes layout height - height of FB likes layout colorscheme (light/dark) - FB color scheme
Facebook Likes Box
View code:
<!-- DC Facebook Likes Box Start --> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/USERNAME&width=250&height=258&colorscheme=light&show_faces=true&border_color&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:300px;" allowTransparency="true"></iframe> <!-- DC Facebook Likes Box End --> Parameters: --------------------- href - URL of FB page colorscheme (light/dark) - FB color scheme show_faces (true/false) - show FB faces stream (true/false) - show FB activity stream header (true/false) - show FB header width - width of FB likes layout height - height of FB likes layout
Twitter Follow + Count
View code:
<!-- DC Twitter Count Start --> <iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.html?screen_name=MICROSOFT&show_count=true&show_screen_name=true&lang=en" style="width:290px; height:20px;"></iframe> <!-- DC Twitter Count End --> Parameters: --------------------- screen_name - twitter username &show_count (true/false) - show twitter follower count &show_screen_name (true/false_ show twitter username when rendering button &lang (en/fr) - change language (en = english/default)
Twitter - Tweet
View code:
<!-- DC Twitter Tweet Start --> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://yourdomain.com/page-to-tweet-about.html">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> <!-- DC Twitter Tweet End --> Parameters: --------------------- data-url - Page to share/tweet. Remove this parameter to tweet the current/referred page.
pInterest Follow Me
View code:
<!-- DC pInterest Start --> <a href="http://pinterest.com/USERNAME/"><img src="http://passets-cdn.pinterest.com/images/about/buttons/follow-me-on-pinterest-button.png" width="169" height="28" alt="Follow Me on Pinterest" /></a> <!-- DC pInterest End --> Parameters: --------------------- username - pinterest username
Paypal Buttons
Accept and process credit card payments with Paypal linksPayPal Payment/Buy Link
Create payment buttons so your customers can pay!
View code:
<!-- DC PayPal Payment Link Start --> <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank"> <input type="hidden" name="cmd" value="_xclick"> <input type="hidden" name="business" value="YOUR@PAYPALACCOUNT.COM"> <input type="hidden" name="item_name" value="Name of item paying for"> <input type="hidden" name="amount" value="29.95"> <input type="hidden" name="currency_code" value="USD"> <input type="hidden" name="button_subtype" value="products"> <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"> </form> <!-- DC PayPal Payment Link End --> Parameters: --------------------- business= enter your paypal email address item_name= description of item to pay for amount= price of item currency_code= (USD/EUR/AUD/GBP/CAD) currency to use button_subtype= (products/services) define what are you selling item_number= item number (optional) invoice= invoice number (optional) shipping= Enter the shipping cost of the item here (optional) tax= Enter a flat tax amount to add to the item here (optional) cn= custom notes you want to add to this order
PayPal Subscribe/Subscription Link
Lets you create a paypal subscription button. Create recurring billings easily.
View code:
<!-- DC PayPal Subscription Link Start --> <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank"> <input type="hidden" name="cmd" value="_xclick-subscriptions"> <input type="hidden" name="business" value="your@paypalaccuont.com"> <input type="hidden" name="item_name" value="Name of subscription item"> <input type="hidden" name="a3" value="29.95"> <!-- subscription price --> <input type="hidden" name="p3" value="1"> <!-- rebill every x value --> <input type="hidden" name="t3" value="M"> <!-- interval M=month/W=week/Y=year --> <input type="hidden" name="src" value="1"> <!-- Is this recurring 1=yes/0=no --> <input type="hidden" name="currency_code" value="USD"> <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_subscribeCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"> </form> <!-- DC PayPal Subscription Link End --> Parameters: --------------------- business= enter your paypal email address item_name= description of subscription item a3= subscription price currency_code= (USD/EUR/AUD/GBP/CAD) currency to use p3= rebill every x value t3= billing interval (M=month/W=week/Y=year) src= is this a recurring charge (1=yes/0=no) cn= custom notes you want to add to this order sra= reattempt failed payments? (1=yes/0=no)
PayPal unSubscribe Link
Let your customers unsubscribe from active subscriptions.
View code:
<!-- DC PayPal unSubscribe Link Start --> <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank"> <input type="hidden" name="cmd" value="_subscr-find"> <input type="hidden" name="alias" value="YOUR@PAYPALACCOUNT.COM"> <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_unsubscribe_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"> </form> <!-- DC PayPal unSubscribe Link End --> Parameters: --------------------- business= enter your paypal email address
PayPal Donation Link
Accept donations with ease using this simple shortcode.
View code:
<!-- DC PayPal Donation Link Start --> <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank"> <input type="hidden" name="cmd" value="_donations"> <input type="hidden" name="business" value="YOUR@PAYPALACCOUNT.COM"> <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"> </form> <!-- DC PayPal Donation Link End --> Parameters: --------------------- business= Enter your paypal email address
Skype Calls
Call & chat to your website visitors with easy Skype integrationSkype: Call Me Button #1
Options: Show live Skype status, icon + text, big, button styleView code:
<!-- Place this tag where you want the skype button to render --> <script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script> <a href="skype:USERNAME?call"><img src="http://mystatus.skype.com/bigclassic/USERNAME" style="border: none;" width="182" height="44" alt="My status" /></a> Parameters: --------------------- username: enter your skype username here
Skype: Call Me Button #2
Options: Show live Skype status, icon + text, small, button styleView code:
<!-- Place this tag where you want the skype button to render --> <script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script> <a href="skype:USERNAME?call"><img src="http://mystatus.skype.com/smallclassic/USERNAME" style="border: none;" width="114" height="20" alt="My status" /></a> Parameters: --------------------- username: enter your skype username here
Skype: Call Me Button #3
Options: icon + text, big, balloon style, green colorView code:
<!-- Place this tag where you want the skype button to render --> <script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script> <a href="skype:USERNAME?call"><img src="http://download.skype.com/share/skypebuttons/buttons/call_green_white_153x63.png" style="border: none;" width="153" height="63" alt="Skype Me™!" /></a> Parameters: --------------------- username: enter your skype username here
Skype: Call Me Button #4
Options: icon + text, big, button style, blue colorView code:
<!-- Place this tag where you want the skype button to render --> <script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script> <a href="skype:USERNAME?call"><img src="http://download.skype.com/share/skypebuttons/buttons/call_blue_white_124x52.png" style="border: none;" width="124" height="52" alt="Skype Me™!" /></a> Parameters: --------------------- username: enter your skype username here
Skype: Call Me Button #5
Options: icon + text, small, button style, blue colorView code:
<!-- Place this tag where you want the skype button to render --> <script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script> <a href="skype:USERNAME?call"><img src="http://download.skype.com/share/skypebuttons/buttons/call_blue_transparent_70x23.png" style="border: none;" width="70" height="23" alt="Skype Me™!" /></a> Parameters: --------------------- username: enter your skype username here
Skype: Call Me Button #6
Options: icon + text, small, button style, green colorView code:
<!-- Place this tag where you want the skype button to render --> <script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script> <a href="skype:USERNAME?call"><img src="http://download.skype.com/share/skypebuttons/buttons/call_green_transparent_70x23.png" style="border: none;" width="70" height="23" alt="Skype Me™!" /></a> Parameters: --------------------- username: enter your skype username here
Skype: Call Me Button #7
Options: icon, big, button style, green colorView code:
<!-- Place this tag where you want the skype button to render --> <script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script> <a href="skype:USERNAME?call"><img src="http://download.skype.com/share/skypebuttons/buttons/call_green_white_92x82.png" style="border: none;" width="92" height="82" alt="Skype Me™!" /></a> Parameters: --------------------- username: enter your skype username here
Skype: Call Me Button #8
Options: icon, big, button style, green colorView code:
<!-- Place this tag where you want the skype button to render --> <script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script> <a href="skype:USERNAME?call"><img src="http://download.skype.com/share/skypebuttons/buttons/call_green_transparent_34x34.png" style="border: none;" width="34" height="34" alt="Skype Me™!" /></a> Parameters: --------------------- username: enter your skype username here
Skype: Call Me Button #9
Options: "add me to skype" text, icon+text, big, button style, blue colorView code:
<!-- Place this tag where you want the skype button to render --> <script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script> <a href="skype:dcodes.net?add"><img src="http://download.skype.com/share/skypebuttons/buttons/add_blue_white_194x52.png" style="border: none;" width="194" height="52" alt="Add me to Skype" /></a> Parameters: --------------------- username: enter your skype username here
Skype: Call Me Button #10
Options: "chat with me" text, icon+text, big, button style, blue colorView code:
<!-- Place this tag where you want the skype button to render --> <script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script> <a href="skype:USERNAME?chat"><img src="http://download.skype.com/share/skypebuttons/buttons/chat_blue_white_164x52.png" style="border: none;" width="164" height="52" alt="Chat with me" /></a> Parameters: --------------------- username: enter your skype username here
Skype: Call Me Button #11
Options: "leave me voicemail" text, icon+text, big, button style, blue colorView code:
<!-- Place this tag where you want the skype button to render --> <script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script> <a href="skype:USERNAME?voicemail"><img src="http://download.skype.com/share/skypebuttons/buttons/voicemail_blue_white_213x52.png" style="border: none;" width="213" height="52" alt="Leave me voicemail" /></a> Parameters: --------------------- username: enter your skype username here
Skype: Call Me Button #12
Options: "leave me voicemail" text, icon+text, small, button style, green colorView code:
<!-- Place this tag where you want the skype button to render --> <script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script> <a href="skype:USERNAME?voicemail"><img src="http://download.skype.com/share/skypebuttons/buttons/voicemail_blue_transparent_129x23.png" style="border: none;" width="129" height="23" alt="Leave me voicemail" /></a> Parameters: --------------------- username: enter your skype username here
Skype: Call Me Button #13
Options: "send me a file" text, icon+text, big, button style, green colorView code:
<!-- Place this tag where you want the skype button to render --> <script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script> <a href="skype:USERNAME?sendfile"><img src="http://download.skype.com/share/skypebuttons/buttons/sendfile_green_white_164x52.png" style="border: none;" width="164" height="52" alt="Send me a file" /></a> Parameters: --------------------- username: enter your skype username here
Skype: Call Me Button #14
Options: "send me a file" text, icon+text, small, button style, green colorView code:
<!-- Place this tag where you want the skype button to render --> <script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script> <a href="skype:USERNAME?sendfile"><img src="http://download.skype.com/share/skypebuttons/buttons/sendfile_green_transparent_98x23.png" style="border: none;" width="98" height="23" alt="Send me a file" /></a> Parameters: --------------------- username: enter your skype username here
Skype: Email Integration
Options: email support, icon+text, small, button style, blue color
Get Skype and call me for free.
View code:
<!-- Place this tag where you want the skype button to render in your email --> <a href="skype:USERNAME?call"><img src="http://download.skype.com/share/skypebuttons/buttons/call_blue_transparent_70x23.png" style="border: none;" width="70" height="23" alt="Skype Me!" /></a> <br /><a href="http://www.skype.com/go/download">Get Skype</a> and call me for free.<br /><br /> Parameters: --------------------- username: enter your skype username here