Cara Membuat Menu Social Share Sederhana Dengan CSS 3

Cara Membuat Menu Social Share Sederhana Dengan CSS 3

Assalammualaikum Wr. Wb

Hai kawan, setelah sebelumnya Syahroonix sudah sharing tentang Cara Submit Ke 20+ Websites. Kali ini Syahroonix akan memberi tahu tentang Cara Membuat Menu Social Share Sederhana Dengan CSS 3. Di artikel ini Syahroonix ingin berbagi hal yang sedikit merujuk ke arah untuk berbagi pula kawan.

Ok kawan, kalau kalian mau tahu seperti apa widget ini, silahkan lihat di link di bawah ini :

http://demp-widget-syahroonix-blog.blogspot.com/2013/03/demo-cara-membuat-social-share-menu.html

Bagaimana bagus kan widget ini? Nah, kalian semua bisa kok memiliki widget ini. Caranya juga mudah, ikuti saja tutorialnya di bawah ini.

Langkah Pertama
Seperti biasa, yang pertama kali harus kalian lakukan adalah log in dengan akun kalian tentunya. Jangan lupa OK?

Langkah Kedua
Kalian langsung OTW ke Template atau Design dan langsung klik Edit HTML. Kali ini centang juga Expand Widget Templates.

Langkah Ketiga
Kalian tekan CTRL+F atau F3 lalu carilah kode ]]></b:skin>

Langkah Keempat
Setelah kode ]]></b:skin> ketemu, maka sisipkan kode dibawah ini diatas kode ]]></b:skin>

#social_nav_horizontal { margin-left: 100px; font-family: Futura, Verdana, Sans-Serif; font-size: 18px; color: #8E9090; height: 100px; } #social_nav_horizontal h3 { display: inline; padding: 0 10px; border-bottom: dashed 1px #ccc; } #social_nav_horizontal ul { margin: 0; padding: 0; margin-top: 20px; } #social_nav_horizontal ul li { float: left; padding: 5px 0 0 5px; margin-left: 5px; list-style-type: none; } #social_nav_horizontal ul li a { padding: 4px 0 0 28px; height: 32px; color: #999; text-decoration: none; line-height: 1.45em; } #social_nav_horizontal ul li a:hover { color: #6DCAFF; text-decoration: underline; } .delicious { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSD-Gv7LaSyLAOJ9Fn3-p_OJongqahYZNoMUN143Q2CvLlwXnC_bxaRK1X0Iy0mz4IWiuB4OuUSZCnhFPLM1wXMuuxmy2PQLhqa371dgVMiHNq8TS-NARMIxJqHOy8NASgex-plZVKd4Q/s1600/delicious.png)no-repeat; background-position: 0 -1px; } .facebook { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKWpbIYy4lXUm9TAu9ZyNRkxtq8dQslt3KY_qHh0AuynRA8SdK5W9anS3AliJSNRibZ_pOfNRIUvryDcegTV0kH9sXgQGG-5HMis-Y22X7zEV-nvXSHskYHsAjtzIXf0yCxLVySKgu75w/s1600/facebook.png)no-repeat; background-position: 0 -1px; } .stumbleupon { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu5XQXa7I1fPS5wLXFHp3emsuSRYQB4Ids7QS1cCkbx3rZ5j5DPzFCtMW35nWdRBF5qgLGpbLfqfdeGXXFoMHOl6N67RDehqdXQNqY983tYknIx4LVpWKPpeZg9N2SYDc0Wtua0y6llTo/s1600/stumbleupon.png)no-repeat; background-position: 0 -1px; } .twitter { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBA9RV74bRchdMvkvJ8YE0CF3pKWo-OTLgqzGi6TKQ0OhGtNBqvTQBJI5GMoCPWcoaQ1To2ztG4fTDQd59mV__OsOvAIf616BbGoaJdJgg4_KKMnGewdLCPuhDXIWxqi5FrvFUcLMqERg/s1600/twitter.png)no-repeat; background-position: 0 -1px; }

Maka nanti hasilnya akan seperti ini :

#social_nav_horizontal { margin-left: 100px; font-family: Futura, Verdana, Sans-Serif; font-size: 18px; color: #8E9090; height: 100px; } #social_nav_horizontal h3 { display: inline; padding: 0 10px; border-bottom: dashed 1px #ccc; } #social_nav_horizontal ul { margin: 0; padding: 0; margin-top: 20px; } #social_nav_horizontal ul li { float: left; padding: 5px 0 0 5px; margin-left: 5px; list-style-type: none; } #social_nav_horizontal ul li a { padding: 4px 0 0 28px; height: 32px; color: #999; text-decoration: none; line-height: 1.45em; } #social_nav_horizontal ul li a:hover { color: #6DCAFF; text-decoration: underline; } .delicious { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSD-Gv7LaSyLAOJ9Fn3-p_OJongqahYZNoMUN143Q2CvLlwXnC_bxaRK1X0Iy0mz4IWiuB4OuUSZCnhFPLM1wXMuuxmy2PQLhqa371dgVMiHNq8TS-NARMIxJqHOy8NASgex-plZVKd4Q/s1600/delicious.png)no-repeat; background-position: 0 -1px; } .facebook { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKWpbIYy4lXUm9TAu9ZyNRkxtq8dQslt3KY_qHh0AuynRA8SdK5W9anS3AliJSNRibZ_pOfNRIUvryDcegTV0kH9sXgQGG-5HMis-Y22X7zEV-nvXSHskYHsAjtzIXf0yCxLVySKgu75w/s1600/facebook.png)no-repeat; background-position: 0 -1px; } .stumbleupon { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu5XQXa7I1fPS5wLXFHp3emsuSRYQB4Ids7QS1cCkbx3rZ5j5DPzFCtMW35nWdRBF5qgLGpbLfqfdeGXXFoMHOl6N67RDehqdXQNqY983tYknIx4LVpWKPpeZg9N2SYDc0Wtua0y6llTo/s1600/stumbleupon.png)no-repeat; background-position: 0 -1px; } .twitter { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBA9RV74bRchdMvkvJ8YE0CF3pKWo-OTLgqzGi6TKQ0OhGtNBqvTQBJI5GMoCPWcoaQ1To2ztG4fTDQd59mV__OsOvAIf616BbGoaJdJgg4_KKMnGewdLCPuhDXIWxqi5FrvFUcLMqERg/s1600/twitter.png)no-repeat; background-position: 0 -1px; }

]]></b:skin>

Langkah Kelima
Kalian cari lagi kode <data:post.body/>

Langkah Keenam
Setelah kode diatas ketemu, maka sisipkan kode dibawah ini, tepat dibawah kode <data:post.body/> Biasanya ada lebih dari 1 kode seperti itu. Kalau memang ada lebih dari 1, maka pasang kode dibawah, dibawah kedua kode <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>     <div id="social_nav_horizontal">                              <h3> Bookmark or Share This Post </h3>
                             <ul>
                                 <li> <a class="delicious" href="http://del.icio.us/post?url=Your website title" title="Share this on del.icio.us">Delicious</a>
                                 </li><li><a class="facebook" href="http://www.facebook.com/sharer.php?u=http://yourwebsite.com">Facebook</a></li>
                                 <li><a class="stumbleupon" href="http://www.stumbleupon.com/submit? url=http://www.yoursite.com/"> Stumble</a></li>
                                 <li><a class="twitter" href="http://twitter.com/home?status=Your Website Title- http://yourwebsite.com@TwitterUserName">Twitter</a></li>
                             </ul>
             </div>
     </b:if>

Kalau benar maka hasilnya akan seperti ini kawan:

<data:post.body/>
    

<b:if cond='data:blog.pageType == "item"'>     <div id="social_nav_horizontal">                              <h3> Bookmark or Share This Post </h3>
                             <ul>
                                 <li> <a class="delicious" href="http://del.icio.us/post?url=Your website title" title="Share this on del.icio.us">Delicious</a>
                                 </li><li><a class="facebook" href="http://www.facebook.com/sharer.php?u=http://yourwebsite.com">Facebook</a></li>
                                 <li><a class="stumbleupon" href="http://www.stumbleupon.com/submit? url=http://www.yoursite.com/"> Stumble</a></li>
                                 <li><a class="twitter" href="http://twitter.com/home?status=Your Website Title- http://yourwebsite.com@TwitterUserName">Twitter</a></li>
                             </ul>
             </div>
     </b:if>

Langkah Ketujuh
Klik Simpan Template atau Save Template

Sekarang lihatlah hasilnya, kalau semua tutorialnya dilakukan dengan benar maka hasilnya pasti sama seperti contoh diatas. Selamat Mencoba

Mungkin hanya itu saja yang akan Syahroonix sampaikan kali ini dalam artikel Cara Membuat Menu Social Share Sederhana Dengan CSS 3. Apabila ada kesalahan dalam artikel ini Syahroonix mengucapkan mohon maaf. Ini adalah artikel asli milik Saya, kalian boleh mengcopy artikel ini. Tapi jangan mengklaim bahwa ini adalah artikel milik kalian. Dan, bila kalian mengcopy artikel ini jangan lupa sertakan link sumber asli dari blog ini. Biasakanlah untuk menghargai karya orang lain dengan minimal meninggalkan komentar baiknya di kolom komentar. Bila ada waktu luang, sempatkanlah untuk membaca artikel lain di blog ini dan klik iklan yang ada di blog ini untuk mendukung blog ini tetap Update.

Tags : cara membuat share di bawah postingan, cara membuat tombol share keren, cara membuat tombol share seo dengan CSS, cara membuat tombol social share keren, cara membuat tombol social share yang bagus, cara membuat tombol social share yang keren dan seo, cara membuat tombol social share yang keren dan seo

Sumber Artikel : Syahroonix Blog | Berbagi Segala Hal