Selain search engine optimization, sebenarnya Social Media juga berperan tinggi terhadap perkembangan blog, khususnya dalam meningkatkan trafik blog, pasalnya, di zaman yang serba modern dan canggih ini, masing-masing individu lebih menyukai yang namanya efisiensi, itulah semua jawaban dari hadirnya social media, karena dengan jejaring sosial ini kita bisa dengan mudah berinteraksi dengan orang yang kita inginkan tanpa batasan dan persayaratan apaun.Untuk mengimbangi perkembangan Social Media yang semakin mengglobal, tentunya kita sebagai blogger harus mengambil langkah-langkah yang 'kiranya' bisa kita jadikan cara untuk mengoptimalkan sarana berinteraksi ini, salah satunya adalah dengan cara membuat akun di social media atas nama blog kita, akan tetapi bukan hanya itu saja, jika kita hanya membuat akun namun tidak ada satupun orang yang mengikutinya, maka itu sama saja tidak ada hasilnya, oleh karena itu, salah satu caranya adalah kita bisa menerapkan widget social media di blog kita, agar para pengunjung tahu tentang keberadaan akun social media blog kita tersebut.
Selain itu, social media juga berperan dalam sarana memasarkan atau marketing blog, karena dengan adanya social media, para pengunjung akan lebih mudah dalam mereferensikan atau merekomendasikan konten-konten di blog kita kepada rekan-rekan atau kerabatnya.
Dalam rangka memaksimalkan fungsi dari social media ini, Tuliskan.com ingin membagikan sebuah widget social media atau jejaring sosial dengan style flipboard, jadi nantinya setiap kita mengarahkan kursor mouse kita ke masing-masing icon widget social media, maka secara otomatis icon-icon tersebut akan flip atau berputar.
Jadi selain kita bisa memaksimalkan fungsi utama dari social media untuk mendongkrak trafik kunjungan blog, kita juga bisa 'sekedar' menambah pernak-pernik atau hiasan di blog kita.
Oh iya sobat, di dalam widget ini juga sudah dilengkapi dengan kotak pencarian berwarna hijau, jadi widget social media ini sudah 2in1, nah, jika anda sudah memasang kotak pencarian di blog anda sebelumya, maka anda bisa menghapusnya, dan menggantikanya dengan widget 2in1 ini.
Membuat Widget Social Media Flipboard Style di Blog
1. Login ke Blogger.
2. Pilih Tata Letak.
3. Klik Add Gadget.
4. Pilih HTML/JavaScript.
5. Letakkan kode berikut ini kedalamnya.
<style type="text/css">
#flipboard_tuliskancom{ width:300px;}
ul.flipboard_tuliskancom{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px;
-moz-perspective: 10000px;
-o-perspective: 10000px;
perspective: 10000px;
}
ul.flipboard_tuliskancom li{
display: inline-block;
width: 55px;
height: 50px;
margin-right: -px;
background: white;
font: bold 36px Arial;
text-transform: uppercase;
text-align: center;
cursor: pointer;
}
ul.flipboard_tuliskancom li a{
display:block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out 0.1s;
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.flipboard_tuliskancom li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-top: 5px;
display:block;
width: 100%;
height: 100%;
-webkit-transition:all 300ms ease-out 0.1s;
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.flipboard_tuliskancom li a img{
border-width: 0;
}
ul.flipboard_tuliskancom li:hover a{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #cef1ff;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
-webkit-box-shadow:0 0 5px #eee inset;
-moz-box-shadow:0 0 5px #eee inset;
box-shadow:0 0 5px #eee inset;
}
ul.flipboard_tuliskancom li:hover a span{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#tuliskancom-searchbox {
border-radius: 5px;
background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLuHckT_dSkALfYWcMOvvSRND3ipUbkuhi8CJrkT48TDPgrlGZX0T3jNs37t60barM5Esut1_TFbaTsg7uQbDbWxXYZpEshfIYykoo2Cu7XivS8wnC5yZkdk1IfI7R2AZwf2TValhpI3_L/s1600/green.png) no-repeat scroll center center transparent;
width: 290px;
height: 50px;
disaply: block;
}
form#tuliskancom-searchform {
display: block;
padding: 7px 16px;
margin: 0;
}
form#tuliskancom-searchform #s {
padding-left: 24px !important;
padding: 7.5px;
margin: 0;
width: 198px;
font-size: 16px;
font-family: georgia;
font-style: italic;
color: #666666;
vertical-align: top;
border: none;
background: transparent;
}
form#tuliskancom-searchform
#sbutton {
margin: 0;
padding: 0;
height: 40px;
width: 74px;
vertical-align: top;
border: none;
background: transparent;
}
</style>
<div id="flipboard_tuliskancom">
<center>
<a style="font-size:25px;" >Connect With Us </a>
</center>
<br />
<ul class="flipboard_tuliskancom">
<li><a href="http://www.pinterest.com/tuliskancom"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvjxWR0E9kZ4wuctICO1f77wncg3AZJUrGgIobDO2MsimeCukALMiI9JzwkCddRZ8JGROKF47su8kKVDH4EkpkS6vdHntP96Neev4mumyLHeFRxKaEYAB3bCfYXy464XOTKV5MIWzDndDp/s1600/btrix_pinterest.png" title="Pinterest" /></a></li>
<li><a href="http://www.facebook.com/tuliskancom"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrNHy4YjkM79pkdA_a5ObM1Y2t7fqIZSG8FHIBL-lSppnjI1uw7ABhtpHdbutDHlSe-HRKXFGyWW8-eXHmz2mEKN3hHw7xEAm7ffo-hwX0rtgx0oQ08L6EbqkeXsVSUCt7bTqkuyAUb-Re/s1600/btrix_facebook.png" title="Add to Facebook" /></a></li>
<li><a href="https://plus.google.com/ID Google+"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoVEDjV1WXVjmn0F25Twj15qzpkm6G_kpdMYzLg53bv3W81o3FpxK25S7XSmaUIf0ym-A_8falb7PCG__1_w9iDDJen5VLT09bDmME9Z_i5uFqxCOfeTIrGPv5hQ0ntAYsP5VeO9XNw6FX/s1600/btrix_google+.png" title="Google plus" /></a></li>
<li><a href="http://www.twitter.com/tuliskancom"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKbY20U4-cUSCq3OjyW5tosT0-EPy1G2SvJsjuI78Ju3hWTEuKgab93KNelPEY9WBtgi3T4I6H7COB1u8KiXdfbjLfqBvoKEJJiev28RDcYre9FGDF-zpgMJiUjOONqCsolbkE0PqQSA-s/s1600/btrix_twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds.feedburner.com/tuliskancom"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbOmVjinD7QETiHnv_DnTJTOxI5s4D-1y0mUAQ_J3h9MalzDh9IyW9fpaT3UO6eI9Y5LkJLgRw2-_LrFCPZBX9_11-FsQWVJYpFQfQEEbCJm2i6wwrtqKye62HLtZ65HrJzJeBccGldnUX/s1600/btrix_rss.png" title="Add RSS Feed" /></a></li>
</ul>
<div id="tuliskancom-searchbox">
<form action="/search" id="tuliskancom-searchform" method="get">
<input id="s" name="q" onblur="if (this.value == "") {this.value = "Search...";}" onfocus="if (this.value == "Search...") {this.value = ""}" type="text" value="Search..." />
<input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image" />
</form>
</div>
</div>
Keterangan:
- Ganti kode yang berwarna merah dengan ID Pinterest anda
- Ganti kode yang berwarna biru tua dengan Nama Fanpage / ID Facebook anda
- Ganti kode yang berwarna kuning dengan ID Google+ anda
- Ganti kode yang berwarna biru muda dengan Username Twitter anda
- Ganti kode yang berwanya oranye dengan ID Feedburner anda
6. Klik "Save/Simpan" Template, dan selesai.
Bagaimana sobat? mudah dan sederhana kali bukan membuat widget social media dengan efek flipboard. Demikian informasi terbaru tentang Membuat Widget Social Media Flipboard Style di Blog, simak juga ulasan menarik lainya seputar tutorial blog tentang Cara Memasang/Mengganti Favicon Blog, semoga bermanfaat, dan selamat mencoba.