Membuat Komentar Admin Berbeda Dengan Pengunjung Blog

imageKalau kita berkunjung ke beberapa blog terkadang kita melihat daftar komentator suatu postingan dan mendapatkan komentar admin atau pemilik blog tampak berbeda dengan komentar pengunjung. Sebagian template telah menyediakan fitur ini sedangkan lainnya harus dimodifikasi lagi.

Nah bagi anda yang templatenya belum memiliki fitur tersebut berikut trik membuat komentar pemilik blog berbeda dengan pengunjung:

Membuat Background Pada Teks Area

Anaa pernah posting cara membuat teks area, apa itu teks area? lihat aja lagi postingan itu disini.

Kali ini cara membuat agar teks areanya memiliki background dengan cara menambahkan kode berikut:

<div style="overflow: auto; width: 500px; height: 100px;
background-color: #FFCCFF; text-align: justify; padding: 5px;
border: 2px solid #FF3300;">Letakkan kalimat yang ingin ditampilkan pada teks area disini</div>

Cara Membuat Background Pada Titel Footer

Melengkapi postingan sebelumnya. Berikut langkah langkah membuat background pada titel atau judul footer seperti pada contoh gambar berikut atau lihat
disini dan disini

membuat background titel footer

membuat background titel footer

Membuat background pada titel atau judul footer

Membuat background Pada Judul Sidebar

Ingin mengganti background pada judul atau titel sidebar seperti contoh dibawah ini?
mengganti background pada judul atau titel sidebar< mengganti background pada judul atau titel sidebar<






Berikut cara mengganti background pada judul sidebar, tutorial ini sudah anaa praktekan diblog anaa disini dan disini

Membuat Background Pada Judul Postingan

Postingan anaa kali ini masih tentang modifikasi background pada template kalau sebelumnya trik membuat background pada judul sidebar sekarang anaa ingin berbagi trik sederhana lagi, bagaimana membuat background pada judul atau titel posts yang contohnya bisa dilihat pada gambar berikut atau aplikasi nyatanya disini
background pada titel posts
Mudah saja, berikut langkah langkah membuat background pada titel posts:

Membuat Efek Stabilo/ Background Tulisan

Kalau sebelumnya anaa pernah membuat postingan cara membuat background pada postingan, kali ini anaa ingin sharing lagi cara membuat efek stabilo atau cara membuat background pada tulisan. Seperti ini:
Contoh tulisan Dengan Efek Stabilo

Contoh tulisan Dengan Efek Stabilo
Bagaimana cara membuatnya? Mudah saja hanya dengan menambahkan code berikut

    <span style="background-color:#FFFFB3;"> Disini letak tulisan yang ingin diberi efek stabilo </span>

Untuk menambahkan code tersebut anda harus dalam edit HTML.
Untuk melihat code warna dapat merujuk disini

Merubah Background Postingan

Suatu waktu mungkin kita bosan dengan background postingan kita yang warnanya putih atau hitam polos, atau mungkin sekedar ingin mencoba bereksperimen kecil maka kita boleh mencoba merubah backgroun postingan dengan cara-cara berikut ini, karena pengetahuaan yang baru pasti sangat menyenangkan. Nah cara membuat backgroun postingan yang saya tahu saat ini baru dua cara...

    * Yang Pertama untuk membuat background warna, caranya...

Mengganti Background Blog

Lansung aja ya!

    * Mengganti Warna Background
      Untuk template minima klasik :

   1. Sign in
   2. Klik menu Template
   3. Klik menu Edit HTML
   4. Copy seluruh kede Template, paste pada notepad lalu save untuk backup data
   5. Rubahlah kode warna asli template dengan kode warna yang sobat sukai (yang warna merah adalah kode yang harus di rubah) :

Membuat BlogRool

Blogroll adalah tempat menyimpan link address milik orang lain pada blog atau website kita.

BlogRool ini gunanya untuk menghemat tempat pada blog pada saat daftar link kita sudah banyak dan menyesakkan body template blog. Ada beberapa cara yang saya tahu untuk membuat blogrool.

Yang pertama seperti ini: Blogroll dengan menu dropdown:

Membuat Scroll Pada Daftar Komentar (New)

image

Postingan ini untuk menjawab pertanyaan ukhty narti pada trik membuat scroll pada daftar komentar pertama seperti terlihat pada image diatas. jadi perbedaannya dengan trik sebelumnya kolom untuk menuliskan komentar berada diluar daftar komentar. Untuk hasil atau contohnya seperti daftar komentar pada blog ini

Cara Membuat Scroll Pada Daftar Komentar

imageBeberapa waktu lalu, beberapa postingan anaa mendapatkan banyak komentar hingga puluhan (belum sampai ratusan nie?) Alhamdulillah apresiasi yang indah dari rekan-rekan sahabat blogger. Tapi rasanya kurang nyaman juga melihat sebuah halaman dibuka dan daftar komentarnya panjang sekali, beberapa kali blogwalking dan melihat disebagian blog sahabat lainnya ada yang daftar komentarnya memakai scroll, anaapun tertarik untuk membuat hal serupa itung itung hemat halaman.

Cara Membuat Menu Scrolling

Dengan membuat menu scroll untuk menyimpan catatan kita, link, atau banner akan menghemat tempat pada blog kita. Apa menu scroll itu? Baiknya langsung saja liat contoh dibawah ini!

      Cara membuat related post

      Ngeblog offline tanpa terhubung keinternet

      Mengganti Read More Dengan Image

      Cara membuat Recent Post

 

Membuat Cursor Bertabur Bintang

Banyak cara yang dibuat oleh setiap blogger untuk membuat tampilan blognya terkesan cantik, unik dan macam-macam deh. Diantaranya dengan modifikasi template yang sudah ada, memasang ragam widget dan ragam aksesoris blog termasuk mengganti tampilan cursor. pernah lihat suatu blog dengan cursor bertabur bintang? Pingin mencobanya? Mudah kok, ikuti langkah-langkah berikut:
Membuat cursor bertabur bintang

Cara Membuat Link Memiliki Ragam Efek Menarik

Bingung mau ngasih judul apa, maksud anaa jika Ingin link tersentuh pointer menjadi huruf besar, bekedip kedip warna pelangi dan backgroundnya seperti kembang api atau bintang bertaburan (contohnya seperti di blog ini).
Berikut cara buatnya:

Membuat Link Berwarna Pelangi

Ingin membuat link pada blog anda berkedip dan berwarna pelangi ketika tersentuh pointer? Caranya sangat mudah

    * Dalam keadaan loggin,
    * Masuk pada menu template,
    * Klik Edit HTML,
    * Cari kode <head>,

Kemudian copy code berikut dan paste tepat dibawah code tadi

    <script language='javascript' src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/LinkPelangi.js'/>.

    * Terakhir simpan template.

Membuat Effect Hover Pada Image Dengan CSS

Postingan kali ini saya hanya ingin mengetengahkan trik sederhana membuat effect hover pada image dengan bantuan CSS. Seperti apa effect yang terlihat, silahkan sorotkan pointer pada sample image dibawah ini:

Nah cara menambahkan effect hover pada image untuk template blogger sebagai berikut:

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML

Cara Membuat Efek Marquee (Teks Berjalan)

Berikut Beberapa macam efek marque atau teks berjalan:

    * Contoh marque dasar

Kalimat Anda



caranya dengan menambah code berikut:

    <marquee>Kalimat Anda</marquee>

    * Contoh marquee yang berjalan dari kiri ke kanan

Merubah Read More Dengan Icon Image

Setelah pada postingan sebelumnya kita membahas Cara membuat read more atau baca selengkapnya. Kali ini saya ingin berbagi lagi dengan pengunjung, kali ini cara merubah atau mengganti read more dengan image agar tampilannya lebih menarik.

Yang pertama harus disiapkan tentu adalah sebuah icon image seperti ini: th_readmore atau seperti ini:

Membuat Read More Atau Baca Selengkapnya

Postingan kali ini tutorial membuat read more atau baca selengkapnya, Karena ada ade yang nanya tuh di kolom shoutmix,

dien: Kak, gimana sih caranya biar postingan tidak tampil seluruhnya? Yang ada "baca selengkapnya..." gitu...

Dari pada dijawab personal aja mendingan dibuat postingan biar bisa juga jadi referensi bagi yang lain paling tidak untuk jagoan-jagoan kecil saya nanti toh? InsyaAllah. Apalagi awal ngeblog saya juga bingung, mau tampilin postingan tiga aja dihalaman depan dah panjaaaang banget, pusing khan liatnya? Fatalnya gara-gara masalah sepele itu saya sempat mandek nulis, setelah dapat caranya template saya malah rusak karena salah memahami. Belajar dari pengalaman saya tuliskan tutorial ini, pengalaman guru paling berharga bukan?

Saya Buat Blog Ini Via Hp

Ketika demam ngeblog menyerang orang orang, sayapun ingin terjangkiti tapi sayang hasrat terbentur sarana yang terbatas, disini saya tidak menemukan warnet yang menyediakan ruangan khusus bagi wanita.

Sampai kemudian saya memiliki Hp dengan jaringan gprs yang dapat mengakses internet, saya mulai ngotak ngatik, dan masyaAllah saya takjub dengan hasilnya. Hp saya ternyata tidak saja terbatas pada fungsinya sebagai alat komunikasi, tapi memiliki fungsi beragam yang luar biasa. Diantaranya, ya untuk mewujudkan satu impian kecil saya diatas tadi.

Ngeblog Offline Tanpa Terhubung Ke Internet

Mungkin teman-teman sudah pernah mendengar atau bahkan sudah tak asing lagi dengan Windows Live Writter, tapi saya yakin tidak menutup kemungkinan ada diantara pengunjung yang belum mengetahuinya, maka saya memandang perlu untuk mempublikasikan hal ini dalam postingan saya kali ini, postingan yang saya ketik menggunakan aplikasi yang akan kita bahas saat ini.

Cara Membuat Menu dTree

Kali ini saya ingin berbagi lagi trik membuat menu dtree. Apakah menu dtree itu? Menu dtree yang saya maksud adalah menu yang menyarupai menu Windows explorer seperti pada image berikut:
cara membuat menu dtree
Menu seperti ini bisa juga kita tampilkan pada web atau blog kita seperti yang terlihat pada image berikut atau bisa lihat langsung demonya diblog saya disini
image
Nah ingin membuat menu dtree seperti itu? Caranya mudah saja hanya dalam beberapa langkah:

Membuat Sebuah Thumbnail Dengan Caption (Keterangan) Menggunakan Simple JQuery

 Thumbnail galery with heading and caption with jquery

View Demo

Tutorial kali ini kita akan belajar membuat image dengen caption (keterangan) menggunakan script simple JQuery, turorial ini saya pelajari dari Queness. Disini saya ingin berbagi kepada teman-teman cara menerapkan jquery pada template blogger.

How To Add Featured Auto Posts Slider Using JQuery To Blogger

menu slider/ featured auto posts slider

Sebagaimana janji saya sebelumnya untuk segera berbagi setiap ilmu penerapan JQuery untuk template blogger yang baru saya dapatkan, maka postingan ini masih akan mengetengahkan tutorial JQuery dengan tema yang serupa dengan tutorial sebelumnya pula, yaitu modifikasi featured posts atau content slider (menu slider). Agar teman-teman juga memiliki banyak pilihan, bahkan bagi teman yang sudah bisa mengedit CSS bisa juga memodifikasi kembali tampilan featured post ini sesuai kreatifitas masing-masing.

Membuat Sebuah Simple Featured Content SlideShow Menggunakan JQuery

menu slider simple menggunakan JQuery untuk template blogger
View Demo

InsyaAllah postingan kali ini, kembali saya ingin mengetengahkan tutorial penerapan JQuery pada template blogger. Berbeda dari tutorial-tutorial sebelumnya dimana source saya peroleh dari web-web designer luar, maka tutorial kali ini lahir dari hasil pengamatan pada sebuah free blogger template yang dikenal dengan Elegant Dashboard, tidak jauh berbeda dengan lahirnya tutorial terdahulu dengan judul menu slider versi 2 yang juga saya pelajari dari free blogger template Zinmag Primus. Bagi yang belum pernah mencoba membuat menu slider versi 2 seperti screenshot berikut, silahkan klik disini, atau silahkan lihat dulu demo featured content slider post using JQuery/ menu slider versi 2 menggunakan JQuery disini
menu slider simple menggunakan JQuery untuk template blogger
Nah sekarang langsung pada tutorial, cara membuat simple content slideshow menggunakan JQuery
1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
2. Tambahkan Script JQuery berikut sebelum tag

Membuat Featured Posts (Menu Slider) Dengan JQuery

featured post/ menu slider  Untuk Lihat Live Demo klik disini atau disini

Dalam desain web site atau blog banyak cara untuk membuat tampilan featured content atau post nampak profesional dan cantik dengan bantuan JQuery. Sehingga menambah jumlah ragam fetured content slider atau slide show dalam dunia desain. Sebagai peminat JQuery InsyaAllah saya akan sering mengetengahkan tutorial JQuery yang baru saya dapatkan untuk dibagi kepada teman-teman dan pengunjung blog ini.

Cara Membuat Menu Slider Versi 2 Menggunakan JQuery

image
Berikut anaa coba berbagi trik membuat menu slider versi dua. Mengapa versi dua? Karena sebelumnya anaa pernah posting trik membuat menu slide atau tab view slide versi 1 yang contonya bisa dilihat pada halaman awal (home) pada sidebar kanan blog ini.
Cara membuat menu slider versi 2

Featured Content Slider Using JQuery

featured content slider using jquery   

    View Demo



Banyak hal yang bisa kita dapatkan dari dunia maya ini, baik yang positif ataupun negatif.. tinggal bagaimana kita memfilter diri untuk menyaring yang baik dan postif. Saya merasakan hal ini pada diri saya, saat berselancar di dunia maya, blog walking keblog teman-teman, bahkan sekedar melihat-lihat galery template, theme atau layout web site, saya menemukan ilmu dan informasi baru bahkan terkadang  inspirasi untuk postingan yang akan saya publikasikan diblog ini sampai rancangan planning yang ingin saya lakukan dimasa mendatang.

Membuat Tabber Tab Dengan Jquery #2

Postingan sebelumnya saya pernah mengetengahkan cara membuat tabber tab atau tab view dengan bantuan JQuery part 1. Namun tabber tab tersebut memiliki beberapa keterbatasan, diantaranya tidak dapat menambahkan beberapa widget umum seperti arsip blog, label, kecuali dengan memasukkan link widget yang saya sebutkan tadi dengan cara manual. Sedangkan tabber tab dengan JQuery part 2 ini, kita dapat menembahkan fitur atau widget tadi dengan mudah, cukup dengan mendrag/ memindahkan widget kesidebar.

Cara Membuat Page Peel Effect Untuk Blogger Dengan JQuery

Salam sobat blogger. Pada postingan kali ini saya ingin berbagi lagi cara membuat page peel effect untuk template blogger. Apa yang dimaksud dengan page peel effect? Sobat pernah mengunjungi suatu blog dan ketika krusor atau pointer menunjuk kesudut kanan atas blog, tiba-tiba halaman tersebut terlipat? Seperti contoh image berikut:

Multi Level Drop-Down Menu Dengan CSS dan JQuery

Multi level drop-down menuMulti level drop-down menu

View Demo

Pada postingan saya sebelumnya yang berjudul 30 tab menu navigasi horizontal, seorang pengunjung bertanya pada kolom komentar cara membut menu drop-down. Alhamdulillah setelah search digoogle, saya temukan tutorial membuat multi level drop-down menu dengan CSS dan JQuery untuk web dari Dinamic Drive. Setelah saya modifikasi tutorial ini bekerja dengan baik pula pada template blogger. Contohnya bisa lihat pada diatas atau free blogger template dalam pengembangan saya disini

Cara Memasang Widget Sexy Sosial Bookmarks

Postingan kali ini merupakan request dari seorang pengunjung baru blog ini. Saya kira dari sekian pengunjung dan penanya yang pernah merequest tutorial, inilah satu penanya yang menurut saya punya cara yang unik mengajukan request. kenapa saya bilang unik?
Berikut pertanyaan yang ditinggalkan sang penanya:

Daftar Kode Warna Dengan Tabel

Berikut adalah tabel kode warna sebagai referensi sobat dalam mengedit atau mendesain template blog . Cara untuk mengetahuai kode warnanya, sobat klik aja pada tabel warna pilihan sobat maka secara otomatis kodenya akan ditampilkan pada kolom persegi dibawah tabel warna, disamping tulisan "kode warna yang terpilih"!

Cara Memasang Widget Top Komentator

Saya kira akhir-akhir ini keasyikan ngotak ngatik CSS dan desain template hampir melupakan saya bahwa masih ada beberapa widget blogger yang belum saya posting.  Diantaranya widget top komentator yang ingin saya ketengahkan kali ini tutorial memasangnya pada template blogger.

Cara Membuat Scroll Pada Related Post

Awalnya alasan membuat scroll pada artikel terkait/ related post diblog ini karena pada postingan anaa cara membuat scroll pada daftar komentar sebelumnya bermaksud agar bisa dikit menghemat halaman dan tampilan lebih apik tidak dijejali dengan daftar komentar yang panjang.... tapi komentar dari sahabat blogger (ukhty Narti) yang menanyakan bagaimana agar daftar komentar tidak masuk dalam scroll membuat anaa berpikir kembali. Benar juga ada baiknya kolom untuk menuliskan komentar tidak masuk dalam scroll selain justru lebih apik, sangat membantu sahabat blogger yang masih baru (padahal asli anaa satu diantaranya) untuk tidak bingung saat ingin menuliskan komentarnya harus nyari nyari, apalagi kalau belum ngerti scroll? Karena kolomnya 'sembunyi' didalam scroll & terletak paling bawah dari daftar komentar.

 

Cara Membuat Related Post (Tulisan Terkait)

Related posts adalah tulisan terkait atau artikel yang bersangkutan. Jadi saat kita menampilkan suatu artikel dengan adanya widget related posts ini, pembaca atau pengunjung blog anda akan mudah mendapatkan informasi tentang artikel anda yang masih memiliki keterkaitan atau masih dalam categori yang sama karena related posts ini letaknya tepat dibawah postingan. Selain memudahkan pembaca, juga sebagai satu sarana promosi tulisan anda juga kali ya?!

nah berikut tutorial untuk Membuat Related Post atau Artikel Yang Berhubungan

Membuat Recent Comment (Komentar Terbaru)

membuat widget recent comment atau komentar terbaru Fungsi dari recent comment atau komentar terbaru ini, agar kita dapat mengetahui siapa yang baru saja berkomentar dan dipostingan kita yang mana pengunjung meninggalkan komentarnya.

Nah berikut tutorial untuk membuat recent comment atau komentar terbaru:

1. Login ke blogger lalu pilih menu "Layout"
2. Kemudian copy script berikut ini :

    <script style="text/javascript" src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/recents.comments.js"></script>
    <script style="text/javascript">
    var numcomments = 8;
    var showcommentdate = true;
    var showposttitle = true;
    var numchars = 100;
    var standardstyling = true;
    </script>
    <script src="http://yourblog.blogspot.com"/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

- Angka 8 merupakan jumlah komentar yang mau ditampilkan.
- Ganti http://yourblog.blogspot.com dengan nama blog anda!
3. Untuk menampilkanya di sidebar maka pilih "Add a Gadget --> HTML/Javascript" Lalu masukkan script diatas kedalam kotak yg disediakan.

5.Simpan! Selesai, lihat hasilnya diblog anda!

Cara Membuat Recent Post (Postingan Terbaru)

Setelah pada postingan sebelumnya saya menjelaskan cara membuat recent comment maka postingan kali ini adalah bagaimana cara membuat recent post atau postingan terbaru. Ya langsung saja:

    * Login pada blogger.
    * Klik Layout pada Dashboard ,lalu Page Element.
    * Klik Add a Gadget.
    * Pilih HTML/Javascript
    * Masukkan kode dibawah ini dengan cara copy dan paste dan beri judul pada kolom Title.

Cara Memasang Translate Pada Blog

Memasang translete pada blog sangat perlu karena mungkin saja ada pengunjung dari negara asing yang nyasar keblog anda, tapi yang harus diperhatikan agar tidak terjadi kesalahan translate maka blog anda harus menggunakan bahasa yang resmi, bukan bahasa pasaran atau gaul.

Nah caranya:

Merubah Posisi Sidebar & Main Pada Template Blogger

InsyaAllah kali ini saya ingin berbagi trik mudah bahkan sangat sederhana, yang saya temukan hasil dari otak-atik CSS saat mencoba mendesain template baru. Yaitu cara merubah posisi sidebar dan main (kolom utama tempat postingan) pada template blogger, sebagai contoh tampilan elemen halaman template default minima seperti image berikut:

Merubah Posisi Sidebar Dan Main Pada Template Blogger

Menambahkan 4 Kolom/ Elemen Halaman Baru Diatas Footer

Untuk menepati janji saya pada postingan sebelumnya dengan tema merubah posisi sidebar dan main pada template blogger, saya insyaAllah akan mengetengahkan tutorial menambahkan halaman baru diatas footer.

Sebelumnya saya sudah pernah membahas tutorial serupa tapi tak sama, karena elemen yang ditambahkan pada postingan terdahulu hanya tiga kolom, sekarang kita akan belajar bagaimana menambahkan 4 kolom tambah gadget diatas footer seperti gambar berikut: