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

Tuesday, September 3, 2013

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


  1. Gambar Admin
  2. Text Profil
  3. Media sosial share
  4. Fungsi sistem read more.

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 : 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


  1. Setelah anda selesai menyematkan CSSnya saatnya anda menyematkan kode scriptnya pada tag html/xml template anda.
  2. Pada Edit HTML template anda silahkan cari kode </head>
  3. Setelah ketemu copy script dibawah ini dan pastekan diatas kode </head>
  4. 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.

<!-- Rivai Silaban | BLOG DESIGN script Jquery sliding Menu start -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>


<script type="text/javascript" src="http://yourjavascript.com/003399113/flying.js"></script>
<!-- Rivai Silaban | BLOG DESIGN script Jquery sliding Menu End -->


Install tag html


  1. Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
  2. 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://lh4.googleusercontent.com/-3TFxlGaJYqU/USE9N_fvQOI/AAAAAAAAAO8/0_ocwXMKYkw/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.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Rivai Silaban Update pada : 12:32 PM

0 komentar :

Post a Comment

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