Jumat, 30 Maret 2012
Membuat Static Page pada Template Magazine
Postingan kali ini saya tulis khusus untuk pengguna template blogger magazine buatan saya dan mungkin bisa juga dipakai untuk template lain yang tampilannya magazine. Banyak sekali yang bertanya lewat kotak komentar maupun email tentang bagaimana menambahkan halaman statis (static page) pada template tersebut. Mohon maaf karena kesibukan di dunia nyata saya tidak sempat bereksperimen untuk menambahkan fitur static page, baru sekarang saya mengutak-atik template dan menambahkan statc page pada template-template magazine tersebut.
Tutorial membuat static page pada template blogger style magazine ini sudah saya coba dan terapkan disini, dan yang jelas pasti akan saya bagikan penemuan saya ini kepada para teman-teman blogger pengguna template magazine. Oke langsung saja pada cara pembuatannya :
- Langkah awal login ke blogger dengan Akun anda.
- Masuk ke Template kemudian klik Edit HTML
- Jangan lupa untuk mencentang kotak expand widget templates, dan untuk berjaga-jaga backup dulu template Anda.
- Kemudian cari kode seperti dibawah ini, letaknya dibawah ]]></b:skin> :
<style type='text/css'>
<b:if cond='data:blog.pageType != "item"'>#main-wrapper {width: 370px;padding-left:10px;}h2.date-header, .post-timestamp, .post-body, .post-footer, .feed-links {display:none}.post h3 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh087LZTS-XG119bPgnHMH5j6atrNsbYRrSIcYySIOCknqc85tW-kb7oBzQSm6c35QL5Gf_17UQsDAYrplv91DldViG8FTHFdcFUT7BkK6eUyqwtdVaxq0cuONYD50lyX4NN5WaHgOKqsI/s1600/arrowList_2.gif) no-repeat 0px 3px;font:normal 12px Arial;margin:0 0 0 2px;padding:4px 6px 4px 15px;line-height:1.3em;position:relative;}.post h3 a, .post h3 a:visited, .post h3 strong {font-weight:normal}.post h3 strong, .post h3 a:hover {color:#FF8000;}.post {border:none}.post {border-bottom:1px dotted silver;margin:0px;padding:0px;}#blog-pager {font:normal 11px Arial;text-align:left;margin:6px 0 1px 0;padding:7px 0px 7px 0px;}</b:if>
</style> - Yang harus Anda perhatikan adalah kode diatas yang berwarna merah, kode lain (yang berwarna hitam) berbeda-beda tiap template. Ganti kode warna merah dengan kode berikut :Sehingga susunannya akan seperti ini :
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
...................................
...................................
...................................
</style>
</b:if></b:if><b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>#main-wrapper {width: 370px;padding-left:10px;}h2.date-header, .post-timestamp, .post-body, .post-footer, .feed-links {display:none}.post h3 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh087LZTS-XG119bPgnHMH5j6atrNsbYRrSIcYySIOCknqc85tW-kb7oBzQSm6c35QL5Gf_17UQsDAYrplv91DldViG8FTHFdcFUT7BkK6eUyqwtdVaxq0cuONYD50lyX4NN5WaHgOKqsI/s1600/arrowList_2.gif) no-repeat 0px 3px;font:normal 12px Arial;margin:0 0 0 2px;padding:4px 6px 4px 15px;line-height:1.3em;position:relative;}.post h3 a, .post h3 a:visited, .post h3 strong {font-weight:normal}.post h3 strong, .post h3 a:hover {color:#FF8000;}.post {border:none}.post {border-bottom:1px dotted silver;margin:0px;padding:0px;}#blog-pager {font:normal 11px Arial;text-align:left;margin:6px 0 1px 0;padding:7px 0px 7px 0px;}</style>
</b:if></b:if> - Masih pada posisi Edit HTML, scroll jauh ke bawah temukan kode berikut ini :
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
<div id='artikel'>
<data:post.body/>
</div>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div> - Kode yang saya cetak tebal diatas, tiap template berbeda-beda, setelah ketemu ganti dengan kode di bawah ini :
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div> - Terakhir Save Templates, langkah membuat static page selesai.
Sebenarnya sampai pada langkah ini static page (halaman statis) pada template Anda sudah muncul. Tapi biasanya widget yang ada di tengah atau disebelah postingan terbaru akan nampak pada halaman statis. Untuk menghilangkan widget tersebut dari halaman statis ikuti langkah di bawah ini :
- Pada posisi Edit HTML (centang expand widget templates) cari dulu ID widget yang ikut muncul pada halaman statis. Di bawah ini adalah contoh dari ID widget (perhatikan kode yang dicetak tebal)
<b:section class='sidebarleft' id='sidebarleft' preferred='yes'>
Sebagai contoh saya ambil dari template Johny Simple Magazine 2, widget Adsense dan World News mempunyai ID : sidebarleft - Setelah itu cari kode <div id='sidebarleft-wrapper'>, kemudian tambahkan kode berikut ini diatasnya :
<b:if cond='data:blog.pageType != "static_page"'>
- Scroll ke bawah sampai Anda menemukan kode </div> penutup dari <div id='sidebarleft-wrapper'>. Kemudian letakkan kode </b:if> di bawahnya sebagai penutup. Susunannya seperti ini :
<b:if cond='data:blog.pageType != "static_page"'>
<div id='sidebarleft-wrapper'>
........................................................
........................................................
........................................................
</div>
</b:if> - Jika Anda ingin format timestamp tidak tampak pada halaman statis, cari kode di bawah ini :<b:if cond='data:blog.pageType != "item"'></b:if>
<span class='post-timestamp'><data:post.timestamp/></span> - Ganti dengan kode berikut :
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<span class='post-timestamp'><data:post.timestamp/></span>
</b:if>
</b:if> - Terakhir Save Templates, langkah membuat statis page untuk template magazine sudah selesai dan lihat hasilnya.
Langkah-langkah diatas saya khususkan bagi para pengguna template magazine buatan saya, seperti Johny Simple Magazine 2, Johny Magazine, Johny Magazine 2 Light, Johny Portal dan Johny Portal 2, Mas Paper Template, Johny Papers Magazine. Silahkan Anda coba dulu jika masih ada kesulitan bisa ditanyakan lewat kotak komentar yang ada di bawah. Demikian tutorial singkat kali ini, selamat mencoba dan semoga bermanfaat.
Label:
tutorial blog
Rabu, 28 Maret 2012
Membuat Related Post Thumbnail dan Kotak Feedburner
Artikel ini menjawab pertanyaan beberapa teman blogger yang ingin membuat fitur Related Post Thumbnail sekaligus dengan kotak Feedburner. Fitur related post thumbnail dan kotak feedburner ini menjadi satu bagian utuh dan letaknya biasanya di bawah postingan. Sebelumnya saya juga pernah membahasnya pada tutorial menambah dua kolom di bawah postingan, tapi hasilnya terlalu sederhana dan mungkin kurang menarik bagi minat pengunjung untuk berlama-lama di blog, apalagi perkembangan blogger sekarang ini, banyak sekali tutorial baru dengan menggunakan jQuery sehingga blogger menjadi salah satu CMS yang tidak bisa dipandang sebelah mata.
Sebenarnya saya masih pengin berlama-lama ngobrol ngalor ngidul, tapi karena nanti malam ada pertandingan bola antara Barcelona versus AC Milan mesti cepet-cepet tidur biar bisa bangun nanti malem. Oke langsung saja, saya akan berikan tutorial untuk membuatnya, contohnya seperti gambar diatas demonya bisa dilihat disini di bawah postingan :
- Pertama Anda mesti login ke blogger dulu
- Kemudian klik Template > pilih Edit HTML centang expand widget templates
- Jangan lupa backup dulu templatenya, untuk berjaga-jaga jika nanti ada kesalahan dalam pengeditan.
- Setelah itu, letakkan kode berikut di atas kode ]]></b:skin>
- Masih pada posisi Edit HTML, letakkan kode di bawah ini setelah <data:post.body/> (jika ada 2 atau 3 pilih kode yang terakhir)Keterangan :
Warna biru : ganti dengan alamat feed anda.
Warna merah : ganti dengan URL anda. - Terakhir Save Templates, dan lihat hasilnya di bawah postingan Anda.
Tutorial membuat fitur related post thumbnail dengan feedburner diatas cocok untuk blog yang mempunyai warna background atau latar hitam. Tapi jika blog Anda mempunyai warna latar putih atau warna cerah anda tinggal modifikasi pada kode CSS nomer 4 diatas. Demikian tutorial kali ini selamat mencoba dan semoga bermanfaat.
Label:
tutorial blog
Senin, 26 Maret 2012
Cara Daftar di Technorati
Pertama jangan kasih komentar untuk artikel ini ya, ini hanya artikel agar diterima di Technorati dengan menyertakan claim token dari situs itu dan kalau sudah keterima lagi paling juga saya hapus post ini. Daripada nanti isinya cuma kode claim token aja mending saya repost tulisan ini. Dulu waktu blog ini beralamat http://www.Download Disini.co.cc sudah keterima di Technorati, sekarang setelah domain co.cc didepak saya kembalikan blog ini ke blogspot, jadi Technoratinya juga ikut ilang.
Ngomong-ngomong apa Anda sudah mengenal tentang Technorati ? Bagi yang belum mengenalnya, saya akan kasih penjelasan singkat tentang Technorati, Technorati adalah sebuah direktori terbesar saat ini dan memiliki fasilitas/fungsi yang cukup besar yaitu sebagai BlogSearch, Tags Aggregator dan Online Bookmarks. Dengan mendaftar di Technorati, akan meningkatkan traffic pengunjung ke blog kita, dan blog/website yang kita kelola lebih dapat dikenal oleh blogger lain, dan ini pun bisa disebut sebagai salah satu strategi SEO untuk blog/website kita.
Dengan mendaftarkan blog kita di Technorati, kita juga bisa mengetahui situs atau blog mana saja yang memasang link ke blog kita. Untuk mempersingkat waktu, ikuti langkah-langkah di bawah ini untuk mendaftar di Technorati :
Ngomong-ngomong apa Anda sudah mengenal tentang Technorati ? Bagi yang belum mengenalnya, saya akan kasih penjelasan singkat tentang Technorati, Technorati adalah sebuah direktori terbesar saat ini dan memiliki fasilitas/fungsi yang cukup besar yaitu sebagai BlogSearch, Tags Aggregator dan Online Bookmarks. Dengan mendaftar di Technorati, akan meningkatkan traffic pengunjung ke blog kita, dan blog/website yang kita kelola lebih dapat dikenal oleh blogger lain, dan ini pun bisa disebut sebagai salah satu strategi SEO untuk blog/website kita.
Dengan mendaftarkan blog kita di Technorati, kita juga bisa mengetahui situs atau blog mana saja yang memasang link ke blog kita. Untuk mempersingkat waktu, ikuti langkah-langkah di bawah ini untuk mendaftar di Technorati :
- Masuklah ke alamat Technorati.com
- lalu Klik menu Join (seperti gambar dibawah ini :
- Isilah data secara lengkap lalu klik join
- Setelah itu, akan muncul sebuah confirmation code. Lalu cek email anda yang telah didaftarkan di technorati tadi, lalu klik link yang telah diberikan melalui email anda.
- Setelah itu masukan url blog Anda (seperti gambar dibawah ini), dan kemudian klik Begin Claim.
- Setelah itu, Anda tinggal menunggu Proses Claim, dan lakukan Complete Claim seperti gambar dibawah ini :
- Anda akan dihadapkan pada Form seperti ini :
- Salin kode berikut dan publikasikannya dalam sebuah posting di blog Anda. Technorati harus dapat menemukan kode klaim dalam blog Anda via feed (RSS atau Atom). Caranya adalah dengan menerbitkan posting baru dan menyisipkan kode klaim di dalamnya.
- Untuk Kode Klaim Blog/Website ini adalah : 3S6YXY4VKCDR
- Dan sesudah itu, Anda tinggal klik Complete Claim
- Berikutnya, Anda tinggal menunggu Kode Klaim yang sudah di masukkan dalam Postingan Anda di periksa oleh Technorati, untuk memastikan bahwa memang benar alamat URL yang diberikan, benar-benar milik Anda.
- Dan yang terakhir (karena blog inipun belum terdaftar di Technorati), anda buat satu link dengan kode seperti dibawah ini, dan tampilkan di blog anda.
<a href=”http://technorati.com/faves?sub=addfavbtn&add=http://url blog anda”><img alt=”3S6YXY4VKCDR” src=”http://static.technorati.com/pix/fave/btn-fave2.png”/></a>
- Gantilah kode url blog anda diatas dengan kode URL anda.
Itu tadi sedikit informasi mengenai Cara Mendaftar di Technorati, semoga bermanfaat bagi Anda semua. Terimakasih.
Masalah Threaded Comment Pada Template Blogger Lama
Berawal dari pertanyaan teman blogger dari Malaysia Haz Issac tentang Threaded Comments yang ada pada salah satu template buatan saya (Mas paper), yang menanyakan bagaimana caranya agar Threaded Comments pada template bisa berfungsi? Setelah mengganti beberapa kode script yang ada, tampilan komentar sudah ada fungsi reply dan delete, tapi permasalahan yang terjadi kemudian fitur reply tidak berfungsi normal, atau ketika diklik hanya ada tulisan javascript pada bagian bawah browser.
Terus terang kebanyakan dari template yang saya buat masih menggunakan fitur blogger lama, sehingga secara default belum dilengkapi fungsi reply atau Threaded Comments yang sudah dikembangkan oleh Blogger baru-baru ini. Kali ini saya akan mencoba memberikan satu tutorial bagi para pengguna template blogger lama (bukan klasik), bagaimana cara mengatasi permasalahan Threaded Comment khususnya bagi mereka yang sudah mengganti kode dengan menambahkan Threaded Comments tapi fitur reply tidak berfungsi normal.
Langkah Pertama
Cara atau metode pertama ini harus Anda lakukan agar Threaded Coments pada blog Anda berfungsi.
- Login ke blogger dengan akun Anda
- Pada dashboard pilih blog yang akan diberikan Threaded Comments (blogger new interface)
- Setelah itu masuk ke Settings >> Posts and Comments
- Kemudian pilih Comment Location setting pada posisi Embedded.
- Kembali lagi ke Setting, kali ini klik Other, pada Allow blog post pada baris pertama pilih posisi Full.
- Terakhir Save, kemudian lihat hasilnya apakah Threaded Comments sudah ada pada blog Anda. Jika belum ikuti langkah kedua di bawah ini.
- Masuk ke Template kemudian pilih Edit HTML.
- Jangan lupa untuk centang Expand Widget Templates. Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, lebih baik backup dulu template Anda.
- Kemudian cari kode di bawah ini :
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if> - Setelah ketemu ganti dengan kode berikut :
<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if> - Terakhir Save template, lihat dulu hasilnya.
Biasanya setelah Anda melakukan langkah kedua ini, Threaded Comments sudah ada pada blog Anda, tapi harus dicek satu persatu fungsinya. Permasalahan yang sering muncul adalah banyak sekali template yang masih menggunakan script blogger classic sehingga fitur reply (balas) tidak berfungsi normal. Jika fungsi Reply tidak berjalan, ikuti langkah ketiga berikut ini :
Langkah Ketiga
Langkah ini hanya dilakukan jika fungsi Reply tidak berjalan atau biasanya hanya keluar tulisan javascript pada browser bawah. Jika pada langkah kedua Threaded Comments sudah berfungsi normal langkah ini tinggalkan saja.
- Masih pada posisi Edit HTML (centang Expand Widget Templates), cari kode di bawah ini :
- Setelah ketemu ganti dengan kode berikut :
- Setelah itu save templates.
Langkah ketiga ini dibuat oleh http://modification-blog.blogspot.com. Setelah Anda melakukan langkah ini fungsi Reply bisa berjalan normal, tapi permasalahan yang saya dapat kemudian (setelah Anda melakukan langkah ini) jika Anda masih memakai browser internet lama terkadang akan susah untuk membuka postingan yang ada pada blog.
Threaded Comment di blog Anda sekarang sudah ada, sekarang anda tinggal modifikasi sendiri bentuk dari kotak komentar. Jika Anda menginginkan kotak komentar Admin berbeda, ikuti langkah sederhana berikut ini (contohnya seperti gambar diatas) :
- Pada posisi Edit HTML letakkan kode berikut ini persis diatas kode </body> :
<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$(function() {
function highlight(){
$('.user.blog-author,.ssyby').closest('.comment-block')
.css('border', '1px solid #e1e1e1')
.css('background','#f1f1f1 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl2u64IcEWCUx5_SEJ6TxbHt0m9SOMnfXdP7Mgvya1Q5JZGKkfVom4gCd6cvQ0e7IGgTKfFUaf7vtlQ8C_qSqv3GmWicolAHo_szwlFVx1ndE4PqJrh7_fx8Y1zsuTkX7OV9lR8N4wqm0/s1600/admin2.png") no-repeat bottom right')
.css('padding', '10px');
}
$(document).bind('ready scroll click', highlight);
});
</script> - Kemudian save templates.
Demikian tadi tutorial singkat untuk mengatasi masalah yang sering muncul dalam membuat Threaded Comments pada template blogger classic. Jika masih ada yang kurang jelas silahkan tinggalkan komentar Anda di bawah. Selamat mencoba dan semoga bermanfaat.
Label:
tutorial blog
Minggu, 25 Maret 2012
Dua Template Gratis Untuk Pecinta Music dan Game
Di malam yang dingin ini saya akan kembali berbagi kepada teman-teman blogger semua, dua buah template warna hitam gratis. Template pertama saya namakan Johny Darkmusic dibuat khusus untuk teman blogger yang mempunyai blog konten musik atau selebritis. Dan template kedua Johny Darkgamer 2 sesuai namanya template ini cocok untuk blog yang mempunyai konten game atau sejenisnya.
Kedua template ini saya lengkapi dengan fitur slider carousel otomatis, anda tinggal memasukkan kode script yang sudah saya siapkan di bawah pada kotak HMTL/Javascript. Slider carousel yang saya gunakan disini adalah Tiny Carousel dari Maarten Baijs yang sudah dimodifikasi oleh seorang master blogger Indonesia Taufik Nurrohman, sehingga kita tidak perlu lagi memasukkan keterangan dan URL slider satu persatu. Baiklah, langsung saja karena saya juga sudah ngantuk berat, berikut ini kedua template tersebut :
Johny Darkmusic
Template ini saya buat bagi Anda yang suka dengan konten music atau selebritis. Template ini bertipe magazine, terdapat 3/4 kolom sidebar. Fitur-fitur yang terdapat pada template ini antara lain :
- Slider CarouselUntuk mengganti slider anda hanya perlu memasukkan kode di bawah ini pada kotak HTML/Javascript. Di dashboard masuk ke layout kemudian pilih kolom kosong di bawah header >> add gadget >> HTML/Javascript :Ganti URL warna biru diatas dengan URL blog Anda, kemudian save.
- Kategory dengan thumbnail (Category with thumbnail)Letaknya di sidebar tengah (satu thumbnail), cara pasangnya add gadget >> HTML/Javascript kemudian masukkan kode di bawah ini :Keterangan :
Warna biru (jazz) : adalah label atau kategori yang ditampikan pada sidebar. Anda bisa menggantinya dengan label anda sesuaikan dengan kebutuhan.
Warna merah : Ganti URL dengan URL blog anda. - Latest Post Untuk mengatur latest post yang ada di homepage caranya adalah, di dashboard blogger pilih setting, kemudian klik posts and comments. Pada bagian paling atas (Show at most) pilih berapa posts yang ingin ditampilkan pada homepage. Kemudian masuk ke Language and formatting, agar blog Anda seperti pada demo template ini pada Timestamp format pilih hanya jam/waktu (00:00).
- Kotak feedburner di bawah postingan
Cari kode script di bawah ini pada edit HTML (jangan lupa centang expand widget templates) :Keterangan :
Warna biru : ganti dengan alamat feed anda.
Warna merah : ganti dengan URL anda.
Ganti juga URL feed http://feeds.feedburner.com/blogspot/htbgh dengan URL feed Anda. - Headline News (Di bawah navigasi menu atas atau news ticker)Untuk menggantinya di dashboard pilih template kemudian klik Edit HTML jangan lupa centang expand widget templates kemudian cari dengan menggunakan control + F URL http://johnydarkmusic.blogspot.com ganti dengan blog URL anda.
Sesuai namanya template ini adalah versi kedua dari serial template Johny Darkgamer. Dengan warna dasar hitam dan hijau pada bagian navigasi menu, template ini sangat cocok untuk konten game. Fitur-fitur yang terdapat pada template ini hampir sama dengan template Johny Darkmusic, malah lebih sederhana pada hompage hanya terdapat 3 kolom sidebar yang tidak terlalu sulit untuk memasang widget yang ada disitu. Cara memasang slider pada template ini sama dengan template Johny Darkmusic, anda tinggal memasukkan kode script pada langkah nomer satu ke kotak HTML/Javascript. Demikian juga dengan kotak Feedburner yang ada di bawah postingan cara untuk menggantinya sama pada langkah nomer 4.
Kedua template ini support dengan halaman statis (static page) klik sample page yang terdapat pada navigasi menu atas. Dan juga template ini sudah dilengkapi dengan fitur threaded comment dengan fungsi reply bawaan dari blogger, anda bisa modifikasi sesuai keinginan. Kekurangan template ini belum ada fitur kotak pencari (search box), saya yakin Anda semua pasti bisa untuk menambahkan kotak pencari pada kedua template ini terserah mau memakai bawaan dari blogger atau memodifikasi sendiri.
Tutorial untuk pemasangan fitur-fitur yang ada pada kedua template diatas saya asumsikan Anda memakai blogger new interface bagi yang masih memakai old interface saya kira juga gampang dan mudah dimengerti, sampai disini dulu mas/mbak sudah larut malam selamat mencoba dan semoga bermanfaat.
Label:
Template
Jumat, 23 Maret 2012
Domain Blogspot Berdasarkan Negara
Awalnya bingung pas jalan-jalan di google nemu blog yang berhosting di blogspot tapi domainya blogspot.in ? Usut punya usut ternyata domain tersebut memang sudah di persiapkan oleh platform blogger/blogspot untuk otomatis men-redirect url ke domain yang lebih spesifik berdasarkan negara. Contoh jika kita membuka domain blabla.blogspot.com dari indonesia maka otomatis yang muncul di addressbar
Selasa, 20 Maret 2012
How To Get Iframe in URL Using Javascript
Make Iframe in URL Using Javascript ? bingung ? sama . Ok biar gak bingung apa maksudnya coba cek link berikut > http://p-cbn.blogspot.com/p/demo.html?url=http://viow0rm.blogspot.com/ . Gimana? sudah jelas maksudnya ? . Nah beberapa teman blogger menanyakan via comment blog saya tentang bagaimana sich cara membuat Live Demo seperti itu ?. Ok, di sini yang akan saya share hanya script dasarnya
Minggu, 18 Maret 2012
Membuat Recent Comment Avatar Tanpa Edit HTML
Tutorial ini sebenarnya sudah banyak sekali beredar di internet, tapi karena ada salah satu teman blogger yang menanyakan via email cara membuat komentar terbaru dengan avatar, tidak ada salahnya kalau pada malam hari ini saya akan berbagi satu lagi tutorial blog mengenai cara membuat komentar terbaru dengan avatar. Meletakkan widget recent comment akan sangat berguna jika blog yang anda kelola sudah ramai pengunjung, karena terkadang kita sulit untuk mengetahui komentar-komentar yang baru masuk. Kecuali jika pemberitahuan komentar baru atau recent comments diarahkan pada satu email yang sudah kita setting di bagian "Comment Notification Email". Jika sudah diatur, maka dengan sendirinya anda dapat membaca tiap komentar yang masuk hanya dengan membuka email.
Sebenarnya ada alternatif lain untuk mengetahui komentar baru di blog kita, yaitu dengan cara mengecek satu persatu artikel dan melihat komentar yang masuk. Apakah Anda sanggup dan punya banyak waktu untuk melakukan itu? Nah, cara yang ini tentu saja sangat merepotkan karena harus melihat satu-persatu artikel yang ada komentarnya. Untuk itu agar lebih mudah mengetahui komentar terbaru yang masuk ke blog, anda bisa menambahkan widget "Recent Commets" yang sudah disediakan blogger. Selain widget recent comments yang disediakan blogger, anda juga dapat membuat sendiri widget recent comment ini dengan menambahkan fitur avatar agar lebih memperindah tampilan widget tersebut.
Karena prolognya sudah terlalu panjang, sekarang bagaimana cara membuat widget recent commment avatar tanpa harus Edit HTML? Widget ini nantinya seperti gambar diatas, jika anda ingin melihat demonya disini(klik comment pada tab view)
- Login ke blogger dengan akun Anda.
- Di dashboard masuk ke layout
- Setelah itu anda pilih add gadget >> HTML/Javascript
- Masukkan kode-kode di bawah ini pada kotak HMTL/JavascriptKeterangan :
<style type="text/css">
ul.tb_recent_comments{list-style:none;margin:0;padding:0;}
.tb_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.tb_recent_comments li .avatarImage{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.tb_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 50,
characters = 60,
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://johnytemplate.googlecode.com/files/recentcomment.js"></script>
<script type="text/javascript" src="http://freedownloadcopasthemes.blogspot.com/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=5"></script>
Warna merah (5) : adalah jumlah komentar yang ditampilkan
Warna kuning (50) : ukuran pixel avatar
Warna hijau (60) : Jumlah karakter huruf komentar
Warna biru : ganti dengan URL blog Anda. - Terakhir save, membuat recent comment dengan avatar telah selesai.
Mudah bukan? widget ini terserah mau anda letakkan dimana saja di homepage blog. Misalnya di bagian sidebar atau footer, asalkan bisa dengan mudah dilihat oleh pengunjung blog. Widget recent comments sebenarnya adalah widget yang tidak wajib untuk sebuah blog, tapi daripada Anda kesulitan dalam mencari komentar baru yang masuk? Segitu dulu tutorial kali ini, selamat mencoba dan semoga bermanfaat.
Sebagai referensi tambahan untuk sahabat blogger semua dalam kegiatan ngeblog bisa dibaca pada dua artikel di bawah ini :
Label:
tutorial blog
Jumat, 16 Maret 2012
Dua Template Hitam Elegan Untuk Gallery dan Berita
Sebelumnya saya minta maaf dulu karena beberapa hari ini hujan dan angin yang terjadi di daerah saya membuat aktivitas online jadi terganggu. Listrik di rumah suka mati kalau ada hujan apalagi ditambah kemarin ada pohon tumbang di jalan masuk menuju rumah jadi ya harap maklum. Buat teman-teman yang belum terjawab pertanyaannya saya harap bersabar dulu. Walaupun begitu saya akan berbagi lagi kepada teman-teman blogger semua meskipun harus menuju warnet, template ini hasil dari utak-atik saya di kantor tadi, mumpung big bos lagi keluar kota. Jadilah dua template warna dasar hitam yang berbeda fungsi, template pertama khusus untuk gallery template dan template kedua tidak ada spesifikasi khusus untuk konten jadi terserah Anda semua mau diisi apa.
MARTIN TEMPLATE
Template pertama ini saya beri nama Martin Template, di design khusus untuk blog dengan konten galery template tapi jika ada mau isi dengan gellery photo juga silahkan.
- Slider Image Otomatis
Untuk menampilkan slider di homepage, cari kode berikut :numposts1 = 6;
Keterangan :
label1 = "magazine";Angka 6 adalah jumlah image yang ditampilkan pada slider, Anda bisa menggantinya sesuai dengan selera. magazine adalah label atau kategori yang ditampilkan pada slider, Anda juga bisa merubahnya sesuai kebutuhan. - Kotak feedburner di bawah postingan
Cari kode script di bawah ini pada edit HTML (jangan lupa centang expand widget templates) :Keterangan :
Warna biru : ganti dengan alamat feed anda.
Warna merah : ganti dengan URL anda. Ganti URL feed http://feeds.feedburner.com/blogspot/htbgh dengan URL feed Anda.
Tidak ada spesifikasi khusus pada template ini kalau template pertama warna dasar hitam dan kuning untuk memperindah tampilan. Blogpress free template warna dasar hitam dan biru gambarnya seperti di bawah :
Untuk pemasangan slider dan mengganti kotak feedburner hampir sama dengan template pertama, jadi tidak ada yang perlu dijelaskan lagi lebih jauh, karena pada dasarnya template ini sangat sederhana seperti pada template-template lain pada umumnya.
Kelebihan dari kedua template ini antara lain Pertama, Navigasi Menu (top menu) paling atas statis maksudnya jika anda scroll ke bawah maka navigasi menu itu akan mengikuti. Kedua lebar kolom post di home page dengan di post page berbeda. Jika anda melihat di homepage agak lebih sedikit sempit dan coba sekarang anda buka di post page, kolom postingan menjadi lebih lebar tetapi dengan sidebar yang lebih kecil. Ketiga, kedua template ini dilengkapi dengan fitur static page (halaman statis), klik sample page pada demo kedua template ini untuk melihat contoh dari static pagenya.
Terus terang saya tidak bisa membuat atau memodifikasi kotak komentar yang keren, jadi kotak komentar seperti pada template-template saya sebelumnya belum menggunakan thread comment. Silahkan modifikasi sendiri sesuai dengan selera. Banyak sekali tutorial dalam memodifikasi kotak komentar blogger di internet anda tinggal pilih sesuai keinginan.
Sepertinya itu dulu yang mau saya share pada sore hari ini, nanti kalau listrik di rumah sudah nyala kita bertemu lagi maklum ini dari warnet sepulang dari kantor. Jadi jika ada pertanyaan mengenai kedua template di atas harap sabar, tapi saya janji sebisa mungkin saya jawab, sekian dan selamat mencoba semoga bermaanfaat maaf kalau kedua template ini jelek dan kesannya asal-asalan.... happy blogging.
Label:
Template
Jumat, 09 Maret 2012
Trilogi Template Johny, Tiga Template Gratis Sekaligus
Hari ini saya akan berbagai template kepada teman-teman blogger semua tiga template sekaligus, dengan tiga model konten yang berbeda-beda tapi masih dalam satu kompisisi warna yang sama, yaitu putih dan biru. Sengaja saya buat tiga untuk memenuhi permintaan teman-teman blogger via email dan semoga berkenan. Ketiga template ini di bagian header dan footer hampir sama. dengan kombinasi warna biru dan putih dengan sedikit tambahan warna abu-abu untuk memperindah tampilan. Baiklah langsung saja berikut ini ketiga template tersebut :
Johny Papers Magazine
Template pertama ini saya desain terutama untuk untuk blog yang memiliki konten berita, dan seperti template magazine saya yang lain tidak ada fitur static page atau halaman statis. Cara pemasangan widget-widget yang ada pada template ini adalah :
- Latest PostLetaknya di sebelah kiri, fitur ini otomatis, maksudnya jika anda membuat postingan terbaru maka artikel itu akan muncul otomatis pada latest post. Cara setting agar seperti dalam demo template sebagai berikut (blogger new interface) :
Di dashboard pilih setting kemudian klik formatting and language kemudian pada timestamp format pilih hanya jam saja, karena lebar pada timestamp di latest post saya setting untuk tampilan jam (lihat demo). Untuk mengatur jumlah post yang akan ditampilkan masih pada setting, pilih post and comment >> show at most pilih berapa post yang akan ditampilkan pada kolom latest post. - Slider
Untuk mengganti image pada slider, cari kode berikut :numposts1 = 7;
Keterangan :
label1 = "kesehatan";Angka 7 adalah jumlah image yang ditampilkan pada slider, Anda bisa menggantinya sesuai dengan selera. kesehatan adalah label atau kategori yang ditampilkan pada slider, silahkan Anda ganti dengan label yang ingin ditampilkan pada slider (Ingat hurufnya harus sama dengan label yang sudah Anda buat). - Label 1, label 2 dan label 3
Letaknya di bawah banner 468 x 69 dan twitter follow. Untuk menampilkannya pada widget masukkan kode berikut pada layout >> add gadget pilih HTML/Javasxript :Keterangan :Warna biru : adalah label atau kategori yang ditampikan pada widget. Anda bisa menggantinya dengan label anda sesuaikan dengan kebutuhan.Warna merah : Ganti URL dengan URL blog anda. - Label 4 dan label 5
Masukkan kode di bawah ini :Warna merah : adalah label atau kategori yang ditampikan pada widget. Anda bisa menggantinya dengan label anda sesuaikan dengan kebutuhan.Warna biru : Ganti URL dengan URL blog anda. - Tab view menuLetaknya pada sidebar sebelah kanan atas, Anda tinggal membuat 4 widget yang ingin dipasang otomatis akan menjadi tabber sidebar, saya sarankan untuk diberi judul pada widget tersebut.
- Twitter WidgetUntuk membuat twitter widget seperti pada demo masukkan kode di bawah ini pada kotak HTML/Javascript :Ganti Download Disini dengan twitter username anda.
- Untuk mengganti iklan atau adsense yang ada di bawah postingan disamping related articles pada Edit HTML (centang expand widget templates) cari kode berikut :Ganti kode warna biru diatas dengan kode script iklan Anda.
Template kedua dari trilogi template Johny ini saya beri nama Gallery Johny, sesuai dengan namanya template ini khusus untuk blog yang berisi gallery template maupun theme. Template ini juga tidak ada fitur static page (halaman statis), tidak ada fitur khusus yang terdapat pada template ini yang perlu diperhatikan adalah cara dalam membuat postingan agar seperti terlihat pada blog demo.
- Untuk membuat postingan pastikan Anda dalam posisi HTML (bukan compose). Di bawah ini adalah contoh dalam membuat postingan pada template Gallery Johny ini :Perhatikan kode script yang saya beri warna diatas :Warna hijau : adalah URL gambar yang harus anda ganti. Setalah gambar anda upload masukkan URL gambar pada kode yang berwana hijau.Warna biru : adalah URL blog demo
Warna merah : URL untuk download - Untuk menenampilkan widget share dan subscribe yang ada pada sidebar kanan atas, masukkan kode berikut pada kotak HTML/Javascript :Keterangan :Tulisan yang saya cetak dengan huruf tebal silahkan Anda ganti dengan ID dan username Anda.Tulisan warna merah (Download Disini) adalah ID feedburner blog demo, ganti dengan ID feedburner anda.
- Untuk membuat popular post seperti pada demo, masuk ke layout >> add gadget kemudian pilih popular posts. Disini yang harus Anda centang hanya thumbnail, biarkan snippet kosong.
Template ketiga ini sangat sederhana, yang ada pada sidebar kanan hampir sama dengan Johny Papers Magazine. Pada tabber sidebar Anda tinggal memasukkan 4 widget pada sidebar. Untuk twitter widget cara pemasangannya sama dengan template Johny Papers Magazine diatas. Sedangkan untuk mengganti feedburner yang terdapat di bawah postingan, cari kode script di bawah ini pada edit HTML (jangan lupa centang expand widget templates) :
Warna biru : ganti dengan alamat feed anda.
Warna merah : ganti dengan URL anda.
Itu tadi tiga template yang saya share hari ini, jika ada yang kurang jelas dalam pemasangan widget silahkan tinggalkan pesan Anda pada kotak komentar di bawah. Selamat mencoba dan semoga bermanfaat, maaf kalau template-template itu kurang berkenan karena kemampuan saya dalam membuat template masih segitu beda sama master-master blogger lain yang udah jagoan.... hehehehehehe
Sebagai referensi tambahan untuk sahabat blogger semua dalam kegiatan ngeblog bisa dibaca pada dua artikel di bawah ini :
Sebagai referensi tambahan untuk sahabat blogger semua dalam kegiatan ngeblog bisa dibaca pada dua artikel di bawah ini :
Label:
Template