CSS Shortcodes

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 sites

Facebook 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

Blue Pink Orange Green Black

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 styles

Large 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 buttons

Silver/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 keywords

Suspendisse 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 articles

Pullquote 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 dividers

Divider 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 seconds

Vimeo

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 webpage

Supported File Formats:
  • Microsoft Word (.DOC and .DOCX)
  • Microsoft Excel (.XLS and .XLSX)
  • Microsoft PowerPoint (.PPT and .PPTX)
  • Adobe Portable Document Format (.PDF)
  • Apple Pages (.PAGES)
  • Adobe Illustrator (.AI)
  • Adobe Photoshop (.PSD)
  • Tagged Image File Format (.TIFF)
  • Autodesk AutoCad (.DXF)
  • Scalable Vector Graphics (.SVG)
  • PostScript (.EPS, .PS)
  • TrueType (.TTF)
  • XML Paper Specification (.XPS)
  • Archive file types (.ZIP and .RAR)

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 buttons

Google +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

Follow Me on Pinterest

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 links

PayPal 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 integration

Skype: Call Me Button #1

Options: Show live Skype status, icon + text, big, button style

My status

View 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 style

My status

View 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 color

Skype Me™!

View 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 color

Skype Me™!

View 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 color

Skype Me™!

View 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 color

Skype Me™!

View 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 color

Skype Me™!

View 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 color

Skype Me™!

View 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 color

Add me to Skype

View 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 color

Chat with me

View 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 color

Leave me voicemail

View 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 color

Leave me voicemail

View 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 color

Send me a file

View 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 color

Send me a file

View 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

Skype Me!
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