Cara Membuat Menu Emoticon dan Konverter Pada Komentar Blog

Cara Membuat Menu Emoticon dan Konverter Pada Komentar Blog

Menu pada emoticon adalah menu yang berfungsi untuk mempermudah para pengunjung blog anda untuk memilih apa-apa yang ingin ia tulis kode emoticon sesuai keinginannya. Menu ini menggunakan kode javascrift dari jQuery hide dan toggle yang berfungsi untuk menyembunyikan gambar emoticon dan kode emoticon itu sendiri, agar tidak memakan banyak tempat saja menurut saya.

Sedangkan pada menu Konverter saya akan buat dengan open tab saja dan sederhana untuk menampilkan konverternya bila mana di klik. Tampilan yang saya buat kali ini akan saya bedakan dari menu emoticon pada blog saya ini. Bila memang anda penasaran, silahkan saja baca artikel ini lebih lanjut.

Dan dibawah ini adalah tampilan menunya gan !

Hide Menu

Show Menu

Nah bila anda tertarik dengan menu Emoticon dan Konverter, silahkan ikuti cara-caranya dibawah ini ! Buka blog anda dan kemudian masuk ke edite template

1. Masukan kode jQuery dibawah ini pada bagian atas kode </head>.

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js type=text/javascript/>
$(document).ready(function() {
$(.show_emo).click(function(){
$(.comment_emo_list).toggle(slow);
    });
}); 

2. Lalu cari kode <p><data:blogCommentMessage/></p>, dan tambahkan kode dibawah ini pada bagian kode tersebut seperti contoh <p><data:blogCommentMessage/>........kode yang ada dibawah ini....</p>.

<a class=converters href=http://dte.googlecode.com/svn/brain/map/html-escaper.html onclick=window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=400,resizable=0,top=50,left=100&quot;);return false; rel=nofollow target=_blank>Konversi Kode</a>
<span class=show_emo>Emoticon</span>

3. Setelah itu tinggal anda tambahkan kode dibawah ini tepat dibawah kode </p> penutup kode di atas.

<div class=comment_emo_list style=display: none;>
<div class=item><img alt=emoticon class=comment_emo src=https://lh3.googleusercontent.com/-j5h6Fmp4NOk/Uv9nGUfuLBI/AAAAAAAACzw/0toiCmro8jA/s15/smile1.gif/><span>:)</span></div>
<div class=item><img alt=emoticon class=comment_emo src=https://lh5.googleusercontent.com/-bMGAjJIs12k/Uv9nFu4_OMI/AAAAAAAACzg/EH3lr_6Sp9k/s15/sad.gif/><span>:(</span></div>
<div class=item><img alt=emoticon class=comment_emo src=https://lh4.googleusercontent.com/-sBRZBTPVs0E/Uv9nFiuOuiI/AAAAAAAACzY/uXU5iC5ZTN8/s15/sadanimated.gif/><span>=(</span></div>
<div class=item><img alt=emoticon class=comment_emo src=https://lh4.googleusercontent.com/-HF3sKtz1knw/Uv9nF215KeI/AAAAAAAACzs/zrio8pZxPmo/s16/smile.gif/><span>^_^</span></div>
<div class=item><img alt=emoticon class=comment_emo src=https://lh6.googleusercontent.com/-4l758g3onPU/Uv9nEa4dRNI/AAAAAAAACzE/Rshbu9m-zFo/s15/icon_smile.gif/><span>:D</span></div>
<div class=item><img alt=emoticon class=comment_emo src=https://lh4.googleusercontent.com/-8d_KCe9OPQI/Uv9nErH6KxI/AAAAAAAACy8/6sY8Su1IcKU/s15/hihi.gif/><span>=D</span></div>
<div class=item><img alt=emoticon class=comment_emo src=https://lh6.googleusercontent.com/-VGFQKQxWRAM/Uv9nEoKsdYI/AAAAAAAACzM/ZlBiozATr5s/s30/applause.gif/><span>|o|</span></div>
<div class=item><img alt=emoticon class=comment_emo src=https://lh5.googleusercontent.com/-nkYBB1l06eI/Uv9nE3j2O8I/AAAAAAAACzI/MS_0Y59Bvjo/s15/rolleyes.gif/><span>@@,</span></div>
<div class=item><img alt=emoticon class=comment_emo src=https://lh5.googleusercontent.com/-luxK-RtOzMU/Uv9nKj6HYkI/AAAAAAAAC0M/CkG162tfDtA/s15/wink.gif/><span> ;)</span></div>
<div class=item><img alt=emoticon class=comment_emo src=https://lh3.googleusercontent.com/-QobTlS-RB7o/Uv9nG57c0wI/AAAAAAAACz0/q39VqdduLps/s25/thumb.gif/><span>:-bd</span></div>
<div class=item><img alt=emoticon class=comment_emo src=https://lh3.googleusercontent.com/-wHCtArWD3Ko/Uv9nHxW8QOI/AAAAAAAACz8/XaFlsxcl5Kk/s25/thumbsup.gif/><span>:-d</span></div>
<div class=item><img alt=emoticon class=comment_emo src=https://lh4.googleusercontent.com/-b5dwhZMbWeE/Uv9nKpE2scI/AAAAAAAAC0I/13QaU_nKE74/s15/wee.gif/><span>:P</span></div>
</div>

Keterangan Penting !! "Silahkan sesuaikan URL/gambar URL beserta kode emoticonnya sesuai pada emoticon yang sudah anda pasang sebelumnya.

4. Kemudian anda tinggal tambahkan CSS untuk tampilan menu emoticon dan konverternya. (Mungkin sebagian besar anda sudah tahu bagaimana menempatkan kode CSS pada edite template).

.converters {
margin-right: 5px;
padding: 3px 8px;
background: #027BB4;
font-size: 14px;
font-family: Arial;
font-weight: bold;
text-transform: none;
outline: none;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 2px #333;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
transition: background-color 1s 0s ease-out;
cursor: pointer;
}
.comment_emo_list {
display: none;
clear: both;
width: 100%;
background: #3292DD;
}
.comment_emo_list .item {
float: left;
text-align: center;
margin: 2px 5px 0 0;
height: 40px;
width: 46.5px;
color: #FFFFFF;
background: #555555;
}

5. Dan yang terakhir anda tinggal save/simpan template anda.

Bila mana anda belum memasang kode emoticon pada komentar blog anda, silahkan pergi ke link artikel Cara Membuat Emoticon Pada Komentar Blog.

Selesai sobat mengenai artikel Cara Membuat Menu Emoticon dan Konverter Pada Komentar Blog. Bila ada yang kurang anda pahami mengenai cara-cara diatas, silahkan saja berkomentar pada kotak komentar blog dibawah ini.

Go to link download

Read full post »

Trik Cepat Mendeteksi dan Memperbaiki Masalah pada Hardware yang Tak Terdeteksi di Windows

Trik Cepat Mendeteksi dan Memperbaiki Masalah pada Hardware yang Tak Terdeteksi di Windows

Ketika Anda mencoba untuk meng-install hardware (perangkat keras) baru di Windows, seringkali Anda mendapatkan Windows tidak mendeteksi hardware baru tersebut atau instalasi driver yang gagal karena masalah yang tak diketahui.

Belum lama ini Microsoft meluncurkan sebuah tool bernama Fix it untuk mengatasi masalah seperti itu. Tool ini akan otomatis mendiagnosis dan memperbaiki masalah dengan perangkat keras Anda ketika device manager tidak mendeteksi hardware Anda, atau jika perangkat Anda dinonaktifkan atau tidak berjalan semestinya.

Yang dilakukan oleh Fix it antara lain:

1. Menentukan saat Anda memasang hardware dan ternyata tidak terlacak
2. Menentukan apakah peralatan suara anda terpasang
3. Menentukan apakah update driver belum terpasang secara otomatis di Windows Update
4. Anda menerima satu dari beberapa kesalahan berikut:

• Perangkat keras Anda sedang dinonaktifkan atau dimatikan pada Windows
• Perangkat keras Anda memiliki masalah pada driver dan perlu di-install kembali
• Windows mendeteksi maslaah dengan perangkat keras Anda, dan itutidak bekerja semestinya
• Tidak ada driver yang terpasang untuk perangkat keras Anda.

Silakan unduh Fix it pada link berikut.

Setelah mengunduhnya, klik 2 kali pada file yang baru diunduh. Pastikan sebelumnya Anda masih terhubung dengan koneksi internet. Klik Accept, lalu akan ada tampilan seperti ini.

Fix it akan mengunduh file engine yang dibutuhkan, mendeteksi masalah pada hardware Anda, lalu mulai menawarkan solusi perbaikannya.

Go to link download

Read full post »

Cara Membuat Password Pada File Excel 2007

Cara Membuat Password Pada File Excel 2007

Terkadang anda mempunyai file dokumen excel 2007 yang bersifat rahasia tentu anda perlu mengamankan file tersebut, dan tentunya anda perlu membuat password terhadap file tersebut. Dengan memproteksi file excel tersebut maka file tersebut bisa dicegah dibuka oleh orang yang tidak berkepentingan terhadap file tersebut, karena saat akan membuka file tersebut maka akan muncul kotak konfirmasi untuk memasukkan password file, sehingga jika password-nya keliru atau salah maka file dokumen excel tersebut tidak akan bisa dibuka.

Untuk membuat proteksi (password) file excel 2007 silahkan ikuti langkah langkah sebagai berikut :

1.    1. Buatlah sebuah document yang anda inginkan.

2.    2. Kemudian arahkan cursor Pada menu dan pilih Save

3.    3. Pada kotak dialog save

     Di bagian tools, pilih General Options...

4.    4. Masukkan password untuk memproteksi file Klik OK

5.    5. Masukkan ulang password yang anda ketik pada langkah 4

6.    6. Masukkan password untuk modifikasi file dokumen excel 2007 anda

Semoga bermanfaat...

Source : googling.,.

Go to link download

Read full post »

Mengganti Tulisan Posting Lama Posting Baru Dan Beranda Dengan Gambar Pada Blogger

Mengganti Tulisan Posting Lama Posting Baru Dan Beranda Dengan Gambar Pada Blogger

Ternyata mengganti Tulisan Posting Lama, Posting Baru, Dan Beranda dengan gambar kita sendiri mudah dan sangat mudah hanya tinggal ikuti langkah-langkah dibawah ini :

Upload Foto sobat di situs upload yang free, ex: photobucket.com

Untuk Mengganti Tulisan Posting Lama :

Cari kode <data:olderPageTitle/> ganti dengan 

<img src=URL gambar anda/>

Contoh= <img src=http://i1076.photobucket.com/albums/w455/fajri87/ButtonPageNext.png/>

Untuk Mengganti Tulisan Posting Baru :

Cari kode <data:newerPageTitle/> ganti dengan 

<img src=URL gambar anda/>

Contoh :

<img src=http://i1076.photobucket.com/albums/w455/fajri87/ButtonPageBack.png/>

Untuk Mengganti Tulisan Beranda :

Cari kode <data:homeMsg/> ganti dengan

<img src=URL gambar anda/>

Contoh :

<img src=http://i1076.photobucket.com/albums/w455/fajri87/icon_home-1.png/>

Sekian...

Semoga Bermanfaat..........

Go to link download

Read full post »

Cara Buat Sidebar Blog Keren Seperti Pada Blog Artikel Karya Ku

Cara Buat Sidebar Blog Keren Seperti Pada Blog Artikel Karya Ku

Sidebar pada blog merupakan suatu yang sangat penting sekali untuk bisa menempatkan segala menu dan widget yang penting buat blog tersebut, agar pengunjung blog bisa nyaman. Sebenarnya saya kurang begitu baik dalam mendefinisikan sesuatu tetapi mungkin pengertian saya itu ada benarnya bukan sobat?.

Nah kali ini saya akan membahas mengenai Cara Buat Sidebar Pada Blog saya ini, yang bisa disembunyikan agar bisa menghemat tempat pada blog. Fitur ini saya gunakan dengan jquery dan javascrift, yang pasti seperti yang pernah pada website kang ismet bahas dengan menggunakan kode javascrift toggle.

Bila anda memang ingin sekali membuatnya agar anda bisa menghemat tempat pada widget blog anda, silahkan saja ikuti cara-caranya dibawah ini. Untuk tampilannya silahkan saja lihat pada sidebar blog saya di posisi kanan. Cara-caranya yaitu adalah sebagai berikut :

• Masuk kebagian edite tempelate blog anda, untuk berjaga-jaga anda diharuskan untuk memback up terlebih dahulu tempelatenya.
• Ubah tag title h2 pada sidebar blog anda menjadi h3, seperti contoh pada kode yang diwarnai warna merah dibawah ini.

<div id=sidebar-wrapper>
<b:section class=sidebar1 id=sidebar1 preferred=yes>
  <b:widget id=PopularPosts1 locked=false title=Popular News type=PopularPosts>
    <b:includable id=main>
  <b:if cond=data:title><h2><data:title/></h2></b:if>
  <div class=widget-content popular-posts>
    <ul>
      <b:loop values=data:posts var=post>
bla...bla ...bla... dan seterusnya...

Menjadi seperti kode dibawah ini : 

<aside id=sidebar1-wrapper>
<b:section class=sidebar1 id=sidebar1 preferred=yes>
  <b:widget id=PopularPosts1 locked=false title=Popular News type=PopularPosts>
    <b:includable id=main>
  <b:if cond=data:title><h3><data:title/></h3></b:if>
  <div class=widget-content popular-posts>
    <ul>
      <b:loop values=data:posts var=post>
bla...bla ...bla... dan seterusnya...

• Dan masukan saja kode javascrift dibawah ini dibagian atas kode </head>.

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js type=text/javascript/>
<script type=text/javascript>
//<![CDATA[
$(document).ready(function() {
    $(#sidebar .widget-content).hide();
    $(#sidebar h3:first).addClass(active).next().slideDown(slow);
    $(#sidebar h3).css(cursor, pointer).click(function() {
        if($(this).next().is(:hidden)) {
            $(#sidebar h3).removeClass(active).next().slideUp(slow);
            $(this).toggleClass(active).next().slideDown(slow);
        }
    });
});
//]]>
</script>

Keterangan !!!. Bila pada tempelate anda sudah ada kode jquery versi 1.7.2, yaitu <script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js type=text/javascript/>, tinggal abaikan saja kode yang di atas (jangan iktu di copy paste), dan taruh kode itu dibawah kode jquery yang sudah ada pada tempelate anda.

• Dan yang terakhir kita tinggal menambahkan CCS untuk widgetnya. Silahkan tambahkan saja kode CCS dibawah ini untuk tampilan seperti artikel karya ku.

#sidebar-wrapper {
border : #171717 solid 2px;
padding : 2px;
position : relative;
width : 300px;
float : right;
overflow-wrap : break-word;
margin : 5px;
overflow : hidden;
background : #E6E6E6;
}
.sidebar {
margin: 0;
padding: 0;
border: #5E5E5E solid 1px;
}
.sidebar h3 {
display : block;
background : #333;
font-size : 14px;
font-family : Oswald, arial, verdana, sans-serif;
color : #ccc;
text-align : left;
word-spacing : normal;
text-transform : uppercase;
font-weight : normal;
padding : 5px;
margin : 0;
}
.sidebar h3.active {
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYVxrMWiPmLxYK4ZJvyIL_f7rWmS8o_D41qv8E9B6c1-slVErdFx8y9VJebOhJX0Tx_LGr4LHgHGmZ2a_MAMoGJGP5ZdE4qc-K5UkDrk6ke-CyxMn-bmkfiVa-8l22bUhw5LOCbWzqZys5/s16/arrow_select.gif) right center no-repeat #353535;
}
.sidebar h3 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwPMaDVZoSvR8BaffX7plPl3cZIttcdqSy9ISUoB_xbPqkHhLVgX9OLnqbyTqydRDZPFqd8r5spObaUdm_hDfeEIkvQmvtVyzAvcUQT_mGJHvY1JxHMkETQJEceKTjiVW-lTSaWLQVuYxj/s16/arrow_right.gif) right center no-repeat #001747;
border-radius: 2px;
box-shadow: 0 1px 0 transparent, 0 2px 0 #007A7A inset;
color: #FFF;
font: 12px Arial, Time New Roman, sans-serif;
font-weight: bold;
padding: 5px 0 5px 10px;
text-transform: uppercase;
margin: 1px;
}

• Bila sudah, silahkan saja save dan lihat hasilnya. Untuk tampilan warna dan lain-lain, silahkan saja atur sendiri dengan mengeditenya sendiri di browser, itu cara satu-satunya untuk menyesuaikan tampilan yang menurut anda suka/cocok menurut anda.

Sudah usai cara-caranya sobat mengenai artikel Cara Membuat Sidebar Pada Blog Keren Tersebunyi, hhe. Maaf gan, saya juga lupa lagi itu namanya sidebar apaan, tapi yang penting anda sekarang sudah tahu dan bisa membuatnya.

Go to link download

Read full post »