Cara Membuat Auto Readmore Di Blogger
TERBUKTI BERHASIL 100%..What's up friends ?
Kali ini saya akan memberitahukan tutorial "Cara Membuat Auto Readmore Di Blogger".
Tips yang satu ini sangat penting anda terapkan di blog anda, karena tips ini akan membuat halaman awal blog anda tidak boros tempat. Tips ini akan memotong sedikit tulisan yang ada pada setiap posting yang ada, tapi tenang gan, tips ini tidak akan menghilangkan tulisan yang dipotong tadi, karena ketika anda klik tulisan "Read More (atau tulisan yang lain)"nya tulisan yang tadi terpotong itu akan kelihatan kembali.
Jika gan masih bingung atau penasaran, silahkan anda lihat homepage bblog saya untuk demonya.
Oke gan, langsung aja kita ke cara-cara pembuatannya :
(langsung to the point aja ya gan)
(langsung to the point aja ya gan)
- pilih Edit HTML
- centang/ceklis Expand Template Widget
--> Untuk lebih aman, terlebih dulu download template anda, hal ini baik untuk berjaga-jaga kalau tips ini gagal di blog anda, silahkan lihat tutorialnya disini<--
3. Cari kode </head> (Tekan tombol F3 atau CTRL+F untuk mempermudah pencarian)
4. Jika sudah ketemu, letakkan kode/script dibawah ini tepat diatas/sebelum kode </head>
Note :
- summary_noimg = 310 ► adalah banyaknya tulisan/karakter yang akan ditampilkan jika tidak ada gambar di posting anda, anda bisa merubah angka "310" menjadi ke angka berapa saja.
- summary_img = 250 ►adalah banyak tulisan/karakter yang akan ditampilkan jika ada gambar di posting anda, anda bisa merubah angka "250" menjadi ke angka berapa saja.
- img_thumb_height = 110 ► adalah ukuran tinggi gambar yang akan ditampilkan, anda bisa merubah angka "110" dengan angka berapa saja.
- img_thumb_width = 110 ► adalah ukuran lebar gambar yang akan ditampilkan, anda bisa merubah angka "110" dengan angka berapa saja.
( Tapi untuk hasil yang baik dan maksimal, biarkan saja seperti itu )
5. Setelah itu cari kode <data:post.body/> (Tekan tombol F3 atau CTRL+F untuk mempermudah pencarian)
6. Jika sudah ketemu, ganti kode <data:post.body/> dengan kode/script berikut :
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<div style='clear: both;'/><span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Read more.. >></b></a></span>
</b:if>
Note :
- padding-top:5px ► Ganti angka 5 menjadi angka berapa saja, untuk menentukan jarak tulisan Read More dengan tulisan posting yang ada diatasnya.
- float:right ► Ganti tulisan right menjadi left, jika anda ingin tulisan Read More nya ada disebelah kiri.
- Read more.. ► Ganti tulisan Read more.. dengan kata apa saja untuk menggantikan kata Read More nya, misalnya dengan kata "Baca Seterusnya", "Lanjut Baca", "Read Full This Post", atau sebagainya.
( Tapi untuk hasil yang baik dan maksimal, biarkan saja seperti itu )
7. Untuk melihat hasilnya sebaiknya jangan disave dulu, klik Preview untuk melihat hasilnya.
8. Jika anda sudah merasa script/kode ini berjalan dengan baik, silahkan simpan/save template anda.
9. Selesai deh...!!
- centang/ceklis Expand Template Widget
--> Untuk lebih aman, terlebih dulu download template anda, hal ini baik untuk berjaga-jaga kalau tips ini gagal di blog anda, silahkan lihat tutorialnya disini<--
3. Cari kode </head> (Tekan tombol F3 atau CTRL+F untuk mempermudah pencarian)
4. Jika sudah ketemu, letakkan kode/script dibawah ini tepat diatas/sebelum kode </head>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 310;
summary_img = 250;
img_thumb_height = 110;
img_thumb_width = 110;
</script>
<script src='https://sites.google.com/site/bukarahasiahost/azmeereadmore/azmee-readmore.js' type='text/javascript'/>
var thumbnail_mode = "float" ;
summary_noimg = 310;
summary_img = 250;
img_thumb_height = 110;
img_thumb_width = 110;
</script>
<script src='https://sites.google.com/site/bukarahasiahost/azmeereadmore/azmee-readmore.js' type='text/javascript'/>
Note :
- summary_noimg = 310 ► adalah banyaknya tulisan/karakter yang akan ditampilkan jika tidak ada gambar di posting anda, anda bisa merubah angka "310" menjadi ke angka berapa saja.
- summary_img = 250 ►adalah banyak tulisan/karakter yang akan ditampilkan jika ada gambar di posting anda, anda bisa merubah angka "250" menjadi ke angka berapa saja.
- img_thumb_height = 110 ► adalah ukuran tinggi gambar yang akan ditampilkan, anda bisa merubah angka "110" dengan angka berapa saja.
- img_thumb_width = 110 ► adalah ukuran lebar gambar yang akan ditampilkan, anda bisa merubah angka "110" dengan angka berapa saja.
( Tapi untuk hasil yang baik dan maksimal, biarkan saja seperti itu )
5. Setelah itu cari kode <data:post.body/> (Tekan tombol F3 atau CTRL+F untuk mempermudah pencarian)
6. Jika sudah ketemu, ganti kode <data:post.body/> dengan kode/script berikut :
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<div style='clear: both;'/><span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Read more.. >></b></a></span>
</b:if>
Note :
- padding-top:5px ► Ganti angka 5 menjadi angka berapa saja, untuk menentukan jarak tulisan Read More dengan tulisan posting yang ada diatasnya.
- float:right ► Ganti tulisan right menjadi left, jika anda ingin tulisan Read More nya ada disebelah kiri.
- Read more.. ► Ganti tulisan Read more.. dengan kata apa saja untuk menggantikan kata Read More nya, misalnya dengan kata "Baca Seterusnya", "Lanjut Baca", "Read Full This Post", atau sebagainya.
( Tapi untuk hasil yang baik dan maksimal, biarkan saja seperti itu )
7. Untuk melihat hasilnya sebaiknya jangan disave dulu, klik Preview untuk melihat hasilnya.
8. Jika anda sudah merasa script/kode ini berjalan dengan baik, silahkan simpan/save template anda.
9. Selesai deh...!!
Sekian dulu pemberitahuan dari
saya..
See you in my next pages..
Bye gan..!!
Selamat mencoba..
*jangan lupa komentarnya ya gan.. :D
See you in my next pages..
Bye gan..!!
Selamat mencoba..
*jangan lupa komentarnya ya gan.. :D
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
DAFTAR ISI :
Cara Membuat Tombol Search Dengan Gaya CSS
What's up gan?
Are you fine today?
If you fine, I want to tell you about "Cara Membuat Tombol Search Dengan Gaya CSS"
Tombol search/search button adalah suatu gadget pencarian yang sangat diperlukan para pengunjung website/blog untuk mencari artikel-artikel yang dibutuhkan. Selain tombol search, banyak hal yang dapat kita lakukan untuk mempermudah pengunjung dalam mencari artikel-artikel blog, seperti membuat menu navigasi horizontal atau yang lainnya.
Dan kali ini saya akan memberitahukan gan2 semua cara membuat tombol search dengan gaya css dan tanpa image.
Okelah gan, langsung aja kita ke stepnya :
1. Login di blogger.com
2. Dari dasbor pilih Rancangan/Tata Letak
3. Pilih Tambah Gadget
4. Pilih HTML/JavaScript
5. Kemudian letakkan code dibawah ini kedalam HTML/JavaScript
<form action='http://alamat-blog.anda'/search' class='searchform' method='get'>
<input class='searchfield' id='q' name='q' onblur='if (this.value == "")
{this.value = "Search...";}' onfocus='if (this.value == "Search...")
{this.value = ""}' type='text' value='Search...'/>
<input class='searchbutton' type='submit' value='Go'/>
</form>
{this.value = "Search...";}' onfocus='if (this.value == "Search...")
{this.value = ""}' type='text' value='Search...'/>
<input class='searchbutton' type='submit' value='Go'/>
</form>
6. Setelah itu klik Simpan
7. Selanjutnya masuk ke halaman Template
- Sebelum mengedit Template, silahkan unduh terlebih dahulu template anda. ( silahkan baca Cara Mengunduh/BackUp/Download Template Sendiri )
8. Pilih Edit HTML
9. Centang
10. Cari code ]]></b:skin> (Untuk mempermudah pencarian tekan F3 atau tekan tombol CTRL F)
11. Letakkan code dibawah ini diatas code ]]></b:skin> :
/*- Search -------------------*/
.searchform {
display:inline-block;
zoom: 1; /* ie7 hack for display:inline-block */
display: inline;
border: solid 1px #556b2f;
padding: 3px 5px;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
box-shadow: 0 1px 0px rgba(0,0,0,.1);
background: #33ff33;
background: -webkit-gradient(linear, left top, left bottom, from(#fff),
to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: :progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',
endColorstr='#ededed'); /* ie7 */
-ms-filter:
progid:XImageTransform.Microsoft.gradient(startColorstr='#ffffff',
endColorstr='#ededed'); /* ie8 */
}
.searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
}
.searchform .searchfield {
background: #d5d5d5;
padding: 6px 6px 6px 8px;
width: 240px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.searchform .searchbutton {
color: #fff;
border: solid 1px #494949;
font-size: 11px;
height: 27px;
width: 27px;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
background: #555;
background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e),
to(#454545));
background: -moz-linear-gradient(top, #9e9e9e, #454545);
filter: :progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e',
endColorstr='#454545'); /* ie7 */
-ms-filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e',
endColorstr='#454545'); /* ie8 */
}
12. Setelah selesai, klik Simpan Template dan lihat hasilnya..
Sekian dulu pemberitahuan dari
saya..
See you in my next pages..
Bye gan..!!
Selamat mencoba..
*jangan lupa komentarnya ya gan.. :D
See you in my next pages..
Bye gan..!!
Selamat mencoba..
*jangan lupa komentarnya ya gan.. :D
Cara Membuat Judul Link Terbuka Saat Kursor Mouse Diatasnya
What's up gan?Are you fine today?
If you fine, I want to tell you about "Cara Membuat Judul Link Terbuka Saat Kursor Mouse Diatasnya"
Dari judulnya aja udah panjang banget, apa lagi tutorialnya..??
Hmm, tenang aja gan tutorialnya sangat mudah dan tidak terlalu panjang kok..
Kalau gan penasaran apa maksud dari judulnya, silahkan lihat beberapa gambar di bawah.. ::
Allright gan, langsung aja kita ke tutorialnya :
1. Loggin di blogger.com
2. Dari Dasbor > Template > Edit HTML > Lanjutkan > Centang
3. Cari kode <body> (Untuk mempermudah pencarian tekan tombol F3 atau tekan tombol CTRL + F), jika sudah ketemu, letakkan code dibawah ini sebelum code <body>
<!-- SweetTitlesTooltips Plugin -->
<link href='http://www.geocities.com/cuitnazz/SweetTitles.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://www.geocities.com/cuitnazz/ToolTips.js' type='text/javascript'/>
<script src='http://www.geocities.com/cuitnazz/SweetTitles.js'
type='text/javascript'/>
<link href='http://www.geocities.com/cuitnazz/SweetTitles.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://www.geocities.com/cuitnazz/ToolTips.js' type='text/javascript'/>
<script src='http://www.geocities.com/cuitnazz/SweetTitles.js'
type='text/javascript'/>
Jika code <body> tidak ditemukan, cobalah taruh di atas kode </body>, jika scriptnya tidak jalan juga, cobalah letakkan di CSS.
4. Simpan Template
5. Gan sudah bisa melihat hasilnya
*jika ada yang kurang jelas silahkan berkomentar*
Sekian dulu pemberitahuan dari
saya..
See you in my next pages..
Bye gan..!!
Selamat mencoba..
*jangan lupa komentarnya ya gan.. :D
See you in my next pages..
Bye gan..!!
Selamat mencoba..
*jangan lupa komentarnya ya gan.. :D
Cara Membuat Tulisan Berjalan Pada Halaman Awal Blog
What's up gan?Are you fine today?
If you fine, I want to tell you about "Cara Membuat Tulisan Berjalan Pada Halaman Awal Blog"
Sebetulnya, tutorial ini sangatlah mudah.. Langsung aja kita lihat contoh/demonya :
itu dia demonya..
Cara Membuat :
1. Loggin di blogger.com
2. Dari dasbor pilih Tata Letak > Tambah Gadget > HTML/JavaScript
<div><script
src="http://www.widgeo.net/message.php?msg=SELAMAT
DATANG &adult=0&cat=internet&big=&cl=rainbow"><br
/>
<noscript><a href="http://www.widgeo.net">widgets</a></noscript>
<a href="http://www.widgeo.net"><img alt="widgets" border="0" src="http://www.widgeo.net/img/logopm.png" /></a></script></div>
<noscript><a href="http://www.widgeo.net">widgets</a></noscript>
<a href="http://www.widgeo.net"><img alt="widgets" border="0" src="http://www.widgeo.net/img/logopm.png" /></a></script></div>
** Silahkan ganti tulisan SELAMAT DATANG dengan tulisan yang gan inginkan
4. Setelah itu Simpan
5. Silahkan dipindah-pindahkan di mana akan dibuat Tulisan berjalannya, misalnya ditaruh di bawah Header.
6. Klik Simpan Setelan
7. Gan sudah bisa melihat hasilnya
Sekian dulu pemberitahuan dari
saya..
See you in my next pages..
Bye gan..!!
Selamat mencoba..
*jangan lupa komentarnya ya gan.. :D
See you in my next pages..
Bye gan..!!
Selamat mencoba..
*jangan lupa komentarnya ya gan.. :D
Cara Mengubah Kursor di Blog
Are you fine today?
If you fine, I want to tell you about "Cara Mengubah Kursor di Blog"
Sudah banyak teman-teman saya yang bertanya-tanya, bagaimana sih cara mengganti kursor di blog??..
Kali ini saya akan mengshare tutorialnya, mudah-mudahan tutorialnya bisa membantu gan-gan semua.
Okelah gan, langsung aja kita ke intinya..
Langkah-langkah Mengubah Kursor Di Blog :
1. Login di blogger.com
2. Dari dasbor pilih Tata Letak/Page Element > Tambah Gadget > HTML/JavaScript
3. Letakkan code dibawah ini :
<style type="text/css"> body{cursor:
url("http://i1122.photobucket.com/albums/l524/riyosuke/7updot-ani-1.gif"),
auto;} body a:hover{cursor: url("http://i1122.photobucket.com/albums/l524/riyosuke/7updot-ani-1.gif"),
auto;} </style>
- Code yang diatas adalah code cursor permanen, yang artinya jika kursor diletakkan di link, kursornya tidak berubah.
- Tapi jika gan tidak ingin yang permanen, gan tinggal hapus aja code body a:hover{cursor: url("http://i1122.photobucket.com/albums/l524/riyosuke/7updot-ani-1.gif"), auto;}
- Tapi jika gan tidak ingin yang permanen, gan tinggal hapus aja code body a:hover{cursor: url("http://i1122.photobucket.com/albums/l524/riyosuke/7updot-ani-1.gif"), auto;}
4. Setelah itu kilih Simpan
5. Setelah itu klik Simpan Setelan
Gan juga bisa merubah link http://i1122.photobucket.com/albums/l524/riyosuke/7updot-ani-1.gif dengan link-link gambar kursor yang lainnya, saya ada beberapa link kursor, silahkan memilih-milih.. :
➪ http://i1122.photobucket.com/albums/l524/riyosuke/7updot-ani-1.gif
➪
http://i1122.photobucket.com/albums/l524/riyosuke/aliendance-1.gif
➪
http://i1122.photobucket.com/albums/l524/riyosuke/bananathumbsup.gif
➪
http://i1122.photobucket.com/albums/l524/riyosuke/banghead.gif
➪
http://i1122.photobucket.com/albums/l524/riyosuke/bullseye-ani.gif
➪
http://cursors2.totallyfreecursors.com/thumbnails/earwig.gif
➪
http://i1122.photobucket.com/albums/l524/riyosuke/guitarblackglitter.gif
➪
http://i1122.photobucket.com/albums/l524/riyosuke/heartbowarrow1-1.gif
➪
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgnyCH1o0ZCLzfC-v5Fgj7BIZdx8RuQBmd3xmsjV-cE7KeAsN_1HuVujaJGrIB9GSEXt530y2syclaavG0oNZU95PXaCMiFyxNdRQjzt8-17guvcnAULOdEuDxguUDeRu3HXqcd0IKBjl8/s1600/jasablogsitus-web-id.gif
➪
http://i1122.photobucket.com/albums/l524/riyosuke/tail2.gif
➪
http://i1122.photobucket.com/albums/l524/riyosuke/monkey-ani.gif
Sekian dulu pemberitahuan dari
saya..
See you in my next pages..
Bye gan..!!
Selamat mencoba..
*jangan lupa komentarnya ya gan.. :D
See you in my next pages..
Bye gan..!!
Selamat mencoba..
*jangan lupa komentarnya ya gan.. :D
Subscribe to:
Posts (Atom)