TULISKAN.com - Dalam dunia blogging, Social Media dikenal sebagai sarana atau layanan untuk mempromosikan blog atau sering disebut sebagai blog marketing, dalam artianya, jejarin 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.Memang, sekarang ini potensi social media belumlah sebesar search engine, akan tetapi, saya percaya bahwa suatu saat nanti social media tentu mencapai kejayaanya, karena seperti yang saya kemukakan tadi, bahwasanya semua orang butuh sarana berinteraksi yang efisien dan praktis tentunya.
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 metro 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.
Cara Membuat Widget Social Media Metro Style
1. Login ke Blogger.
2. Pilih Tata Letak.
3. Klik Add/Tambahkan gadget.
4. Pilih gadget HTML/JavaScript.
5. Letakkan kode CSS dan HTML berikut ini kedalamnya.
<style>
.tuliskancom-metro-social{width:300px}
.tuliskancom-metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.tuliskancom-metro-social .facebooktuliskan,.twittertuliskan,.googleplustuliskan,.pinteresttuliskan,.linkedintuliskan,.youtubetuliskan,.rsstuliskan{z-index:7;float:left;margin:1px;position:relative;display:block}
.tuliskancom-metro-social .facebooktuliskan{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyEAbClgZc7pPA2JvwFUvl1Jj2_r_-n3ppxd068C_9O5eaY7uzkCghJEIssz7t9yR2rNp-wT9anrK_K0uC4wYq49co1IBQ7T5Iw-Sr0WZMkpDk4MknTRA3QER8ZSnsXMOpDsS6plYxlsE/s1600/facebook-tuliskan.png) no-repeat center center #1f69b3;width:140px;height:141px}
.tuliskancom-metro-social .twittertuliskan{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyTk2o58pTlux8f8WbpOJxQi5SfRq5b2zM_sWByiF5rQJYxuORXb2nQBPM908DSj8-v3JJKEX0xg3eMRBOHtfJweRrqqXP0Pyo4YIJnFvPx6cUPwb1bWVXyCmb_FaDNNOM0hGkL-vqn8I/s1600/twitter-tuliskan.png) no-repeat center center #43b3e5;width:68px;height:70px}
.tuliskancom-metro-social .googleplustuliskan{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaA1JiFkCVHL32IAEn6FUjbmYybPceoKfkdu_2tHMAjeg_DeNbkLiP1A4v6smHGQcwwBHxI2z5ElXSg4rCLOE4NeQu456P2D6rWeuoOBaHgEK8IaF8v0eY7xT7z-1wgfHvBOxEFFGdfjc/s1600/googleplus-tuliskan.png) no-repeat center center #da4a38;width:69px;height:70px}
.tuliskancom-metro-social .pinteresttuliskan{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTmQ0zNmhm3nf5M2BiYAbHk_xL-X7qMrtymyjm4Wx5ub0zT2-6n6x5fMWf6Lq_81RB9gw4iJtTszwDso1nk_n1OMlLNoRl7hhKnG89NJmMh5utJ0jFwAH1_hyphenhyphenzRIX8uSFYPpETqS3BKQs/s1600/pinterest-tuliskan.png) no-repeat center center #d73532;width:68px;height:69px}
.tuliskancom-metro-social .linkedintuliskan{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidMH70A_YpUEMo9hiCztSwy43Heg7nQxIARcNVwKZQ6wE-gNDk2l3p0tq_Ysm_nqyh8thGz7sdq6KtivWdBiv97TQlldXQkf7-Oj9PA8IRWpGCxjUmypsNMVXRVuZVqoqZlNBNdeSxj-s/s1600/linkedin-tuliskan.png) no-repeat center center #0097bd;width:69px;height:69px}
.tuliskancom-metro-social .youtubetuliskan{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH4G3tVofCVxiLmIBqjkCnqtQAAQonSxF1VnKNoLYOl1sXtLo7m3cXz2LaXNVz5SNvMypeVdD-K7Qf4eeD1dPNffL-2INDoYCzWiaJBdok3xKWjpfO3Zau13YIPjAxRPLnYAtBtOwa_n8/s1600/youtube-tuliskan.png) no-repeat center center #e64a41;width:140px;height:69px}
.tuliskancom-metro-social .rsstuliskan{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7RGrTT3tZe5pJ6_WNXcsl8KEFRgsIzWoi1fcF-3va_EwaVBLwv3Ke4W-AggTtlfXfnarNE_cnqErvp5nXKuxabXt23vGGLtYvtgUE-4y4T0bMDKD9TmG6z3vbakEg2YgzhzdsYceP7Dg/s1600/rss-feed-tuliskan.png) no-repeat center center #e9a01c;width:140px;height:69px}
.tuliskancom-metro-social li:hover .facebooktuliskan{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtlOtCL6AWewfwYEtOs8GWnF5mkIMp3Ry822HvHNmVbGEO_R7DHauQKV2t2aDzBSnCfaLPKpE-G9mINU0zPQTcCeAptw67JwCT8Jjd3I5Im9kurFeqI44glfcTfuQR6rfV7FjZ2lZS6Y0/s1600/facebook-tuliskan.png) no-repeat center center #1f69b3}
.tuliskancom-metro-social li:hover .twittertuliskan{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvXRYSWyg7ZraQ9fEvfXKagGBsO78hBHeWrw3jkknSlOHY_DznrQI7D9cyJgjz8ZXTfSnzvlJTOrNZ_Eit0NQ7iImfkg0MSS84zrNu8BRFTcyhIzB_kWWj3U9cZ6E600JJw66VRFlIdiI/s1600/twitter-tuliskan.png) no-repeat center center #43b3e5}
.tuliskancom-metro-social li:hover .googleplustuliskan{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvXRYSWyg7ZraQ9fEvfXKagGBsO78hBHeWrw3jkknSlOHY_DznrQI7D9cyJgjz8ZXTfSnzvlJTOrNZ_Eit0NQ7iImfkg0MSS84zrNu8BRFTcyhIzB_kWWj3U9cZ6E600JJw66VRFlIdiI/s1600/twitter-tuliskan.png) no-repeat center center #da4a38}
.tuliskancom-metro-social li:hover .pinteresttuliskan{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTmQ0zNmhm3nf5M2BiYAbHk_xL-X7qMrtymyjm4Wx5ub0zT2-6n6x5fMWf6Lq_81RB9gw4iJtTszwDso1nk_n1OMlLNoRl7hhKnG89NJmMh5utJ0jFwAH1_hyphenhyphenzRIX8uSFYPpETqS3BKQs/s1600/pinterest-tuliskan.png) no-repeat center center #d73532}
.tuliskancom-metro-social li:hover .linkedintuliskan{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidMH70A_YpUEMo9hiCztSwy43Heg7nQxIARcNVwKZQ6wE-gNDk2l3p0tq_Ysm_nqyh8thGz7sdq6KtivWdBiv97TQlldXQkf7-Oj9PA8IRWpGCxjUmypsNMVXRVuZVqoqZlNBNdeSxj-s/s1600/linkedin-tuliskan.png) no-repeat center center #0097bd}
.tuliskancom-metro-social li:hover .youtubetuliskan{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH4G3tVofCVxiLmIBqjkCnqtQAAQonSxF1VnKNoLYOl1sXtLo7m3cXz2LaXNVz5SNvMypeVdD-K7Qf4eeD1dPNffL-2INDoYCzWiaJBdok3xKWjpfO3Zau13YIPjAxRPLnYAtBtOwa_n8/s1600/youtube-tuliskan.png) no-repeat center center #e64a41}
.tuliskancom-metro-social li:hover .rsstuliskan{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7RGrTT3tZe5pJ6_WNXcsl8KEFRgsIzWoi1fcF-3va_EwaVBLwv3Ke4W-AggTtlfXfnarNE_cnqErvp5nXKuxabXt23vGGLtYvtgUE-4y4T0bMDKD9TmG6z3vbakEg2YgzhzdsYceP7Dg/s1600/rss-feed-tuliskan.png) no-repeat center center #e9a01c}
</style>
<div class="tuliskancom-metro-social">
<br />
<li><a class="facebooktuliskan" href="http://www.facebook.com/tuliskancom" title="Facebook"></a></li>
<li><a class="twittertuliskan" href="http://twitter.com/tuliskancom" title="Twitter"></a></li>
<li><a class="googleplustuliskan" href="https://plus.google.com/1092839283928938" title="Google+"></a></li>
<li><a class="pinteresttuliskan" href="http://pinterest.com/tuliskancom" title="Pinterest"></a></li>
<li><a class="linkedintuliskan" href="https://www.linkedin.com/tuliskancom" title="Linkedin"></a></li>
<li><a class="youtubetuliskan" href="http://www.youtube.com/tuliskancom" title="Youtube"></a></li>
<li><a class="rsstuliskan" href="http://feeds.feedburner.com/tuliskancom" title="Feedburner"></a></li>
</div>
Keterangan:
- Ganti kode yang berwarna biru tua dengan ID / Nama Fan Page Facebook anda
- Ganti kode yang berwarna biru muda dengan Username Twitter anda
- Ganti kode yang berwarna pink dengan ID Google+ anda
- Ganti kode yang berwarna merah dengan Username Pinterest anda
- Ganti kode yang berwarna ungu dengan Username Linkedin anda
- Ganti kode yang berwarna hijau dengan ID Youtube anda
- Ganti kode yang berwarna oranye dengan ID Feedburner blog anda
6. Klik "Save/Simpan" gadget, dan selesai.
Demikian informasi terbaru tentang bagaimana Cara Membuat Widget Social Media Metro Style di Blog, simak juga artikel menarik lainya seputar tutorial dan tips trik blog tentang Membuat Tombol Social Media Open Hide Popup di Blog, semoga bermanfaat, dan selamat mencoba & berkreasi!
Referensi : Bloggertrix
EmoticonEmoticon