Админ Панель-Внешний вид-Ваш стиль-Глобальные-globalTemplate найти:

<!-- ::: MAIN CONTENT AREA ::: -->			<div id='content' class='clearfix'>

Ниже добавить:

<div class="wrap clearfix">		<div class="accordion">			<ul>				<li id="twitter">					<div class="tag">						<a href="http://twitter.com/renettarenula"></a>						<a href="http://twitter.com/renettarenula"></a>					</div>					<div class="paragraph">						<h1>Twitter</h1>						<p>Тест за Twitter.</p>					</div>				</li>				<li id="facebook">					<div class="tag">						<a href="http://facebook.com"></a>						<a href="http://facebook.com"></a>					</div>					<div class="paragraph">						<h1>Facebook</h1>						<p>Тест за Facebook</p>					</div>				</li>				<li id="linkedin">					<div class="tag">            <a href="http://my.linkedin.com/pub/aysha-anggraini/49/a82/a05/"></a>            <a href="http://my.linkedin.com/pub/aysha-anggraini/49/a82/a05/"></a>					</div>					<div class="paragraph">						<h1>LinkedIn</h1>						<p>Тест за LinkedIn</p>					</div>				</li>				<li id="insta">					<div class="tag">						<a href="http://instagram.com/renettarenula"></a>						<a href="http://instagram.com/renettarenula"></a>					</div>					<div class="paragraph">						<h1>Instagram</h1>						<p>Тест за Instagram</p>					</div>				</li>				<li id="youtube">					<div class="tag">            <a href="http://youtube.com"></a>            <a href="http://youtube.com"></a>					</div>					<div class="paragraph">						<h1>YouTube</h1>						<p>Тест за </p>					</div>				Youtube</li>				<li id="tumblr">					<div class="tag">						<a href="http://renettarenula.tumblr.com/"></a>						<a href="http://renettarenula.tumblr.com/"></a>					</div>					<div class="paragraph">						<h1>Tumblr</h1>						<p>Тест за Tumblr</p>					</div>				</li>				<li id="dribbble">					<div class="tag">            <a href="http://dribbble.com"></a>            <a href="http://dribbble.com"></a>					</div>					<div class="paragraph">						<h1>Dribbble</h1>						<p>Тест за Dribbble</p>					</div>				</li>			</ul>		</div>	</div>

Админ Панель-Внешний вид-Ваш стиль-css и нажмите кнопку Добавить CSS-файла.

Название файла: accordion
Вставить все:
 

caption, th, td {  text-align: left;  font-weight: normal;  vertical-align: middle;}q, blockquote {  quotes: none;}q:before, q:after, blockquote:before, blockquote:after {  content: "";  content: none;}a img {  border: none;}article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {  display: block;}body {  background: #f77462;  font-family: Lato, sans-serif;}@font-face {  font-family: 'Genericons';  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/genericons-regular-webfont.eot");  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/genericons-regular-webfont.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/genericons-regular-webfont.eot") format("truetype");  font-weight: normal;  font-style: normal;}[class*="genericon"] {  display: inline-block;  width: 16px;  height: 16px;  -webkit-font-smoothing: antialiased;  font-size: 16px;  line-height: 1;  font-family: 'Genericons';  text-decoration: inherit;  font-weight: normal;  font-style: normal;  vertical-align: top;}/* IE7 */[class*="genericon"] {  *overflow: auto;  *zoom: 1;  *display: inline;}.wrap {  margin: 5px auto;  width: 100%;}/* social icons and complementary tags of two different colors */.tag > a:first-child:before,.tag > a:nth-child(2):before {  position: absolute;  top: 90px;  left: 25px;  display: block;  vertical-align: text-bottom;  font: normal 1.5em Genericons;  color: #fff;  padding-right: 4px;}.tag > a:nth-child(2):before {  font-size: 3em;  left: 20px;  top: 75px;}.tag > a:first-child,.tag > a:nth-child(2) {  position: absolute;  width: 85px;  height: 200px;  -moz-transition: all 0.4s 0.1s ease-out;  -o-transition: all 0.4s 0.1s ease-out;  -webkit-transition: all 0.4s 0.1s;  -webkit-transition-delay: ease-out;  transition: all 0.4s 0.1s ease-out;}.tag > a:first-child {  background-color: #6dc5dd;}.tag > a:nth-child(2) {  margin-left: 85px;  background: #eee;}#github > div.tag > a:first-child:before,#github > div.tag > a:nth-child(2):before {  content: '\f200';}#twitter > div.tag > a:first-child:before,#twitter > div.tag > a:nth-child(2):before {  content: '\f202';}#facebook > div.tag > a:first-child:before,#facebook > div.tag > a:nth-child(2):before {  content: '\f204';}#linkedin > div.tag > a:first-child:before,#linkedin > div.tag > a:nth-child(2):before {  content: '\f208';}#insta > div.tag > a:first-child:before,#insta > div.tag > a:nth-child(2):before {  content: '\f215';}#youtube > div.tag > a:first-child:before,#youtube > div.tag > a:nth-child(2):before {  content: '\f213';}#tumblr > div.tag > a:first-child:before,#tumblr > div.tag > a:nth-child(2):before {  content: '\f214';}#dribbble > div.tag > a:first-child:before,#dribbble > div.tag > a:nth-child(2):before {  content: '\f201';  padding-top: 3px;  margin-top: -3px;}/* tags of different colors */#github > div.tag > a:nth-child(2):before {  color: #333;}#github > div.tag > a:nth-child(2) {  background: #e6e6e6;}#twitter > div.tag > a:nth-child(2) {  background-image: -moz-linear-gradient(#7adcf9, #4bc9f5);  background-image: -webkit-linear-gradient(#7adcf9, #4bc9f5);  background-image: linear-gradient(#7adcf9, #4bc9f5);}#facebook > div.tag > a:nth-child(2) {  background-image: -moz-linear-gradient(#548abf, #295b9e);  background-image: -webkit-linear-gradient(#548abf, #295b9e);  background-image: linear-gradient(#548abf, #295b9e);}#linkedin > div.tag > a:nth-child(2) {  background-image: -moz-linear-gradient(#00a9cd, #0083b4);  background-image: -webkit-linear-gradient(#00a9cd, #0083b4);  background-image: linear-gradient(#00a9cd, #0083b4);}#youtube > div.tag > a:nth-child(2) {  background-image: -moz-linear-gradient(#df192a, #c41222);  background-image: -webkit-linear-gradient(#df192a, #c41222);  background-image: linear-gradient(#df192a, #c41222);}#insta > div.tag > a:nth-child(2) {  background-image: -moz-linear-gradient(#7fc121, #298733);  background-image: -webkit-linear-gradient(#7fc121, #298733);  background-image: linear-gradient(#7fc121, #298733);}#tumblr > div.tag > a:nth-child(2) {  background-image: -moz-linear-gradient(#283e56, #325372);  background-image: -webkit-linear-gradient(#283e56, #325372);  background-image: linear-gradient(#283e56, #325372);}#dribbble > div.tag > a:nth-child(2) {  background-image: -moz-linear-gradient(#e03a70, #f189b8);  background-image: -webkit-linear-gradient(#e03a70, #f189b8);  background-image: linear-gradient(#e03a70, #f189b8);}.accordion {  background: #5ab2ca;  width: 100%;  height: 200px;  overflow: hidden;}.accordion ul {  margin-left: 30px;  list-style-type: none;}.accordion li {  overflow: hidden;  position: relative;  background-color: #6dc5dd;  border-right: #5ab2ca 1px solid;  width: 80px;  height: 200px;  float: left;  display: block;  -moz-transition: all 0.4s 0.1s ease-out;  -o-transition: all 0.4s 0.1s ease-out;  -webkit-transition: all 0.4s 0.1s;  -webkit-transition-delay: ease-out;  transition: all 0.4s 0.1s ease-out;}.accordion li:hover {  width: 450px;}.accordion li:hover a:first-child {  ;}.accordion li:hover a:nth-child(2) {  ;}.accordion .paragraph {  position: relative;  width: 360px;  margin-left: 80px;  padding: 50px 0 0 10px;  height: 200px;  background: #fff;}.accordion .paragraph h1 {  font-size: 2.5em;  margin-bottom: 10px;}.accordion .paragraph p {  font-size: 0.88em;  line-height: 1.5em;  padding-right: 30px;}.clearfix {  zoom: 1;}.clearfix:before, .clearfix:after {  content: "";  display: table;}.clearfix:after {  clear: both;}

Соц.Сетя мелкые

Если вам не нравитса большие соц.сетя можите все заменить на:
 

caption, th, td {  text-align: left;  font-weight: normal;  vertical-align: middle;}q, blockquote {  quotes: none;}q:before, q:after, blockquote:before, blockquote:after {  content: "";  content: none;}a img {  border: none;}article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {  display: block;}body {  background: #f77462;  font-family: Lato, sans-serif;}@font-face {  font-family: 'Genericons';  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/genericons-regular-webfont.eot");  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/genericons-regular-webfont.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/genericons-regular-webfont.eot") format("truetype");  font-weight: normal;  font-style: normal;}[class*="genericon"] {  display: inline-block;  width: 16px;  height: 16px;  -webkit-font-smoothing: antialiased;  font-size: 16px;  line-height: 1;  font-family: 'Genericons';  text-decoration: inherit;  font-weight: normal;  font-style: normal;  vertical-align: top;}/* IE7 */[class*="genericon"] {  *overflow: auto;  *zoom: 1;  *display: inline;}.wrap {  margin: 5px auto;  width: 100%;}/* social icons and complementary tags of two different colors */.tag > a:first-child:before,.tag > a:nth-child(2):before {  position: absolute;  top: 15px;  left: 25px;  display: block;  vertical-align: text-bottom;  font: normal 1.5em Genericons;  color: #fff;  padding-right: 4px;}.tag > a:nth-child(2):before {  font-size: 3em;  top: 5px;}.tag > a:first-child,.tag > a:nth-child(2) {  position: absolute;  width: 85px;  height: 50px;  -moz-transition: all 0.4s 0.1s ease-out;  -o-transition: all 0.4s 0.1s ease-out;  -webkit-transition: all 0.4s 0.1s;  -webkit-transition-delay: ease-out;  transition: all 0.4s 0.1s ease-out;}.tag > a:first-child {  background-color: #6dc5dd;}.tag > a:nth-child(2) {  margin-left: 85px;  background: #eee;}#github > div.tag > a:first-child:before,#github > div.tag > a:nth-child(2):before {  content: '\f200';}#twitter > div.tag > a:first-child:before,#twitter > div.tag > a:nth-child(2):before {  content: '\f202';}#facebook > div.tag > a:first-child:before,#facebook > div.tag > a:nth-child(2):before {  content: '\f204';}#linkedin > div.tag > a:first-child:before,#linkedin > div.tag > a:nth-child(2):before {  content: '\f208';}#insta > div.tag > a:first-child:before,#insta > div.tag > a:nth-child(2):before {  content: '\f215';}#youtube > div.tag > a:first-child:before,#youtube > div.tag > a:nth-child(2):before {  content: '\f213';}#tumblr > div.tag > a:first-child:before,#tumblr > div.tag > a:nth-child(2):before {  content: '\f214';}#dribbble > div.tag > a:first-child:before,#dribbble > div.tag > a:nth-child(2):before {  content: '\f201';  padding-top: 3px;  margin-top: -3px;}/* tags of different colors */#github > div.tag > a:nth-child(2):before {  color: #333;}#github > div.tag > a:nth-child(2) {  background: #e6e6e6;}#twitter > div.tag > a:nth-child(2) {  background-image: -moz-linear-gradient(#7adcf9, #4bc9f5);  background-image: -webkit-linear-gradient(#7adcf9, #4bc9f5);  background-image: linear-gradient(#7adcf9, #4bc9f5);}#facebook > div.tag > a:nth-child(2) {  background-image: -moz-linear-gradient(#548abf, #295b9e);  background-image: -webkit-linear-gradient(#548abf, #295b9e);  background-image: linear-gradient(#548abf, #295b9e);}#linkedin > div.tag > a:nth-child(2) {  background-image: -moz-linear-gradient(#00a9cd, #0083b4);  background-image: -webkit-linear-gradient(#00a9cd, #0083b4);  background-image: linear-gradient(#00a9cd, #0083b4);}#youtube > div.tag > a:nth-child(2) {  background-image: -moz-linear-gradient(#df192a, #c41222);  background-image: -webkit-linear-gradient(#df192a, #c41222);  background-image: linear-gradient(#df192a, #c41222);}#insta > div.tag > a:nth-child(2) {  background-image: -moz-linear-gradient(#7fc121, #298733);  background-image: -webkit-linear-gradient(#7fc121, #298733);  background-image: linear-gradient(#7fc121, #298733);}#tumblr > div.tag > a:nth-child(2) {  background-image: -moz-linear-gradient(#283e56, #325372);  background-image: -webkit-linear-gradient(#283e56, #325372);  background-image: linear-gradient(#283e56, #325372);}#dribbble > div.tag > a:nth-child(2) {  background-image: -moz-linear-gradient(#e03a70, #f189b8);  background-image: -webkit-linear-gradient(#e03a70, #f189b8);  background-image: linear-gradient(#e03a70, #f189b8);}.accordion {  background: #5ab2ca;  width: 100%;  height: 50px;  overflow: hidden;}.accordion ul {  margin-left: 30px;  list-style-type: none;}.accordion li {  overflow: hidden;  position: relative;  background-color: #6dc5dd;  border-right: #5ab2ca 1px solid;  width: 80px;  height: 50px;  float: left;  display: block;  -moz-transition: all 0.4s 0.1s ease-out;  -o-transition: all 0.4s 0.1s ease-out;  -webkit-transition: all 0.4s 0.1s;  -webkit-transition-delay: ease-out;  transition: all 0.4s 0.1s ease-out;}.accordion li:hover {  width: 450px;}.accordion li:hover a:first-child {  ;}.accordion li:hover a:nth-child(2) {  ;}.accordion .paragraph {  position: relative;  width: 360px;  margin-left: 80px;  padding: 10px 0 0 10px;  height: 50px;  background: #fff;}.accordion .paragraph h1 {  font-size: 2.5em;  margin-bottom: 10px;}.accordion .paragraph p {  font-size: 0.88em;  line-height: 1.5em;  padding-right: 30px;}.clearfix {  zoom: 1;}.clearfix:before, .clearfix:after {  content: "";  display: table;}.clearfix:after {  clear: both;}