wong3ndeso: Trik blogger

Tampilkan postingan dengan label Trik blogger. Tampilkan semua postingan

Mengganti tulisan posling lama dengan gambar ikon

Assalamualaikum wr. wb

Mengganti tulisan posting lama dengan ikon, itulah yang akan saya bahas sekarang.
mungkin para blogger bosan dengan tulisan next page atau posting lama pada blog sobat, agar tulisan posting lama berubah menjadi gambar tanda panah caranya sangat simple kok.

Login ke blogger
Pilih Rancangan >> Edit HTML Jangan lupa centang tulisan Expand widget template yaaaa yang ada di kanan atas.
Sobat cari tulisan <data:newerpagetitle> lalu ganti dengan <img src="terserah" alt="Next" />

Untuk mempermudah pencarian tekan CTRL+F lalu ketikan tulisan/kodenya

Sobat cari tulisan <data:olderpagetitle> lalu ganti dengan <img src="terserah" alt="Next" />
Sobat cari lagi tulisan <data:homemsg> lalu ganti dengan img src="terserah" alt="Next" />

Keterangan :
Sobat ganti tulisan terserah dengan url gambar/ikon yang ingin sobat jadikan next page

Selamat mencoba dan semoga artikel saya bermanfaat yaaa

Terimakasih

Menyembunyikan Judul blog

Assalamualaikum wr. wb

Posting kali ini saya akan memberi arahan kepada sobat blogger yang ingin judul blognya tersembunyi, karena kalo sobat ingin memasang header di blog kalo tidak di sembunyikan pasti akan keliatan. okeh langsung saja ke TKP caranya :

Login ke blog masing-masing
Pilih Rancangan >> Edit HTML Jangan lupa centang tulisan Expand widget template yang ada di kanan atas.
Sobat cari kode yang mirip dengan kode di bawah ini

#header h1 {
margin:50;
padding:5px 0 0 10px;
font-size: 100%;
font-weight:bold;
line-height: 1.2em;
letter-spacing:.0em;
font-style:italic;
color:#FFFFFF;
}

Lalu sobat tambahkan kode visibility:hidden; sehingga formatnya seperti contoh dibawah ini

#header h1 {
margin:50;
padding:5px 0 0 10px;
font-size: 100%;
font-weight:bold;
line-height: 1.2em;
letter-spacing:.0em;
font-style:italic;
color:#FFFFFF;
visibility:hidden;
}

Sebelum template disimpan, sobat pratinjau terlebih dahulu untuk melihat hasilnya berhasil dan tidaknya. kalo udah berhasil baru sobat simpan templatenya.

Selamat mencoba dan semoga artikel saya bermanfaat yaaa

Terimakasih

membuat scroll pada comentar blog

Assalamualaikum wr. wb

Membuat scroll pada kotak komentar blog, itulah yang akan saya bahas sekarang.
Apa kegunaan memasang scroll pada kotak komentar ? nah jawabannya adalah supaya blog sobat terlihat lebih rapi dan menarik untuk dipandang, coba sobat bayangkan kalo komentar di blog sobat mencapai 50 orang pasti panjang banget bukan ! nah biar kotak komentarnya tidak terlalu panjang maka sobat blogger menggunakan scroll. sekarang udah taukan ! apa itu scroll.
Nah kalo sobat blogger ingin mencoba memasangkan scroll diblog sobat, sobat bisa ikuti langkah-langkah dibawah ini :

Sobat login dulu ke blogger sobat
Pilih Rancangan >> Edit HTML >> Jangan lupa centang tulisan Expand widget template yang ada di pojok kanan atas yaaaaaaa
Langkah selanjutnya anda cari kode #comments-block { untuk mepermudah pencarian tekan CTRL+F dan ketikan #comments-block {
Kalo udah ketemu sobat copy kode di bawah ini tepat dibawahnya

max-height:300px;border:1px solid #eee;overflow:auto;

Selesai, lalu sobat simpan template

Selamat mencoba dan semoga artikel saya bermanfaat yaaaa

Terimakasih

Membuat widget top comment di sidebar blog

Assalamualaikum wr. wb

Widget comment yah itulah yang akan saya bahas sekarang, yang gunanya untuk mempermudah para blogger untuk mengetahui comment terbaru dari orang lain. gambarnya seperti gambar dibawah ini, kalo sobat ingin memasangnya di blog sobat, sobat ikuti langkah-langkah dibawah ini :

Langkah-langkah pembuatan :

Login ke blog sobat
Pilih rancangan >> Tambahkan gadget (HTML Javascript)
copykan code dibawah ini :


<div style="text-align:justify;line-height:1.2;"><script type="text/javascript">
function cCloud(feed) {
max = 0;
min = 10000;
//finding highest and lowest count
for (i=0;i<feed.count;i++)
{
ccCount = feed.value.items[i].commentcount * 1;
if (ccCount > max){
max = ccCount;
}
if (ccCount < min)
{
min = ccCount;
}}
ccCountD = "";
display = "";
for (j=0;j<feed.count;j++)
{
ccdiff = feed.value.items[j].commentcount - min;
ccFontsize = 80 + (ccdiff * 100) / (max - min) + "%";
ccUrl = "'" + feed.value.items[j].authorurl + "'";

ccCountD = "(" + feed.value.items[j].commentcount + ")";//comment count
ccName = feed.value.items[j].title + ccCountD;
ccLName = "<a style='text-decoration:none;font-size:" + ccFontsize + "' href=" + ccUrl + " target='_blank'>" + ccName + " </a>";//clickable commentator name
display = display + ccLName;
}
document.write(display);}</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://blogsobat.blogspot.com
&Exclusions=Anonymous,
&ShowHowMany=10
&Order=alphabet
&_callback=cCloud&_id=cfa196644e1d6159c9183548c4b5e2f5
&_render=json"
type="text/javascript"></script></div>


Perhatian :

Hapus tulisan yang berwarna merah jika sobat tidak ingin menampilkan jumlah komentar
Angka 10 adalah jumlah komentar yang ingin sobat tampilkan
http://blogsobat.blogspot.com ganti dengan alamat blog sobat
Anonymous Adalah nama-nama yang tidak ingin ditampilkan pada top komentator
alphabet Adalah urutan top komentator berdasarkan huruf atau angka

sumber: http://vikrymadz.blogspot.com/

Selamat mencoba dan semoga bermanfaat

Terimakasih

Membuat footer pada blog

Assalamualaikum wr. wb

Pada posting kali ini saya akan membahas tentang cara pembuatan footer di blog,
sobat ga usah bingung-bingung nyari apa itu footer nah untuk lebih jelasnya lihat contoh gambar digambar footer saya.

Itu dia dan kalo sobat ingin memasangnya sobat harus lewati langkah-langkahnya dan langkah langkahnya ada di bawah ini :

Login keblogger masing-masing
Pilih Rancangan >> Edit HTML dan jangan lupa centang yang bertuliskan Expand widget template.

Lalu sobat cari code ]]></b:skin> untuk mempermudah tekan CTRL F
Kalo udah ketemu copykan code dibawah ini tepat diatasnya ya

/* footer */
#bottom{background:#808080 no-repeat; width:980px; position:outer wraper ; clear:both; margin:0 auto; float:center; padding:25px 0 10px 0; color:#000}
#bottom a:link{color:#FF0000; text-decoration:none}
#bottom a:hover{color:#FF0000; text-decoration:underline}
#bottom a:visited{color:#FF0000; text-decoration:none}
#bottom h2{padding:15px 0 0 10px; margin:0 0 10px 0; font-weight:bold; line-height: ; text-transform:uppercase; border-bottom:0px dotted #000}
h2 {font-family: Arial, Helvetica, sans-serif; font-size:13px; line-height:28px; color:#000; padding-bottom:6px; }
h2 a:link, h2 a:visited{color:#000; font-size:12px;}
#bottom ul{padding:0; margin:0; color:#000}
#bottom ul li{list-style-type:square; border-bottom:0px solid #000; padding-left:5px; margin:3px 0 0 22px}
#left-bottom{width:; float:left; padding-left:22px}
#center-bottom{width:; float:left; padding-left:0px}
#right-bottom{width:; float:left; padding:0 px 0 50px}
#left-bottom2{width:; padding-top:50px; float:left; padding-left:20px}
#center-bottom2{width:980px; font-size:90%; padding-top:50px; float:left; padding-left:30px}
#right-bottom2{width:; padding-top:50px; float:left; padding-left:20px}
#category{width:980px; float:left; padding:0px 0 20px 20px}
#upper-footer{width:550px; margin:0 auto; padding:0px; clear:both;line-height: ; letter-spacing:.0em; font-size:90%; border-top:1px solid #000; padding-top:50px;padding-bottom:0px;}
#footer-wrapper{float:left; margin:0; padding:0; word-wrap:break-word; overflow:hidden}
.credits{margin:0; width:980px; padding:0px 0px 0px; font-size:95%}

Dan kemudian cari lagi <div id='footer'> sobat ganti dengan kode di bawah ini ya

<div id='bottom'>
    <b:section class='bottom' id='category' preferred='yes'/>

    <b:section class='bottom' id='left-bottom' preferred='yes'/>

    <b:section class='bottom' id='center-bottom' preferred='yes'/>

    <b:section class='bottom' id='right-bottom' preferred='yes'/>

    <div id='upper-footer'>
    <div style='float:center; padding-top:0px'>
    <font color='#ffffff'>© 2012 </font><font color='#ffffff'><data:blog.title/></font><font color='#ffffff'> is proudly powered by <a href='http://blogger.com'>blogger.com</a> | Template by <a href='http://wong3ndeso.blogspot.com'>wong3ndeso</a></font>
    </div>
    </div>

    </div>

Selesai sobat simpan templatenya

Perhatian : Sobat ganti kode yang berwarna orange dengan url yang sobat inginkan

Selamat mencoba dan semoga bermanfaat

Terimakasih

Cara pasang meta tag di setiap postingan blog

Assalamualaikum wr. wb

Apa fungsi dari meta tag ? mungkin sebagian sobat blogger masih ada yang belum paham mengenai fungsi dari meta tag, saya sedikit menjelaskan menganai fungsi dari meta tag itu sendiri.
meta tag itu sangat penting demi keberlangsungan hidup blog anda karena meta tag berfungsi untuk mengoptimalkan semua posting anda agar cepat terindex oleh mbah google.

jadi meta tag sangatlah penting untuk blog sobat, nah untuk memasang meta tag di blog anda ada beberapa langkah yang diantara adalah :

Soba login ke blogger sobat jangan punya orang lain yah ,hehe
Pilih Rancangan >> Edit HTML, terus jangan lupa centang tulisan di pojok kanan atas yang bertuliskan Expand widget template

lalu sobat cari <title><data:blog.pageTitle/></title>
untuk mempermudah pencarian sobat bisa tekan CTRL+F lalu ketikan <title><data:blog.pageTitle/></title>

kalo udah ketemu sobat ganti tulisan diatas dengan kode dibawah ini

<b:if cond='data:blog.url == "http://ALAMATBLOGSOBAT.blogspot.com/"'>
<title><data:blog.pageTitle/></title>
<meta name='DESCRIPTION' content='ISI DENGAN DESKRIPSI UNTUK HOMEPAGE BLOG SOBAT'/>
<meta name='KEYWORDS' content='ISI DENGAN KATA KUNCI UNTUK HOMEPAGE'/> </b:if>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Description'/>
<meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Keywords'/>
</b:if>

Terakhir sobat simpan template

Selesai deh, semalamat mencoba dan seboga bermanfaat yaaa

Terimakasih

Membuat spoiler di postingan blog

Assalamualaikum wr. wb

Sebelum ke langkah-langkah pemasangan spoiler di postingan, saya akan sedikit menjelaskan kepada sobat blogger khususnya bagi pemula yang mungkin masih kurang paham.
spoiler merupakan salah satu cara penghematan ruang pada posting blog yang tersembunyi dan terlihat bila di klik, spoiler ini bisa berupa teks,gambar,video, maupun script.

Priview :

Itulah priviewnya, kalo sobat blogger ingin memasangnya di postingan sobat, sobat bisa ikuti langkah demi langkah pemasangan spoiler yang tertulis dibawah ini:

Anda lakukan posting dan pilih edit HTML, untuk lebih jelasnya anda bisa lihat gambar dibawah ini :

Copy dan pastekan kode dibawah ini di bagian yang sobat ingin buat spoiler.

<div>
<div style="margin: 4px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><span style="font-weight: bold;">Klik show untuk membuka </span></i><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

Isi spoiler,bisa berupa gambar,teks atau video.

</div>
</div>
</div>
</div>

Ganti tulisan yang berwana merah dengan tulisan yang sobat inginkan.
Isilah tulisan yang berwarna orange dengan tulisan,gambar, atau video yang ingin anda jadikan spoiler.

Selamat mencoba dan Semoga berhasil

Terimakasih

Cara membuat profil Admin dibawah postingan

Assalamualaikum wr. wb

Profil Admin dibawah postingan itulah yang akan saya share buat sobat blogger sekarang. Pernakah sobat melihat kotak kecil dibawah postingan yang berisikan tulisan tentang keterangan dan pesan penulis beserta judul posting dan tanggal penerbitan yang biasanya ditampilkan dibawah postingan.
kalo sobat penasaran seperti apa sih bentuknya, sobat bisa lihat priviewnya dibawah ini :

Previewnya

Nah itu dia previewnya, kalo sobat blogger ingin menampilkannya di blog sobat.
caranya gapang ko ! teman tinggal ikuti saja langkah-langkahnya di bawah ini :

langkah-langkah pemasangan profil admin di blog :

Sobat masuk ke blogger sobat, >> Rancangan >> Pilih Edit HTML >> dan jangan lupa centang yang bertuliskan Expand widget templates.

Kalo udah cari kode <div class='post-footer'> Tekan CTRL + F lalu ketik class='post-footer' untuk mempermudah pencarian. Kalo udah ketemu copykan code dibawah ini tepat di atas kode <div class='post-footer'>.

<b:if cond='data:blog.pageType == "item"'>
<div class='admin-penulis'>
<h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><b><data:post.author/></b></a></h4>
<div class='kontainer'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA0kmqITSBfzEhh5wbyT93Ka32gc5m8p8HLQc43gUIqGEeNBh_7J6qHjsNTbMEnZNJA0NT-iSDQTOMF_brEJnAdFo9GOkeOa1LbUFG_tQ1M9vLQQZM7xVL46mCMw0pviuWbgsMPDePLUCZ/s220/hahabcbnjfd.jpg'/>
Artikel <a expr:href='data:post.url'><i><data:post.title/></i></a> ini ditulis oleh <b><data:post.author/></b> pada hari <i><data:post.dateHeader/></i>. Terimakasih atas kunjungan Anda pada blog ini. Kritik dan saran tentang <b><data:post.title/></b> dapat Anda sampaikan melalui kotak komentar dibawah ini.
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://wong3ndeso.blogspot.com/2012/02/profil-admin-di-bawah-postingan.html' target='_blank'>::! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>

Silahkan sobat ganti kode yang berwarna orange dengan url image yang sobat ingin tampilkan.

Kemudian anda cari lagi kode ]]></b:skin> Tekan CTRL + F lalu ketik ]]></b:skin> untuk mempermudah pencarian, Kalo udah ketemu copykan kode dibawah ini tepat di atas kode ]]></b:skin>.

.admin-penulis {
   display:block;
   width:auto;
   background:#000000;
   padding:0;
   margin:30px 0 10px 0;
   font:normal 14px Arial, Sans-Serif;
   color:#ffffff;
   border:1px solid #fff;
   box-shadow:0 1px 1px #000;
   -moz-box-shadow:0 1px 3px #000;
   -webkit-box-shadow:0 1px 3px #000;
   }

.admin-penulis .kontainer {
   padding:5px;
   }

.admin-penulis h4 {
   background:#000000;
   border:none;
   border-bottom:1px solid #000000;
   color:#ff9900;
   text-transform:normal;
   text-shadow:2 1px 0 rgba(0, 0, 0, 0.4);
   font:bold 12px Arial,Sans-Serif;
   padding:5px 10px;
   margin:0 0 0 0;
   display:block;
   }

.admin-penulis h4 a {
   color:#ff9900;
   }

.admin-penulis img {
   width:90px;
   height:90px;
   margin:0 10px 0 0;
   float:left;
   border:1px solid #ffffff;
   padding:2px;
   background:#000000;
   box-shadow:none;
   -moz-box-shadow:none;
   -webkit-box-shadow:none;
   }

Langkah terakhir Save/simpan template

Selamat mecoba dan Semoga bermanfaat

Terimakasih