Rivai Silaban | BLOG DESIGN

Home » Posts filed under jquery

Showing posts with label jquery. Show all posts

Monday, January 13, 2014

show up code blogspot style

Show up code blogspot style - cara membuat show up code blogspot style sangat menarik, tampilan show up code blogspot style ini juga termasuk unik. show up code blogspot style memakai sistem jquery, buat anda yang menginginkan tampilan yang untuk untuk halaman blog kesayangannya, anda dapat mencoba sistem ini untuk menampilkan suatu code pada halaman anda. Untuk melihat tampilan show up code blogspot style ini silahkan lihat demo melalui link demo dibawah ini, Silahkan klik tulisan "Click to open code" pada halaman demo dan bila anda tertarik untuk memasangnya silahkan ikuti tutorial dibawah ini, langsung saja menuju TKP.

Demo

Pasang code script dibawah ini didalam code CSS template anda.

Code CSS here..

/*****************************************
Name : show up code blogspot style
By : Rivai Silaban | Blog Design
Update :Minggu 12 January 2014 
site : www.rivai.org
******************************************/
.show-up-code-blogspot-style {
margin:0 auto;
width:600px;
padding:0;
font-family: Arial;
font-size: 12px;
color: #333333;
}
.show-up-code-blogspot-style p {
margin:10px auto;
height: 300px;
overflow: auto;
}
.birustyle {color:#0000FF}
.merahstyle {color:#FF0000}
.boxshare {
position: relative; 
padding: 10px; 
overflow: hidden;
}
.hidden-code {
width:100%; 
height:35px; 
position:absolute; 
bottom:0; 
left:0; 
}
.open-code { 
padding:5px; 
border-top:4px double #ddd;
background:#fff; 
color:#333;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdYYhly1zSgCTMA5kKNl0eWJ8RwBGRcv5fdx5SeRM4H-PswXxAzSBNG7cdkx9bKGLkkDrMjIjNFSO78gBk_R_ZC2HSwT80YgKPlkJ63CNHL6vxttOI2g_gdxU4_z5D1eQgt09_aPg-2cP8/s1600/BCD.gif" ) no-repeat 100% 50%; 
}
.open-code a {
padding-right:22px;
font-weight:bold;
text-decoration:none;
color: #FF0000;
}
.open-code a:hover {color:#000;}
/*** www.rivai.org CSS show up code blogspot style and ***/ 

Pasang code script dibawah ini tepat dibawah code <body>

Code HTML here..

 <!-- www.rivai.org code show up code blogspot style start-->
 <div class="show-up-code-blogspot-style">
 <div class="boxshare">
 <div style="text-align: left;padding:0 10px;margin: 0;line-height: 20px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG3EL-meD5ca2wnKX-syu3TTajdmsP5VH4HqtvKVxQQ-a8xq3kax_VjhxcQdcecOSJODGpKdff2CBcZ7-J6Me-ObNmHDAO_TXbnHHiGjP5chPrByauU8XF8KN-K5jMZZg8B-HEJ9lNw8A/s1600/bg.png);"><p>
<span class="merahstyle">&lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;</span><br>
<span class="birustyle">&lt;script type=&quot;text/javascript&quot;&gt;</span><br>
$(function(){<br>
var slideHeight = 0; <br>
var defHeight = $('.boxshare').height();<br>
if(defHeight &gt;= slideHeight){<br>
$('.boxshare').css('height' , slideHeight + 'px');<br>
$('.open-code').append('&lt;a href=&quot;#&quot;&gt;Click to Read More&lt;/a&gt;');<br>
$('.open-code a').click(function(){<br>
var curHeight = $('.boxshare').height();<br>
if(curHeight == slideHeight){<br>
$('.boxshare').animate({<br>
height: defHeight<br>
}, &quot;normal&quot;);<br>
$('.open-code a').html('Close');<br>
$('.hidden-code').fadeOut();<br>
}else{<br>
$('.boxshare').animate({<br>
height: slideHeight<br>
}, &quot;normal&quot;);<br>
$('.open-code a').html('Click to Read More');<br>
$('.hidden-code').fadeIn();<br>
}<br>
return false;<br>
}); <br>
}<br>
});<br>
<span class="birustyle">&lt;/script&gt; </span>
</p></div><div class="hidden-code"></div></div>
 <div class="open-code"></div></div><br/>
<!-- www.rivai.org code show up code blogspot style end-->

Pasang code script dibawah ini di atas code </head>

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

<script type="text/javascript">
$(function(){
var slideHeight = 0;
var defHeight = $('.boxshare').height();
if(defHeight >= slideHeight){
$('.boxshare').css('height' , slideHeight + 'px');
$('.open-code').append('<a href="#">Click to open code</a>');
$('.open-code a').click(function(){
var curHeight = $('.boxshare').height();
if(curHeight == slideHeight){
$('.boxshare').animate({
height: defHeight
}, "normal");
$('.open-code a').html('Click to close code');
$('.hidden-code').fadeOut();
}else{
$('.boxshare').animate({
height: slideHeight
}, "normal");
$('.open-code a').html('Click to open code');
$('.hidden-code').fadeIn();
}
return false;
});
}
});
</script>

Bila anda masih belum memahami tata cara pemasangan cara membuat show up code blogspot style ini silahkan kunjungi halaman sumbernya, semoga bermanfaat..
Sumber : http://www.rivai.org/2014/01/show-up-code-blogspot-style.html

Di poskan oleh : Unknown | Dipublish pada : 12:47 AM | 0 komentar

cara membuat widget menu slick blogspot

Cara membuat widget menu slick blogspot - cara membuat widget menu slick blogspot dengan jquery,cara membuat widget menu slick blogspot menu slick blogspot ini memiliki tampilan yang menarik. Pada dasarnya memanfaatkan cara membuat widget menu slick blogspot ini hanya untuk menampilkan suatu menu yang lebih mudah dilihat para pengunjung dan tidak memakan tempat pada halaman blogspot. cara membuat widget menu slick blogspot ini sangat membantu blogger mania untuk menampilkan suatu menu yang unik, untuk melihat tampilan widget menu slick blogspot ini silahkan klik link demo dibawah ini, setelah anda berada di halaman demo widget menu slick blogspot silahkan dekatkan cursor anda pada menu wang berwarna kuning dan bila anda tertarik memasangnya, silahkan simak tutorial dibawah ini, langsung saja menuju TKP.

Demo

Pasang code script dibawah ini didalam code CSS template anda.

Code CSS here..

/*****************************************
Name : widget menu slick blogspot
By : Rivai Silaban | Blog Design
Update :Sabtu 11 January 2014 
site : www.rivai.org
******************************************/
.menu_slick_blogspot{
height:40px;
line-height:40px;
position:fixed;
top:150px;
left:0px;
font-family: arial;
font-size:16px;
text-transform:uppercase;
}.menu_slick_blogspot_main{
color:#f0f0f0;
z-index:10;
border:1px solid #222;
background-color:#000000;
cursor:pointer;
text-align:left;
font-weight:bold;
text-indent:20px;
width:100px;
position:absolute;
top:0px;
left:0px;
text-shadow:1px 1px 1px #000;
}.menu_slick_blogspot_main:hover{color:#fff;}
.menu_slick_blogspot_main_right{
width:40px;
height:40px;
position:absolute;
left:60px;
top:0px;
cursor:pointer;
border:1px solid #000;
background:#0099FF url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO64DTEfEA_Jmgraa4Hx-cbC08cWoT0_ZN5SMqbdWsto9WpR6WRVPoUt41P1IdiY9AXNziz8Zu4oIY7QhVjxvXEgfTqVDPEGIee_s2o18sQW4wAcW43v3SaFuhy908Tmj_XO8FWp9A2aqP/s1600/right.png') no-repeat center center;
background-color: #FFFF00;
}.menu_slick_blogspot ul {
position:absolute;
left:202px;
top:0px;
width:1024px;
list-style:none;
padding:0px;
height:30px;
margin:0;
}.menu_slick_blogspot ul li a{
text-decoration:none;
cursor:pointer;
display:block;
float:left;
margin:0px;
text-indent:10px;
padding:0px 10px 0px 3px;
line-height:40px;
height:40px;
text-indent:10px;
letter-spacing:1px;
color:#FFFFFF;
background-color:#800000;
text-shadow:1px 1px 1px #000;
border:1px solid #333;
border-left:none;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}.menu_slick_blogspot ul li a.hover{
color:#FFFFFF;
box-shadow:0px 0px 3px #000 inset;
background-color: #B90000;
text-shadow: none;}
/*** www.rivai.org CSS widget menu slick blogspot and ***/ 

Pasang code script dibawah ini tepat dibawah code <body>

Code HTML here..

 <!-- www.rivai.org code widget menu slick blogspot start-->
 <div id="ui_element" class="menu_slick_blogspot">
<ul>
<li><a href="http://www.rivai.org/" target="_blank" rel="nofollow" title="menu" class="hover">Menu Navigasi 0</a></li>
<li><a href="http://www.rivai.org/" target="_blank" rel="nofollow" title="menu">Menu Navigasi 1</a></li>
<li><a href="http://www.rivai.org/" target="_blank" rel="nofollow" title="menu">Menu Navigasi 11</a></li>
<li><a href="http://www.rivai.org/" target="_blank" rel="nofollow" title="menu">Menu Navigasi 111</a></li>
<li><a href="http://www.rivai.org/" target="_blank" rel="nofollow" title="menu">Menu Navigasi 1111</a></li>
<li><a href="http://www.rivai.org/" target="_blank" rel="nofollow" title="menu">Menu Navigasi 11111</a></li>
</ul>
<div class="menu_slick_blogspot_main">Menu</div>
<div class="menu_slick_blogspot_main_right"></div>
</div>
<!-- www.rivai.org code widget menu slick blogspot end-->

Pasang code script dibawah ini di atas code </head>

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

Bila anda masih belum memahami tata cara pemasangan cara membuat widget menu slick blogspot ini silahkan kunjungi halaman sumbernya, semoga bermanfaat..
Sumber : http://www.rivai.org/2014/01/widget-menu-slick-blogspot.html

Di poskan oleh : Unknown | Dipublish pada : 5:27 PM | 4 komentar

cara membuat pop up coding style blogspot

Cara membuat pop up coding style blogspot - postingan cara membuat pop up coding style blogspot ini memiliki tampilan menarik, cara membuat pop up coding style blogspot memakai fungsi jquery. Buat para blogger yang menyediakan berbagai tutorial yang bersangkutan dengan code ada baiknya anda memakai sistem ini, agar halaman blog anda tertata rapi. Untuk melihat tampilan dari cara membuat pop up coding style blogspot ini, silahkan klik link demo dibawah dan tes hasilnya, bila anda tertarik untuk memasangnya di halaman blogspot anda silahkan simak penjelasan dibawah ini, langsung saja menuju TKP.

Demo

Code script

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

<script type="text/javascript" src="http://yourjavascript.com/1041438119/popup-1-0-1.js"></script>

Code CSS here..

/*****************************************
Name : cara membuat pop up coding style blogspot
By : Rivai Silaban | Blog Design
Update :Kamis 09 January 2014 
site : www.rivai.org
******************************************/
.up_style { display: none; }
.lightboxcodestyle{display:none;position:fixed;top:0;bottom:0;left:0;right:0;z-index:9999;height:100%;text-align:center;cursor:pointer;}.lightboxcodestyle .lightboxcodestyle-close{
position:absolute;
z-index:9999;
right:0;
top:0;
line-height:25px;
width:25px;
cursor:pointer;
text-decoration:none;
text-align:center;
font:Arial,sans-serif;
color:#FFFFFF;
background-color: #000000;
}.lightboxcodestyle:before{content:'';display:inline-block;height:100%;vertical-align:middle;margin-right:-0.25em;}.lightboxcodestyle .lightboxcodestyle-content{
text-align:left;
display:inline-block;
vertical-align:middle;
position:relative;
padding:2%;
width:50%;
max-height:95%;
overflow:auto;
cursor:auto;
background-color: #333333;
color: #FFFFFF;
}.lightboxcodestyle .lightboxcodestyle-inner{display:block;}.lightboxcodestyle .titles{
font-size: 14px;
font-family: Verdana;
padding-bottom: 20px;
}.lightboxcodestyle .coding{
font-size: 12px;
font-family: Courier;
padding-bottom: 20px;
color: #FFFFFF;
height: 200px;
overflow: auto;
width: 100%;
word-wrap: break-word;
padding-right:20px;
}
.kuning {color: #FFFF00}
.biru {color: #00FFFF}
.hijau {color: #66FF00}
/*** www.rivai.org CSS cara membuat pop up coding style blogspot and ***/ 

Code HTML here..

 <!-- www.rivai.org code cara membuat pop up coding style blogspot start-->
 <div>
 <a href="#" rivai-styleup="#rivai" title='keterangan gambar' >Lihat code - Click here..!!</a>
</div>
<div class="up_style" id="rivai">
<div class="titles">Judul pup up anda... </div>
<div class="coding"><span class="kuning">KODE ANDA DISINI DENGAN, WARNA CODE KUNING </span><br>
<span class="biru">KODE ANDA DISINI DENGAN, WARNA CODE BIRU </span><br>
 ISIKAN DENGAN CODE ANDA, TAPI SEBAIKNYA KONVERSIKAN DULU KODE ANDA AGAR TAMPILAN COE ANDA LEBIH MENARIK DAN ENAK DIPANDANG MATA, BILA ANDA TIDAK MENGKONVERSIKAN CODE ANDA MAKA CODE YANG ANDA PASANG TIAK AKAN BERPUNGSI ALIAS TIDAK MUNCUL<br/>
<p class="hijau">ANDA JUGA DAPAT MEMASANG TEXT DI DALAM CODE INI, SILAHKAN PASANG SENIRI TEXT ANDA. TEXT INI MEMAKAI COE TAG HTML CLASS HIJAU </p> 
</div>
<!-- www.rivai.org code cara membuat pop up coding style blogspot end-->

Code diatas merupakan code CSS dan code tag HTML dari accordion link style hover yang mungkin sudah anda lihat tampilannya pada halaman demonya, Buat teman teman yang masih belajar blogging sama seperti saya silahkan kunjungi halaman tata cara pemasangan accordion link style hover agar lebih detail dan jelas.....

http://www.rivai.org/2014/01/cara-membuat-pop-up-coding-style.html

Di poskan oleh : Unknown | Dipublish pada : 4:31 PM | 0 komentar

cara mengatasi komentar spam

Cara mengatasi komentar spam - tutorial cara mengatasi komentar spam ini sangat ampuh, cara mengatasi komentar spam ini memiliki sistem dimana sebuah link aktif yang disematkan di komentar anda, link aktif tersebut akan diarahkan ke link yang sudah anda atur sebelumnya, sehingga bila suatu link aktif yang dipasang komentator dan ditujukan kepada blog komentator ternyata setelah di klik maka link tersebut bukan tertuju ke blog komentator melainkan tertuju ke suatu link yang telah anda atur. Sistem ini disebut dengan link reload yang memakai pengkodean [ attr ] atau lebih tepatnya, mengalihkan satu link ke link yang lain.

Tehnik mengalihkan link aktif pada sebuah komentar dari komentator sangat ampuh untuk mengendalikan link aktif para spammer, hal ini dapat anda gunakan buat mencegah brutalnya para spammer blog anda untuk tidak mendekatai atau melancarkan sistem spamnya paa blog anda.

Code script here..

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>jQuery(document).ready(function(){jQuery("#comments p a").attr("href","http://www.rivai.org/")});</script>

Code script cara mengatasi komentar spam diatas silahkan anda edit, ganti link code yang berwarna biru tersebut dengan link anda, kemudian sematkan code tersebut diatas kode </head> atau bila anda belum memahami betul tentang cara pemasangan code cara mengatasi komentar spam ini silahkan kunjungi link sumber dibawah ini...

http://www.rivai.org/2014/01/cara-mengatasi-komentar-spam.html

Di poskan oleh : Unknown | Dipublish pada : 12:12 PM | 2 komentar

cara membuat halaman faq di blogspot

Cara membuat halaman faq di blogspot - tata cara membuat halaman faq di blogspot memakai jquery, cara membuat halaman faq di blogspot ini berfungsi untuk para blogger mania yang membutuhkan suatu halaman yang bermanfaat sebagai tempat segala pertanyaan untuk keperluan halaman blognya. F A Q adalah satu suku kata bahasa inggris yang memiliki kepanjangan dari Frequently asked questions, Pada postingan kali ini saya akan membagi code tentang cara membuat halaman faq di blogspot, untuk melihat tampilannya silahkan klik demo dibawah, nah bila anda tertarik untuk memasangnya silahkan simak tutorial dibawah ini, langsung saja menuju TKP.

Demo

Code CSS here..

 /*****************************************
Name : cara membuat halaman faq di blogspot
By : Rivai Silaban | Blog Design
Update :Selasa 07 January 2014 
site : www.rivai.org
******************************************/
 .halamanfaq{
margin:10px auto;
border:1px solid #999;
padding:30px;
background-color: #F0F0F0;
width:100%;
font-family: Verdana;}.halamanfaq h3{
margin:0;
padding:0;
font-size:16px;
color: #000000;
}.tanya{padding-top:20px}
.tanya dt{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe7TpOUuMBpwJBvboy41VbO9L9tolpXplPKGgs3EjL_O7RGhPj-iS3bZSRuDJQcOoVUVkC_FanWnaRMhU1umToJ7o4o3-nj9TzWxMilg3HD4Dp75mLlvcwR8mxpVIkho8yRT3kY_gRYlqS/s1600/pertanyaan.gif') 0 3px no-repeat;
padding:3px 0 15px 30px;
position:relative;
color: #990000;
text-decoration: none;
font-size: 14px;
text-shadow: 1px 1px 1px #ccc;
}.tanya dt:hover{
cursor:pointer;
text-decoration: none;
color: #000099;
}.tanya dd{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhWVe7hSqNUNfDfO7HH3gEQzi9hJhB4CswDBJdat3E40_yJGLf9VkB8HMfSaT81skF405kWp4v5aQ_yAPOqkFGS2U9qAcud5DBWJ9hdPLV1B4VCL0V1AG3GrPhoWidMDVMDbsTkyZAeInc/s1600/jawaban.gif') 0 2px no-repeat;
padding:0 0 5px 30px;
position:relative;
color:#333;
margin-left: 20px;
font-size: 12px;
line-height: 20px;
}.tanya .hover{color:#990000;text-decoration:underline}
/*** www.rivai.org CSS cara membuat halaman faq di blogspot and ***/ 

Code HTML here..

 <!-- www.rivai.org code cara membuat halaman faq di blogspot start-->
 <div class="halamanfaq">
<h3>JUDUL F.A.Q - Frequently asked questions </h3>
<dl class="tanya">
<dt>PERTANYAAN PERTAMA ANDA ?</dt>
<dd>Situs www.rivai.org merupakan situs pribadi dari RIVAI SILABAN yang membahas tentang berbagai informasi Agama, Budaya, Informasi Komputer, Berbagai Tutorial Blogspot, Tips dan Trik SEO, serta menyediakan template blogspot baik itu gratis ataupun premium. Situs www.rivai.orgmerupakan situs informasi yang menyediakan informasi dengan gratis dan memiliki fitur fitur umum yang dapat diakses oleh umum. Situs www.rivai.org menyediakan pembelajaran khusus Blogspot yang dikelompokkan dengan sistem member premium. </dd>
<dt>PERTANYAAN KEDUA ANDA ?</dt>
<dd>Situs www.rivai.org merupakan situs pribadi dari RIVAI SILABAN yang membahas tentang berbagai informasi Agama, Budaya, Informasi Komputer, Berbagai Tutorial Blogspot, Tips dan Trik SEO, serta menyediakan template blogspot baik itu gratis ataupun premium. Situs www.rivai.orgmerupakan situs informasi yang menyediakan informasi dengan gratis dan memiliki fitur fitur umum yang dapat diakses oleh umum. Situs www.rivai.org menyediakan pembelajaran khusus Blogspot yang dikelompokkan dengan sistem member premium. </dd>
<dt>PERTANYAAN KETIGA ANDA ?</dt>
<dd>Situs www.rivai.org merupakan situs pribadi dari RIVAI SILABAN yang membahas tentang berbagai informasi Agama, Budaya, Informasi Komputer, Berbagai Tutorial Blogspot, Tips dan Trik SEO, serta menyediakan template blogspot baik itu gratis ataupun premium. Situs www.rivai.orgmerupakan situs informasi yang menyediakan informasi dengan gratis dan memiliki fitur fitur umum yang dapat diakses oleh umum. Situs www.rivai.org menyediakan pembelajaran khusus Blogspot yang dikelompokkan dengan sistem member premium. </dd>
<dt>PERTANYAAN KEEMPAT ANDA ?</dt>
<dd>Situs www.rivai.org merupakan situs pribadi dari RIVAI SILABAN yang membahas tentang berbagai informasi Agama, Budaya, Informasi Komputer, Berbagai Tutorial Blogspot, Tips dan Trik SEO, serta menyediakan template blogspot baik itu gratis ataupun premium. Situs www.rivai.orgmerupakan situs informasi yang menyediakan informasi dengan gratis dan memiliki fitur fitur umum yang dapat diakses oleh umum. Situs www.rivai.org menyediakan pembelajaran khusus Blogspot yang dikelompokkan dengan sistem member premium. </dd>
</dl> 
</div>
<!-- www.rivai.org code cara membuat halaman faq di blogspot end--> 

Code script jquery here..

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">$(document).ready(function () {
$('.tanya dd').hide();
$('.tanya dt').hover(function(){$(this).addClass('hover')},function(){$(this).removeClass('hover')}).click(function(){
$(this).next().slideToggle('normal');
}); });</script>

Buat teman teman yang belum tau persis tentang cara pemasangan cara membuat halaman faq di blogspot di halaman blogspot anda silahkan kunjungi link laman dibawah ini, tutorial ini dibahas secara detail...

http://www.rivai.org/2014/01/cara-membuat-halaman-faq-di-blogspot.html

Di poskan oleh : Unknown | Dipublish pada : 7:48 PM | 0 komentar

auto tooltip title link

Auto tooltip title link - auto tooltip title link pada blogspot merupakan title link yang ditampilkan dengan suatu design yang digerakkan Jquery sistem. Penggunaan auto tooltip title link ini sangat marak kita lihat pada website, mulai dari situs yang terkecil sampai situs yang terbesar. Sistem auto tooltip title link pada postingan ini akan secara otomatis berfungsi pada setiap title link yang ada pada halaman blog tersebut, jadi anda tidak perlu lagi memodifikasi link anda, hanya saja setiap pemakaian link anda harus memakai fungsi title pada setiap link anda, agar sistem tooltip title link ini berfungsi. Untuk melihat tampilannya silahkan lihat demo link dibawah, dekatkan cursor anda pada setiap link yang ada. Bila anda tertarik memasang auto tooltip title link ini pada halaman blog anda silahkan simak penjelasan dibawah ini, langsung saja menuju TKP.

Demo

Code CSS here..

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

Name : tooltip title link

By : Rivai Silaban | Blog Design

Update :Selasa 24, Desember 2013 

site : www.rivai.org

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

#tooltip-rivai-silaban{

position:fixed; 

max-width:300px; 

padding:6px 8px 8px 8px; 

background:#222; 

z-index:10; 

display:inline-block; 

font-family:Verdana; 

font-size:11px; 

line-height:16px;

color:#fff; 

border-radius:5px;

}

/*** www.rivai.org CSS  and ***/

Code SCRIPT here..

<!--  Rivai Silaban auto tooltip title link 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/213462114520/tooltips.js"></script>

	    <script type="text/javascript"> 

	    $().ready(function() { 

//applies to all elements with title attribute. Change to ".class[title]" to select only elements with specific .class and title

$("[title]").style_my_tooltips({ 

tip_follows_cursor: "on", //on/off

tip_delay_time: 100 //milliseconds

}); 

}); 

</script>

<!--  Rivai Silaban auto tooltip title link end-->

Code diatas merupakan code CSS dan code tag HTML dari cara membuat auto tooltip title link di blogspot yang mungkin sudah anda lihat tampilannya pada halaman demonya, Buat teman teman yang masih belajar blogging sama kayak saya silahkan kunjungi halaman tata cara pemasangan auto tooltip title link untuk blogspot, melalui link dibawah ini...

http://www.rivai.org/2013/12/tooltip-title-link.html

Di poskan oleh : Unknown | Dipublish pada : 8:39 PM | 6 komentar

cara membuat search jquery

Widget search sangat berguna buat blog, begitu juga dengan widget search jquery ini, cara membuat search jquery pada postingan kali ini, mengandalkan sistem script jquery sebagai motoriknya, hal ini menjadikan widget search jquery pada postingan cara membuat search jquery ini memiliki tampilan yang menarik. Untuk melihat tampilan dari tutorial cara membuat search jquery ini, silahkan klik demo dibawah, jangan lupa bila anda tertarik dengan tutorial cara membuat search jquery ini pada halaman blog anda, silahkan simak penjelasan cara membuat search jquery dibawah ini, langsung saja menuju TKP.

Demo

Install Program CSS

Login ke dashboard anda
Masuk ke "TEMPLATE" lalu klik " Edit HTML "
Cari code ]]></b:skin>
Copy Code script CSS cara membuat search jquery 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 : cara membuat search jquery

By : Rivai Silaban | Blog Design

Update : Selasa, 12 Nopember 2013 

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

#bdrssearch fieldset {

width:240px;

position:relative;

display:block;

border:none;

}div.bdrsform {

width:180px;

padding:5px 15px 7px 15px;

border-radius:20px;

border:1px solid #c6d2db;

border-top:1px solid #b4c1cb;

box-shadow:inset 0 1px 2px #666;

float:right;

background-color: #F8F8F8;

}div.bdrsform.focus {

border:1px solid #111;

box-shadow:0 0 6px #999, inset 0 1px 2px rgba(0,0,0,0.08);

border-radius:0px;

}input#s {

width:100%;

border:0;

background:transparent;

height:16px;

color:#666666;

text-shadow:0 1px 1px #fff;

}input#s:focus {

outline:none

}input#searchSubmit {

width:43px;

height:26px;

text-indent:-9999px;

overflow:hidden;

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtW3sWuU6GFwDjtu2Uq-yEvaZISDBohbSFj1f-2AoHeR27_2MZyMnvk63IThvrpu9vKdf7jberyPm8F9El0hju9OfYGe_BVnC5gkYFIGSweV-L68hXoTDC9XsTfkinakc1j29TJbXvv8M/s1600/searchbdrs.png') no-repeat ;

border:0;

position:absolute;

top:7px; right:20px;

z-index:5;

display:none;

cursor:pointer;

margin-top:3px;

}/*** Blog Design CSS cara membuat search jquery and ***/

Install Script

Setelah anda selesai menyematkan CSS cara membuat search jquery 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.3/jquery.min.js"></script>

<script type="text/javascript" src="http://yourjavascript.com/321111910106/script.js"></script>

Install Program Tag HTML

Setelah anda selesai memasang code script cara membuat search jquery saatnya anda dipaksa untuk memasang kode tag htmlnya pada halaman blog anda agar muncul pada saat dibrowsing. Untuk pemasangan code tag htmlnya silahkan anda pasang sesuai dengan kebutuhan halaman blog anda.

<!-- Rivai Silaban | BLOG DESIGN code cara membuat search jquery start -->

   <div id="main">

<form action="URL BLOG ANDA /search" method='get' id="bdrssearch">

<fieldset>

<div class="bdrsform">

<input type="text" name="g" id="s" value="find other articles this here !!" />

</div>

<input type="submit" id="searchSubmit" value="" />

</fieldset>

</form>

</div>

<!-- Rivai Silaban | BLOG DESIGN code cara membuat search jquery  End -->

Kesimpulan

Cara membuat search jquery telah didesain untuk memudahkan anda dalam memasangnya pada halaman blog kesayangan anda, Untuk tulisan code warna MERAH, ganti dengan URL blog anda. Silahkan edit code cara membuat search jquery sesuai dengan kebutuhan anda.

Bila teman teman mengalami masalah dalam pemasangan tutorial cara membuat search jquery ini atau ada kesalahan penulisan kode silahkan hubungi saya atau share bersama saya lewat form komentar dibawah ini. Pergunakan semua fasilitas di blog ini untuk mempermudah anda.

cara membuat search jquery
Selasa, 12 Nopember 2013
By : Rivai Silaban | Blog Design

Di poskan oleh : Unknown | Dipublish pada : 12:40 PM | 0 komentar

widget jquery menu horizontal

Widget jquery menu horizontal berguna buat blog yang memiliki link yang banyak, widget jquery menu horizontal ini juga cocok untuk menu blog yang berbasis blog Direktory. Pada tutorial kali ini saya terinspirasi dari seorang sahabat, yah boleh dibilang abangan saya sendiri yang membutuhkan suatu kode menu seperti menu widget jquery menu horizontal pada postingan kali ini. Tutorial widget jquery menu horizontal kali ini memiliki tampilan yang menarik dan code script yang ringan sehingga widget jquery menu horizontal ini menjadi salah satu pilihan para blogger mania. Oke langsung saja pada pokok pembicaraan, bila anda menginginkan pemasangan widget jquery menu horizontal ini pada halaman blog anda, silahkan simak penjelasan dibawah ini, jangan lupa dilihat demo widget jquery menu horizontal ini dan test cursor anda, agar lebih meyakinkan anda. Langsung saja menuju TKP.

Demo

Install Program CSS

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

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

Name : widget jquery menu horizontal

By : Rivai Silaban | Blog Design

Update : Jumat 06 September 2013 

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

ul#BDRSnav {

margin: 0; padding: 0;

float: left;

width: 970px;/* LEBAR MENU */

list-style: none;

position: relative;

font-size: 1.2em;

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5NRDuwDjaxx_tnQocAdJkXzfbFjCka0bZcMQXcDalyUVeqSL4hWdL2r6DJLAjjCprG9uQfzsKk8qKmF8bxE596gxIfsJah4wjJoplRS24hMTQCLX0p0uiBhgReefOGg_Suay5qXLqRDs/s1600/bdrsimg.gif') repeat-x;

}

ul#BDRSnav li {

float: left;

margin: 0; padding: 0;

border-right: 1px solid #555;

}

ul#BDRSnav li a {

padding: 10px 15px;

display: block;

color: #f0f0f0;

text-decoration: none;

text-shadow: 1px -2px 1px #000;

}

ul#BDRSnav li:hover {

background-color: #444;

}

ul#BDRSnav li span {

float: left;

padding: 15px 0;

position: absolute;

left: 0;

top:35px;

display: none;

width: 970px;/* LEBAR SPAN SAMAKAN DENGAN LEBAR MENU */

color: #fff;

background-color: #444444;

}

ul#BDRSnav li:hover span { display: block; }

ul#BDRSnav li span a {

display: inline-table;

padding:2px 6px 5px 13px;

background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBIvxVMSAyyuIvNxe8y_SAZntQKfUE3iYf0T1zgU6n4oLo3_HUuuIWSKavR7naPS2-S0xETIl2D0DvDSJq1CgSK0soJg1oe-LBd3H9U9lyWguw8WDiulGkqJ2_yT8GJbUzucMNdcrXHyQ/s1600/arrow-grey.gif") 0px 50% no-repeat;

color: #ADADAD;

margin:10px;

text-align: left;

text-shadow: 1px -2px 1px #000;

font-weight: bold;

}

ul#BDRSnav li span a:hover {

text-decoration: none;

text-shadow: 1px 2px 1px #000;

background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBIvxVMSAyyuIvNxe8y_SAZntQKfUE3iYf0T1zgU6n4oLo3_HUuuIWSKavR7naPS2-S0xETIl2D0DvDSJq1CgSK0soJg1oe-LBd3H9U9lyWguw8WDiulGkqJ2_yT8GJbUzucMNdcrXHyQ/s1600/arrow-grey.gif") 2px 50% no-repeat;

text-shadow: 1px 2px 1px #000;

color: #DBDBDB;

}

.bdrscss-tanggal {

font-family:verdana;

color: #CCCCCC;

text-shadow: 2px 2px 1px #000;

font-size: 14px;

text-align: right;

font-weight: bold;

padding:7px 10px;

font-style: italic;

}/*** Blog Design CSS widget jquery menu horizontal and ***/

Install Script

Setelah anda selesai menyematkan CSS widget jquery menu horizontal, 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.3/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$("ul#BDRSnav li").hover(function() {
$(this).css({ 'background' : '#444444 '});
$(this).find("span").show();
} , function() {
$(this).css({ 'background' : 'none'});
$(this).find("span").hide();
});});</script>

Install Program Tag HTML

Setelah anda selesai memasang code script widget jquery menu horizontal saatnya anda dipaksa untuk memasang kode tag htmlnya pada halaman blog anda agar muncul pada saat dibrowsing.
Copy code dibawah dan pastekan dibawah semua code header template anda, atau diatas postingan blog anda.

<!-- Rivai Silaban | BLOG DESIGN script menu start -->

   <ul id="BDRSnav">

 <li><a href="URL BLOG ANDA " target="_self" rel="nofollow" title="home">Home</a></li>

<li>

<a href="#" rel="nofollow" title="XXX">Contact</a>

<span>

<a href="LINK" target="_self" rel="nofollow" title="XXX">Google Plus</a> 

<a href="LINK" target="_self" rel="nofollow" title="XXX">Twitter</a> 

<a href="LINK" target="_self" rel="nofollow" title="XXX">Facebook</a>

<a href="LINK" target="_self" rel="nofollow" title="XXX">RSS Feed</a>

<a href="LINK" target="_self" rel="nofollow" title="XXX">@gmail.com</a>

<a href="LINK" target="_self" rel="nofollow" title="XXX">Call : 0812 3456 7891</a>

</span>

</li>

<li>

<a href="#" rel="nofollow" title="XXX">Kategory</a>

<span>

<a href="LINK" target="_self" rel="nofollow" title="XXX">TUKANG COPAS</a> 

<a href="LINK" target="_self" rel="nofollow" title="XXX">SPAMMER</a>

<a href="LINK" target="_self" rel="nofollow" title="XXX">PEMBAJAK CONTEN</a>

<a href="LINK" target="_self" rel="nofollow" title="XXX">CONTEN TIRUAN</a>

<a href="LINK" target="_self" rel="nofollow" title="XXX">PEMBAJAK ARTIKEL</a> 

<a href="LINK" target="_self" rel="nofollow" title="XXX">Komputer</a>

<a href="LINK" target="_self" rel="nofollow" title="XXX">Internet</a>

<a href="LINK" target="_self" rel="nofollow" title="XXX">kesehatan</a> 

<a href="LINK" target="_self" rel="nofollow" title="XXX">Pendidikan</a>

<a href="LINK" target="_self" rel="nofollow" title="XXX">Sains</a> 

<a href="LINK" target="_self" rel="nofollow" title="XXX">Robotic</a>

<a href="LINK" target="_self" rel="nofollow" title="XXX">Glamor</a> 

<a href="LINK" target="_self" rel="nofollow" title="XXX">Style Trend</a> 

<a href="LINK" target="_self" rel="nofollow" title="XXX">The Company</a> 

<a href="LINK" target="_self" rel="nofollow" title="XXX">Horor</a>

<a href="LINK" target="_self" rel="nofollow" title="XXX">Bio Kimia</a> 

<a href="LINK" target="_self" rel="nofollow" title="XXX">Calculation</a> 

<a href="LINK" target="_self" rel="nofollow" title="XXX">User Map</a>

<a href="LINK" target="_self" rel="nofollow" title="XXX">Adsense</a>

<a href="LINK" target="_self" rel="nofollow" title="XXX">eCPM</a> 

<a href="LINK" target="_self" rel="nofollow" title="XXX">CPC Clicker</a>

<a href="LINK" target="_self" rel="nofollow" title="XXX">Design Grafis</a>

<a href="LINK" target="_self" rel="nofollow" title="XXX">Developer</a>

<a href="LINK" target="_self" rel="nofollow" title="XXX">Game</a> 

<a href="LINK" target="_self" rel="nofollow" title="XXX">Blogger</a>

<a href="LINK" target="_self" rel="nofollow" title="XXX">Comunity</a> 

<a href="LINK" target="_self" rel="nofollow" title="XXX">Article</a>

<a href="LINK" target="_self" rel="nofollow" title="XXX">Wanita</a> 

<a href="LINK" target="_self" rel="nofollow" title="XXX">Laki Laki</a> 

<a href="LINK" target="_self" rel="nofollow" title="XXX">Obat Kuat</a> 

<a href="LINK" target="_self" rel="nofollow" title="XXX">SPAMMER</a>

<a href="LINK" target="_self" rel="nofollow" title="XXX">Pembajak</a> 

<a href="LINK" target="_self" rel="nofollow" title="XXX">sEX</a>

<a href="LINK" target="_self" rel="nofollow" title="XXX">tOY'S</a>

<a href="LINK" target="_self" rel="nofollow" title="XXX">iNDONESIA</a> 

<a href="LINK" target="_self" rel="nofollow" title="XXX">Virus</a> 

</span>

</li>

<li>

<a href="#" rel="nofollow" title="XXX">Service</a>

<span>

<a href="LINK" target="_self" rel="nofollow" title="XXX">Sitemap</a> 

<a href="LINK" target="_self" rel="nofollow" title="XXX">Desclaimer</a> 

<a href="LINK" target="_self" rel="nofollow" title="XXX">Privacy Policy</a> 

<a href="LINK" target="_self" rel="nofollow" title="XXX">SEO </a> 

<a href="LINK" target="_self" rel="nofollow" title="XXX">Webdevloper</a>

</span>

</li>

<li><a href="#" rel="nofollow" title="XXX">Site</a>

<span>

<a href="LINK" target="_self" rel="nofollow" title="XXX">Google.org</a> 

<a href="LINK" target="_self" rel="nofollow" title="XXX">Blogspot.com</a> 

<a href="LINK" target="_self" rel="nofollow" title="XXX">wordpress.org</a> 

<a href="LINK" target="_self" rel="nofollow" title="XXX">Joomla.org</a> 

<a href="LINK" target="_self" rel="nofollow" title="XXX">facebook.com</a> 

<a href="LINK" target="_self" rel="nofollow" title="XXX">twitter.com</a>

</span>

</li>

<div class="bdrscss-tanggal">

<SCRIPT language="JavaScript" type="text/javascript">

//Ganti nama hari dan bulan, sesuai dengan bahasa anda.

var dayNames = new Array("Minggu","Senin","Selasa","Rabu","Kamis","Jum'at","Sabtu");

var monthNames = new Array("Januari","Februari","Maret","April","Mei","Juni","Juli",

"Agustus","September","Oktober","Nopember","Desember");var dt = new Date();

var y = dt.getYear();

if (y < 1000) y +=1900;// format tahun

document.write(dayNames[dt.getDay()] + ", " + dt.getDate() + " " + monthNames[dt.getMonth()] + " " + y);

</SCRIPT>

</div>

</ul>

<!-- Rivai Silaban | BLOG DESIGN menu  End -->

Keterangan Code

Tulisan kode warna MERAH ganti dengan link anda, sesuai dengan kebutuhan anda.
Tulisan warna BIRU ganti dengan nama dan title menu anda.

Cth : Bila menu anda [ Tutorial ] maka title samakan dengan menu anda menjadi [ title="Tutorial" ]
Ganti semua tulisan berwarna BIRU & MERAH sesuai dengan kebutuhan anda.
Saya berharap anda sudah memahami CSS, silahkan edit CSSnya sesuai dengan kebutuhan blog anda.

Kesimpulan

Widget jquery menu horizontall ini sangat cocok buat para bloger yang memiliki jumlah link atau kategory yang begitu banyak sehingga semua link dan kategori dapat dilihat oleh para pengunjung dengan cepat. widget jquery menu horizontal menganut sistem penulisan tag link yang SEO Frienly.

Bila teman teman mengalami masalah dalam pemasangan wiget jquery menu horizontal ini atau ada kesalahan penulisan kode silahkan hubungi saya atau share bersama saya lewat form komentar dibawah ini. Pergunakan semua fasilitas pada halaman blog ini untuk mempermudah anda.

Widget jquery menu horizontal
Minggu, 10 November 2013
By : Rivai Silaban | Blog Design

Di poskan oleh : Unknown | Dipublish pada : 2:32 PM | 2 komentar

widget tabber accordion

Widget tabber accordion for blogspot, cara membuat widget tabber accordion ini sangat beragam. Menggunakan widget tabber accordion pada halaman blog khususnya blogspot sangat bagus disamping tampilan dari widget tabber accordion ini yang begitu menarik, dapat juga mempersimpel tata letak berbagai widget bila kita memasangnya paa widget tabber accordion tersebut. Oke untuk melihat widget tabber accordion pada tutorial kali ini, silahkan klik demo dibawah ini, bila anda tertarik untuk memasangnya paa blog anda silahkan simak tutorial dibawah ini , langsung saja menuju TKP widget tabber accordion.

Demo

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

By : Rivai Silaban | Blog Design

Update : Jumat, 25 Oktober 2013

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

   #bdrsaccordion {

background:#333 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqc5lHGY23Cb0WN3FH1Q6_OmVCB1lba0E8Ham-W1CqfGjeFAri46henWn7onHMAdD7DZSdQ2Uk6Wj1xlq2hG9nZqYcTYmqMnKBt-Tbp6SxATq64GwJ7zITXnND-dQYx0tKM1lgh2LFvtY/s1600/bgtab.png') 0 0;

width: 300px;

border:1px solid #333; 

-background:#666;

}

#bdrsaccordion h2 {

background:#ccc url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkTCf7KEalitVa07HxblLUjAPeK1xCqUvRzhovOezF0Gk19UCY7jeFuX0bXqd19375ycoiPxRaTh4F7V3GLHyTc5hGFGcLHvFGb0OROQkUdoiRKXWxmNv5h1fYqb49eawGrztaL0JQbfw/s1600/h2.png');

margin:0;

padding:5px 15px;

font-size:16px;

font-weight:bold;

border:1px solid #fff;

border-bottom:1px solid #ddd;

cursor:pointer;

font-family: "Courier New", Courier, monospace;

color: #000000;

font-style: normal;

text-shadow: 0 -1px 1px #ccc;

}

#bdrsaccordion h2.current {

cursor:default;

background-color:#fff;

}

#bdrsaccordion .conten {

border:1px solid #fff;

border-width:0 2px;

display:none;

height:150px;

padding:15px;

color:#000000;

font-size:11px;

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

line-height: normal;

}

#bdrsaccordion .conten h3 {

font-weight:bold;

margin:0 0 -5px 0;

font-size:16px;

color:#990000;

font-family: Georgia;

font-style: italic;

text-shadow: 0 -2px 2px #999;

}

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>

Setelah anda selesai menyematkan script yang pertama, saatnya menyematkan script yang kedua pada template anda.
Pada Edit HTML template anda silahkan cari kode </body>
Setelah ketemu copy script dibawah ini dan pastekan diatas kode </body>

Install Program Tag HTML

Untuk memanggil widget Random Post tersebut agar tampil pada halaman blog kesayangan anda silahkan simak penjelasan dibawah ini ;

Anda masih berada dihalaman dasbor lalu anda menuju "TATA LETAK "
Silahkan klik "Add Gadget "( Tambahkan gadget )
Pilih " HTML / JavaScript "
Copy Code HTML dibawah ini, paste pada gadget anda.

<div id="bdrsaccordion">

  <!-- Rivai Silaban | BLOG DESIGN TAB 1-->

  <h2 class="current">Tab Pertama</h2>

<div class="conten" style="display:block">

<h3>Judul kontent h3</h3>

<p>

<strong>Text atau tulisan dengan kode &lt;strong&gt;</strong>

</p>

<p style="clear:both">

  Isi dengan tulisan atau aplikasi yang anda perlukan pada kolom ini, bila anda mengalami kesulitan dalam memasang widget ini silahkan hubungi admin atau share bersama kami melalui form komentar dibawah..

</p>  </div>
<!-- Rivai Silaban | BLOG DESIGN TAB 2-->

  <h2>Tab Kedua</h2>

  <div class="conten">

  <h3>Judul kontent h3</h3>

  <p>

  Isi dengan tulisan atau aplikasi yang anda perlukan pada kolom ini,

  </p>

  <p>

  <strong>Text atau tulisan dengan kode &lt;strong&gt;</strong>

  </p>

  <p>

  bila anda mengalami kesulitan dalam memasang widget ini silahkan hubungi admin atau share bersama kami melalui form komentar dibawah..

  </p>

  </div>

<!-- Rivai Silaban | BLOG DESIGN TAB 3-->

  <h2>Tab Ketiga</h2>

  <div class="conten">

  <h3>Judul kontent h3</h3>

  <p>

  Isi dengan tulisan atau aplikasi yang anda perlukan pada kolom ini, bila anda mengalami kesulitan dalam memasang widget ini silahkan hubungi admin atau share bersama kami melalui form komentar dibawah..

  </p>

  <p>

  <strong>Text atau tulisan dengan kode &lt;strong&gt;</strong>

  </p>

  </div></div>

Keterangan Gambar

Silahkan anda edit kembali kode tersebut untuk menyesuaikan tampilannya terhadap thems blog anda
Isi text pada demo silahkan anda ganti sesuai dengan kebutuhan anda.

Kesimpulan

Tabber engan efect accordion selain mempersimpel tempat widget tampilan yang menarik juga merupakan andalan dari widget ini.

Bila anda mengalami masalah dalam pemasangan widget navigasi gradient style blogspot ini, atau mendapat kode yang error silahkan hubungi saya atau bisa juga share bersama saya di form komentar dibawah. Pergunakan semua fasilitas yang ada di blog ini untuk mempermudah anda.

Tabber Accordion for Blogspot
Jumat, 25 Oktober 2013
Rivai Silaban | Blog Design

Di poskan oleh : Unknown | Dipublish pada : 12:51 PM | 4 komentar

widget slider random post

Widget slider yang satu ini memakai sistem random post, dengan menu tab sebagai navigasi per label. Widget slider random post ini menganut sistem valid html 5 dan CSS 3 serta penulisan tag html yang SEO Friendly. Tampilan dan kecepatan script widget ini menjadikan widget slider random post per label ini layak untuk anda pasang di halaman blog kesayangan anda. Menampilkan judul artikel postingan per kategorinya membuat para pengunjung halaman blog anda semakin betah atau tertarik untuk melirik berbagai artikel yang telah anda posting pada halaman blog anda, hal itu sudah menjadi suatu keuntungan buat blog anda.Oke langsung saja menuju TKP, silahkan anda simak tutorial dibawah ini, Untuk melihat tampilan widget yang satu ini silahkan klik link dibawah ini.

Demo

Referensi Artikel

Jquery widget tab random post
Widget Tabber random post per kategori
Jquery random post
Random Post SEO Frienly
Widget Random Post with Profil Admin

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 : Jquery Slider Random Post

By : Rivai Silaban | Blog Design

Update : Senin, 16 September 2013

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

#bdrsslider h2 {

margin-top: -10px;

margin-bottom: 14px;

padding: 0;

border-bottom: solid #999 1px;

width:93%;/*lebar widget*/

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

color: #0099FF;

text-shadow: 1px 1px 1px #000;

}

#bdrsslider {

width: 580px;/*lebar widget*/

margin: 0 auto;

position: relative;

border:solid #666 1px; 

}

#bdrsslider:hover {

box-shadow:0 0 5px #666;

}

.bdrsscroll {

height: 250px;

width: 580px;/*lebar widget*/

overflow: auto;

overflow-x: hidden;

position: relative;

clear: left;

background-color: #F3F3F3;

}

.bdrsroll div.panel {

padding: 20px;

height: 210px;

width: 580px;/*lebar widget*/

}

ul.bdnav {/*menu tabber*/

list-style: none;

margin: 0;

padding: 10px 0;

background-color: #333333;

border-bottom:solid #00CCFF 4px;

border-top:solid #00CCFF 4px;

}

ul.bdnav li {

display: inline;

margin-right: 10px;

}

ul.bdnav a {

padding: 11px;

color: #CCCCCC;

text-decoration: none;

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

font-size: 14px;

font-style: italic;

font-weight: bold;

}

ul.bdnav a:hover {

color: #CCCCCC;

text-shadow: 0 0 5px #FFFF00;

border-top:solid #FF0000 6px;

}

ul.bdnav a.selected {

background-color: #666666;

color: #FF0000;

text-shadow: 1px 0 2px #111;

border-top:solid #FF0000 6px;

}

ul.bdnav a:focus {

outline: none;

}

.BD_title {/*CSS Random Post*/

list-style-type: none;

width:93%;

padding: 3px;

margin-top:-10px;

}

.BD_title a {

color: #000000;

line-height:18px;

letter-spacing:0.1em;

text-decoration: none;

display:block;

padding:2px 6px 5px 22px;

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIxb4TG2VGaoiXHfdbbKS9UBIPkDz7o-xYrDojIuyZuqCUgAVgP2PNayyteeaPYUDi0iwmMH9cWCnafhEfpo-OExDSu4aDav5Lkpj-DON_qKBjInm1g4wFxvckhchl6QVwbmn32PpKmdM/s1600/ico-rss.jpg) no-repeat 0 2px;

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

font-style: italic;

font-weight: bold;

font-size: 11px;

border-bottom: dotted #ccc 1px;

}

.BD_title a:hover {

color:#990000;

text-transform: none;

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIxb4TG2VGaoiXHfdbbKS9UBIPkDz7o-xYrDojIuyZuqCUgAVgP2PNayyteeaPYUDi0iwmMH9cWCnafhEfpo-OExDSu4aDav5Lkpj-DON_qKBjInm1g4wFxvckhchl6QVwbmn32PpKmdM/s1600/ico-rss.jpg) no-repeat 0 2px;

background-color: #E4E4E4;

display: block;

padding-left:22px;

} /*** 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>
Kode Jquery ini mempunyai lisensi masing masing, anda tidak diperbolehkan untuk mengeditnya.

<script type="text/javascript" src="http://yourjavascript.com/1650568139/jquery-1-2-6.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/1360340911/jquery-scrollto-1-3-3.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/6329101371/jquery-serialscroll-1-2-1.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/1016319351/coda-slider.js"></script>

Install Program Tag HTML

Setelah anda sudah memasang Scriptnya saatnya anda memasang kode htmlnya.
Cari code
<div class='post-footer-line post-footer-line-2'/>
atau Kode
<div class='post-footer-line post-footer-line-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'/>
Bila tidak berhasil juga silahkan cari kode <data:post.body/> kemudian letakkan kode didalam spoiler tepat dibawah kode <data:post.body/>.
Save template anda dan lihat hasilnya, selamat berkreative.

<!-- Rivai Silaban | BLOG DESIGN code start -->

   <div id="bdrsslider"> 

<ul class="bdnav">

<li><a href="#label1">Widget</a></li>

<li><a href="#label2">Menu</a></li>

<li><a href="#label3">Post</a></li>

<li><a href="#label4">Jquery</a></li>

<li><a href="#label5">CSS</a></li>

<li><a href="#label6">Tip's</a></li>

<li><a href="#label7">HTML</a></li>

</ul>

<div class="bdrsscroll">

<div class="bdrsroll">

<div class="panel" id="label1"><h2>Widget</h2><div class="BD_title"><script type="text/javascript">

var randarray = new Array();var l=0;var flag;

var numofpost=7;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>" + "<a href=" + entry.link[k].href + " title=" + entry.link[k].href +">" + entry.title.$t + "</a></div>";

document.write(item);}}

}document.write();}

</script>

<script src="http://rivai-silaban.blogspot.com/feeds/posts/default/-/widget?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></div></div>

<div class="panel" id="label2"><h2>Menu</h2><div class="BD_title"><script src="http://rivai-silaban.blogspot.com/feeds/posts/default/-/menu?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></div></div>
 <div class="panel" id="label3"><h2>Post</h2><div class="BD_title"><script src="http://rivai-silaban.blogspot.com/feeds/posts/default/-/post?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></div></div>

  <div class="panel" id="label4"><h2>jquery</h2><div class="BD_title"><script src="http://rivai-silaban.blogspot.com/feeds/posts/default/-/jquery?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></div></div>

  <div class="panel" id="label5"><h2>seo</h2><div class="BD_title"><script src="http://rivai-silaban.blogspot.com/feeds/posts/default/-/seo?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></div></div>

  <div class="panel" id="label6"><h2>Tip's</h2><div class="BD_title"><script src="http://rivai-silaban.blogspot.com/feeds/posts/default/-/trik pendukung?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></div></div>
 <div class="panel" id="label7"><h2>Html</h2><div class="BD_title"><script src="http://rivai-silaban.blogspot.com/feeds/posts/default/-/trik pendukung?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></div></div>

  </div>

  </div>

  <!-- Rivai Silaban | BLOG DESIGN code start -->

Keterangan Code

Tulisan kode warna MERAH silahkan anda ganti dengan LINK URL BLOG ANDA.
Tulisan warna BIRU ganti dengan label halaman blog anda. penulisan nama label sangat sensitif beda huruf saja tidak akan berpungsi.
Bila anda ingin lebih berkreasi silahkan anda edit CSSnya untuk menyesuaikan tampilan related post ini dengan tems template anda.

Kesimpulan

Buat para bloger mania widget yang satu ini dapat menjadi andalan buat menarik hati para pengunjung blog, widget jquery slider random post per label ini valid HTML 5 dan CSS 3 serta SEO Friendly dan memiliki script yang standart loading.

Buat para teman teman bloger yang mengalami masalah dalam memasang widget tersebut, silahkan hubungi saya atau share bersama saya melalui form komentar dibawah.

Widget slider tab random post per label
Senin, 16 September 2013
By : Admin Blog Design | Rivai Silaban

Di poskan oleh : Unknown | Dipublish pada : 5:40 PM | 4 komentar