Social Icons

Senin, 23 Juni 2014

Cara Memasang Social Media di Blog .

Assalamualaikum. Wr. Wb.


sudah lama tak jumpa bloger ,,, maklumlah belakangan ini banyak kerjaan yang harus di tuntaskan, oya  dari pada ku curhat langsung saja ya bloger, kali ini saya akan berbagi tips cara memasang Social Media di blog .
sahabat bloger, setelah saya pelajari ternyata memasang social media di blog itu mudah sahabat, caranya tidak begitu sulit kok, cukup dengan:

1.            log in di blog anda

2.            masuk ke bagian tata letak

3.            tambah gadget

4.            pilih HTML/

5.            copy kode dibawah ini

<style>
#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(http://pandito.web.id/wp-content/uploads/2013/12/sprites.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}
#tbisose .icon{overflow:hidden; color:#fafafa;}
#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#tbisose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#tbisose li:hover .icon,
.touch #tbisose li .icon{width:210px;}
.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}
</style>
<ul id=”tbisose”>
<li data-alt=”Follow us on Facebook”><a class=”icon facebook” href=”#Masukan URL Disini tnmn “>Follow us on Facebook</a></li>
<li data-alt=”Follow us on Twitter”><a class=”icon twitter” href=”#Masukan URL Disini “>Follow us on Twitter</a></li>
<li data-alt=”Follow us on Google+”><a class=”icon googleplus” href=”#Masukan URL Disini “>Follow us on Google+</a></li>
<li data-alt=”Follow us on Pinterest”><a class=”icon pinterest” href=”#Masukan URL Disini“>Follow us on Pinterest</a></li>
<li data-alt=”Subscribe with RSS”><a class=”icon rss” href=”#Masukan URL Disini“>Subscribe with RSS</a></li>
</ul><small><div style=”font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;”><a href=”http://pandito.web.id/cara-membuat-widget-social-media-di-blog-website/” target=”_blank” title=”Widget Follow Us”>+ Get Widget </a></div></small>

6.            Setelah di copy ganti (#Masukan URL Disini) tersebut dengan URL kamu, seperti URL FB. Tweeter, Google+, pinterest, RSS. kalu anda punya

7.            kalau sudah selesai lalu save dech and liat hasilnya.
8.            selesai.

sekian dari saya ya sobat, aku juga masih belajar tentang blog, kan kata orang bijak kalo kita ingin ilmu kita selalu nempel di otak kita, kita harus berbagi ,, bukannya gitu sobat ? 

Terimakasih ya sobat dach mampir and semoga bermamfaat …
wassalamualaikum. Wr. Wb.

Assalamualaikum. Wr. Wb.


sudah lama tak jumpa bloger ,,, maklumlah belakangan ini banyak kerjaan yang harus di tuntaskan, oya  dari pada ku curhat langsung saja ya bloger, kali ini saya akan berbagi tips cara memasang Social Media di blog .
sahabat bloger, setelah saya pelajari ternyata memasang social media di blog itu mudah sahabat, caranya tidak begitu sulit kok, cukup dengan:

1.            log in di blog anda

2.            masuk ke bagian tata letak

3.            tambah gadget

4.            pilih HTML/

5.            copy kode dibawah ini

<style>
#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(http://pandito.web.id/wp-content/uploads/2013/12/sprites.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}
#tbisose .icon{overflow:hidden; color:#fafafa;}
#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#tbisose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#tbisose li:hover .icon,
.touch #tbisose li .icon{width:210px;}
.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}
</style>
<ul id=”tbisose”>
<li data-alt=”Follow us on Facebook”><a class=”icon facebook” href=”#Masukan URL Disini tnmn “>Follow us on Facebook</a></li>
<li data-alt=”Follow us on Twitter”><a class=”icon twitter” href=”#Masukan URL Disini “>Follow us on Twitter</a></li>
<li data-alt=”Follow us on Google+”><a class=”icon googleplus” href=”#Masukan URL Disini “>Follow us on Google+</a></li>
<li data-alt=”Follow us on Pinterest”><a class=”icon pinterest” href=”#Masukan URL Disini“>Follow us on Pinterest</a></li>
<li data-alt=”Subscribe with RSS”><a class=”icon rss” href=”#Masukan URL Disini“>Subscribe with RSS</a></li>
</ul><small><div style=”font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;”><a href=”http://pandito.web.id/cara-membuat-widget-social-media-di-blog-website/” target=”_blank” title=”Widget Follow Us”>+ Get Widget </a></div></small>

6.            Setelah di copy ganti (#Masukan URL Disini) tersebut dengan URL kamu, seperti URL FB. Tweeter, Google+, pinterest, RSS. kalu anda punya

7.            kalau sudah selesai lalu save dech and liat hasilnya.
8.            selesai.

sekian dari saya ya sobat, aku juga masih belajar tentang blog, kan kata orang bijak kalo kita ingin ilmu kita selalu nempel di otak kita, kita harus berbagi ,, bukannya gitu sobat ? 

Terimakasih ya sobat dach mampir and semoga bermamfaat …
wassalamualaikum. Wr. Wb.

Tidak ada komentar:

Posting Komentar

Post Comment

 
Blogger Templates