Hubungi KamiJika ada pertanyaan silahkan hubungi kami

Cara Mudah Membuat Social Icon Keren Spesial

Cara Mudah Membuat Social Icon Keren Spesial-Ingin promosi social profil di blog kesayangan kalian untuk meningkatkan pengikut atau follower? Salah satunya yang saya bahas adalah dengan memasang icon profil social media pada blog.

Dengan memasang icon social media maka kesempatan untuk mendatangkan pengunjung akan semakin banyak dan tentunya tampilan icon ini lebih menarik dan enak dilihat oleh pengunjung blog sobat. Baca Juga: Memasang Tombol Follower Di Blogger

Sebelumnya saya sudah pernah membahas tentang Cara Mudah Membuat Fans Page Show/Hiden Di Blog, silahkan kunjungi halaman tersebut untuk info lebih jelasnya. Ok kita langsung saja ke topik pembahasan, berikut adalah langkah-langkahnya:

Membuat Social Icon Keren Spesial Pada Blogger

  • Login ke akun blogger sobat
  • Pada bagian dashboard pilih Layout
  • Pilih Add a Gadget
  • Pilih HTML/JavaScript
  • Masukkan kode dibawah ini
<style type="text/css">

/*start Facebook Icon*/
#SC a.sos1{
opacity:0.7;
margin:5px 5px 20px 20px;
padding:7px 5px 5px 5px;
background:#0282c2;
box-shadow:2px 2px 0 #ccc,3px 3px 0 #fff, 4px 5px 0 #ccc,5px 6px 0 #fff, 6px 8px 0 #ccc,7px 9px 0 #fff, 8px 11px 0 #0282c2,13px 11px 10px 1px rgba(0,0,0,0.5);
transform:matrix(0.866,0.1,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Opera */
text-transform: uppercase;
border-radius: 5px;
float:left;
text-decoration:none;
height:20px;
color: transparent;
font: 12px 'Arial black';
letter-spacing:1px;
background-image:url('http://4.bp.blogspot.com/-24jM7xBF6CE/UP5epobYLgI/AAAAAAAACIQ/MiVBS70dsDw/s1600/Web-Facebook+icon.png');
background-repeat:no-repeat;
background-position:center;
background-size: 100% 100%;
}

#SC a.sos1:hover{
opacity:1;
box-shadow:2px 12px 0 #ccc,3px 13px 0 #fff, 4px 15px 0 #ccc,5px 16px 0 #fff, 6px 18px 0 #ccc,7px 19px 0 #fff, 8px 21px 0 #0282c2,13px 21px 10px 1px rgba(0,0,0,0.5),13px 5px 10px 1px rgba(0,0,0,0.2);
}
/*End Facebook Icons*/

/*Start Google+ Icons*/
#SC a.sos2{
opacity:0.7;
margin:5px;
padding:7px 5px 5px 5px;
background:#d44137;
box-shadow:2px 2px 0 #ccc,3px 3px 0 #fff, 4px 5px 0 #ccc,5px 6px 0 #fff, 6px 8px 0 #ccc,7px 9px 0 #fff, 8px 11px 0 #d44137,13px 11px 10px 1px rgba(0,0,0,0.5);
transform:matrix(0.866,0.1,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Opera */
text-transform: uppercase;
border-radius: 5px;
float:left;
text-decoration:none;
height:20px;
color: transparent;
font: 12px 'Arial black';
letter-spacing:1px;
background-image:url('http://3.bp.blogspot.com/-uDhX5QouF00/UP5epgZZz9I/AAAAAAAACIM/ljJlq83GAvc/s1600/Web-Google+icon.png');
background-repeat:no-repeat;
background-position:center;
background-size: 100% 100%;
}

#SC a.sos2:hover{
opacity:1;
box-shadow:2px 12px 0 #ccc,3px 13px 0 #fff, 4px 15px 0 #ccc,5px 16px 0 #fff, 6px 18px 0 #ccc,7px 19px 0 #fff, 8px 21px 0 #d44137,13px 21px 10px 1px rgba(0,0,0,0.5),13px 5px 10px 1px rgba(0,0,0,0.2);
}
/*End Google+ Icons*/

/*Start Twitter Icons*/
#SC a.sos3{
opacity:0.7;
margin:5px;
padding:7px 5px 5px 5px;
background:#63c8f7;
box-shadow:2px 2px 0 #ccc,3px 3px 0 #fff, 4px 5px 0 #ccc,5px 6px 0 #fff, 6px 8px 0 #ccc,7px 9px 0 #fff, 8px 11px 0 #63c8f7,13px 11px 10px 1px rgba(0,0,0,0.5);
transform:matrix(0.866,0.1,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Opera */
text-transform: uppercase;
border-radius: 5px;
float:left;
text-decoration:none;
height:20px;
color: transparent;
font: 12px 'Arial black';
letter-spacing:1px;
background-image:url('http://2.bp.blogspot.com/-6wD1f54Lsjg/UP5erWMj63I/AAAAAAAACIo/eKAWRpPlEnk/s1600/Web-Twitter+icon.png');
background-repeat:no-repeat;
background-position:center;
background-size: 100% 100%;
}

#SC a.sos3:hover{
opacity:1;
box-shadow:2px 12px 0 #ccc,3px 13px 0 #fff, 4px 15px 0 #ccc,5px 16px 0 #fff, 6px 18px 0 #ccc,7px 19px 0 #fff, 8px 21px 0 #63c8f7,13px 21px 10px 1px rgba(0,0,0,0.5),13px 5px 10px 1px rgba(0,0,0,0.2);
}
/*End Twitter Icons*/

/*Start RSS Icons*/
#SC a.sos4{
opacity:0.7;
margin: 5px;
padding:7px 5px 5px 5px;
background:#fc9c14;
box-shadow:2px 2px 0 #ccc,3px 3px 0 #fff, 4px 5px 0 #ccc,5px 6px 0 #fff, 6px 8px 0 #ccc,7px 9px 0 #fff, 8px 11px 0 #fc9c14,13px 11px 10px 1px rgba(0,0,0,0.5);
transform:matrix(0.866,0.1,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Opera */
text-transform: uppercase;
border-radius: 5px;
float:left;
text-decoration:none;
height:20px;
color: transparent;
font: 12px 'Arial black';
letter-spacing:1px;
background-image:url('http://2.bp.blogspot.com/-4OfNClZ7nGM/UP5erNTr-qI/AAAAAAAACIk/84PE5Edin6M/s1600/Web-RSS+icon.png');
background-repeat:no-repeat;
background-position:center;
background-size: 100% 100%;
}

#SC a.sos4:hover{
opacity:1;
box-shadow:2px 12px 0 #ccc,3px 13px 0 #fff, 4px 15px 0 #ccc,5px 16px 0 #fff, 6px 18px 0 #ccc,7px 19px 0 #fff, 8px 21px 0 #fc9c14,13px 21px 10px 1px rgba(0,0,0,0.5),13px 5px 10px 1px rgba(0,0,0,0.2);
}
/*End RSS Icons*/
</style>

<center><div id="SC">
<a href="<span style="color: #ff0000;">URL-FACEBOOK-PROFILE</span>" class="sos1" rel="nofollow" target="_blank" title="Like us on Facebook">Icon</a>
<a href="<span style="color: #ff0000;">URL-GOOGLE PLUS-PROFILE</span>" class="sos2" rel="author" target="_blank" title="Follow us on Google+">Icon</a>
<a href="<span style="color: #ff0000;">URL-TWITTER-PROFILE</span>" class="sos3" rel="nofollow" target="_blank" title="Follow us on Twitter">Icon</a>
<a href="<span style="color: #ff0000;">URL-RSS-FEED</span>" class="sos4" rel="nofollow" target="_blank" title="Grab Our Rss Feed ">Icon</a>
</div></center>[Get This Icon]</small></a></div>
  • Terakhir Simpan

Membuat Social Icon Keren Spesial Pada WordPress

  • Masuk ke wp admin
  • Pada dashboard arahkan ke Appearance
  • Pilih Widgets
  • Pilih Text
  • Masukkan kode diatas
  • Terakhir pilih Simpan

Keterangan:

Pada kode yang saya tandai dengan kode warna merah, silahkan URL social media kalian.

Nah cukup mudah namun keren bukan? Dengan memasang icon social media pada blog maka akan mendapatkan kesempatan lebih banyak untuk mendapatkan follower apa lagi jika page view blog kita banyak pengunjung. Tentunya semakin banyak follower akan memberikan kesempatan untuk mendatangkan lebih banyak pengunjung baru. Baca Juga: 2 Cara Memasang Widget Artikel Terbaru Di Blogger

Bagaiman apakah artikel ini membantau? Silahkan like dan share social media facebook, twitter, google+ dan subscribe juga youtube kami untuk mendapatkan lebih banyak info menarik dari kami melalui panduan video secara rutin dan gratis. Baca Juga: Membuat Like Box Facebook Melayang/Popup dengan Timer

Baca Juga Cara Membuat toko online dengan mudah | CARA DAN KUMPULAN KERAJINAN UNIK DAN KEREN

Add a Comment

Your email address will not be published. Required fields are marked *

Read previous post:
Mega Wisata Icakan Ciamis

Mega Wisata Icakan Ciamis-Salah satu tempat wisata terbaik yang berada...

Close