Oke sekarang saya akan Share "Cara Memasang Widget Social Media Metrominimalist Style di Blog"

Dalam dunia blogging, Social Media dikenal sebagai sarana atau layanan untuk mempromosikan blog atau sering disebut sebagai blog marketing, dalam artianya, jejaring sosial dapat digunakan oleh para blogger dalam rangka meningkatkan trafik kunjungan mereka, karena dengan social media, bukan tidak mungkin suatu saat nanti sumber trafik utama search engine tergeser oleh social media, karena pada hakikatnya, semua orang menginginkan efisiensi yang tinggi dalam berinteraksi, dan semua itu telah terjawab oleh social media, karena semua orang bisa berinteraksi dengan mudahnya tanpa batasan-batasan apapun.

Jadi bagi para blogger yang belum mengoptimlakan layanan gratis ini, saya sarankan agar anda mulai membuat akun atas nama blog anda, lalu pasanglah widget yang memberitahukan keberadaan akun tersebut di blog kita, memang tidak mudah untuk mendapatkan fans, tetapi seiring dengan meningkatnya kualitas dan kuantitas blog kita, pada akhirnya banyak orang yang mungkin berminat untuk menjadi fans akun tersebut.

Nah, sehubungan dengan usaha kita dalam mengoptimalkan akun social media tersebut, dibawah ini sudah saya sertakan widget social media sederhana yang mengusung tema metrominimalist style, yakni tampilan atau antarmuka yang biasa dipakai di Windows 8 ataupun Windows phone, tentunya anda sudah tahu bukan, selain itu, warna-warnanya juga tidak default semuanya sama, warnanya juga disesuaikan dengan warna asli icon dari masing-masing jejaring sosialnya, seperti misalnya facebook berwarna biru tua.

Oke kita langsung saja ke cara memasang nya:

1. Login ke Blogger.

2. Pilih Template.

3. Klik Edit HTML.

4. Lalu Cari Code ]]></b:skin> taruh CSS dibawah ini tepat di atas code ]]></b:skin>

.widget-item-control a{display:none;}
#jocial{width: 305px;
float: left;margin-top: 10px;}
#jocial li{position:relative; cursor:pointer; padding: 0 !important;}
#jocial .facebook, .googleplus, .rss, .twitter{
position: relative;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
z-index: 5;
display: block;
float: left;
margin: 1px;}
#jocial .icon{overflow:hidden;}
#jocial .facebook{width: 150px;
height: 150px;
background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ1v1ITjFHDYG6ppk8ScbsieNNH3VpcoY96QDg1rHQuOAvDlqfynVDfr9G82A8fHbHrRz4d8894RL5DECbnUEMLn-bwl7OBzeYbGR3zgNJYVlgaU-sFCzTYDVjFp7R6AUWwnuWbsi7BRW8/s1600/facebook.png") no-repeat center center;}
#jocial .twitter{width: 150px;
height: 74px;
background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg62L5pRzoM_5xiSL6R3KCqotQsXbetxesRuhmfDbhmh9bKZRde7SYlehiqGAAsE12f7bPMtf9SR_O_uPg97NaVrFyI85JXkvvmIcRt1aj8U3hRi611czvtyte80vyyoS6cdEQYfpio7rnL/s1600/Twitter.png") no-repeat center center;}
#jocial .googleplus{width: 150px;
height: 74px;
background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8c77HS_XX83I0NPjWZWLCnCJ787gK_jfOvn-nQ8GGCQopYlD5GWPNenZZ28caBuczKw1aEo5wAw1zg9iAqa0ENwAwz43otTIPNwS4I6q76v8B5AQTIOpGrPg4dgK2mVRXtGVL6smMQIn8/s1600/google+plus.png") no-repeat center center;}
#jocial .rss{ width: 302px;
height: 74px;
background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglQCJZxgA1fczHWJlpzBEwGdD6yz7NtiIbIoKlCbND-cH_4WGxKKbh5LzYUwlq5LDjioMKHrRMyrfeslqaGDguli2RAlbE6P6w4M9Wo6dqTpZSVTwOHytnKdTyh6hY7OA3aU4cIK3LXfmZ/s1600/rss.png") no-repeat center center;}
#jocial li:hover .facebook{background-color:#3468B6;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
#jocial li:hover .twitter{background:rgba(64,153,255,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg62L5pRzoM_5xiSL6R3KCqotQsXbetxesRuhmfDbhmh9bKZRde7SYlehiqGAAsE12f7bPMtf9SR_O_uPg97NaVrFyI85JXkvvmIcRt1aj8U3hRi611czvtyte80vyyoS6cdEQYfpio7rnL/s1600/Twitter.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
#jocial li:hover .googleplus{background:rgba(228,69,36,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8c77HS_XX83I0NPjWZWLCnCJ787gK_jfOvn-nQ8GGCQopYlD5GWPNenZZ28caBuczKw1aEo5wAw1zg9iAqa0ENwAwz43otTIPNwS4I6q76v8B5AQTIOpGrPg4dgK2mVRXtGVL6smMQIn8/s1600/google+plus.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
#jocial li:hover .rss{background:rgba(255,102,0,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglQCJZxgA1fczHWJlpzBEwGdD6yz7NtiIbIoKlCbND-cH_4WGxKKbh5LzYUwlq5LDjioMKHrRMyrfeslqaGDguli2RAlbE6P6w4M9Wo6dqTpZSVTwOHytnKdTyh6hY7OA3aU4cIK3LXfmZ/s1600/rss.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
.PopularPosts .item-title a {font-size:20pt;
padding-bottom: .2em;}
#navbar1, #Attribution1 {display:none;}

5. Pergi ke TataLetak.

6. Klik Add/Tambahkan gadget.

7. Pilih gadget HTML/JavaScript.

8. Letakkan kode HTML berikut ini kedalamnya.

<ul id='jocial'>
<li><a class='icon facebook' href='https://www.facebook.com/Lanz4all'/></li>
<li><a class='icon twitter' href='https://twitter.com/Lanz_4all'/></li>
<li><a class='icon googleplus' href='https://plus.google.com/u/0/115289235598962360529/posts'/></li>
<li><a class='icon rss' href='http://feeds.feedburner.com/LanzExclusive'/></li>
</ul>

Keterangan : 

Ganti yg warna merah dengan ID code Facebook Anda.
Ganti yg warna Biru muda dengan ID code Twitter Anda.
Ganti yg warna Hijau Tua dengan ID code Google Plus Anda.
Dan Terakhir Ganti yg warna Ungu Tua dengan ID code Feed Burner Anda.

Oke sekian Dulu Tutorial Dari Saya,Semoga Tutorial ini sangat Membantu anda dalam Hal-hal Ilmu Mempelajari Tentang Blogger.Terimakasih Telah Membaca dan Berkunjung :) Jangan Lupa Follow dan Coment nya Jika ini Sangat Membantu & Bermanfaat untuk Anda :)