cara membuat flying widget profil valid html5

Widget profil model flying yang menganut cara valid html 5 dan seo friendly ini, akan membuat tampilan blog kesayangan anda semakin memiliki keunikan. Tata letak dari flying widget profil ini tidak memakan tempat yang begitu banyak sehingga sangat cocok anda gunakan pada halaman blog anda. Script yang dimiliki widget ini sangat ringan, sehingga tidak mempengaruhi loading halaman blog anda. Flying wiget profil ini memiliki beberapa link sosial media tambahan didalamnya sehingga profil anda akan terlihat lebih komplit. Saya rasa penjelasan yang singkat ini sudah memiliki suatu gambaran buat anda, untuk memasang flying widget profil ini i halaman blog saya akan menjelaskan pada tutorial kali ini, saatnya kita menuju TKP.
Untuk melihat demonya silahkan KLIK DISINI lihat dibagian kanan halaman.

Fitur Widget

Gambar Admin
Text Profil
Media sosial share
Fungsi sistem read more.

Install Program CSS

Login ke dashboard anda
Masuk ke "TEMPLATE" lalu klik " Edit HTML "
Cari code ]]></b:skin>
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 : Flying Widget Profil

By : Rivai Silaban | Blog Design

Update : Selasa 03 September 2013

******************************************/

*{

         /* Universal CSS reset */

         margin:0;

         padding:0;

         }

#bdrspost{ background-color:#CCCCCC;}

         #bdrspost .bdrslide{

         position:absolute;

         top:0;

         right:0;

         background-color:#111;

         color:white;

         height:22px;

         border-top:solid #FF0000 3px;

         padding:10px 0;

         }

         #bdrspost .rivTitle{

         float:left;

         font-family:Georgia, "Times New Roman", Times, serif;

         font-size:15px;

         font-weight:bold;

         line-height:22px;

         padding:0 30px 0 10px;cursor:pointer;}

         #bdrspost .openLBD .bdrsIcon{

         margin:0 0 0 8px;

         float:right;

         }

         #bdrspost .bdrslideContent{

         display:none;

         padding:10px;

         font-size:11px;

         }

         #bdrspost .rivmain{

         height:70px;

         margin:80px auto;

         z-index:100;

         top:0;

         left:0;

         width:100%;

         height: 25px;

         position:fixed;

         }

         #bdrspost .button a{

         color: #FFFFFF;

         font-family: Verdana, Arial, Helvetica, sans-serif;

         font-size: 10px;

         text-decoration: none;

         text-align: left;

         padding: 5px 10px;

         border-color: #CCCCCC;

         }

         #bdrspost .button a:hover{

         color: #FFFF00;

         text-decoration: underline;

         }

         .more a{background-color:#F7F7F7;

         color: #000000;

         font-family: Verdana, Arial, Helvetica, sans-serif;

         font-size: 10px;

         text-decoration: none;

         text-align: center;

         border: solid #0066FF 1px;

         padding:2px 10px;

         margin-right: 5px;

         border-color: #DBDBDB;}

         .more a:hover {background-color:#F3F3F3;

         color: #0000;

         text-decoration: none;

         border: solid #0066FF 1px;

         text-shadow: 0 1px #999;

         border-color: #CCCCCC;

         box-shadow: 0 0px 2px #999;}

}/*** Blog Design CSS and ***/

Install Script

Setelah anda selesai menyematkan CSSnya saatnya anda menyematkan kode scriptnya pada tag html/xml template anda.
Pada Edit HTML template anda silahkan cari kode </head>
Setelah ketemu copy script dibawah ini dan pastekan diatas kode </head>
Perlu anda ingat bila pada template anda sudah ada kode JQUERY diatas versi 1.4 pada script tulisan kode warna biru dibawah kode tulisan warna BIRU tersebut tidak usah dikut di Copy. Bila sebaliknya versinya dibawah silahkan copy semua kode tersebut.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

Install tag html

Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
Cari code <body> setelah ketemu Copy kode dinawah ini, silahkan anda edit semua link sesuai dengan halaman blog anda. kemudianpastekan tepat dibawah kode <body> kemuian save template anda, dan lihat hasilnya.

<!-- Rivai Silaban | BLOG DESIGN Flying widget start -->

       <div id="bdrspost">

<div class="rivmain">

<div  title="About....." >

<div class='profil'>

<div class='Rivai'>

<a href='http://rivai-silaban.blogspot.com' target='_blank'>

<img alt='Rivai Silaban' style="width:100px; height:100px; margin:15px 10px 10px 10px;border-radius:50%;box-shadow: 0 0 4px #fff ; "  src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqBLKAguWnUy5g089y9_93TxXnsMOaW01fL5EdHCAS87bygvKR54w-jQHAikltjtwjb0DdqqdXoj-0Cn-EheOSZm8zW3PeShahwl28aoyX1piUCJurh-AMJbag345TxD765s1o4SLb6bo/h120/rivai.jpg'  title="my image"/>

</a>

<div style='font-family: Geneva, Arial, Helvetica, sans-serif; padding:3px auto; border:solid #0000FF 1px; background-color:#00CCFF; margin-top:7px; text-align: center; border-color: #0066FF; border-radius:3px; color:#000000; text-shadow: NONE;'>

<b>

Rivai Silaban                                    </b>                                  </div>

</div>

<div class='Rivai-text'>

<span style='font-size: large;'>

<b>

<br/>

<div style='font-family: Verdana, Arial, Helvetica, sans-serif; border-top: dashed #999 1px; border-bottom: dashed #999 1px; font-size: 10px; color: #CCCCCC;padding:3px 0 23px 0;'>

Saya adalah seorang yang suka dengan photografi dan berbagai dunia maya lainnya, saya suka 

Bloging dan memiliki ilmu sedikit tentang Design Grafis, Buat sohib sohib yang suka dengan bloging mari sama sama membangun ikatan persaudaraan diantara bloger Indonesia.

<br/>

Salam bloger....!!

<div class="more" style='float:right;text-align:right;margin-top:5px;'>

<a href=Link Gplus anda' rel='nofollow' target='_blank' title="Profil">

More 

</a>

</div></div><br/>

<div class="button" style="margin-top:5px;">

Join Me On: <br/>

<a class="button" href='Link Facebook' rel='nofollow' target='_blank' title="facebook">

Facebook

</a>

<br/>

<a class="button" href='link twitter ' rel='nofollow' target='_blank' title="twitter">

Twitter

</a>

<br/>

<a class="button" href='https://plus.google.com/108560124605502700357' rel='nofollow' target='_blank' title="Gplus">

Google Plus

</a>

<br/>

<a href='http://www.blogger.com/follow-blog.g?blogID=ID FEEDBURNER' rel='nofollow' target='_blank' title="join to blog">

Join to Blog

</a> </div>

</div>

</div>

</div>

<div style='clear:both;'/>  </div>

</div>

<!-- Rivai Silaban | BLOG DESIGN Flying widget End -->

Keterangan Code

Tulisan kode warna MERAH ganti dengan link anda .
Untuk tulisan warna HIJAU ganti dengan tulisan yang anda sukai, ini adalah kode taxt.
Silahkan edit CSSnya sesuai dengan tampilan halaman blog anda.

Kesimpulan

Flying wiget profil ini valid HTML 5 dan CSS 3 serta menganut punulisan kode tag HTML yang SeO Friendly. Memiliki Script yang ringan sehingga tidak mempengaruhi Loading Blog Anda.

Buat para teman teman bloger yang mengalami masalah dalam memasang widget flaying menu navigasi with email subscribe ini, silahkan hubungi saya atau share bersama saya melalui form komentar dibawah.

Flying Wiget Profil
Selasa 03 September 2013
By : Admin Blog Design
Rivai Silaban

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.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 12:32 PM

cara membuat flying widget profil valid html5

Rivai Silaban - Blog Design

System

Script Code

Support

Widget

Tuesday, September 3, 2013