Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

» » widget Floating Menu Social media valid html5

Thursday, September 12, 2013

widget Floating Menu Social media valid html5

Widget ini menganut sistem floating menu yang valid html 5 dan seo friendly,image social media menjadi tambahan untuk melengkapi widget ini. Untuk widget yang satu ini saya menyebutnya dengan " Widget Floating Menu Social Media Valid HTML 5 " yang saya ambil dari kriteria widget itu sendiri. Kemampuan dari widget ini menjadi suatu pilihan buat para bloger, sebab dalam satu widget sudah terdiri dari beberapa widget yang telah disatukan sehingga lebih simpel dalam hal pemakaian tempat dan tampilan yang begitu menarik dan elegan.Untuk melihat bagaimana pemasangannya silahkan simak tutorial dibawah ini dan lihat demonya melalui tombol demo dibawah ini, lihat bagian menu halaman bagaimana menurut anda ?, langsung saja menuju TKP.

Demo


Fitur Widget


  1. Menu sistem flying in header
  2. Link Menu item
  3. Image Amin
  4. Snipet Profil Admin
  5. Google Plus link
  6. Facebook Link
  7. Twitter Link

Install Program CSS


  1. Login ke dashboard anda
  2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  3. Cari code ]]></b:skin> 
  4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

/*****************************************
Name :Widget Floating Menu Sosial Media
By : Rivai Silaban | Blog Design
Update : Kamis 12 September 2013
******************************************/
#BDrs-MENU {
width : 100%;
height : 70px;
margin : 0 auto;
box-shadow : 1px 3px 6px #000;
position : fixed;
z-index : 9999;
overflow : hidden;
top : 0;
left : 0;
background-color : #f0f0f0;
border-bottom : 3px solid #999;
color: #990000;
}
#BDrs-MENU #BDrs-MENU-NAV {
width : 960px;
height : 63px;
margin : 0 auto;
padding : 0;
font-size : 14px;
text-align : left;
}
#BDrs-MENU #BDrs-MENU-NAV p {
width : 90px;
float : left;
padding : 23px 0;
}
#BDrs-MENU #top-BD ul {
margin : 0 auto;
width : auto;
list-style-type : none;
}
#BDrs-MENU #top-BD ul li {
float : right;
margin : 8px 0;
}
#BDrs-MENU #top-BD ul li a {
border : #494949 solid 1px;
position : relative;
line-height : 28px;
margin-top : -1px;
padding : 3px 10px;
color : #990000;
font-size : 13px;
text-shadow : 0 -1px 0 #000;
display : block;
text-decoration : none;
font-weight : 500;
text-transform : none;
margin-right : 3px;
font-family : Georgia, "Times New Roman", Times, serif;
border-radius:10px 10px 0 0;
box-shadow:0 0 2px 1px #FF0000 inset;
font-style: italic;
}
#BDrs-MENU #top-BD ul li a:hover {
color : #666666;
border : #494949 solid 1px;
box-shadow : 0 0 2px #666;
background-color : none;
}
#BDrs-MENU #top-BD .text {
width: 100px;
height:60px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#000000;
line-height: normal;
}
#BDrs-MENU #top-BD .pic {
margin:0 15px 0 15px;
text-decoration: none;
color: #0000FF;
}
#BDrs-MENU #top-BD .pic:hover {
opacity:.3;
color: #333333;
}/*** Blog Design CSS and ***/


Install Program Tag HTML


  • Setelah anda selesai memasang code scriptnya saatnya anda dipaksa untuk memasang kode tag htmlnya pada halaman blog anda agar muncul pada saat dibrowsing.
  • Cari code <body> setelah ketemu copy kode dibawah ini dan pastekan tepat dibawah kode <body>

<!-- Rivai Silaban | BLOG DESIGN kode menu start -->
<div id='BDrs-MENU'>
<div id='BDrs-MENU-NAV'>
<div id='top-BD'>
<p><img alt='gambar admin' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtg-2IFYC1QFZf6PzeN7I4iiQO2TZDL7_DK_JKTIGbKE0AgwvtucOgGElqSOc6UUzafJfwVkxHHeBJtT83_M0-Dehl9_0baWwtgBhZwqN8xYFJGZWhSdvJsHhtdOVsa-aHct0bk2TdROQ/h120/rivai.jpg' style='margin-top:-30px;margin-left:23px;border:solid #999 1px; border-radius:5px;' title='Rivai Silaban' width='50'/>
</p><p class="text" style="width: 300px;margin-top:-21px;"><span style="color:#990000; margin-left:-15px"><a class="pic" href='LINK PROFIL ANDA ' target='_blank' title='My Profil'><b>NAMA ANDA </b></a></span><br/>Tunduk bukannya saya takut tapi saya sadar atas apa yang saya miliki adalah kuasa Tuhan, hingga tiba saatnya nanti Tuhan akan mengambilnya dari saya.</p>
<div style="margin:3px 0px 0 570px; width:400px; text-align: right;" >
<a class="pic" href='LINK GOOGLE PLUS ANDA ' target='_blank' title='invite google plus'><img alt='gplus' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYM5-Kv1Kxa8SF1jEnsVvVXZnw6Vy1uXCizH1QYTcZgmg877HdxJ6rcuIdoHG5YNdZfc0NXGuX8-YAuuiDJ0hkSkO_MICYltVRA1RoG3hmy5BHSJ7K3EhZt7DG0cSESZb1r4k0B30VBqg/s1600/GP.png" width="100" height="28" title='invite google plus'/></a>
<a class="pic" href='LINK FACEBOOK ANDA ' target='_blank' title='like on facebook'><img alt='facebook' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgMw8LJHFtGK44ii1MxW-04jklQPWIIyuKS4nec_6aNtLwxcZk7iU7n5DaUYZBi7PaJvdCF7ki70TerO13_GHvKK0UlbQKhSqpJhdK9ueQBQR-4kjys2qHFe1tcbJ8PGvsAVtlyy8U4uw/s1600/fbk.png" width="100" height="28" title='like on facebook'/></a>
<a class="pic" href='LINK TWITTER ANDA ' target='_blank' title='follow on twitter'><img alt='twitter' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyUytRVn3pnTJejQE7F7MiHv6fSmSeH2KAlM8oN1IS3aFG8yDRAiheIwEv9hPlAVkvCkXvF0WJYnh9k1Vq-l7h_FN5mXvCor6qnrABud66uIrZQIJr7vpTeEsS7yWpYmYYlTmskceuZtI/s1600/twk.png" width="100" height="28" title='follow on twitter'/></a></div>
<div>
<ul>
<li>
<a href='LINK SITEMAP ' rel="nofollow" target='_blank' title='Sitemap'>
Sitemap
</a>
</li>
<li>
<a href='LINK PRIVACY POLICY ' rel="nofollow" target='_blank' title='Privacy Policy'>
Privacy Policy
</a>
</li>
<li>
<a href='LINK DISCLAIMER ' rel="nofollow" target='_blank' title='Disclaimer'>
Disclaimer
</a>
</li>
<li>
<a href='LINK CONTACT ' rel="nofollow" target='_blank' title='Contact As'>
Contact As
</a>
</li>
<li>
<a href='LINK ABOUT US ' rel="nofollow" target='_blank' title='About Us'>
About Us
</a>
</li></ul></div>
</div></div>
</div>
<div class='clearer'/>
<br/>
<br/>
<br/><br/>
<!-- Rivai Silaban | BLOG DESIGN menu End -->

Keterangan Code
  • Tulisan kode warna MERAH pada kode silahkan ganti dengan link anda sesuai yang tertulis pada tutorial..
  • Tulisan warna BIRU adalah link dari gambar anda, ukuran 50 x 50 PX
  • Tulisan warna HIJAU adalah Nama dan Profil singkat
  • Tulisan kode warna KUNING adalah Jarak antara menu dengan halaman anda atau header blog anda, bila terlalu dekat silahkan tambahkan code <br/>, sebaliknya bila terlalu jauh silahkan kurangi kode <br/>.
  • Bila anda ingin lebih kreative silahkan anda edit CSSnya untuk menyesuaikan tampilan widget ini dengan thems template anda. selamat mencoba.

Kesimpulan

Widget Floating Menu with Social media ini selain valid html 5 dan CSS 3 juga mempunyai penulisan tag HTML yang SEO Friendly dan memiliki kode html dan CSS yang ringan.

Bila teman teman mengalami masalah dalam pemasangan wiget ini atau ada kesalahan penulisan kode silahkan hubungi saya atau share bersama saya lewat form komentar dibawah ini.

Widget Floating Menu Social media valid html 5
Kamis, 12 September 2013
By : Rivai Silaban | Blog Design

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Unknown Update pada : 10:48 AM

2 comments :

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog

Find us on Google+ | Powered Blogspot

7 Maret © 2013 Rivai Silaban | BLOG DESIGN