skip to main |
skip to sidebar
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