Diberdayakan oleh Blogger.
Latest Post
19.55
Spesifikasi
Hanya ada 5 Unit, Spedup pad phone tb-722. Unit Baru, Segel, Siapa cepat dia dapat. Hanya 750rb. Hub. Hadi Wibowo : 085810450507 @Hadi_wibowo
Obral Spedup pad phone tb-722 - SOULD OUT
Written By Bergerak dan Terus Bergerak on Rabu, 30 Desember 2015 | 19.55
Detail Produk
OS : Android 4.4 KitKat
Prosesor : MTK 8312 Dual Core 1.3 GHz
Display : 7 Inchi Capacitive Multitouch Touchscreen, 1024 x 600 px
Kamera : 5 MP dan 2 MP
Memori : 8 GB, 512 MB RAM
OS : Android 4.4 KitKat
Prosesor : MTK 8312 Dual Core 1.3 GHz
Display : 7 Inchi Capacitive Multitouch Touchscreen, 1024 x 600 px
Kamera : 5 MP dan 2 MP
Memori : 8 GB, 512 MB RAM
Deskripsi Produks
SpeedUp menghadirkan tablet lokal buatan anak bangsa, SpeedUp Pad
Phone 2. Tablet ini mengusung tema Tablet Telepon Nyaman Dalam
Genggaman. Tentu saja dengan bobot 271 gram, tablet ini begitu nyaman
untuk dibawa. Mengenai performa, dengan prosesor Dual Core 1.3 GHz
membuatnya lebih bertenaga dari single core tablet. Didukung dengan
Android 4.4 KitKat membuat tablet ini semakin responsive. SpeedUp Pad
Phone 2 tampil dengan desain yang kompak dalam genggaman. Dibalut dengan
menggunakan material yang berkualitas pada covernya memberikan tampilan
yang premium. Tablet ini telah didukung dengan jaringan 2.5 G untuk
browsing internet dan untuk komunikasi melakukan panggilan dan sms
tablet ini dilengkapi dengan dua slot sim card GSM. Anda pun juga dapat
menggunakan WiFi untuk berselancar di dunia maya. Anda juga dapat
mentransfer data dengan mudah melalui kabel USB dan Bluetooth untuk
berbagai. Dilengkapi dengan kamera belakang 5MP dan depan 2MP membuat
Anda tetap eksis di social media.
Spesifikasi
- Model
TB-722 - Network Band
GSM / GPRS / EDGE - GSM
850/900/1800/1900 MHz 237 kbps DL, 188 kbps UL - OS
Android 4.4 KitKat - Processor
MTK 8312 Dual Core 1.3 GHz - Display
7 Inchi Capacitive Multitouch Touchscreen, 1024 x 600 px - TP
Capacitive Multi Touch Panel - Camera
Front 2 MP, Rear 5 MP - Wi-Fi
802.11b/g/n - Bluetooth
4.0 - Sensors
Accelerometer - ROM
8 GB - Memory Expansion
MicroSD Card, Up to 64GB - RAM
512 MB - USB Connector
Micro USB - Charger Connector
MicroUSB - USB
USB 2.0 - Power
Rechargeable battery, 2200mAh - Dimension
188 mm x 108 mm x 10.4 mm - Weight
271 g
Label:
Obral
03.39
Anakku, izinkan bunda menuturkan sebuah kisah.Umar bin Abdul Aziz, seorang khalifah yang zuhud, senang beribadah dan berjihad, suatu kali pernah berkata. "Sesungguhnya jiwaku adalah jiwa yang mempunyai banyak cita-cita".
Hikmah Yang dapat diambil dari kisah inspirasi diatas :
Anakku Sayang ....Bercita-Citalah
Written By Bergerak dan Terus Bergerak on Jumat, 24 April 2015 | 03.39
Anakku, izinkan bunda menuturkan sebuah kisah.Umar bin Abdul Aziz, seorang khalifah yang zuhud, senang beribadah dan berjihad, suatu kali pernah berkata. "Sesungguhnya jiwaku adalah jiwa yang mempunyai banyak cita-cita".
Dia pernah bercita-cita menjadi amir, dia telah mendapatkannya. Dia bercita-cita menjadi seorang khalifah, juga telah didapatkannya. Sekarang, cita-citaku adalah surga, dan aku berharap mendapatkannya."
Lembar sejarah membuktikan, orang-orang besar umumnya memiliki cita-cita tinggi. Anakku, bukan hanya itu, mereka berusaha mewujudkan apa yang mereka cita-citakan dengan segenap upaya dan kesungguhan, dan umumnya mereka mampu meraih cita-cita yang telah mereka canangkan.
Bukan hanya kisah Umar bin Abdul Aziz yang akan bunda ceritakan. Ada kisah lain, tentang empat pemuda dengan cita-cita mereka. Suatu kali, Abdullah bin Umar, Urwah bin Zubair, Mushab bin Zubair dan Abdul Malik bin Marwan ra. berkumpul di pelataran ka'bah. Mushab yang bicara pertama kali dengan mengatakan,"Bercita-citalah kalian." Sahabat yang enggan mengatakan cita-citanya, meminta Mushab terlebih dulu menyampaikan cita-citanya.
Mushab bertutur,"Aku ingin kaum muslimin bisa menaklukkan wilayah Irak, aku ingin menikahi Sakinah puteri Husein dan Aisyah binti Thalhah bin Ubaidillah." Tahukah anakku, apa yang kemudian hari berlaku atas Mushab? Allah SWT memperkenankannya memperoleh apa yang ia cita-citakan.
Urwah bin Jubair kemudian menceritakan harapannya. "Aku ingin menguasai ilmu fikih dan hadits." Subhanallah, Urwah kemudian dikenal sebagai salah satu tokoh ulama fikih dan banyak meriwayatkan hadits.
Abdul Malik bin Marwan mengungkapkan cita-citanya. Ia menyatakan keinginannya untuk menjadi khalifah. Dan anakku, Abdul Malik bin Marwan kemudian menjadi khalifah di masa Daulah Umawiyah yang dikenal sebagai khalifah yang memiliki ilmu yang luas dan taat beribadah.
Terakhir, Abdullah bin Umar menegaskan cita-citanya. Tahukah anakku, apa cita-cita Abdullah bin Umar? Cita-citanya adalah, surga!
Anakku sayang, ambillah hikmah terbaik dari kisah itu. Apa yang menjadi cita-cita mereka? Cita-cita yang tinggi dan besar. Apakah engkau mengetahui, bagaimana mereka bisa mencapai cita-cita itu? Mereka mencapainya dengan perjuangan dan pengorbanan yang sungguh-sungguh diiringi dengan mental yang luar biasa. Bukan dicapai dengan menumbuhkan keminderan, kekalahan bahkan keputusasaan. Kekuatan tekad yang mereka miliki disertai dengan kerja keras juga doa kepada Allah SWT membuat mereka mampu mencapai apa yang mereka inginkan.
Perhatikan apa yang sejarah tulis mengenai perjuangan Umar bin Abdul Aziz. Kala diangkat menjadi pemimpin, ia tanggalkan kemewahan-kemewahan yang pernah dinikmatinya. Ia ganti kemewahan itu dengan segenap kesederhanaan. Ia bahkan meminta keluarganya untuk turut serta hidup dalam kesederhanaan itu. Yunus bin Syuaib bahkan berkata, "Sebelum menjadi khalifah, tali celananya masuk ke dalam perutnya yang besar. Namun, ketika dia menjadi khalifah, dia sangat kurus. Bahkan jika saya menghitung jumlah tulang rusuknya tanpa menyentuhnya, pasti saya bisa menghitungnya." Bukan hanya itu, Umar bin Abdul Aziz juga dikenal sebagai pemimpin yang menolak suap dalam bentuk apapun. Subhanallah.. Allah SWT memperkenankan Umar bin Abdul Aziz memperoleh keinginannya untuk menjadi khalifah dan Umar menjalankannya dengan penuh kesungguhan, perjuangan dan pengorbanan untuk menngapai cita-cita yang lain, surga!
Karena itu, anakku, bercita-citalah! Pancangkan cita-citamu setinggi mungkin. Iringi ia dengan kesungguhan, perjuangan dan pengorbanan untuk menngapainya. Semoga Allah SWT merahmatimu dengan memperkenankan cita-cita itu terwujud.
Bercita-citalah! Bukan hanya untuk duniamu, tapi juga untuk akheratmu. Rasulullah bersabda, "Dan jika kalian meminta kepada Allah, maka mintalah surga firdaus, sebab dia adalah surga yang paling tinggi." Anakku, tahukah engkau apa cita-cita seorang Rabiah bin Kaab? Cita-citanya adalah, menemani Rasulullah di surga!
-satu episode dalam Menikmati Peran Ibu-
Kisah inspirasi ini ditulis oleh Cahaya Afiati dalam situs eramuslim.com
Hikmah Yang dapat diambil dari kisah inspirasi diatas :
- Milikilah cita-cita, kau tak pernah tahu bagaimana Tuhanmu kan mengabulkan cita-citamu.
- Ikhtiar mengejar cita-cita, dan tawakkal kepadaNya
- Jangan berputus asa dalam mengejar cita-citamu.
Label:
artikel inspirasi
21.41

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


<div style='overflow:auto; width:ancho; height:300px;'> <dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='owner-Body'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</div>
Jangan lupa simpan template!
Membuat Scroll Pada Daftar Komentar (New)
Written By Bergerak dan Terus Bergerak on Senin, 08 September 2014 | 21.41
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
- Log in ke blogger=> pada dasbor=> klik tata letak=> edit HTML=> Expand Template Widget
<dl id='comments-block'>Untuk memudahkan gunakan tab CTRL+f
- Sisipkan kode berikut di atas kode tadi:
<div style='overflow:auto; width:ancho; height:400px;'>
- Scroll kebawah sampai anda temukan kode </dl> atau gunakan lagi tombol ctrl+f untuk mencari
- Setelah dapat letakkan kode berikut setelahnya
</div>
- Simpan template.
<div style='overflow:auto; width:ancho; height:300px;'> <dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='owner-Body'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</div>
Jangan lupa simpan template!
Label:
Blogger Tutorials
21.09
Jika kita mengotak-atik atau mengedit HTML blog kadang2 akan mengalami kesulitan, apalagi bagi yang masih agak pemula. Entah itu gak bisa nemu kode yang mau diedit lah, gak bisa disimpan karena error lah, Ada pesen error yang gak jelas lah, dan lah-lah yang lain, ya to...??? Nha trik dan tips kali ini akan mencoba gimana cara untuk mengatasi atau setidaknya mengurangi masalah "lah-lah" yang kadang2 atau sering terjadi tersebut.
Berikut ini beberapa tips untuk edit HTML bogger:
1. Backup Template
2. Memberi Tanda Centang pada Kotak "Expand Widget Template"
3. Tips Mempermudah Pencarian

4. Tips Menghadapi Error Yang Muncul

Mungkin untuk masalah mengahadapi berbagai pesan error ini akan kita bahas lebih lanjut diepisode yang lainnya yang lebih spesifik.
Yak mungkin itu aja dulu tips-tips dalam pembahasan kali ini. Kita jumpa lagi di tips-tips berkutnya.
Tips Mengedit HTML Blogspot
Jika kita mengotak-atik atau mengedit HTML blog kadang2 akan mengalami kesulitan, apalagi bagi yang masih agak pemula. Entah itu gak bisa nemu kode yang mau diedit lah, gak bisa disimpan karena error lah, Ada pesen error yang gak jelas lah, dan lah-lah yang lain, ya to...??? Nha trik dan tips kali ini akan mencoba gimana cara untuk mengatasi atau setidaknya mengurangi masalah "lah-lah" yang kadang2 atau sering terjadi tersebut.1. Backup Template
Membackup template ini penting karena jika terjadi hal-hal yang tidak dinginkan, misalnya blog jadi rusak maka kita bisa membuatnya seperti sediakala (sebelum rusak) jika kita sebelumnya sudah membackup template. Cara membackup template ini mudah. Cukup klik pada link "Download Full Template" lalu simpan file template di komputer kita. Kalo terjadi kesalahan yang tidak bisa kita atasi, kita tinggal upload aja file template tersebut.
2. Memberi Tanda Centang pada Kotak "Expand Widget Template"
Ini yang kadang2 dilupakan para "editor". Kalau kotak "Expand Widget Templates" tidak dicentang maka kode2 yang dicari kemungkinan tidak ditemukan. Tapi kadang2 hal ini tidak perlu dilakukan tergantung dari petunjuk tutorialnya. Makanya perhatikan baik2 tutorialnya kalo mau Edit HTML blog.
3. Tips Mempermudah Pencarian
Untuk mempermudah pencarian kode yaitu dengan meng-copy dulu kode yang mau dicari kemudian tekan "Ctrl+f" lalu masukkan kode yang dicopy tadi kedalam kotak yg muncul. Kalo misalkan kode yang dicari tidak muncul maka cobalah mencari sebagian dari kode tersebut. Misal mau mencari kode <p><data:post.body/></p> jika tidak ketemu maka cb carilah sebagiannya atau seperti ini data:post.body kalau sudah ketemu maka klik tombol next untuk melihat apakah ada kode lain yang sama untuk memastikan kode yang dikehendaki. Tapi tips ini sepertinya sulit dilakakukan jika menggunakan browser "Chrome" paling mudah jika menggunakan "Mozilla Firefox".

4. Tips Menghadapi Error Yang Muncul
Jika saat menyimpan hasil editan kemudian muncul pesan error, misal seperti ini:
We were unable to save your template
Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure.....
Maka hal yang harus kita lakukan adalah berusaha memahami pesan error tersebut. Kemudian kita cek kembali tutorial yang kita baca apakah langkah-langkah yang sudah kita lakukan bener2 sesuai dengan tutorialnya. kalau tidak yakin maka kita bisa mengulangi lagi tutorialnya dari awal dengan mengklik tombol "Clear Edit" terlebih dahulu.
We were unable to save your template
Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure.....
Maka hal yang harus kita lakukan adalah berusaha memahami pesan error tersebut. Kemudian kita cek kembali tutorial yang kita baca apakah langkah-langkah yang sudah kita lakukan bener2 sesuai dengan tutorialnya. kalau tidak yakin maka kita bisa mengulangi lagi tutorialnya dari awal dengan mengklik tombol "Clear Edit" terlebih dahulu.

Mungkin untuk masalah mengahadapi berbagai pesan error ini akan kita bahas lebih lanjut diepisode yang lainnya yang lebih spesifik.
Yak mungkin itu aja dulu tips-tips dalam pembahasan kali ini. Kita jumpa lagi di tips-tips berkutnya.
Label:
Blogger Tutorials
21.09
Mengganti "Older Posts" Dengan Angka
Secara umum, navigasi untuk pindah halaman di blogspot biasanya menggunakan link dengan teks "Older Posts (posting lama)" dan "Newer Posts (posting baru)". Beda dengan wordpress yang navigasinya bisa berbentuk angka sehingga bisa memudahkan untuk loncat beberapa halaman ke postingan yg lama maupun baru.
Nha trik kali ini akan menjelaskan bagaimana cara mengganti link "Older Posts (posting lama)" dan "Newer Posts (posting baru)" menjadi angka seperti gambar di bawah ini

1. Langkah awal tentu saja harus menuju ke desain template anda kemudian ke "Edit HTML"
2. setelah itu cari kode ini ]]></b:skin> kalo sudah ketemu taruh script dibawah ini sebelum kode tersebut
3. setelah itu cari kode ini </body> kemudian taruh script dibawah ini sebelum kode tersebut.
Kalau sudah silahkan dilihat hasilnya.
Nha trik kali ini akan menjelaskan bagaimana cara mengganti link "Older Posts (posting lama)" dan "Newer Posts (posting baru)" menjadi angka seperti gambar di bawah ini

1. Langkah awal tentu saja harus menuju ke desain template anda kemudian ke "Edit HTML"
2. setelah itu cari kode ini ]]></b:skin> kalo sudah ketemu taruh script dibawah ini sebelum kode tersebut
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
3. setelah itu cari kode ini </body> kemudian taruh script dibawah ini sebelum kode tersebut.
<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if> </b:if>
<!--Page Navigation Ends -->
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if> </b:if>
<!--Page Navigation Ends -->
Kalau sudah silahkan dilihat hasilnya.
Label:
Blogger Tutorials
21.08
Bagi sebagian desainer membuat formullir komentar web tampil cantik dan unik sangat mudah. Tapi bagi sebagian orang atau blogger mungkin hal itu merupakan perkara yang sulit atau tidak mungkin. Tapi hari ini InsyaAllah hal itu bukan hal yang mustahil lagi bagi blogger karena kita bisa mendapatkan berbagai tutorial yang dapat memandu kita step by step mewujudkan harapan kita membuat dan menyesuaikan formulir komentar blogger sesuai keinginan kita, dengan cara terbaik hanya dengan sedikit penambahan CSS dan HTML.
Silahkan lihat beberapa contoh berikut:
Menggunakan background warna:
Menggunakan background image/ gambar:



Menggunakan background warna dan image:

Nah jika tertarik mencoba memodifikasi formulir komentar seperti beberapa contoh diatas silahkan ikuti tutorial berikut:
1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
2. Centang kotak kecil disamping kalimat "Expand Template Widget" di sudut kanan atas.
3. Cari kode di berikut: (Tips: - Tekan Ctrl + f untuk memudahkan pencarian)
Ada tiga bidang penting, yaitu:
#ib-form iframe
#ib-form iframe: hover
#ib-form a
Berikut adalah rincian untuk setiap bagian dari kode CSS diatas
1. Kustomisasi Untuk Mode Aktif
#ib-form iframe
Bagian ini adalah tampilan formulir komentar blogger ketika mouse atau crusor tidak berada diatasnya.
* # FFFFFF: Ini adalah warna latar belakang. Sobat dapat mengubahnya dengan menggunakan bantuan tabel kode warna disini
* Url: Ini adalah URL untuk gambar latar belakang. Pada kode diatas saya gunakan image bayi, silahkan ganti dengan image sobat
* Border 7px solid # C7C7C7: Border dengan garis penuh setebal 7px, kalau ingin garis border putus-putus ganti solid dengan kata dotted, kode warna silahkan pakai bantuan tabel kode warna disini.
* padding: jarak antara border dan teks
* font:normal 12pt "ms sans serif", Arial; jenis huruf dan ukuran besar huruf teks "komentar sebagai"
* width:95%;height:250px; Lebar dan tinggi formulir komentar
2. Kustomisasi Untuk Mouse Hover Mode
Sekarang mari kita membahas properti CSS untuk tampilan form ketika kursor mouse melayang di atasnya, atau ketika crusor menyentuh formulir komentar
#ib-form iframe: hover
Hal ini hampir sama untuk penjelasan latar belakang dan batas seperti yang kita bahas sebelumnya. Pengaturan kedua sifat CSS akan berpengaruh hanya gambar kedua yang muncul pada mouse.
3. Kustomisasi Untuk Link Warna
#ib-form a
Bagian ini mendefinisikan warna dari kedua link -> "Sign out" dan "Berlangganan melalui email". Link-link ini muncul di sudut kanan bawah setiap Formulir Komentar Blogger.
warna: ini menentukan warna link. Mengatur warna link sebagai kontras dengan warna latar belakang.
Oke selesai ngedit jangan lupa simpan template. Eits... jangan lupa juga komentarnya!?
Oya masih ada pesan sponsor lagi, membuat formulir komentar dibawah postingan lihat disini, kalau ingin memodifikasi tampilan komentar admin agar berbeda dengan pengunjung blog, lihat disini
Pingin buat scroll pada daftar komentar yang panjang? Lihat disini. Mengatasi kolom komentar yang bermasalah, lihat solusinya disini yuk!
Screnshot sample image dua dan tiga saya ambil dari blog sobat blogger Rizky. Makasih ya! Yang lain dari blog eksperimen saya sendiri.
Cara Memodifikasi Formulir Komentar Blogger
Bagi sebagian desainer membuat formullir komentar web tampil cantik dan unik sangat mudah. Tapi bagi sebagian orang atau blogger mungkin hal itu merupakan perkara yang sulit atau tidak mungkin. Tapi hari ini InsyaAllah hal itu bukan hal yang mustahil lagi bagi blogger karena kita bisa mendapatkan berbagai tutorial yang dapat memandu kita step by step mewujudkan harapan kita membuat dan menyesuaikan formulir komentar blogger sesuai keinginan kita, dengan cara terbaik hanya dengan sedikit penambahan CSS dan HTML.
Silahkan lihat beberapa contoh berikut:
Menggunakan background warna:
Menggunakan background image/ gambar:
Menggunakan background warna dan image:
Nah jika tertarik mencoba memodifikasi formulir komentar seperti beberapa contoh diatas silahkan ikuti tutorial berikut:
1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
2. Centang kotak kecil disamping kalimat "Expand Template Widget" di sudut kanan atas.
3. Cari kode di berikut: (Tips: - Tekan Ctrl + f untuk memudahkan pencarian)
<div class='comment-form'>4.Ganti dengan kode berikut:
<div id='ib-form'>5. Tambahkan kode CSS berikut diatas ]]></b:skin>
#ib-form iframe{Sedikit penjelasan tentang bagian-bagian penting pada kode CSS di atas untuk membantu sobat menyesuaikan tampilan formulir komentar sesuai dengan keinginan sobat:
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoD-ghORifwEbR1Ypo9gvt8gFe0OFCI4HZ-38gOFRjUQBBiiNdyPqzb2xZ3Nf8tOssHpEglOS-Ecx5dgbFfNjKN2c5nraCUOLeI4UjvuMURygfdWahrTksoVsGLhSdKl6wTNm2lBT4JV2s/s400/plz-do-not-spam1.gif) no-repeat bottom right;
border:7px solid #C7C7C7;
padding:5px;
font:normal 12pt "ms sans serif", Arial;
color:#7EB2AC;
width:95%;height:250px;}
#ib-form iframe:hover{
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4qBj_lWfHLAgmwGmBo3jC9SIvw3LYkuxmLy8aFRrL7lX0yJyzvdsgud4kMDMjXgaA-7LLy80ZdNf-w91WqUFheMmtFi1WKZNHUgov_tmh3BZ2tm2U7T9aW04_7Tej_3up520CGaEqHXlV/s400/plz-do-not-spam2.gif) no-repeat bottom right;
border:7px solid #7EB2AC;}
#ib-form a{
color:#7EB2AC;}
Ada tiga bidang penting, yaitu:
#ib-form iframe
#ib-form iframe: hover
#ib-form a
Berikut adalah rincian untuk setiap bagian dari kode CSS diatas
1. Kustomisasi Untuk Mode Aktif
#ib-form iframe
Bagian ini adalah tampilan formulir komentar blogger ketika mouse atau crusor tidak berada diatasnya.
* # FFFFFF: Ini adalah warna latar belakang. Sobat dapat mengubahnya dengan menggunakan bantuan tabel kode warna disini
* Url: Ini adalah URL untuk gambar latar belakang. Pada kode diatas saya gunakan image bayi, silahkan ganti dengan image sobat
* Border 7px solid # C7C7C7: Border dengan garis penuh setebal 7px, kalau ingin garis border putus-putus ganti solid dengan kata dotted, kode warna silahkan pakai bantuan tabel kode warna disini.
* padding: jarak antara border dan teks
* font:normal 12pt "ms sans serif", Arial; jenis huruf dan ukuran besar huruf teks "komentar sebagai"
* width:95%;height:250px; Lebar dan tinggi formulir komentar
2. Kustomisasi Untuk Mouse Hover Mode
Sekarang mari kita membahas properti CSS untuk tampilan form ketika kursor mouse melayang di atasnya, atau ketika crusor menyentuh formulir komentar
#ib-form iframe: hover
Hal ini hampir sama untuk penjelasan latar belakang dan batas seperti yang kita bahas sebelumnya. Pengaturan kedua sifat CSS akan berpengaruh hanya gambar kedua yang muncul pada mouse.
3. Kustomisasi Untuk Link Warna
#ib-form a
Bagian ini mendefinisikan warna dari kedua link -> "Sign out" dan "Berlangganan melalui email". Link-link ini muncul di sudut kanan bawah setiap Formulir Komentar Blogger.
warna: ini menentukan warna link. Mengatur warna link sebagai kontras dengan warna latar belakang.
Oke selesai ngedit jangan lupa simpan template. Eits... jangan lupa juga komentarnya!?
Oya masih ada pesan sponsor lagi, membuat formulir komentar dibawah postingan lihat disini, kalau ingin memodifikasi tampilan komentar admin agar berbeda dengan pengunjung blog, lihat disini
Pingin buat scroll pada daftar komentar yang panjang? Lihat disini. Mengatasi kolom komentar yang bermasalah, lihat solusinya disini yuk!
Screnshot sample image dua dan tiga saya ambil dari blog sobat blogger Rizky. Makasih ya! Yang lain dari blog eksperimen saya sendiri.
Label:
Blogger Tutorials
21.08
Menambahkan Reply Button Pada Komentar Blogger
Kali ini saya ingin mengetengahkan sebuah trik sederhana hasil pengembangan seorang blogger luar Chen asal china, yaitu bagaimana cara menambahkan reply comment atau tombol reply pada form comment blogger. Karena opsi komentar blogger memang masih nampak kaku dibanding blog dengan platfrom lainnya seperti wordpress yang diantaranya telah tersedianya opsi reply comment hanya dengan sekali klik.
Bagi yang ingin mengetahui cara memasang tombol reply comment silahkan ikuti tutorial berikut:

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML>>> centang kotak kecil bertuliskan Expand Template Widget
2. Kemudian cari kode berikut jika ingin memasang reply comment seperti contoh gambar pertama:
Jika hanya menggunakan tulisan reply comment seperti gambar pertama:

Tulisan warna merah URL image sobat disini: Bisa sobat isi dengan URL berikut atau URL image sendiri, ingat URL image harus diawali dan ditutp dengan tanda " atau '
![reply-blue_thumb[1]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiChDwtxTfugbaSzJth4HxrVYeOJonllLITeiJ0isHS1sQbA6L5EjsyPjvLX7yfOHrq_oLuqDZf-4iN27n7Zw4EFc5IrKZfVP6XNgEF-KsKAjNGCvW_Nk_q__DGw6_dm39uEyAnu5E19tA/?imgmax=800)
![reply-gray_thumb[1]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF_n3kXdWKRkS3qKSetcuT99NOXa5Zgx0veTaNf5rnU6xNm6W_x7Gvcaono4EI2hFavNdp8dFdkMk5pPv3VOePeb0SlNM7RMHtTzNpnJ2nZbhE9-Yr5mjhxt_Uw_yid2RWh_q1mpZ5ndg/?imgmax=800)
![reply-pink_thumb[1]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwoBHiczyeE8M937xz1vdl0flkC5dVOFLhfXuo5Dqp2NdNlxr4oL_co6Dvf8UkgzjR4x6h3zxwlwJKSFC6P1VF_ollg6MxKHmNM4wXR3lc-1UfZFPTJf21afRT1olBOr4x3pXDlvCsqvs/?imgmax=800)
Semoga bermanfaat. Ingin melihat live demo reply comment disini, untuk live demo reply comment dengan menggunakan image lihat disini
Bagi yang ingin mengetahui cara memasang tombol reply comment silahkan ikuti tutorial berikut:
1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML>>> centang kotak kecil bertuliskan Expand Template Widget
2. Kemudian cari kode berikut jika ingin memasang reply comment seperti contoh gambar pertama:
<data:commentPostedByMsg/>Jika ingin memasang hanya reply comment seperti gambar kedua, cari kode berikut:
<b:includable id='commentDeleteIcon' var='comment'>3. Selanjutnya letakkan kode berikut setelah kode pada point nomor 2
Jika hanya menggunakan tulisan reply comment seperti gambar pertama:
<span class='comment-reply'><a expr:href='"https://www.blogger.com/comment.g?blogID=Letakkan blog ID sobat disini&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450"); return false;'>[Reply to comment]</a></span>Jika ingin menggunakan image tombol reply comment seperti gambar kedua:
<span><a expr:href='"https://www.blogger.com/comment.g?blogID=Letakkan blog ID sobat disini&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450"); return false;'><img alt='Reply To This Comment' src='URL image sobat disini'/></a></span>Catatan: Tulisan yang berwarna merah (Letakkan blog ID sobat disini) ganti dengan ID blog sobat. Cara mengetahui ID blog, pada saat log in pada account sobat dan hendak menulis postingan baru, perhatikan tampilan kotak atas tempat URL pada browser:
Tulisan warna merah URL image sobat disini: Bisa sobat isi dengan URL berikut atau URL image sendiri, ingat URL image harus diawali dan ditutp dengan tanda " atau '
http://sites.google.com/site/amatullah83/background/reply-blue_thumb%5B1%5D.png
http://sites.google.com/site/amatullah83/background/reply-gray_thumb%5B1%5D.png
http://sites.google.com/site/amatullah83/background/reply-green_thumb%5B1%5D.png
http://sites.google.com/site/amatullah83/background/reply-pink_thumb%5B1%5D.png
http://sites.google.com/site/amatullah83/background/reply-red_thumb%5B1%5D.png4. Simpan template, lihat hasilnya diblog sobat.
Semoga bermanfaat. Ingin melihat live demo reply comment disini, untuk live demo reply comment dengan menggunakan image lihat disini
Label:
Blogger Tutorials






