cara membuat widget jquery sliding valid html5

Widget model sliding ini memakai sistem jquery / cara sliding, digunakan untuk halaman blog baik blog valid html 5 dan seo friendly, membuat / memasang widget ini akan saya bahas pada tutorial kali ini dengan singkat padat dan lebih mudah dipahami, sebab widget ini menurut saya sangat baik untuk para bloger dalam meningkatkan trafik pengunjung. Widget Jquery Sliding ini terinspirasi oleh 3 orang sahabat karib saya yang memang pada bulan yang lalu sahabat saya mengirimkan email kepada saya agar dibutkan satu script yang simpel dan bermutu, Tanpa berpikir panjang saya membuatkan widget ini yang saya sebut dengn nama " The Power Of widget ". Memang dari namanya terdengar terlalu tinggi, tapi menurut saya widget ini merupakan suatu paduan dari beberapa widget yang sangat diperlukan pra bloger sehingga saya menyebutnya demikian, maklum saya seorang bloger newbie yang masih sebutir debu halus di dunia maya ini, jadi sedikit asal ngomong doang hehe..he... Oke langsung saja menuju TKP, bila berkenan silahkan lihat demonya dengan link dibawah ini.
Untuk melihat demonya silahkan KLIK DISINI lihat menu dibagian kanan halaman.

Fitur Widget

1. Artikel terkait sistem random post
2. Emil Subscribe
3. Media sosial share
4. Kontak admin by Email
5. Autor box admin
   

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 : Jquery widget sliding
By : Rivai Silaban | Blog Design
Update : Minggu 1 September 2013
******************************************/
*{
margin:0px;
padding:0px;
}
#content{
margin:15px auto;
text-align:center;
width:550px; /*lebar widget*/
position:relative;
height:100%;
}
#wrapper{
border-bottom:3px solid #CC0000;
border-top:3px solid #CC0000;
background-color:#FFFFFF;
width:550px;
overflow:hidden;
padding-bottom:10px;
padding-top:10px;
}
#steps{
width:550px;
/*height:320px;*/
overflow:hidden;
}
.step{
float:left;
width:550px;
height: auto; /*height:320px;*/
}
#navigation{
height:45px;
border-top:1px solid #fff;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
#navigation ul{
list-style:none;
float:left;
margin-left:22px;
}
#navigation ul li{
float:left;
border-right:1px solid #ccc;
border-left:1px solid #ccc;
position:relative;
margin:0px 2px;
}
#navigation ul li a{
display:block;
height:45px;
background-color:#333333;
color:#CCCCCC;
outline:none;
font-weight:bold;
text-decoration:none;
line-height:45px;
padding:0px 20px;
border-right:2px solid #fff;
border-left:2px solid #fff;
box-shadow:1px 0 4px #111;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#navigation ul li a:hover,
#navigation ul li.selected a{
color:#FFFFFF;
text-shadow:1px 1px 1px #111;
background-color: #666666;
box-shadow:none;
}
span.error{
position:absolute;
top:0px;
left:1px;
width:20px;
height:20px;
}
#steps fieldset{
border:none;
padding-bottom:20px;
}
#steps legend{
text-align:left;
background-color:#f0f0f0;
color:#CC0000;
font-size:24px;
text-shadow:2px 1px 2px #999;
font-weight:bold;
float:left;
width:100%;
padding:5px 0px 5px 10px;
margin:10px 0px;
border-bottom:1px solid #d9d9d9;
border-top:1px solid #d9d9d9;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
}
#related-posts { float : left; width : 480px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; font-weight: bold; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight: bold; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url(&quot;&quot;) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } #related-posts ul li{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIxb4TG2VGaoiXHfdbbKS9UBIPkDz7o-xYrDojIuyZuqCUgAVgP2PNayyteeaPYUDi0iwmMH9cWCnafhEfpo-OExDSu4aDav5Lkpj-DON_qKBjInm1g4wFxvckhchl6QVwbmn32PpKmdM/s1600/ico-rss.jpg) no-repeat ;display:block;list-style-type:none;margin-bottom: 13px;padding-left: 30px;padding-top:0px;} #related-posts ul li a {block;color: #222}#related-posts ul li a:hover {block;
color: #990000;
}
#riv_sub {
background-color: #CCCCCC;
text-align: center;
width: 550px;
padding 10px;
}
#riv_sub .NBTstyle{
padding:7px 15px 7px 5px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
border-radius: 4px;
box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#riv_sub .NBT-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcgmP7nyiuPyiwdGR_tJvP7Tc0pBXZpTp86keaESyJNFciQO6euc5GMf3nOAZRuCuszCQy-uJw526WclLDshnEJaaIO0co7Do_mFpRCq_qsYoZ7mx5Vk6hr3SKy624lwzcx-CklE-S2OM/s1600/emain-icon.png) no-repeat 4px 17px ;
padding:10px 0 0 55px;
float:left;
font-family: &quot;Trebuchet MS&quot;,sans-serif;
font-size:1.2em;
font-weight:bold;
color:#111;
}
#riv_sub .NBTsubmit{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #c4c4c4;
cursor: pointer;
border-radius: 4px;
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
ul.RS_design { list-style:none; margin:15px auto;display:inline-block; }
ul.RS_design li { display:inline; float:left; background-repeat:no-repeat; }
ul.RS_design li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }
ul.RS_design li a strong { font-weight:normal; position:absolute; left:50px; top:6px; color:#fff; padding:3px; z-index:900; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:#990000; border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
ul.RS_design li.bdrs-facebook { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVcok_Ysi2Z1pRE0o4IwNtJcEHvMXExEVgae8wxmP0DXfztW_JmUZtl4v7lC9coLRgZgJZClW2BZcngxfD1Nt-4EP8zwJhdHPmgS1Pj2clhc-WSAjOMTZxxXCj4SmeBZMmptQiaBcKuzA/s1600/RFB.png"); }
ul.RS_design li.bdrs-twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBSbNuu4mSuqpelW6u_7P0p6i158H6r5tgt3A9yNMx_6ySt_okVFQqfoUfHDSOkNtrgtyDet27vKoPjsY-j_lkfQFlhIJF5rqSDmtJ2sU-n4rpt7e3qBH28xT8o9EGL_vT_BQ5Wxsu_Dg/s1600/RTW.png"); }

ul.RS_design li.bdrs-stumbleupon { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1lZQ1mpGFK8iFOY5FlLFtOuOu-1zY-fXMj9ee2nNWoBKut4eiepFBbDeMM_Rqmcy4y23lDhJ2xjywN4IyEYPbwiWIk0JFguP-DMaIwLfHfhafSqO14fkFXSkE-ZiEd9J_IYSq2UkF_fI/s1600/gpluss.png"); }
ul.RS_design li.bdrs-digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj54yAyp3oYaQe1giCJRPSezis1OK_jasPaZ-L2kY81yNPsXzfClv5Qaqzzb6iOb8T-iEXAXNt9TCBsRK_pfE6Ji6XMZQtqhSVpZ-jC4NM4SYrxu48yxekJScTL4_lC17sYDWUzUbavTa8/s1600/RDG.png"); }

ul.RS_design li.bdrs-reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjShR_qO90vJZd60Sa-eftSaLuTxaocE1Yl5wizRpx8rT7QjCunZKDsXPBfO-Y_uSFnNTDwgzVRJMZ7ueVmlqKntBBfJoE3sXnFjoD4WfPsqyCOdeEGS9tyIF1PcIZz5IkyczKxT1sds9k/s1600/RRABBIT.png"); }
ul.RS_design li.bdrs-technorati { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimG97SbZIGEiWKWcHi0wZgmSeJ0w2mEHcOhOOPqfXymq2-mORbGxwKKioMne8KoHJoLZ-FrfMfarJSZ6-bLn4phvbwf1wEuCkr30Y5WFqe83qXqR0f6Hi1C9qSz6_LvThV6XFazHgQwd4/s1600/RTEC.png"); }
#RS_designblog:hover li { opacity:0.1; }
#RS_designblog li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
#RS_designblog li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
#RS_designblog li:hover { opacity:1; }
#RS_designblog li:hover a strong { opacity:1; top:-20px; }
#BDRS_surel {
width: 300px;
margin: 10px;
text-align: center;
float: left;
}
#BDRS_surel .BD-tac input, textarea {
font-size : 14px;
padding : 5px;
text-shadow : 1px 1px 0 #FFF;
width : 100%;
color : #666666;
font-family : Arial, Helvetica, sans-serif;
margin-bottom : 5px;
border : rgb(9, 149, 223) solid 1px;
border-color : #666666;background-color: #E4E4E4;
}
#BDRS_surel .BD-tac .mit {
color : #000000;
cursor : pointer;
font-family : verdana;
font-size : 10px;
padding : 0 0 3px 0;
text-shadow : none;
text-transform : uppercase;
width : 70px;
height : 25px;
background-color : #0099FF;
border-color : #0000CC;
margin-right:2px;
float: right;
}
#BDRS_surel .BD-tac .mit:hover {
background-color : #00CCFF;
color : #000000;
border-color : #550000;
}
#BDRS_surel .BD-tac .mit:active {
box-shadow : 0 1px 4px rgba(0, 0, 0, 0.5) inset;
outline : 0;
}
/*****************************************
Author Box Rivai Silaban
******************************************/
.Rivai-PostAuthor {
font-size:12px;
margin:0 auto;
padding:10px;
width:540px;
text-shadow:1px 0 0 #fff;
min-height:170px;
margin-right: 5px;
}
.Rivai {
padding:10px 10px 0 0;
margin:0;
font-size:12px;
float:left;
width:110px;
text-align:center;
}
.Rivai img {
border:2px solid #888;
background-color: #FFFFFF;
padding:2px;
margin:0px 5px 0px 5px;
opacity: 0.5;
}
.Rivai:hover img {
border:2px solid #ccc;
cursor:pointer;
opacity: 1;
box-shadow: 1px 1px 4px #000;
}
.Rivai-text {
float:right;
width: 68%;
font:14px Trebuchet MS,sans-serif;
text-align:justify;
color:#111;
padding:0 15px 0 20px;
border-left:1px #c4c4c4 solid;

}
.Rivai-footer{
padding:10px 0;
font:bold 12px Trebuchet MS;
}
.button a{
background-color:#666666;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
text-align: center;
border: solid #0066FF 1px;
padding: 5px 10px;
margin-right: 5px;
border-color: #CCCCCC;
}
.button a:hover{
background-color:#333333;
color: #FFFF00;
text-decoration: none;
border: solid #0066FF 1px;
text-shadow: 0 1px #999;
border-color: #000000;
box-shadow: 0 0px 5px #666;
}
.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;}

#BD_random_title td {
list-style-type: none;
width: 100%;
padding: 3px;
}

#BD_random_title a {
color: #000;
line-height:12px;
letter-spacing:0.1em;
text-decoration: none;
display:block;
padding:2px 6px 5px 8px;
background-color: #FFFFFF;
text-align: left;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
}
#BD_random_title a:hover {
color:#990000;
text-transform: none;
}
.BD_random_list {
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: #000;
line-height:10px;
letter-spacing:0.1em;
text-decoration: none;
}
}/*** 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/1103397145/widget-sliding.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
   <div class='post-footer-line post-footer-line-2'/>
   atau Kode
   <div class='post-footer-line post-footer-line-3'/>
3. Copy kode dibawah ini pastekan tepat dibawah code diatas.
   Bila anda pastekan dibawah code <div class='post-footer-line post-footer-line-2'/> tidak berhasil silahkann ganti dengan code <div class='post-footer-line post-footer-line-3'/>
4. Untuk script post snippet silahkan pastekan kode dibawah ini tepat dibawah kode <data:post.body/>
5. Save template anda dan lihat hasilnya, selamat berkreative.

<!-- Rivai Silaban | BLOG DESIGN Jquery Flaying Menu start -->
<div id="content">
<div id="wrapper">
<div id="steps">
<div>
<fieldset class="step">
<legend>Artikel Terkait</legend>
<div id="BD_random_title">
<div class="BD_random_list">
<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=9;// Jumlah artikel yang akan ditampilkan
function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write();
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item ="<div style='border-bottom: dashed #ccc 1px;'>" + "<a href=" + entry.link[k].href + " title=" + entry.link[k].href +">" + entry.title.$t + "</a></div>";
document.write(item);}}
}document.write();}
</script>
<script src="LINK URL BLOG ANDA /feeds/posts/default?alt=json-in-script&amp;start-index=1&amp;max-results=1000&amp;callback=randomposts" type="text/javascript"></script> </div></div>
</fieldset>
<fieldset class="step">
<legend>Subscribe free</legend>
<div id="riv_sub">
<div class='NBT-email' style="float:left;">
<span style="color: #FF0000; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 18px; font-weight: bold; font-style: italic; text-shadow: 1px 1px 1px #000; line-height: 1.5em;">Update Artikel with Subscribe<br/>
Subscribe this Artikel <br/><br/></span>
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ID FEEDBURNER &apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='ID FEEDBURNER'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='NBTstyle' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email…&quot;;}' onfocus='if (this.value == &quot;Enter your email…&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email…'/>
<input alt='' class='NBTsubmit' title='' type='submit' value='KIRIM'/><br/>
<div style="float:left; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 12px; color: #666666; padding: 5px; width: 280px; text-align: center; margin-top:15px; font-style: italic;"> Anda akan mendapatkan Update terbaru<br/>
dari artikel tutorial dari kami secara geratis
</div></form>
</div><div style="float:right; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 12px; color: #666666; padding: 5px; width: 180px; text-align: left; line-height: 1.5em;">Silahkan daftarkan email anda untuk mendapatkan Update geratis terbaru dari kami...<br/>
<br/>Silahkan cek email anda untuk melakukan registrasi,<br/>Salam Kami... <br/><br/>Salam Bloger</div>
</div>
</fieldset>
<fieldset class="step">
<legend>Share Artikel dengan</legend>
<div>
<ul class="RS_design" id="RS_designblog">
<li class="bdrs-facebook">
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' onClick="window.open
(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;" rel='nofollow' target='_blank' title='Share this on facebook'><strong>Facebook</strong></a>
</li>
<li class="bdrs-twitter">
<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' onClick="window.open
(this.href,'sharer','toolbar=0,status=0,width=626,height=436');
return false;" rel='nofollow' target='_blank' title='Share this on twitter'><strong>Twitter</strong></a>
</li>
<li class="bdrs-stumbleupon">
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onClick="window.open
(this.href,'sharer','toolbar=0,status=0,width=626,height=436');
return false;" rel="nofollow" title="Share this on Gplus"><strong>Gplus</strong></a>
</li>
<li class="bdrs-digg">
<a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url' onClick="window.open
(this.href,'sharer','toolbar=0,status=0,width=626,height=436');
return false;" rel="nofollow" title="Share this on Digg"><strong>Digg</strong></a>
</li>
<li class="bdrs-reddit">
<a expr:href='&quot;http://raddit.com/submit?url=&quot; + data:post.url' onClick="window.open
(this.href,'sharer','toolbar=0,status=0,width=626,height=436');
return false;" rel="nofollow" title="Share this on Reddit"><strong>Reddit</strong></a>
</li>
<li class="bdrs-technorati">
<a expr:href='&quot;http://technorati.com/faves?sub=addfavbtn&amp;add=&quot; + data:post.url' onClick="window.open
(this.href,'sharer','toolbar=0,status=0,width=626,height=436');
return false;" rel="nofollow" title="Share this on Technorati"><strong>Technorati</strong></a>
</li>
</ul><br/>
<span style="color: #666666; font-size: 14px; font-style: italic; font-family: Georgia, 'Times New Roman', Times, serif; font-weight: bold;"Times New Roman", Times, serif">Share artikel pada postingan menggunakan sosial share diatas</span><div style="font-family: Georgia, 'Times New Roman', Times, serif; font-size: 12px; color: #666666; padding: 5px; width: auto; text-align: center; line-height: 1.3em;">Anda sedang membaca artikel tentang " <b><a expr:href='data:post.url'>
<data:post.title/></a></b> " Pergunakan fasilitas share untuk berbagi artikel postingan ini kepenyedia sosial media pad icon share diatas.
<br/>kami tidak bertanggung jawab atas penyalah gunaan dari tutorial dan script yang ada pada postingan blog ini diluar blog ini.</div> </div>
</fieldset>
<fieldset class="step">
<legend>Hubungi Admin melalui email</legend>
<div style="width:100%; ">
<div id="BDRS_surel">

<div class='BD-tac'><form action="mailto:ALAMAT EMAIL ANDA" method="post" enctype="text/plain">
<div >
<input name="name" size="20" onblur="if (this.value == &#39;&#39;) this.value = &#39;Name&#39;;" onclick="if (this.value == &#39;Name&#39;) this.value = &#39;&#39;;" type="text" value="Name" />
</div>
<div>
<input name="email" size="20" onblur="if (this.value == &#39;&#39;) this.value = &#39;Email&#39;;" onclick="if (this.value == &#39;Email&#39;) this.value = &#39;&#39;;" type="text" value="Email" />
</div>
<div><textarea name="comment" cols="15" wrap="physical" ></textarea>
<br/><div><input class='mit' type="submit" name="submit" value="Submit" title="Submit" /><input class='mit' type="reset" name="reset" value="Reset" title="Reset"/></div>
</div></form></div></div>
<div style="float:right; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 12px; color: #666666; padding: 5px; width: 200px; text-align: left;">Bila anda merasa kesulitan dalam memasang tutorial pada postingan halaman blog ini silahkan hubungi kami, dengan senang hati kami akan membantu anda...<br/><br/>
<br/>Isikan Nama lengkap anda dan email anda begitu juga dengan Pesan Anda pada form yang telah disediakan.</div>
</div>

</fieldset>
<fieldset class="step">
<legend>Profil Admin</legend>
<div class='Rivai-PostAuthor'>
<div class='Rivai'>
<a href='http://rivai-silaban.blogspot.com' target='_blank'>
<img alt='Rivai Silaban' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqBLKAguWnUy5g089y9_93TxXnsMOaW01fL5EdHCAS87bygvKR54w-jQHAikltjtwjb0DdqqdXoj-0Cn-EheOSZm8zW3PeShahwl28aoyX1piUCJurh-AMJbag345TxD765s1o4SLb6bo/h120/rivai.jpg' width='100' title="my image"/>
</a>
<div style='font-family: Geneva, Arial, Helvetica, sans-serif; padding:3px 10px; 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>
<span style='font-family: Trebuchet MS,sans-serif; color: #990000;'>
My Profil </span> </b> </span>
<br/>
<div style='font-family: Trebuchet MS,sans-serif;border-top: dashed #999 1px;border-bottom: dashed #999 1px;'>
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....!!
<br/><div class="more" style='float:right;text-align:right;margin-top:-20px;'>
<a href='link PROFIL GPLUS ANDA ' rel='nofollow' target='_blank' title="Profil">
&gt;&gt; Read More
</a>
</div></div>
<div class="button" style="margin-top:15px;">
<div style='float:left;text-align:left;'>
<a class="button" href='link facebook ' rel='nofollow' target='_blank' title="facebook">
Facebook
</a>
<a class="button" href='link twitter ' rel='nofollow' target='_blank' title="twitter">
Twitter
</a>
<a class="button" href='link gplus ' rel='nofollow' target='_blank' title="Gplus">
Google Plus
</a>
<a href='http://www.blogger.com/follow-blog.g?blogID=ID BLOG ANDA' rel='nofollow' target='_blank' title="join to blog">
Join to Blog
</a> </div>
</div>

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

</fieldset>
</div>
</div>
<div id="navigation" style="display:none;">
<ul>
<li class="selected">
<a href="#">Artikel</a>
</li>
<li>
<a href="#">Subscribe</a>
</li>
<li>
<a href="#">Share</a>
</li>
<li>
<a href="#">Kontak</a>
</li>
<li>
<a href="#">Author</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Rivai Silaban | BLOG DESIGN Jquery Flaying Menu End -->

Keterangan Code

• Tulisan kode warna MERAH ganti dengan link menu anda .
  Untuktulisan warna HIJAU ganti dengan tulisan yang anda tukai, ini adalah kode taxt.
• Kode html warna KUNING ganti dengan link gambar anda
• Silahkan edit CSSnya sesuai dengan tampilan halaman blog anda.

Kesimpulan

Widget Sliding jquery 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.

The Power Of widget
Minggu 01 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 : 5:35 PM