Membuat Notifikasi Komentar Ala Google Plus - Setelah beberapa hari absen posting, saya akan bagikan bagaimana cara membuat notifikasi ala Google Plus. Jujur, banyak sekali permintaan tutorial ini dan sengaja saya pending mengingat lumayan rumitnya memahami tutorial asli notifkasi ini di blog DTE.bell

Ternyata setelah saya perhatikan, banyak pencuri yang ngintip source code blog ini. Kenapa saya katakan pencuri? karena hasilnya persis sama dengan notifikasi milik saya. Kalau pun menggunakan tutorial langsung dari DTE, saya rasa tidak akan semirip yang saya punya. Daripada nambah lagi orang yang berdosa, saya bagiin aja deh    :P

Sebelum melangkah pada tutorial, silahkan liat dulu screenshoot plus demonya.

notifikasi


Langkah 1 : Simpan jQuery di atas </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

Lewati langkah ini apabila sudah terdapat jQuery pada template sobat.

Langkah 2 : Simpan CSS ini di atas ]]></b:skin> atau </style>

/* Notifikasi Komentar
----------------------------------------------- */
#cm-total {
  position:fixed;
  top:14px;
  right:0;
  width:188px;
  text-align:left;
  z-index:9999;
  cursor:pointer;
}
.total-counter {
  background-color:#d11919;
  color:white;
  padding:1px 4px;
  font-family:Arial,Sans-serif;
  font-size:11px;
  border-radius:5px;
  font-weight:bold;
}
#notif {
  position:fixed;
  top:20px;
  right:180px;
  z-index:9999;
  height:22px;
  width:19px;
  opacity:.4;
  cursor:pointer;
}
#notif:hover {
  opacity:1;
}
.close-notif {
  position:fixed;
  top:92px;
  right:20px;
  z-index:9999;
  cursor:pointer;
  display:none;
}
#cm-container {
  width:355px;
  position:fixed;
  top:67px;
  right:0;
  z-index:9999;
  background-color:#e5e5e5;
  padding:60px 20px 10px 20px;
  color:#666;
  box-shadow:0 4px 15px -4px rgba(0,0,0,.4) !important;
  text-align:left;
  border:1px solid rgba(0,0,0,.2);
  background-clip:padding-box;
  display:none;
}
#cm-container:before {
  content:url('http://3.bp.blogspot.com/-wlYmBEpUtGE/UoVyl3GpUZI/AAAAAAAAGEQ/LDeklWh3CNI/s1600/arrow-notif.png');
  position:absolute;
  top:-14px;
  left:196px;
}
#cm-container:after {
  content:"Komentar Terbaru";
  position:absolute;
  top:22px;
  left:150px;
  text-align:center;
  font:normal 14px Arial;
  color:#333;
}
.cm-outer {
  margin:0 auto;
  padding:0;
  font-size:11px;
  text-align:left;
  font:normal 12px Arial;
}
.cm-outer ul{
  margin-bottom:5px;
}
.cm-outer li {
  padding:9px 10px 14px;
  list-style:none;
  clear:both;
  position:relative;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  background-color: white;
  margin-bottom:10px;
}
.cm-text {color:#797979;}
.cm-outer {margin:0 0 5px}
.cm-header {margin: 4px 0 8px 90px;font-size:11px;font-weight:normal !important;}
.cm-header a {color:#262626;text-decoration:none;font-size:14px;font-weight:bold}
.cm-header a:hover {color:#74a2c3;text-decoration:none;}
.cm-outer .cm-content {overflow:hidden}
.cm-content {margin-left:90px}
.cm-outer img {
  display:block;
  float:left;
  background:#ececec url('http://4.bp.blogspot.com/-G-9yhzSt2Mw/UoWcB4bdn4I/AAAAAAAAGE4/tzIixYewCsU/s1600/anon80.png') no-repeat 50% 50%;
  overflow:hidden;
  border-radius:3px 0 0 3px;
  position:absolute;
  top:0;
  left:0;
}
.cm-footer {margin-top:7px;}
.cm-footer a {color:#5886a7;text-decoration:none;}
.cm-footer a:hover {color:#74a2c3;text-decoration:none;}
div.cm-header img[src=&#39;http://img1.blogblog.com/img/openid16-rounded.gif&#39;] {
content: url(http://2.bp.blogspot.com/-8NurYzHIoWQ/Ujc_oLurXII/AAAAAAAAFek/XhAm-oLwg7Q/s80-c/gravatar.png);
}

Langkah 3 : Simpan kode ini di atas </body>

<div id='cm-container'/>
<div id='notif' title='Notifikasi'><img alt='notifikasi' src='http://1.bp.blogspot.com/-wrJzEwB1V3U/UoQktvRDCxI/AAAAAAAAGEA/jYcRiXTyOFg/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='http://2.bp.blogspot.com/-d-5BS0YCkho/UOKe2UIw0rI/AAAAAAAAC4w/md_iYNVHaHk/s1600/delete4.png' title='close'/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
    home_page: "http://blog.kangismet.net",
    max_result: 6,
    t_w: 80,
    t_h: 80,
    summary: 40,
    new_tab_link: true,
    ct_id: "cm-container",
    new_cm: " Komentar Baru!",
    interval: 30000,
    alert: true,
    alert: function(total) {
        document.getElementById("cm-total").innerHTML = '<strong class=\'total-counter\'>'+total+'</strong>';
        document.title = '(' + total + ') ' + originalTitle;
    }
};
$('#notif').click(function(){$('#cm-container, .close-notif').toggle();});$('.close-notif').click(function(){$('#cm-container, .close-notif').hide();});document.getElementById('notif').onclick = function(){document.title = originalTitle;$('#cm-total').hide();};document.getElementById('show-total').onclick = function(){document.title = originalTitle;$('#cm-total').hide();$('#cm-container').show();};
//]]>
</script>
<script src='https://googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/notif-komen.js' type='text/javascript'/>

Untuk memindahkan posisi Notifikasi, silahkan pelajari CSS Position dan Valuenya

Apabila ada pertanyaan silahkan didiskusikan di kolom komentar. Jangan ngintip lagi ya.. HARAM :D

Resource : http://www.dte.web.id/2012/11/recent-comments-widget-for-blogger-with.html

397 komentar

«Paling tua   ‹Lebih tua   1 – 200 dari 397   Lebih baru›   Terbaru»

di demo mah eweh jiga nu di dieu aya komentatorna?
kurang ajib brooo....ngan hurup wungkul mah :D
jieun deuiiii :P

Balas

aing ka hiji euy aiing....bukakakakakKKKKK

Balas
Komentar ini telah dihapus oleh pengarang.

keun cena edit olangan.. tong diharuapan wae.. benul master ben? :D

Balas

atuh noongan deui??? kkkkKKKK dosa deui atuh!!!

Balas

heuheu.. jum'atan heula ah

Balas

haduh ksindir eung sok ngintip2.. haha... v da dblog ane mah udah dari dulu jga tos aya..

Balas

ketige aja lar hehehehe :-bd

Balas

hehehe... makasih kang ismet, saya uda pusing belajar ini, malahan blog kang ismet saya inspect elemennnya, blum juga paham btul ,,,,, piiiissss y kang

Balas

Kang, kalo masangin Scroll gimana kang? tapi kyak punya akang, scrollnya yang berubah cuma di notifikasi . . overflownya di apain :)

Balas

boleh saya repost gag kang??

Balas

Keren banget notifikasinya.
Ninggalin jejak heula kang....jumatan dulu. :)

Balas

kang, adakah css lain selain transition:all .3s ease-in untuk memberikan jera waktu yang lebih lembut, saya lihat di portal kompas yang sliding box artikel terkaitnya waktu di scroll keatas dan slidingnya pada saat disembunyikan cukup lembut, beri solusinya kang :)

Balas

bagus kang, kode nya ane simpan dl dlm kulkas... trims.

Balas

urang kawali.. sukadana, mana deui nya.. yeuh noong di WC teh :D

Balas

kalau punya saya pake tinyscrollbar, tapi bisa pake css

.cm-outer::-webkit-scrollbar{width:5px;background:#aaa}
.cm-outer::-webkit-scrollbar-thumb{background-color:#666;border-radius:3px}

Balas

keren,hehehe...bisa buat tambah fitur blog nie :-d

Balas

Tah ieu tutorial nu ditunggu-tunggu teh :D

Balas

Akhirnya diposting juga,,, Terimakasih Bang,,
Oya bang,, klo mau dibuat tidak floating,,, kode apa yg mau ditambahkan/hilangin ?

Balas

Heheheh .... Keren kang ... lama gak berkunjung ternyata blognya banyak berubah yaa ... :) Btw iklan diseidebar kirain iklan Google Adsense eh ternyata ads by kangismet hebat nih akang ... :d

Balas

dishare juga akhirnya sama kangismet :D

Balas

mantappp,, sudah ditunggu tunggu nih tutorial

Balas

rajapolah meren ..eh eta mah beh dieu ketang haha

Balas

ini dia kang yang ditunggu2 pemirsa seluruh dunia, hehehhehee termasuk negara Kalapanunggal xixiix

Balas

hahaha wkwwkwk nagara kalapa nunggal presiden na saha kang didinya ???

Balas

Moal waka masang saya mah kang ah .. engke we tos ngopi masang na haha

Balas

dewek ka sabaraha dewek haha .. na ari jang beben jiga urng banten euy haha

Balas

hhahhahhah, mun teu salah mah pa idam, wkkwkkwkwk

Balas

mungkin itu menggunakan efek-efek jQuery ui...

Balas

Mohon pencerahan tentang manfaat jika digunakan notifikasi komentar ala google plus, Sob. Sebelumnya, terima kasih.

Balas

ibu negarana ceu esih nya :D

Balas

pengunjung mengetahui komentar terbaru, misalnya menunggu jawaban admin..

Balas

silahkan.. jangan lupa sumbernya :D

Balas

Kang Ismet kasep pisan eung... Haturnuhun Kang tutorna.
Hapunten yeuh sayah mulungan wae.. sanes te kreatip tapi emang hente :)

Balas

uhuy pastinya blog teh jadi makin keren ya kang kalau pakai notifikasi seperti ini, ijin praktek ya kang nanti... :D

Balas

Bagus Notifikasi nya bisa menambah indah blog juga.

Balas

Saalit Kang Rull, Supados di pasiha berekat :)

Balas

ohya , cara kebawahin lagi gmna ? code nya ap ? gw gak pande kali gitu gituan , help me

Balas

interval: 30000 itu fungsinya buat apa kang ?

Balas

menambah dan mengurangi komentar edit max_result: 6, supaya bisa lebih panjang coba ganti position:fixed menjadi position:absolute, pada #cm-container

Balas

Nilai 30000 artinya bahwa feed komentar akan disegarkan selama setengah menit sekali untuk memeriksa apakah terdapat komentar baru yang masuk atau tidak.

Balas

coba akang bka blog saya . minervation.blogspot.com , nah , liat kan lonceng nya , saya mau kebawahin lagi kang , gmna

Balas

udah di hapus ,locengnya lagi hilang...gimana kang

Balas

ni gan, silahkan atur yang dua ini, top jarak dari atas
#notif:before {
top:73px;
right:150;
{

Balas

Mantapp Nihh..
Ijin Bookmart Dulu Deh kang.. Kapan-kapan Dicoba..
Nice Post kang..

Balas

ya , di pasang lagi. floatingnya ngak hilang wawawawawa

Balas

Akhirnya keluar juga tutorialnya lebih mudah ngejawab jika ada yang bertanya tentang notifikasi komentar ini kita tinggal tunjukkan url link nya ...thanks master Bro

Balas

GA atos tiasa di manipulasi, notif google+ oge tiasa. Kapayunna naon deui, aya project naon kang hehe :)

Balas

kantun modifikasi miceun komentar adminna, hehe.
Urang acak2 kang :)

Balas

Kang numpang nanya, cara ubah posisi loncengnya gimana yah ? mohon bimbingannya :-)

Balas

gimana bikin notifikasi punyai scrollbar seperti blog ini kang?

Balas

Saya pengen msang widget notifikasi ini kang, tapi yang jadi kendalanya kode </body> pada template maskolis berada dibawah, dan tidak bisa diterapkan jika ditaruh diantara kode </body>. Lalu ada solusinya g kang? atau ada kode alternatif lain? Silahkan kang tanggapannya. Terima kasih..

Balas

sengaja dengan admin, soalnya ini bukan sekedar widget recent comment.. jadi siapa tau lagi baca2 admin jawab komen, kan ketauan.. kitu cenah mang.. tewewew gejlig :D

Balas

konsentrasi pada kode ini :

#notif {
....
top:20px;
right:180px;
.....
.....
}

Balas

emang posisinya kan paling bawah sebelum </html>

Balas

Oke makasih banyak kang :-) oh iya, akang punya gambar lain enggak selain lonceng ? Aku minta code urlnya dong, hehe :-D

Balas

ga ada sob.. coba cari aja di gugel.. comments icon, atau pake font awesome / elusive icon

Balas

siaap :-) makasih yah kang atas ilmunya :-) akang jago banget dah :-) akang ada rekomendasi buku yang harus aku pelajari enggak buat memperdalam desain web ?

Balas

wah.. saya ga pernah baca buku desain, otodidak aja :D

Balas

Kang kira-kira notifikasi nya di taruh dimana ya (di blog saya) ?, coba dilihat kang -> http://yoga-tc.blogspot.com/

Balas

ini kalau tidak salah adalah jQuery UI API, cara kerjanya saya masih belum paham kang @@, (pusing) hehehehe :)

Balas

ooo gitu ya kang :D

makasih kang :D

Balas

kang nanya lagi, cara membedakan warna komentar admin sama pengunjung di notifnya gimana kang :)

Balas

Kodenya panjang bgt, bikin blog berat ga?

Balas

Untuk peletakan nya notifnya bisa di atur ga kang?

Balas

Kang saya udah coba terapkan di blog saya.
Tapi summary nya gak muncul.
Saya coba scripnya pindahkan ke blog lain oke ngak ada masalah. Kira kira apanya ya Kang??

Balas

belum ada fasilitas itu, kecuali mungkin JSnya di acak2 lagi :)

Balas

setiap penambahan CSS dan JS otomatis mempengaruhi, tapi ga berat ko

Balas

bisa dimana aja, cuma hilangkan position:fixed atur lagi CSSnya

Balas

biasanya ada bentrok JS kang, atau coba tukar2 posisi

Balas

makasih kang atas pencerahannya, saya mau tanya lagi nih kang, agar notifikasi tidak sticky bagaimana caranya kang? Nuhun..

Balas

mantaf kang :d buat blog saya yang atu lg :d

Balas

assallamu'allaikum kang , waduh punten nembe namu ieu abdi .. tos lami teu ameng kadieu , janten benten aduh ieu design na ! mung kapungkur simkuring sibuk damel teu eureun2 -___- , punten ah sakali deui , abdi ngiring mulungan elmu deui ah didieu ..

kang ari nyandak script di blog sanes eta teh kasebat mencuri sarupaning maok sanes kang? :( .. atuh abi teh geuning curaling nya pami kitu mah ..

Balas

muhun eta teh ngarampog kang .. wkwkwkwk

Balas

Gara-gara si akang nyebat bioskop di homepage jadi weh ganti dai ah ...

Balas

tah eta Jalan Satapak na bentrok

Balas

aduh si akang eta! meuni #MAINSETRIM .. -,- nya tos atuh ari kitu mah bade tobat abi :p , eh kang ari tobat maokan script teh kumaha babacaanna ? ngangge coding oge ? :(

Balas

muhun abdi tos kaditu.. kereeeen :D

Balas

tah kumaha pa ustadz uung?

Balas

saur panalungtikan ti bagdad .. sok we kereyeh maok mah .. mun ntos kapasang bebeja weh wkwkwkwk ... heurey kang heurey

Balas

ari sugan teh bade di sebat layar tancep haha ...

Balas

ah saur saha, kamari ge pedah weh rerencangan uih ti madinah , nyarios kieu .. sok wae jang deuk maok mah ngan tong di niatan .. soal na nu di niatan mah sok tara jadi .. pan bedo meureun kang ari kitu mah -___- , jadi intina mah tong maok :D , heureuy abi oge kang heureuy . wkwkwk

Balas

ini dia yang saya tunggu, hiji deui mana kang.

Balas

pourquoi ne pas utiliser box-shadow:inset 0 1px 0 rgba(266,266,266,0.3), 0 1px 1px rgba(255,255,255,0.3) pour décorer bordér?

Balas

Voy a darle una oportunidad, que sabe mejor. Gracias por el aporte

Balas

wow, sudah lama saya gak buka inet, banyak perubahan....
Kang saya kira itu iklan GA gak taunya :D

Balas

mungkin lebih bagus tulis seperti ini:
border:1px solid #cc;border:1px solid rgbargba(266,266,266,0.3);background-clip:padding-box;box-shadow:0 4px 15px -4px rgba(255,255,255,0.3)

Balas

sudah hilangkan position:fixed ,loncengnya hilang kang...waduh gimana nih.

Balas

Kang ismet,cara membuat Pencarian Relevansi kaya kang ismet bahas juga dong...hauss ilmuuu nihhhhhhhhh........

Balas

wah kang sumpah keren banget

Balas

Sebelum cuci muka sempetin dulu ah nawarin kopi hehe

Balas

Makasih ya kang, tutorial nya mantap pisan kang, sukses selalu

Balas

silahkan di acak2 aja kodenya

Balas

wkwkwkkw... banyak yang ktepuu

Balas

saya dapet dari Kompi Ajaib.. coba cari di sana

Balas

atos beres ngopina yeuuuh :D

Balas

kode ini bisa disimpen dimana saja..

<div id='notif' title='Notifikasi'><img alt='notifikasi' src='http://1.bp.blogspot.com/-wrJzEwB1V3U/UoQktvRDCxI/AAAAAAAAGEA/jYcRiXTyOFg/s1600/lonceng.png'/></div>

Balas

Haduuh nembe sempet ka dieu kang, tilu dinten komputer ngadat, tos dijungkir balik dugika diinstall ulang masih ngadat...hadeueuehh... teu sapira panyakitna dina kabel sata hard disk hadeueuehhh mani puyeng....mana tihang mana tihang yeuhh....

Balas
Komentar ini telah dihapus oleh pengarang.

matakna kang pasihan jajan gera meh te ogo tapi ketang sami nu sim abdi system shoutdown
terus we nga restart .. ieu ge anggo F8 kang ..

Balas

Muhun kang hoyongeun jajan ieu ge... RAM hiji sareng kabel SATA meot hehehe :D

Balas

dagor we ogo mah... :D kabel telepon bade heuheu

Balas

dua script dibawah aja simpan pada static page

Balas

kang kok notifnya sekarang jadi eror sih ? lihat deh http://zidniklopedia.blogspot.com/, notifnya jadi dibawah gitu

Balas

bukanya pakai google crome dah kang ! itu kenapa yah ?

Balas

nyimak Kang..tipsnya jitu terus lho...he3x

Balas

tinggal geser ke atas #notif rubah top:20px jadi 5px atau 10px, seusaikan aja, semakin besar nilai, maka semakin bawah...

Balas

Alhamdulillah selalu di ujicoba dulu :)

Balas

bukan itu kang, tapi letaknya dibawah komentar gitu . .

Balas

ga ngerti.. dibawah komentar gimana?

Balas

buka dulu dah kang blog aku pakai google crome . . Jadi letak notifnya dibawah postingan gitu ' kya error '

Balas

saya jarang pake FireFox, coba clear chacenya, saya liat normal aja ko

http://2.bp.blogspot.com/-eNTOcbmw1Ao/Uob_CGyZNfI/AAAAAAAAGFo/sYrDLiEQLD4/s1600/zidni.png

Balas

cara sticky notifnya gimana kak ? mohon bimbingannya :-)

Balas

kalau css diatas gak di edit .. berarti dah sticky notifnya .. position:fixed

Balas

serius kak cuma itu ? tapi kok notifnya tetep aja dibawah postingan gitu ?

Balas

kak mau tanya dah, tau cara hilangin animasi subscribe di kanan atas blog aku enggak ? aku lupa scriptnya apaan ?

Balas
Komentar ini telah dihapus oleh pengarang.

tapi makasih banget yah kang atas ilmu dan bimbingannya :-) sisanya aku perbaiki sendiri deh :-) thanks

Balas

ya.. emang harusnya kaya gitu.. coba cari solusi sendiri, itu akan lebih biak dan nantinya faham akan permasalahan

Balas

kang umh , mau nanya . . . cara mengubah judul postingan yang di tengah menjadi sebah kiri bgaimna ya kang . . .tolong ilmu:)

Balas

Keren nih kang Ismet..
Maaf kang kalau penempatanya bagaimana ya? maksud saya apa bisa kita atur untuk posisinya... nuhun kang.. :)

Balas

akhirnya dishare juga ane udah cari kesana kemari gak ada hampir galau ehh trnyata situ share juga mksih kang :) izin dicoba ya kang :D

Balas

ijin coba gan,
mampir ke blog baru ane yah : http://unduhdroid.blogspot.com

Balas

rubah text-align:center menjadi text-align:left pada .post h2

Balas

bisa disimpan dimana ja.. bahkan di staticpage juga

Balas

udah bikin notifikasinya tapi bila di klik pada yang komentar kenapa ngak di scroll kaya blog ni ya kang... perlu di kocok apa ya

Balas

terima kasih . . . ini tips2 ya saya tunggu terima banyak kang ismet :)

Balas

pengen banget bikin template sndiri ,tapi agak" belibet step by step nya.kasih pencerahan kang.

Balas

satu lagi kalau bisa kang , saya mau nanya cara bikin postingan beranda kaya kang ismet bagaimana ya

Balas

dimananya ya? warna warninya? atau apanya?

Balas

<a href="http://3.bp.blogspot.com/-gpIWR3BV9F8/UodAK3V_4ZI/AAAAAAAAABk/mX8JfRUtLE8/s1600/Capture.PNG</a>

cara membuat postingan kayak kang ismet pada gambar itu bgaimana ya kang ismet :)

Balas

cara menambah gambar di postingan kang ismet ni , cara nya bagaimana ya ,maksudnya kode :)

Balas

coba cari.. membuat autoreadmore tanpa javascript

Balas

Kang komentar aku ga dibales :(
akang belajar bikin template dlu dmana ?

Balas

wah panjang caranya sob.. intinya sih edit2 dulu template sendiri.. nantinya faham ko

Balas

yang mana ya? maaf kalau ada komen yang kelewat.. belajarnya sedikit2 ko.. dari pertama ngeblog th 2010an

Balas

saya sarankan sih redesain dlu sob, buat bedanya sejauh mungkin dari aslinya.

Balas

harus faham javascript sedikit2

Balas

myap, makanya saya gak mau nyoba2 kang :))

Balas

Kang , saya dapat problem nih . di blog saya total-counter nya kok muncul dibawah Footer ya ?
Please bantuannya .. aldhinya.com.

Balas
Komentar ini telah dihapus oleh pengarang.

Nggak Bisa ambil Screenshoot , soalnya nggak ada komentar baru , kalau ada komentar baru total-counternya baru keluar , tapi anehnya keluar nya di bawah fotter/dipaling bawah blog. Tolong Cek dong, buka blog sya mungkin untuk anda total-counter nya keluar karena pengunjung baru , Tolong bantuannya ..

Balas

karena position:fixed; dihapus dari #cm-total coba pasang lagi

Balas

kang ismet, Notifikasi sudah terpasang, di blog ane teknologi-berkata.blogspot.com, thanks banget kan, tetapi ane mau tanya sedikit kang
1. bagaimana membuat scroll pada rec koment
2. tolong liat gambar nya mas
3. mengganti background

http://prntscr.com/24iben

terima kasih jawabannya mas

Balas

wah keren artikelnya kang.

Balas

Makasih Kang , udah berhasil . Tapi saya mau tanya skali lagi , gimana cara nambah fungsi scroll pada Notifnya ? Agar bisa muat banyak komentar.

Balas

membuat scroll

.cm-outer{
....
....
height:570px;
overflow:auto;
}


mengganti background :

#cm-container {
....
....
background-color:#e5e5e5;
....
}

Balas

.cm-outer{
....
....
height:570px;
overflow:auto;
}

Balas

Kang mau tanya klo bikin gambar thumbnail dihomepage kaya blog kang ismet ini gmana yaah? gak tahu nih bahasa yg bener :) kaya gini kang http://i.imgur.com/oa6hjsQ.png . nuhun

Balas

Matur nuhun kang atas tutorial nya :)

Balas

Maknyos dah Kang ...
oh iya kang , kalo' boleh saya minta kode tombol ikuti dan google+ yg ada di sidebar kanan blog Kang Ismet itu dong ..

Balas

Kang, cara biar komentar penulis gak keliatan gimana kang? :)

Balas

Salut sama kang Ismet.. super sabar.. :)

Balas

panjang prosesnya.. intinya, gunakan auto readmore, kemudian untuk mewarnainya edit htmlnya sehingga thumbnail menjadi class pada label

Balas

kodenya biasa ko.. cuma dibuat fixed aja

Balas

ga bisa sob.. paling gunakan recent comment biasa.. ini kan notifikasi, siapa tau komentator menunggu jawaban admin, jadi nunggu notif

Balas

sa saba2na we kang.. aya nu macem2 mah di dagor :D

Balas

Minta Kode Widgetnya maksud saya , saya mau masang tombol berbagi dan G+ di blog saya . Cuma dua itu saja kang. boleh ya ...

Balas

Oh gitu toh kang, eh iya mau tanya kalo mau nambah (misalnya ada komentar masuk) terus anda angka 1-unlimited itu bagaimana? pake kode interval juga kah?

Balas

1 lagi kang ismet.

bagai mana ngatur jarak yang ada pada gambar, sudah ane utak atik gk nemu juga,


http://prntscr.com/24psdd

Balas

Lebih Baik penataannya seperti Blog saya aja , templatenya sama kok . http://www.aldhinya.com/

Balas

edit angka 60 pada kode ini

#cm-container{
....
....
padding:60px 20px 10px 20px;
....
}

Balas

kan script di atas udah termasuk..

Balas

ternyata di padding pantesan gk nemu, hehehe

thanks ya kang, salam sukses, nanti ane tanya tanya lagi

Balas

Kang, saya mau tanya .. kan saya masang overflow di .cm-outer kok tetep gak aktif ya scrollnya .. Terus saya juga pengen kecilin ukuran gambar komentarnya .. gimana ya kang?

Tolong di balas :)

coba cek : www.mafiasitez.blogspot.com

Balas

var cm_config = {
home_page: "http://mafiasitez.blogspot.com",
max_result: 6, /*tambah jumlah yang ditampilkan*/
t_w: 80, /*lebar avatar*/
t_h: 80, /*tinggi avatar*/
.......

Balas
Komentar ini telah dihapus oleh pengarang.

.... itu maksudnya tambahkan kode overflow auto?

Balas

Oke kang, berhasil .. Pertanyaan kedua , ngecilin ukuran gambar itu gimana? itu gambarnya kegedean (komentarnya)

Balas

kan udah di jawab di atas :) ubah angka 80 nya

Balas

Kalo untuk Edit Kode itu gimana? maksud saya nambahin border seperti punya akang .. :)

Balas

edit kode pada selektor .cm-outer img

Balas

Lalu cara menambah tombol balas dan hapus gimana kang ? :) Please bantu , maaf ngerepotin :)

Balas

yang berhubungan dengan script ilahkan tanya pembuatnya DTE

Balas

hapus kode position:fixed
dan ganti dengan position:relative

Balas

Kang naha nyak anu abdi mah teu kaluar alert na ..
malahan ngadon kaluar dinu tab na kang =.="

Balas

ku abdi ditingali mah aya kang.. ngan background na bodas, teks bodas.. nya janten nyumput

Balas
«Paling tua   ‹Lebih tua   1 – 200 dari 397   Lebih baru›   Terbaru»

Poskan Komentar


×
Chat