AKTIVITAS TEAM SURVEY KIP ( KARTU INDONESIA PINTAR)

KIP ( KARTU INDONESIA PINTAR)

" />

Cara Memasang GuestBook, Chatbox, Shoutbox, Tagboard chat widget!

Bagaimana Membuat widget tersembunyi keren ini>

Masih di Variasi Blogger share Bagaimana Membuat widget tersembunyi keren ini cekidot

Silahkan sobat Copy Paste script  di bawah ini simpan di blog sobat

<style type='text/css'>
.fwidget{background:#000;border-radius:5px;bottom:-5px;box-shadow:0 0 5px #fff;color:#fff;float:left;height:25px;margin-left:95px;opacity:.8;overflow:hidden;padding:auto;position:fixed;text-shadow:0 0 5px #000;width:90px;z-index:9;-o-transition:all 2s ease-in-out;-moz-transition:all 2s ease-in-out;-webkit-transition:all 2s ease-in-out}
.fwidget:hover{background:transparent;border:2px solid #000;box-shadow:0 0 15px #000;color:#000;height:450px;margin-left:20px;opacity:1;width:240px}
.fwidget-body{-o-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-webkit-transition:all 1s ease-in-out}
.fwidget h3{cursor:point;font-size:13px;text-align:center}
</style>

<div class='fwidget'>
<h3>Judul Widget</h3>
<div class='fwidget-body'>
<center>MASUKAN SCRIPT WIDGETNYA MISALNYA BUKU TAMU</ceenter>
</div>
</div>

Untuk penyimpanan kode script di atas dengan cara silahkan log in terlebih dahulu di blog sobat >> klik Rancangan >> klik ADD Gadget >> klik HTML/Javascript , kemudian paste script diatas , simpan dan lihat hasilnya semoga bermanfaat

Catatan :

background:#000 : warna background sebelum dibuka #000 = hitam

background:transparent : warna background sesudah dibuka transparent = transparan

bottom:-5px : posisi widget disembunyikan dibawah rubah bottom menjadi top bila menginginkan posisi diatas

float:left : letak widget disembunyikan disebelah kiri rubah menjadi right apabila ingin kanan jangan lupa rubah margin-left:95px menjadi margin-right:95px

height:25px dan width:90px : adalah tinggi dan lebar sebelum dibuka rubah angkanya

height:450px dan width:240px :adalah tinggi dan lebar sesudah dibuka

Judul Widget : Ganti dengan judul widgetnya / Tulisan tombolnya

MASUKAN SCRIPT WIDGETNYA MISALNYA BUKU TAMU : Ganti dengan script widget yang akan dipasang

<center> dan </ceenter>   : hilangkan apabila widget tidak rata tengah

Untuk contohnya klik DEMO

Selanjutnya>>

Cara Memasang GuestBook, Chatbox, Shoutbox, Tagboard chat widget!

Cara Memasang Chatbox, Shoutbox, Tagboard chat widget! atau GuestBook ada yang sangat simpel, ada yang sangat ruwet dan berbelit-belit. Jenis Tagboard atau chat widget untuk blog khususnya blogspot.com sangat banyak jenis chat widget misalnya :

Shoutbox (http://shoutbox.widget.me)
Shoutmix (www.shoutmix.com)
Cbox (www.cbox.ws)
99 chat (www.99chats.com)
Meebo (www.meebome.com)
Widgetbox (www.widgetbox.com)
Plugo (http://www.plugoo.com)
Mabber (http://www.mabber.com)
Pladeo (http://www.pladeo.com)
User Plane (http://www.userplane.com)
Gabbly (http://www.gabbly.com)
Chatango (http://www.chatango.com)
Zoho Chat (http://chat.zoho.com)
Para Chat (http://www.parachat.com)
JWChat (http://blog.jwchat.org/jwchat)
Mibew Web Messenger (http://mibew.org)
AjaxChat for Wordpress (http://wordpress.org/extend/plugins/ajaxchat)
AjaxChat (https://blueimp.net/ajax)
Ajax IM (http://ajaxim.com)
php Free Chat (http://www.phpfreechat.net)
iJab (http://www.ijab.im)

Tujuan pemasangan Chatbox, Shoutbox, atau Tagboard chat widget! atau GuestBook adalah untuk menambah interaksi antara pemilik blog dengan dan antar pengunjung blog. Semua bisa menuliskan pesan singkat di Chatbox, Shoutbox, atau Tagboard chat widget! atau GuestBook tersebut.

Contohnya ada di samping kanan Blog Tutorial Bertuahdengan title "GuestBook".

Tutorial pemasangan GuestBook, Chatbox, Shoutbox, Tagboard chat widget! dengan menggunakan "ShoutBox"

1. Masuklah ke halaman website shoutbox.widget.me
2. Kopi kode html (pada gambar ditandai warna biru)
   
   
   Ini kode html-nya :
   

   <!-- Start HTML Code --><iframe title="Shoutbox" WIDTH="160" HEIGHT="400" src="http://shoutbox.widget.me/window.html?uid=a7v6a" frameborder="0" scrolling="auto"></iframe><br><a href="http://shoutbox.widget.me">Shoutbox</a> by <a href="http://ngai.cc">Blogger</a><br><!-- End -->

3. Login ke blog
4. Masuk ke Rancangan
5. Add Gadget pada posisi yang diinginkan
6. Terbuka jendela baru. Pilih "HTML/JavaScript Tambah"
7. Pastekan kode html yang telah dikopi darishoutbox.widget.me tadi
8. Simpan
9. Selesai
10. Selamat.... kamu telah memiliki Chatbox, Shoutbox, atau Tagboard chat widget! atau GuestBook dan telah mengetahui Cara Memasang Chatbox, Shoutbox, Tagboard chat widget! atau GuestBook tersebut.

TERIMAKASIH SEMOGA BERMANFAAT

CONTAC PERSON

CONTAC PERSON :

082180546637 (Doni)

082280200373 (Dadang Permadi)

085267609559 (Aal)

082282607084 ( Amrul Muluk )

082186665489 (nasrulloh)

081294889909 ( A. Syarifulloh)

085267559102 (Ariyanto )

Alamat Sekretariat : Jln. Ir. H. Juanda Kecamatan Kotaagung Kabupaten Tanggamus

Di bawah Naungan Dinas Pendidikan Dan Kebudayaan Kabupaten Tanggamus
Provinsi Lampung

Cara Menambahkan Kotak Komentar Pada Blog

Membuat tampilan kotak komentar menjadi menarik, tentunya bisa menambah nilai plus untuk blog Anda. Kabar baik lainnya adalah penerapannya sangat mudah, Anda tertarik berikut ini panduannya :

1. Login keakun Blogger anda
2. Pilih Template  » Edit HTML
3. Dengan menggunakan Ctrl+F anda cari kode ]]></b:skin>
4. Selanjutanya anda copy kode dibawah ini dan anda terapkan sebelum kode ]]></b:skin>

#comments{margin:30px 30px 0;overflow:hidden}
#comments h4{display:block;padding:10px;line-height:10px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#4184aa}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #4184aa;border-right:20px solid transparent;width:0;height:0;line-height:0}
}
h4#comment-post-message {
display:none;
}
.comments .comments-content {
font-size:12px;
text-align:left;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em
}
#comments-block .comment-author {
margin:.5em 0
}
#comments-block .comment-body {
margin:.25em 0 0
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height:1.4em;
letter-spacing:.1em
}
#comments-block .comment-body p {
margin:0 0 .75em
}
.deleted-comment {
font-style:italic;
color:gray
}
.comments {
font:normal 11px/14px "Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif!important
}
.comments .comments-content .comment,.comments .comments-content .comment:first-child,.comments .comments-content .comment:last-child {
padding:0;
margin:0;
position:relative
}
.comments .avatar-image-container {
width:45px;
height:45px;
max-width:45px;
max-height:45px;
padding:2px;
border-radius:2px;
margin-right:5px;
margin-top:8px;
margin-left:8px;
position:relative;
background-color:white;
z-index: 2;
}
.comments .avatar-image-container img {
max-width:100%;
height:100%
}
.comments .inline-thread .avatar-image-container {
width:38px;
height:38px;
position:relative;
margin:0
}
.comments .comment-block {
margin-left:0;
padding:0 8px;
min-height:90px;
border:1px solid #4173af;
border-radius:2px
}
.comments .inline-thread .comment-block {
margin-left:45px;
padding:0;
border:0;
min-height:initial
}
.comments .comments-content .comment:hover .comment-block {
border:1px solid 4173af;
-moz-box-shadow:0 1px 3px rgba(58,58,58,0.06),0 1px 2px rgba(54,54,54,0.21);
-webkit-box-shadow:0 1px 3px rgba(58,58,58,0.06),0 1px 2px rgba(54,54,54,0.21);
box-shadow:0 1px 3px rgba(58,58,58,0.06),0 1px 2px rgba(54,54,54,0.21)
}
.comments .comments-content .comment:hover .inline-thread .comment-block {
border:0;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none
}
.comments .comments-content .comment-replies {
margin-left:20px;
margin-top:5px
}
.comments .comments-content .comment-header,.comments .comments-content .comment-content {
margin:0 0 8px;
padding-left:58px;
text-align:left;
line-height:1.6em;
}
.comments .comments-content .comment-header {
margin-top:8px;
height:14px
}
.comments .comments-content .inline-thread .comment-header,.comments .comments-content .inline-thread .comment-content {
padding-left:8px;
margin-top:0;
text-align:left;
line-height:1.6em;
}
.comment-actions {
position:absolute;
top:64px;
left:10px;
z-index:2
}
.comments .comment .comment-actions a {
background:#0671A1;
border-radius:4px;
position:relative;
display:block;
padding:2px 7px;
color:white;
top:-1px;
font-family:Arial,Sans-serif;
font-weight:bold;
box-shadow:0 1px 1px rgba(0,0,0,0.4);
text-shadow:0 1px 0 rgba(0,0,0,0.3);
-webkit-transition:none;
-moz-transition:none;
-o-transition:none;
-ms-transition:none;
transition:none
}
.comments .comment .comment-actions a:hover {
text-decoration:none;
background-color:#0057ae;
}
.comments .comment .comment-actions a:active {
top:0;
background-color:#0057ae;
}
.comments .comments-content .inline-thread li.comment,.comments .comments-content .inline-thread li.comment:first-child,.comments .comments-content .inline-thread li.comment:last-child {
padding:5px;
border:1px solid #4173af;
margin-bottom:5px;
}
.comments .comments-content .inline-thread {
padding:0
}
.comments .comments-content .comment-thread.inline-thread ol {
padding-top:8px
}
.comments .comments-content .comment-thread.inline-thread ol > div:first-child {
border-left:1px solid #4173af;
padding:10px
}
.comments .comments-content .inline-thread li.comment::before {
content:"";
position:absolute;
width:11px;
height:1px;
background-color:#4173af;
display:block;
left:-12px;
top:12px
}
.comments .comments-content .inline-thread li.comment:last-child {
margin-bottom:0
}
.comments .comments-content .inline-thread li.comment:last-child::after {
content:"";
height:100%;
width:5px;
display:block;
background-color:#FCFCFC;
position:absolute;
top:13px;
left:-13px
}
.comments .thread-toggle.thread-expanded {
position:relative
}
.comments .thread-toggle.thread-expanded::after {
content:"";
display:block;
width:1px;
height:32px;
position:absolute;
background:#4173af;
top:-8px;
left:0
}
.comments .comment .comment-actions .item-control a {
display:none;
background-color:#FCFCFC;
background-position:2px 50%;
background-repeat:no-repeat;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT-h-m5Kpm_x_GEhxdBqTgLqnZm2NeYymcbhZJasSAiFIw1u6YdNE1oc0IH3RxNckPMa4LnWrHjGxN1DHL2k6APlVdAmDjZtlcY1HIrr8iNIP40sbA56vFdVd1AOg8qwE76nbinvSk7tA/s14/Trash.png);
border:1px solid #4173af;
position:absolute;
left:655px;
text-indent:-9999px;
padding:0;
width:19px;
height:20px;
top:-59px;
border-radius:2px
}
.comments .comments-content .comment:hover .comment-actions .item-control a {
display:block
}
.comments .comments-content .comment:hover .inline-thread .comment-actions .item-control a {
display:none
}
.comments .comments-content .inline-thread li.comment:hover .comment-actions .item-control a {
display:block
}
.comments .inline-thread .comment .comment-actions .item-control a {
left:-61px;top:-35px
}
#comments h4#comment-post-message {
border-bottom:0;
background-color:transparent;
font-size:130%
}
.comment-form {
max-width:100%
}
.comments .comments-content .icon.blog-author {
display: block;
width: 0;
height: 0;
border: 6px solid transparent;
border-color:transparent  transparent;
position: absolute;
right: 0;bottom: 4px;
}
.comments .comments-content .inline-thread .icon.blog-author {
bottom:-9px;
right:-5px;
}
.comments .comments-content .user,.comments .comments-content .datetime {
display:inline-block;
float:left
}
.comments .avatar-image-container img[src="http://img1.blogblog.com/img/anon36.png"] {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyzwZJN_GrB0b5RIWTmPuIvLOGnsEqBOtFx8jwMo6hsF8Thl51pxvH852DD2HooTwYGqHt4VjI10KzWH4Vo7C34xWHVaFFkD8zjDJ8qrujibvDbT_97ClLLVivJfAZk3PMgjX_yOJM_ViY/s70/user-anonymous-icon.png);
}