Cara Membuat Gallery Foto Cantik Dengan CSS

<h2 style="text-align: left;"><a href="http://karristaent.blogspot.com/2014/11/cara-membuat-gallery-foto-cantik-dengan-css.html" rel="nofollow" target="_blank" title="Cara Membuat Gallery Foto Cantik Dengan CSS">Cara Membuat Gallery Foto Cantik Dengan CSS</a></h2><b>Assalamualaikum warahmatullahi wabarakatuh.</b><br /><div style="text-align: justify;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvwfKhXdBfgQsoKrxznjrMKRAPf-jJBSF5kkr2mhCyFLbxaC4l6Q5CM56y-ehkZYQ0Q9xX-ADKammCSElxjIeYkqQkf3gcPMdgBKDhzT-DgC6ZkeMVkHut9NcFE7tDkf56US5Enl2NAFgj/s1600/gallery-karrysta.jpg" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="Effects Blogger" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvwfKhXdBfgQsoKrxznjrMKRAPf-jJBSF5kkr2mhCyFLbxaC4l6Q5CM56y-ehkZYQ0Q9xX-ADKammCSElxjIeYkqQkf3gcPMdgBKDhzT-DgC6ZkeMVkHut9NcFE7tDkf56US5Enl2NAFgj/s1600/gallery-karrysta.jpg" title="Cara Membuat Gallery Foto Cantik Dengan CSS" /></a><br /><span class="awal">S</span>alam ceria selalu buat sahabat blogging yang tercinta. Semoga pada pertemuan ini Anda baik dan sehat selalu amin.. Untuk terus menghiasi hari hari yang menyenangkan. Pada hari ini saya akan sedikit berbagi yang saya ketahui salah satunya seperti apa yang saya tulis pada post ini, Mengenai Tips dan trik cara <b>"Cara Membuat Gallery Foto Cantik Dengan CSS"</b> Sebetulnya tanpa rekayasa dengan Kode <span style="color: blue;">CSS</span> yang saya akan bagikan nanti. Mengunggah gambar/foto pada blog tetap bisa tampil dan muncul, Namun dengan standar yang tersaji oleh  <b><i>Blogger</i></b>  hanya tampilan standar pada umumnya. Setelah kemarin saya publikasikan tentang :  <a href="http://karristaent.blogspot.com/2014/11/waspadalah-dengan-popok-bayi-rekondisi.html" rel="nofollow" target="_blank" title="Waspadalah Dengan Popok Bayi Rekondisi"><b>Waspadalah Dengan Popok Bayi Rekondisi</b></a>. Maka kesempatan yang baik ini saya akan berbagi cara membuat tampilan gambar atau gallery foto diblog akan semakin menarik dan cantik tentu kesanya agar enak dan nyaman untuk di lihat oleh semua pengunjung blog anda, Agar kesanya bisa memikat visitor yang sengaja datang ke blog Anda, Ataupun yang tidak sengaja mengunjungi blog anda. Gimana Sob penasaran..? Mari silahkan membaca artikelnya lebih lanjut dibawah ini.</div><h4 style="text-align: left;"><span style="font-size: large;">Baca Juga Artikel Lainya :   <a href="http://karristaent.blogspot.com/search/label/Effects%20Blogger?max-results=6" rel="nofollow" target="_blank" title="Effects Blogger">Selurunya Label Effects Blogger</a></span></h4><h3 style="text-align: left;">Gallery Foto yang Cantik :</h3><div style="text-align: justify;">Bagi anda yang suka dengan berbagai koleksi gambar atau foto, atau juga background dan wallpaper lainya yang anda koleksi. Namun anda ingin di simpan disuatu situs atau blog agar moment atau gambar kesenanganya bisa tersimpan dengan aman dan rapi tidak ada salahnya penyimpananya dihiasi dengan tampilan yang menarik agar tidak bosan mata memandangnya. Disini saya akan memberikan tutorial cara membuat gallery foto sekaligus sedikit foto moment crew saya saat mentas pada salah satu tempat. Itu sebagai figuran saja sebagai pelengkap contoh pada tutorial ini. Jika gambar foto nya kurang cakep maklum ya,, itu semata hanya figuran saja.</div><h5 style="text-align: left;"><span style="font-size: large;">Membuat Gambar-Foto lebih Menarik :</span></h5><div style="text-align: justify;">Ada beberapa cara agar gambar postingan atau kumpulan foto diblog menjadi lebih menarik. Contohnya seperti yang saya posting ini. Dengan serangkaian kode CSS Sebagai penghias agar gamabar foto tersebuat terkesan punya nilai lebih. Seperti pada web situs besar penyedia Gallery foto itu nanti jika trik ini bisa anda pasang. Karena saya terinfirasi dengan tampilan foto foto di situs tersebut maka saya ingin mencobanya di pajang pada blog saya. Dan dari pengalaman itu saya dapatkan maka pada hari ini saya ingin berbagi apa yang pernah saya ingin dan saya dapatkan.</div><h6 style="text-align: left;"><span style="font-size: large;">Cara memasang Gallery foto dengan CSS :</span></h6><div style="text-align: justify;">Seperti biasa masuk Dashboard blog anda jangan lupa sign in : Setelah dashboard terbuka silahkan buka template selanjutnya pilih edite template. Selanjutnya Anda cari kode : <b><span style="color: blue;">]]></b:skin>  </span></b>atau kode :  <b><span style="color: blue;"></style></span></b>  Tekan pada keyboard pc/laptop anda  <span style="color: blue;"><b>Ctr + F</b></span>  untuk memudahkan pencarian kodenya. Setelah ketemu kodenya, Selanjutnya copy kode dibawah ini dan pastekan tepat diatas kode :  <span style="color: blue;"><b>]]></b:skin> </b></span> atau kode :  <b><span style="color: blue;"></style></span></b>  Dibawah ini kode <span style="color: #38761d;"><b>CSS</b></span> nya :</div><br /><div><blockquote class="tr_bq">.ribbon-gallery { position: relative; color: #fff; display: inline-block; padding: 7px; overflow: hidden; font: bold 16px Arial; text-shadow:0 0 3px #f2f2f2 inset; width:260px; }<br />.ribbon-gallery img { width:250px; height:300px; border:5px solid #ffff00; }<br />.ribbon-gallery img:hover { border:5px solid #52e052; }<br />.ribbon-gallery p { display: inline; }<br />.ribbon-gallery p span { position: absolute; display: inline-block; right: -40px; top: 20px; text-align: center; text-transform: uppercase; background: #CC0000; border: 2px solid #ffff00; outline: 5px solid #CC0000; width: 150px; padding: 5px 10px; transform: rotate(45deg); }<br />.ribbon-gallery p:before { content: ""; width: 0; height: 0; position: absolute; top: -7px; right: 108px; z-index: 1; border: 7px solid; border-color: transparent transparent #CC0000 transparent; }<br />.ribbon-gallery p:after { content: ""; width: 0; height: 0; position: absolute; </blockquote><br />Sampai pada tahap ini save/simpan dulu template blog anda, dan lanjutkan tahap berikutnya.<br /><br /><b>Cara memasang URL Foto pada halaman postingan :</b><br /><div style="text-align: justify;">Setelah kode CSS diatas sudah tersimpan pada template anda. Maka agar gambar atau Foto anda bisa membentuk sebuah Gallery foto yang cantik dan menarik. Silahkan Masukan kode HTML dibawah ini pada area postingan, berikut dengan URL foto yang hendak anda pajang pada gallery tersebut. Pada kolom postingan pilih HTML jangan di kolom Compose, Dan saat Anda mempublikasikan artikelnya juga harus ada pada Kolom HTML. Di bawah ini kode Html nya :</div><br /><blockquote class="tr_bq"><div class="ribbon-gallery"><br /><a href="<span style="color: red;">http://karristaent.blogspot.com/</span>"><img alt="<span style="color: blue;">NAMA FOTO1</span>" src="<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinhGsDO2QlD-H6QiKNA5JUrDLQ3jO1F-_aJzYMixRctBh-nW0HyHd6hhcWurFdbs-TR7nnkjUZJAIyeQbm4BP70BBpc_38MCbDTQNNTcCXIkxJq5675n0iOwzHNpzYw92tVxMx-u11KpA/s1600/Gadizz+Melodyz+Mega+pwdTATI+KARRYSTA.jpg</span>" /></a><p><br /><span><span style="color: blue;">NAMA FOTO1</span></span></p><br /></div><br /><div class="ribbon-gallery"><br /><a href="<span style="color: red;">http://karristaent.blogspot.com/</span>"><img alt="<span style="color: blue;">NAMA FOTO2</span>" src="<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSJHqNhKNJYsFlcPtFTNvl006mOFPZqHGBW8qhX8Ai6YnphFzAf3Mo1MjgkgPAWH-QoCKd9C0XjLW8chMx1BZZsKytUKzA0wLlro6dm1E_CRlxB5CbPG6T1rjx8dSV1NFsJVTeIzY9qXY/s1600/A.WINDA+S.JPG</span>" /></a><p><br /><span><span style="color: blue;">NAMA FOTO2</span></span></p><br /></div><br /><div class="ribbon-gallery"><br /><a href="<span style="color: red;">http://karristaent.blogspot.com/</span>"><img alt="<span style="color: blue;">NAMA FOTO3</span>" src="<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJP7ewNm_KgJJOL3gpykjPhkBR-D_Zx2XzgjN7xYljUnO5Gr_6oXP-qpSWJaMzjB1Qvq9nJgaVWLHQcnMeOHAgpONwjKyWTw4fKSQmL-gA8Yzp1u1e-IQ_yMBzUGDkKYMEOkQKMEkM3ExW/s1600/NADA+KARRYSTA.jpg</span>" /></a><p><br /><span><span style="color: blue;">NAMA FOTO3</span></span></p><br /></div><br /><span style="color: orange;"><b><div class="ribbon-gallery"><br /><a href="http://karristaent.blogspot.com/"><img alt="NAMA FOTO4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSU2cpNmeARXzdWlRm-eyEm-1FOlxE-AheuGv0sNmpcDkTF2uUXZ2fbQbNhH9_RALMo0hkoHhspWzGwQlFxC3BVaSnFhtYpUwmx1bEr4djkyMserGDB5n36XZDFaGfsaPN-uuNWVP5jjs/s1600/Ade+Tati-The+Shoreline-10R-+print.jpg" /></a><p><br /><span>NAMA FOTO4</span></p><br /></div></b></span></blockquote><br /><br /><b>Keterangan :</b><br /><div style="text-align: justify;">01. Yang perlu anda edit dan diganti agar sesuai dengan blog juga foto yang anda posting, Maka Ganti yang berwarna MERAH Dengan Url blog anda dan URL Foto yang akan di pasang pada galerry. 02. Ganti tulisan yang berwarna BIRU dengan Nama Foto/Gambar yang akan anda pajang. 03. Contoh Kode HTML diatas hanya berjumblah 4.foto saja. Jika anda ingin menambahkan foto lebih banyak lagi pada Gallery foto anda. Copy paste Kode yang berwarna ORANGE pastekan dibawah kode </div> yang terakhir. Jangan lupa kasih nama pada masing masing foto yang terpasang agar captionya bisa menampilkan selendang pading yang menyamping di sudut kanan atas pada setiap tampilan foto pada Gallery anda. Setelah semuanya diterapkan sesuai petunjuk. Yang Terakhir publikasikan artikel anda. Dan ingat saat mempublikasikan posisinya harus ada pada area posting di kolom HTML jangan di Kolom Compose. </div><div style="text-align: justify;"><br /></div><b>Untuk melihat DEMO Tutorial ini silahkan buka halaman Demonya di bawah ini : </b><br /><br /><b>Buka halaman ini untuk melihat : </b> <a href="http://karristabloggerdemo.blogspot.com/2014/11/gallery-gorgeous-photo-memories.html" rel="nofollow" target="_blank" title="Gallery gorgeous photo memories"><b><span style="font-size: x-large;">DEMO GALLERY 1</span></b></a><br /><br /><b>Atau halaman ini untuk melihat : </b> <a href="http://karristaent.blogspot.com/2011/04/segenap-crew-karrysta_04.html" rel="nofollow" target="_blank" title="Gallery Foto Artis Pantura"><b><span style="font-size: x-large;">DEMO GALLERY 2</span></b></a><br /><br /><div style="text-align: justify;"><b>Haturan :</b></div><div style="text-align: justify;">Demikianlah kiranya yang bisa saya hadirkan buat anda semua. jika ada kesulitan silahkan diskusikan lewat form komentar dibawah ini. Mohon maaf jika ada kesalahan pada semua isi tulisan pada artikel ini. Jika anda bersedia melengkapi post yang saya bagikan ini. silahkan taburi dengan teks komentar. Semoga bisa di pahami, Selamat mencoba semoga berhasil "Cara Membuat Gallery Foto Cantik Dengan CSS" ini. Salam santun yang saya haturkan Salam Ceria yang saya bawa. Semoga sukses dan keberhasilan selalu bisa anda raih.. Happy Blogging...</div></div><br /><!-- Blogger automated replacement: "https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2F3.bp.blogspot.com%2F-thsyS-4pFxY%2FVFdMcy9H31I%2FAAAAAAAAFOE%2FOB30mYIdjEM%2Fs1600%2Fgallery-karrysta.jpg&container=blogger&gadget=a&rewriteMime=image%2F*" with "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvwfKhXdBfgQsoKrxznjrMKRAPf-jJBSF5kkr2mhCyFLbxaC4l6Q5CM56y-ehkZYQ0Q9xX-ADKammCSElxjIeYkqQkf3gcPMdgBKDhzT-DgC6ZkeMVkHut9NcFE7tDkf56US5Enl2NAFgj/s1600/gallery-karrysta.jpg" -->

Cara Membuat Gallery Foto Cantik Dengan CSS Assalamualaikum warahmatullahi wabarakatuh. S alam ceria selalu buat sahabat blogging yang terci...

Read More

Koleksi Script Effects untuk Blog

<h2 style="text-align: left;"><span style="font-size: small;"><a href="http://karristaent.blogspot.com/2014/05/koleksi-script-effects-untuk-blog.html" rel="nofollow" target="_blank" title="Koleksi Script Effects untuk Blog">Koleksi Script Effects untuk Blog</a></span></h2><div style="text-align: justify;"><span class="awal">S</span>alam jumpa buat sobat dan sohib semua, hari ini saya baru bisa buat lagi artikel baru setelah kemarin sedikit berhalangan dengan kuota internet saya, alias kehabisan bahan bakar hehhe. Yah maklum saja tinggal di desa terpencil pastinya tidak seberuntung tinggal di Kota yah Sob..? Namun apapun itu alasanya saya tetap semangat dan berusaha untuk saling berbagi yang sekiranya saya bisa untuk di bagikan. Seperti pada pertemuan ini saya akan berbagi script untuk menghias blog, jadi bagi sobat yang suka dengan mendesain template nya dengan aneka widget dan gadget, bisa anda nikmati pada postingan saya ini. Namun saya sarankan pakailah widget yang di kira penting atau yang anda sukai saja, biar load blog jangan terhambat.</div><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Effects Blogger" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjOOuMHSa3KKgE5m1_AQtNv-EnNU15IDPxwCxuA5lWugegfOeLnHEj4wBap2GNaHOEZ1lEWJhYzbd6vmHjR60Iw7xgpmPZmjweBE43tG-OkFu3otMVrMUIhEK2bwkAAqg_r0oYuLOlJyOk/s1600/Koleksi+Script+Effects+untuk+Blog.jpg" title="Koleksi Script Effects untuk Blog" /></div><h4 style="text-align: center;"><span style="font-size: large;">Baca juga artikel :  <a href="http://karristaent.blogspot.com/2014/05/tayangan-video-lesti-4-besar-d-academy.html" rel="nofollow" target="_blank" title="Tayangan video Lesti 4 Besar D Academy">Tayangan video Lesti 4 Besar D Academy</a></span></h4><h3 style="text-align: left;"><span style="font-size: small;">Jenis Effects blog :</span></h3><div style="text-align: justify;">Pada kesempatan ini saya tidak pilih-pilih lagi script effects untuk accecories pada blog. Apa yang saya ada dan punya semua nya akan saya bagikan pada kesempatan ini. Jadi bagi anda yang berminat untuk memsang atau sebatas ngoleksi saja script yang akan saya sahare ini silahkan lebih lengkapnya download saja kumpulan Script effects untuk blog nya berikut di bawah ini : </div><div style="text-align: left;"><br /><b>Untuk mendapatkan kumpulan kode scirpt nya silahkan download :   </b> <span style="font-size: large;"><a href="http://karristaentblog.mywapblog.com/files/koleksi-effects-blog.rar" rel="nofollow" target="_blank" title="Koleksi effects blog">DISINI</a></span><br /><h5 style="text-align: left;"><span style="font-size: small;">Cara memasang kode diatas :</span></h5><div style="text-align: justify;">Masuk dasboard pilih tata letak/layout kemudian pilh add widget, kemudian pilih script effects yang anda sukai diatas setelah selesai terpasang selanjutnya save widget, seperti biasa setelah anda menambahkan widget baru pada layout anda tentu anda harus menghapus kode yang membuat error validasi html 5.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Rupanya artikel saya cukup sekian sampai disini. semoga dengan kemasan yang sederhana ini bisa untuk berbagi menambah pengetahuan sobat semua. adapun script ini di pakai atau tidaknya itu semua hak anda. Terima kasih atas kunjunganya salam sejahtera buat anda semua, Salam blogging ... </div></div>

Koleksi Script Effects untuk Blog S alam jumpa buat sobat dan sohib semua, hari ini saya baru bisa buat lagi artikel baru setelah kemarin se...

Read More

Menghias Widget popular post alakadarnya

<h2 style="text-align: left;"><span style="font-size: small;"><a href="http://karristaent.blogspot.com/2014/05/menghias-widget-popular-post-alakadarnya.html" rel="nofollow" target="_blank" title="Menghias Widget popular post alakadarnya">Menghias Widget popular post alakadarnya</a></span></h2><div style="text-align: justify;"><span class="awal">T</span>erkadang aktivitas ngeblog bisa saja malas ada juga membosankan, Pantas saja bagi teman blogging menggunakan iklan pada blognya selain untuk mengurangi kebosanan bisa juga sebagai sumber penghasilan dengan memasang iklan pada blognya. Namun pada blog saya bukan berarti tidak ingin memasang iklan hanya saja blog saya belum ramai pengunjung dan saya rasa belum waktu kali yah.? Rasa bosan dan malaes ini bukan berarti saya tidak ingin berbagi, Namun sedikit ada gangguan fisik yang sedikit badan saya kurang vit. Apa gara-gara saya nginep, Semalam di Kota Sumedang yah? Tapi kayanya gak deh..Hanya pergantian cuaca di tempat saya, sehingga udara kurang bersahabat dengan tubuh saya sehingga 2 Hari kemarin saya agak berkurang aktivitas blogging dan blogwalking. Mohon maaf buat Sahabat blogging semua jika saya belum bisa BW ke blog Anda. Semoga dengan akan di postingan tutorial Menghias Widget popular post yang sealakadarnya ini saya secepatnya bisa berkunjung balik ke blog Sobat semua.</div><div style="text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: center;"><img alt="Trik Blogger" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0AY5Q1Wr0ZtuEgRekXgLRgLZwEGXEUY2rxx38ZrOGbziDk5Ekbd-8TbyQ1RoP7Ti1n-U1HiRQNthh8k6ev34xMx-w3tKlyzPnTB497_CVsqX-o2CTJLLOOtB2pIW8a56tVx8QFo64oa8a/s1600/Menghias+Widget+popular+post+alakadarnya.jpg" title="Menghias Widget popular post alakadarnya" /></div><h4 style="text-align: center;"><span style="font-size: large;">Baca juga artikel lainya :   <a href="http://karristaent.blogspot.com/2014/05/pendidikan-anak-usia-dini.html" rel="nofollow" target="_blank" title="Pendidikan anak usia dini">Pendidikan anak usia dini</a></span></h4><div style="text-align: justify;"><div style="text-align: center;"><b>Untuk tampilan demonya bisa Anda buka :   <span style="font-size: large;"><a href="http://karristaent.blogspot.com/search/label/Trik%20Blogger?max-results=7" rel="nofollow" target="_blank" title="Trik Blogger">DISINI</a></span></b></div><br /><span class="awal">U</span>ntuk mengobati kesuntukan pada saat ngeblog tidak ada salah nya saya akan berbagi Trik blogging untuk menghias mempoles widget popular post, Walaupun artikel serupa sudah banyak bertebaran di dunia online, Namun barangkali sebagian dari Anda yang berminat dengan tutorial yang akan saya bagikan pada kesempatan ini. Sebelumnya jenis dari popular post ini pernah di posting Oleh  <i>Kang Adhy Suryadi</i>  teman blogging senior saya. Namun pada postingan ini sedikit saya menambahkan beberapa script untuk menghiasi wideget popular post ini, Dari segi warna dan tampilan mungkin sama namun nanti hasil dan penampakanya sedikit unik dan di bedakan dengan menamabahkan pada bagian tertentunya. jika berminat silahkan simak</div><h3 style="text-align: left;"><span style="font-size: small;">Tekhnik awal Menghias Widget popular post sealakadarnya :</span></h3><div style="text-align: justify;">Pertama cara memasang widget tersebut, pastikan anda sudah masuk di account anda. Pilih dasboard kemudian pilih tataletak/layout selanjutnya pilih add widget dan pilih entri popular seperti gambar di bawah ini penampakan memilih widget popular nya :</div><div style="text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: center;"><img alt="Trik Blogger" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4IJJdvN-JAY8xxNsPVcZktgZAisHk5_703bcSaIj-duGvUW50Dvb5yMR1IlJSpxYWml6fFUGb-MEn7EPKphnIGP4TOQhAVDdql3B5Gp_tytijr6PGeS-pgkJ3R5LLftO6As3TyBJ7vtSq/s1600/Menghias+Widget+popular+post+alakadarnya2.jpg" title="Menghias Widget popular post alakadarnya" /></div><h5 style="text-align: left;"><span style="font-size: small;">Otimasi widget popular post :</span></h5><div style="text-align: justify;">Jangan lupa kasih nama judul widget popular post itu jika ingin yang di tampilakn pada widget popular post Artikel anda yang paling baru maka pilish pada 7 hari terakhir contoh seperti yang nampak pada gambar diatas, atau apa saja yang anda kehendaki. Dan pada pilihan di bawah nya tidak usah ada yang di contreng, karena pada tutorial ini tidak akan menampilkan gambar juga cuplikan diskripsi, pilih nominal yang anda akan tampilkan pada popular post setelah selesai jangan lupa save/simpan widget popular postnya.</div><br /><div style="text-align: justify;">Agar widget popular post ini bisa valid Html5 jangan lupa hapus kode di bawah ini dengan cara masuk blog Anda pilih template dan pilih edite template cari kode di bawah ini tekan <span style="color: blue;">Ctrl + F</span> Untuk memudahkan pencarianya, dan temukan kode berikut ini setelah ketemu hapus kumpulan kode tersebut, dan save template </div><br /><blockquote class="tr_bq"><b:include name='quickedit'/></blockquote><br /><div style="text-align: justify;">Apabila langkah ini sudah di terapkan pada blog anda atau anda sudah memasang widget popular post sebelumnya, Maka trik diatas lewati saja, silahkan anda lanjutkan pemasangan scripts lainya</div><br /><div style="text-align: justify;">Untuk mempengaruhi widget popular post ini menjadi tampil elegan copy kode Css di berikut ini. Masih pada edit template. Cari kode <span style="color: #351c75;">]]></b:skin></span> atau <span style="color: #351c75;"></style></span> Setelah ketemu pastekan Css di bawah ini tepat diatas kode : <span style="color: blue;">]]></b:skin></span> atau <span style="color: blue;"></style></span></div><br /><div><div style="margin: 2px; text-align: center;"><div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;"> </span></i><input class="BD_spoler" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'TUTUP KODE CSS'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'BUKA KODE CSS'; }" style="font-size: large; margin: 0px; padding: 0px; text-align: center; width: 320px;" type="button" value="BUKA KODE CSS" /></div><div class="alt2" style="background-color: #ebebeb; border: 1px inset; font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 0px; padding: 4px;"><div style="display: none;"><br /><blockquote class="tr_bq"><i rel="pre">/* -- ENTRI POPULAR -- */<br />#PopularPosts1{margin-top:0px;margin-bottom:-3px}<br />#PopularPosts1 h2 {background:#008b8b;color:#ccffff;margin:0;padding-left:6px;text-shadow:none;border:4px double #66ffff;}<br />.PopularPosts .widget-content ul{margin:0;padding:6px !important;list-style-type:none;background:#f8ca12;}<br />.PopularPosts .widget-content ul li{position:relative;padding:10px 40px 10px 10px!important;max-width: 83%;margin-bottom:1px}<br />.PopularPosts .widget-content ul li:first-child {background:#2a6963;width:93%}<br />.PopularPosts .widget-content ul li:first-child:after{content:"01";}<br />.PopularPosts .widget-content ul li:first-child + li{background:#2f7b73;width:93%}<br />.PopularPosts .widget-content ul li:first-child + li:after{content:"02";}<br />.PopularPosts .widget-content ul li:first-child + li + li{background:#27857c;width:93%}<br />.PopularPosts .widget-content ul li:first-child + li + li:after{content:"03";}<br />.PopularPosts .widget-content ul li:first-child + li + li + li{background:#269389;width:93%;}<br />.PopularPosts .widget-content ul li:first-child + li + li + li:after{content:"04";}<br />.PopularPosts .widget-content ul li:first-child + li + li + li + li{background:#40a197;width:93%;}<br />.PopularPosts .widget-content ul li:first-child + li + li + li + li:after{content:"05";}<br />.PopularPosts .widget-content ul li:first-child + li + li + li + li +li{background:#1bae9f;width:93%}<br />.PopularPosts .widget-content ul li:first-child + li + li + li + li +li:after{content:"06";}<br />.PopularPosts .widget-content ul li:first-child + li + li + li + li + li +li{background:#1db9a9;width:93%}<br />.PopularPosts .widget-content ul li:first-child + li + li + li + li +li +li:after{content:"07";}<br />.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li +li{background:#47c4b7;width:93%}<br />.PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li +li:after{content:"08";}<br />.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li +li{background:#44cec1;width:93%}<br />.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li +li:after{content:"09";}<br />.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li + li +li{background:#40e0d0;width:93%}<br />.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li +li +li:after{content:"10";}<br />.PopularPosts .widget-content ul li:first-child:after,<br />.PopularPosts .widget-content ul li:first-child + li:after,<br />.PopularPosts .widget-content ul li:first-child + li + li:after,<br />.PopularPosts .widget-content ul li:first-child + li + li + li:after,<br />.PopularPosts .widget-content ul li:first-child + li + li + li + li:after,<br />.PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after,<br />.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after,<br />.PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li +li:after,<br />.PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li + li +li:after,<br />.PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li + li +li +li:after<br />{position:absolute;top: 2px;right: 2px;background:#4682B4;width:20px;line-height:1em;text-align:center;color:#fff; font-size:11px !important; font-weight:bold;padding: 15px 5px;}<br />.PopularPosts .widget-content ul li .item-thumbnail{float:left;border:0;margin-right:10px;padding:0;width:30px;height:90px}<br />.PopularPosts .widget-content ul li a{color:white;text-decoration:none;}<br />.PopularPosts .widget-content ul li a:hover{color:#66ff00;}</i></blockquote><br /></div></div></div></div><br />Silahkan sesuaikan tampilan juga warna pada background popular post ini, dan silahkan anda berkreasi, Setelah semuanya terpasang dengan benar silahkan save template dan silahkan lihat blog anda.<br /><h6><span style="font-size: small;">Kesimpulan :</span></h6><div style="text-align: justify;">Apapun jenis widget popular post yang anda pilih saya kembalikan pada selera anda masing-masing hanya saran saja. Pergunakanlah widget yang sekiranya paling penting saja, karena blog dengan berbagai macam widget dan banner apapun itu hanya akan merugikan anda sendiri, karena pengunjung siapa saja akan malas jika blog yang di kunjungi sangat berat dengan load yang lola alias loading lama. semoga bisa mengambil intisari dari tutorial ini. Hanya saran gunakanlah semua element blog kalau bisa yang serba Valid Html5 dan Css3 plus Responsive agar lebih ramah dan bersahabat. Karena ada nilai lebih lho,,di balik optimasi itu semua. Bagi yang peduli dengan Validasi itu juga. Oke Sob selamat mencoba semoga artikel ini bisa memberi warna ceria untuk saling berbagi, Salam blogging ...</div>

Menghias Widget popular post alakadarnya T erkadang aktivitas ngeblog bisa saja malas ada juga membosankan, Pantas saja bagi teman blogging ...

Read More

Mempercantik Gambar Dengan Style CSS

<div dir="ltr" style="text-align: left;" trbidi="on"><h2 style="text-align: left;"><span style="font-size: small;"><a href="http://karristaent.blogspot.com/2013/11/mempercantik-gambar-dengan-style-css.html" title="Mempercantik Gambar Dengan Style CSS">Mempercantik Gambar Dengan Style CSS</a></span></h2><br />Untuk membuat tampilan blog menarik juga enak  di pandang mata maka harus berupaya<br />Dan berusaha walau  keberadaanya  tidak  ada  kaitanya  dengan  <b>SEO</b>  namun  stidak nya<br />Tutorial ini akan  memperbaiki  sekor di  <b>Chkme</b>,  karena  script  yang akan  saya  publikasi<br />Pada pertemuan kali ini, sengaja saya lengkapi dengan title , alt dan caption pada gambar <br />Di blog anda. Dan tentunya  selain  lebih  <b><a href="http://karristaent.blogspot.com/search/label/Tips%20Trik%20SEO" title="Tips Trik SEO">SEO</a></b>  sudah  pasti  lebih menarik  dengan effects<br /><i><b>Style CSS</b></i>  yang sekarang  yang akan  saya share  untuk sobat blogging silahkan di simak<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="http://karristaent.blogspot.com/2013/11/mempercantik-gambar-dengan-style-css.html" imageanchor="1" rel="nofollow" style="margin-left: auto; margin-right: auto;" target="_blank"><img alt="Mempercantik Gambar Dengan Style CSS" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaR_LYve5L5rfE4V0Lg3FF-dKQXymvBFE4qCadVbIF1aSABDlwfq9m6QjhwbZcmkBEZezVYcyMh43QOxRia6zmeq248POWOgLD3G-_UOkeGQ_8I3BrsXy1meWV8ABZ8cHnc2jtlvcYmeSx/s320/Mempercantik+Gambar+Blog+Dengan+Style+CSS.jpg" title="Mempercantik Gambar Dengan Style CSS" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Mempercantik Gambar Dengan Style CSS</td></tr></tbody></table><br /><b>Sebelum melanjutkan tutorial ini silahkan untuk melihat demo di bawah ini :</b><br />                        <br />                                                      <span style="font-size: x-large;"> <a href="http://tutorialchayikn.blogspot.com/2013/11/demo-preview-zoom-gambar-postingan.html" rel="nofollow" target="_blank" title="Demo Effects CSS Gambar Postingan">DEMO</a></span><br /><br />Untuk membuat  <b>Gambar</b> di blog  lebih  bervariatif  unik,  appear  attractive style<br />Yang akan menghiasi homepage blog anda tentunya script ini bisa bermanfaat<br />Buat anda yang berminat mendesain tampilan  yang baru dengan  gaya artistic<br />Nah untuk memasang scripts diatas silahkan anda  simak berikut di bawah ini <br /><br /><h3><span style="font-size: small;">Cara memasangnya :</span></h3>Sign in di accaount blog anda masuk dasboard, pilih template lalu pilih edite template<br />Cari kode  <span style="color: blue;"><head></span>  tekan <span style="color: blue;">Ctrl + f </span> untuk  memudahkan  pencarian  kodenya. copy kode <br /><span style="color: green;">CSS</span> di bawah ini  kemudian  anda pastekan   kodenya  tepat  di bawah kode   <span style="color: blue;"><head></span><br /><br /><pre><code><style type="text/css">.mode8{<br />border: 3px solid #F7A808;<br />border-style:double;<br />margin:10px auto;<br />text-align:center;<br />-webkit-transition: all 2s ease-in-out;<br />-moz-transition: all 2s ease-in-out;<br />-o-transition: all 2s ease-in-out;<br />-ms-transition: all 2s ease-in-out;<br />transition: all 2s ease-in-out;<br />padding-top:5;<br />padding-left:5;<br />padding-bottom:5;<br />padding-right:5;<br />}<br />.mode8:hover{<br />-webkit-transform:rotate(720deg) scale(2,2);<br />-moz-transform:rotate(720deg) scale(2,2);<br />-o-transform:rotate(720deg) scale(2,2);<br />-ms-transform:rotate(720deg) scale(2,2);<br />transform:rotate(720deg) scale(2,2);   <br />}</style><br /><style type="text/css"><br />.mode12{<br />    box-shadow: 1px 1px 13px 3px rgba(0,0,0,0.5);<br />    border-radius:0;<br />    -moz-border-radius:0;<br />    -webkit-border-radius:0;<br />    -o-border-radius:0;<br />}<br />.mode12:hover {<br />    border-radius: 33px 0 30px 0;<br />    -moz-border-radius: 30px 0 30px 0;<br />    -webkit-border-radius: 33px 0 30px 0;<br />    -o-border-radius: 33px 0 33px 0;<br />    transition: all 0.5s;<br />    -moz-transition: all 0.5s;<br />    -webkit-transition: all 0.5s;<br />    -o-transition: all 0.5s;<br />}</style><br /><style type="text/css"><br />.mode6 {   opacity:0.5;   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);   -moz-opacity:0.5;   -khtml-opacity:0.5; } .mode6:hover {   opacity:1.0;   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);   -moz-opacity:1.0;   -khtml-opacity:1; }<br /></style><br /><style type="text/css"><br />.mode13 {-webkit-transition-duration:.4s;}<br />.mode13:hover {filter: alpha(opacity=60);opacity: .9.9;border-radius:50px;border: 1px #FF66CC;-webkit-box-shadow: 0px 0px 20px #FF66CC;-moz-box-shadow: 0px 0px 20px #FF66CC;}</style></code></pre><br /><i><b>Setelah penerapan kode CSS nya terpasang dengan benar klik save - simpen template </b></i><br /><br />Untuk memasang effects pada gambar copy kode Html, di bawah ini pada saat anda membuat<br />Artikel baru, disini saya memberikan 4 karakter effects gambar dengan CSS dan nantinya anda<br />Tinggal memilih tampilan dengan keunikan 4 karakter effects style CSS copy kode  di bawah ini<br />Pada artikel blog baru anda, pada posisi mode HTML, jangan pada kolom compose<br /><br /><br /><b>Copy - paste kode Html di bawah ini di artikel baru blog anda :</b><br /><br /><blockquote class="tr_bq"><div class="separator" style="clear: both; text-align: center;"><img alt="<span style="color: blue;">Mempercantik Gambar Dengan Style CSS</span>" class="<b><span style="color: orange;">mode6</span></b>" height="<b><span style="color: #green;">200</span></b>" src="<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3OC2822VilNfnmfnjTPPnNdpueQClwJZt4YlkgZ4RAoirQGQIMA28Kz5ohf4IJPo2ZtBcphrdKlDA_AXwtp5wXF37IP2id-py6J_W5N8yQHfQUyB5NzDIVQZbR884SWzn3j2nfWqWB6U/s1600/DEMO2.jpg</span>" title="<span style="color: blue;">Mempercantik Gambar Dengan Style CSS</span>" width="<b><span style="color: #green;">320</span></b>" /></div></blockquote><br /><h3 style="text-align: left;"><span style="font-size: small;">Keterangan kode diatas :</span></h3><div style="text-align: left;">Yang berwarna <span style="color: blue;">Biru</span> ganti  dengan tag  <u>Alt - Title</u>  atau dengan  judul  artikel anda <br />Yang berwarna <span style="color: red;">Merah</span>  silahkan  ganti  dengan  <u><b>URL Gambar</b></u>,  yang  anda  sukai<br />Yang berwarna <b><span style="color: #green;">Hijau</span></b> silahkan sesuaikan  gambar sesuai yang  anda kehendaki<br />Yang berwarna <b><span style="color: orange;">Orange</span></b>,  pilihan number  <u><b>Effects</b></u>  ganbar  kode nya  ada 4 mode <br />Setelah semuanya tertata dengan benar silahkan anda publikasi artikel barunya</div><br /><h4 style="text-align: left;"><span style="font-size: small;">Kesimpulan :</span></h4><div style="text-align: left;">Ada 4 jenis karakter effects CSS ini contoh lists nya seperti di bawah ini<br /><br />*<span style="color: orange;"> Mode8</span>   = Effects rotasi spining atau berputar kemudian Zoom<br />*<span style="color: orange;"> Mode12</span> = Effects Ketupat melengkung atas, kanan bawah border<br />* <span style="color: orange;">Mode6</span>   = Effects Fade in gambar menjadi blur ligth di sorot mouse<br />*<span style="color: orange;"> Mode13</span> = Effects Melingakar bundar menyerupai gelembung baloon</div><br /><div><h4 style="text-align: left;"><span style="font-size: x-small;">Demikianlah artikel saya semoga bermanfaat buat anda semua... </span></h4><span class="short_text" id="result_box" lang="id"><span class="hps"></span></span><span class="short_text" id="result_box" lang="en"><span class="hps"></span></span></div></div>

Mempercantik Gambar Dengan Style CSS Untuk membuat tampilan blog menarik juga enak  di pandang mata maka harus berupaya Dan berusaha walau  ...

Read More

Membuat Preview Zoom Gambar Postingan

<div dir="ltr" style="text-align: left;" trbidi="on"><h2 style="text-align: left;"><span style="font-size: small;"><a href="http://karristaent.blogspot.com/2013/11/membuat-preview-zoom-gambar-postingan.html" rel="nofollow" target="_blank" title="Membuat Preview Zoom Gambar Postingan">Membuat Preview Zoom Gambar Postingan</a></span></h2><h2 style="text-align: left;"><span style="font-size: small;"> </span></h2>Kembali beraktivitas  blogging mengisi  waktu  luang  di sela  waktu yang  di bagi-bagi<br />Antara rutinitas dan kecintaan dengan Blogger yang sangat saya sukai walau dengan<br />Keadaan apapun tetap exiz untuk saling berbagi kemarin saya sudah  posting tentang<br /><b><a href="http://karristaent.blogspot.com/2013/11/minum-es-buah-lontar-menyegarkan-badan.html" rel="nofollow" target="_blank" title="Minum Es Buah Lontar Menyegarkan Badan">Minum Es Buah Lontar Menyegarkan Badan</a></b>, dan pada  artikel kali ini yang saya akan <br />Publikasi sekarang ini, membahas tentang gambar yang berada pada postingan blog<br />Untuk lebih lengkap nya,  jika anda  tertarik silahkan  di simak  tutorialnya  di bawah ini<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="http://draft.blogger.com/%3Ca%20href=%22http://karristaent.blogspot.com/2013/11/membuat-preview-zoom-gambar-postingan.html%22%20title=%22Membuat%20Preview%20Zoom%20Gambar%20Postingan%22%3EMembuat%20Preview%20Zoom%20Gambar%20Postingan%3C/a%3E" imageanchor="1" rel="nofollow" style="margin-left: auto; margin-right: auto;" target="_blank"><img alt="Membuat Preview Zoom Gambar Postingan" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXVHbhMW-wkFJ2m1zhLAmqJuuR2D3PWNZEKARw7KT8mONS_FUDGwpKy2-bfXNmJdcGH2HacOJpLCNn9ZrMGYjbiYC2cseWn6f0NE83KHtItK0wNOxH_1If_lsp5r0QLr6s8a0O6kfke8fJ/s1600/Membuat+Preview+Zoom+Gambar+Postingan+Blog.jpg" title="Membuat Preview Zoom Gambar Postingan" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Membuat Preview Zoom Gambar Postingan</td></tr></tbody></table><div class="separator" style="clear: both; text-align: center;"></div><br />Pada tutorial sebelum nya  saya sudah berbagi,  <b><a href="http://karristaent.blogspot.com/search?q=zoom&submit=Cari+Artikel+disini" rel="nofollow" target="_blank" title="Membuat Effects Zoom Semua Gambar Diblog">Membuat effects zoom semua gambar diblog</a></b> <br />Mungkin  di artikel kali ini  masih  membahas seputar  gambar dengan  <b>Effects Zoom</b>  tapi pada<br />Postingan yang sekarang saya bagikan ini,  akan sedikit berbeda dengan  tampilan sebelumnya<br />Dimana markup dan juga <b>CSS</b>  nya sedikit  saya poles agar sobat bisa  memanfaatkan  script ini<br />Langsung saja bagi sobat semua yang ingin mencoba berikut di bawah ini  cara pemasanganya<br /><br /><h3 style="text-align: left;"><span style="font-size: small;">Cara memasangnya :</span></h3>Masuk dasboard blog anda kemudian cari kode  <span style="color: blue;"> ]]></b:skin></span>  tekan Ctrl + f untuk memudahkan<br />Pencarian kodenya, kalau sudah ketemu copy kode di bawah ini paste diataskode  <span style="color: blue;">]]></b:skin></span><br /><br /><pre><code>  <style type="text/css"><br />    .thumbnail{<br />    position: relative;<br />    z-index: 0;<br />    }<br />    .thumbnail:hover{<br />    background-color: transparent;<br />    z-index: 50;<br />    }<br />    .thumbnail span{ /*CSS for enlarged image*/<br />    position: absolute;<br />    background-color: lightyellow;<br />    padding: 5px;<br />    left: -1000px;<br />    border: 1px dashed gray;<br />    visibility: hidden;<br />    color: black;<br />    text-decoration: none;<br />    }<br />    .thumbnail span img{ /*CSS for enlarged image*/<br />    border-width: 0;<br />    padding: 2px;<br />    }<br />    .thumbnail:hover span{ /*CSS for enlarged image on hover*/<br />    visibility: visible;<br />    top: 0;<br />    left: 60px; /*position where enlarged image should offset horizontally */<br />    }<br />    </style></code></pre><br />Preview peninjauan barangkali ada yang salah, atau, <span style="color: red;">Klik Save</span> - simpan template <br /><br /><h3 style="text-align: left;"><span style="font-size: small;">Cara menggunakan Preview zoom gambar :</span></h3>Copy kode  <b>Html</b> di bawah  ini pada  saat  anda  membuat  artikel  baru  pada  kolom Html<br />Jangan di mode Compose, dan pada saat mempublikasi postinganpun tetap pada mode<br />Html agar<b> Effects Preview Zoom</b>  nya bekerja secara Offtimal.  copy kodenya di  bawah ini<br /><br /><blockquote class="tr_bq"><a class="thumbnail" href="<b><span style="color: orange;">http://karristaent.blogspot.com</span></b>" title="<span style="color: blue;">Membuat Preview Zoom</span>"><img src="<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRQIZ0dYUJComyodp7-KDuCAaW-F8ktMb2BbIdC2QHDuzcTsmfv4SgAqoj1SG6KUH6EjJSYEgiX4D6DBiNNmRLRXfqP-BSgNcxI1CQFhvk5oGCtITXYVAXaZEkjr9w59xx623rnVUWgZRn/s1600/Membuat+Preview+Zoom.jpg</span>" width="100px" height="66px" border="0" /><span><img src="<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRQIZ0dYUJComyodp7-KDuCAaW-F8ktMb2BbIdC2QHDuzcTsmfv4SgAqoj1SG6KUH6EjJSYEgiX4D6DBiNNmRLRXfqP-BSgNcxI1CQFhvk5oGCtITXYVAXaZEkjr9w59xx623rnVUWgZRn/s1600/Membuat+Preview+Zoom.jpg</span>" /><span style="color: blue;">Membuat Preview Zoom Gambar Postingan</span></span></a></blockquote><br /><h3 style="text-align: left;"><span style="font-size: small;">Keterangan kode diatas :</span></h3>Ganti yang berwarna <span style="color: orange;">Orange</span> dengan link artikel baru di blog anda<br />Ganti yang berwarna<span style="color: blue;"> Biru</span> ada 2  dengan  <span style="color: #38761d;">Title + Alt</span>  gambar artikel <br />Ganti yang berwarna <span style="color: red;">Merah</span> dengan URL gambar yang akan di tampilkan pada artikel<br />Blog anda, cara mengambil URL gambar siapkan gambar yang akan di jadikan cover<br />Pada artikel,  Pada dalam posisi artikel baru masukan  type jenis gambar  pada menu icon <br />Insert images setelah gambar masuk di postingan ambil  URL nya, atau anda upload jenis<br />Gambar pada  penyedia  site hosting gratis  seperti  foto bucket  atau  hosting  gratis lainya<br /><br /><h4 style="text-align: left;"><span style="font-size: small;">Pernyataan :</span></h4>Setelah semuanya dikerjakan sesuai  prosedur diatas dengan benar maka  gambar postingan<br />Di blog anda pun akan menampilkan gambar postingan dengan  <b><a href="http://karristaent.blogspot.com/2013/11/membuat-preview-zoom-gambar-postingan.html" rel="nofollow" target="_blank" title="Membuat Preview Zoom Gambar Postingan">Effects review zoom gambar</a></b><br />Sekian artikel ini  semoga  bisa  bermanfaat  buat anda,  selamat mencoba   " <b>Happy blogging</b> " </div>

Membuat Preview Zoom Gambar Postingan   Kembali beraktivitas  blogging mengisi  waktu  luang  di sela  waktu yang  di bagi-bagi Antara rutin...

Read More

Membuat Gambar Postingan Dengan Tooltip

<div dir="ltr" style="text-align: left;" trbidi="on"><h2 style="text-align: left;"><span style="font-size: small;"><a href="http://karristaent.blogspot.com/2013/10/membuat-gambar-postingan-dengan-tooltip.html" rel="nofollow" target="_blank" title="Membuat Gambar Postingan Dengan Tooltip">Membuat Gambar Postingan Dengan Tooltip</a></span></h2><br />Terkadang untuk membuat pelengkap artikel di blog, selain isi  teks postingan  maka dengan<br />Menampilkan gambar pada content  yang hendak  kita publikasi,  karena hal  tersebut supaya<br />Postingan kita lebih relevan, juga lebih, memenuhi prosedur standar,  <a href="http://karristaent.blogspot.com/search/label/Tips%20Trik%20SEO" rel="nofollow" target="_blank" title="SEO">SEO</a>  juga di pencarian <br />Dan pada pertemuan kali ini,  sedikit saya akan berbagi tips trik membuat  agar gambar pada <br />Postingan bisa terlihat menarik, dengan menggunakan effects <u>tooltip</u>,  tertarik silahkan simak<br />Sebelum melanjutkan, artikel ini,  silahkan arahkan  pointer  anda pada gambar di bawah ini :<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><img alt="Membuat Gambar Postingan Dengan Tooltip" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinhRC__GxAkDWXpu9Ire2JGsowGfM0APaedhSHtbl0J1xY2Vgmx8AGjOMOm-DnMlS3TDUwCbwncFzSQ9ndp_qxOezldPsUkBMOTIVsmq3jVbjN61iTOkLEKQ1sJfu8BOAItQtOKSqkj_lW/s320/Cara+Membuat+Gambar+Postingan+Dengan+Tooltip.jpg" style="margin-left: auto; margin-right: auto;" title="Membuat Gambar Postingan Dengan Tooltip" /></td></tr><tr><td class="tr-caption" style="text-align: center;"> Membuat Gambar Postingan Dengan Tooltip</td></tr></tbody></table><br /><br />Screenshot diatas adalah hasil tampilan pada script yang sekarang ini saya bagikan, buat master<br />Blogging mungkin ini,  artikel yang sudah tidak asing lagi,  namun tidak menutup  kemungkin buat<br />Sobat blogging yang masih pemula seperti saya. ini adalah, sesuatu hal yang baru, baiklah sobat<br />Jika anda inginkan <u>gambar postingan</u> blog,  tampil dengan  effects tooltip  silahkan  simak tutorial<br />Panduan pemasangan nya,  nanti di tengah bar artikel ini, karena sebelum artikel ini saya publish<br />Sebelumnya saya share, <b><a href="http://karristaent.blogspot.com/2013/10/memasang-semua-komentar-terbanyak-diblog.html" rel="nofollow" target="_blank" title="Memasang Semua Komentar terbanyak Diblog">Memasang Semua Komentar terbanyak Diblog</a></b> dan sebagai cara untuk Bersilaturahmi sekaligus update blog terbaru maka artikel gambar postingan tooltip saya bagikan<br /><br /><h3 style="text-align: left;"><span style="font-size: small;">Cara Membuat Gambar Postingan Dengan Tooltip :</span></h3>Pertama masuk account anda dan sign in, kemudian pilih  dasboard lalu pilih template<br />Kemudian pilih  edite template,  lalu cari kode,  <span style="color: blue;"> ]]></b:skin></span>   tekan  <span style="color: blue;">Ctrl + f   </span>untuk  lebih<br />Memudahkan  pencarian kodenya,  selanjutnya  copy kode  di bawah ini  dan paste kan<br />Tepat di atas  kode  <span style="color: blue;">]]></b:skin></span>  atau pastekan  sebelum kode  <span style="color: blue;"></style></span>  template anda<br /><br /><pre><code class="language-css">#preview{ position:absolute;<br />border:1px solid #800080;<br />background:#228b22;padding:5px;<br />display:none;color:#ff8c00; }</code></pre><br />Yang berwrna Merah adalah kode warna, jika anda ingin merubah warna background tooltip<br />Atau borer, padding pada  gambar artikel dengan tooltip,  kunjungi page kode warna <b> <a href="http://karristaent.blogspot.com/2013/02/kode-warna.html" rel="nofollow" target="_blank" title="Kode Warna">DISINI</a></b><br />Selanjutnya masih  di edite Html ,  copy kode di bawah ini  paste tepat diatas  kode  <span style="color: blue;"></body></span> <br /><br /><pre><code class="language-markup"><script src='http://karrysta.googlecode.com/files/imgpreview.js' type='text/javascript'/></code></pre><br />Setelah tepat, pemasangan kode nya klik save,  dan selanjutnya cara menggunakan agar<br />Gambar postingan, atau semua gambar, juga image di blog tampil dengan  effects tooltip <br /><h3 style="text-align: left;"> </h3><br /><h3 style="text-align: left;"><span style="font-size: small;">Cara menggunakan gambar tooltip :</span></h3>Copy kode di bawah ini pada artikel terbaru di blog anda, pada posisi kolom Html <br /><br /><blockquote class="tr_bq"><a class="preview" href="<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinhRC__GxAkDWXpu9Ire2JGsowGfM0APaedhSHtbl0J1xY2Vgmx8AGjOMOm-DnMlS3TDUwCbwncFzSQ9ndp_qxOezldPsUkBMOTIVsmq3jVbjN61iTOkLEKQ1sJfu8BOAItQtOKSqkj_lW/s1600/Cara+Membuat+Gambar+Postingan+Dengan+Tooltip.jpg</span>" style="margin-left: 1em; margin-right: 1em;" title="<span style="color: blue;">Cara Membuat Gambar Postingan Dengan Tooltip</span>"><img alt="<span style="color: blue;">Cara Membuat Gambar Postingan Dengan Tooltip</span>" height="<span style="color: orange;">187</span>" src="<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinhRC__GxAkDWXpu9Ire2JGsowGfM0APaedhSHtbl0J1xY2Vgmx8AGjOMOm-DnMlS3TDUwCbwncFzSQ9ndp_qxOezldPsUkBMOTIVsmq3jVbjN61iTOkLEKQ1sJfu8BOAItQtOKSqkj_lW/s320/Cara+Membuat+Gambar+Postingan+Dengan+Tooltip.jpg</span>" width="<span style="color: orange;">320</span>" /></a></blockquote><br /><h3 style="text-align: left;"><span style="font-size: small;">Keterangan kode diatas :</span></h3><div style="text-align: left;">Yang berwarna <span style="color: red;">Merah</span>, silahkan anda ganti URL nya  dengan gambar untuk  postingan anda<br />Lalu yang berwarna <span style="color: blue;">Biru</span>, silahkan anda ganti title atau judul,  pada gambar postingan sobat<br />Dan yang berwarna <b><span style="color: orange;">Orange</span></b>,  silahkan sesuaikan nilai jumlah, gambar pada tampilan tooltip</div>Selamat mencoba semoga bisa bermanfaat<br />source : <a href="http://blog.kangismet.net/" rel="nofollow" target="_blank" title="Kang Ismet">Kang Ismet</a></div>

Membuat Gambar Postingan Dengan Tooltip Terkadang untuk membuat pelengkap artikel di blog, selain isi  teks postingan  maka dengan Menampilk...

Read More

Trik Membuat Popular Posts Effects Spin

<div dir="ltr" style="text-align: left;" trbidi="on"><h2 style="text-align: left;"><a href="http://karristaent.blogspot.com/2013/10/trik-membuat-popular-posts-effects-spin.html" target="_blank">Trik Membuat Popular Posts Effects Spin</a></h2><br />Dimana ada kemauan disitu ada jalan, seperti di hari ini ada kesempatan<br />Waktu luang,  untuk berbagi  tutorial yang  sederhana dan ringan,  tentang<br />Popular posts dengan effects  berputar,  dan sudah valid html 5, css3 jadi<br />Buat sobat yang berminat dengan widget ini, silahakan simak dibawah ini<br /><div><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="http://karristaent.blogspot.com/2013/10/trik-membuat-popular-posts-effects-spin.html" imageanchor="1" style="margin-left: auto; margin-right: auto;" target="_blank"><img alt="Effects Blogger" border="0" height="201" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKXWJ75xR2q_SSIHzq7FI9Up_eP-RiwecRW79orLzQSvEzvLNqd66NaAHoYb-cfqEVrgidv4-FGflF-BDadZjaKBvHBh5P6Pq3nSdAja0FBAmpqG8LCQS9ZF0-wABxaNQ5m268Ip0T65Vg/s320/Popular+Posts.jpg" title="Trik Membuat Popular Posts Effects Spin" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Trik Membuat Popular Posts Effects Spin</td></tr></tbody></table><br />Sebelum anda simak artikel  ini lebih lanjut,  sebelumnya  saya  publikasi  tentang<br /><a href="http://karristaent.blogspot.com/2013/09/menghapus-batas-tabel-gambar-postingan.html"><b>Menghapus Batas Tabel Gambar Postingan</b></a>,   dan  pada  kali  ini saya akan share<br /><u><b>Trik Membuat Popular Posts Effects Spin</b></u>,   di  mana   widget   P<i><b>opular  Posts</b></i>  ini <br />Berperan penting pada artikel anda,  manakala  postingan tersebut yang sering  di<br />Kunjungi oleh pengunjung blog anda, jika di blog anda belum ada atau sudah ada<br />Dan ingin mencoba  <a href="http://karristaent.blogspot.com/search/label/Tips%20Trik%20SEO"><b>Trik</b></a>  popular post yang ini,  silahkan  berapresiasi  di sini sob</div><div dir="ltr" trbidi="on"><br /></div><h3 style="text-align: left;">Cara memasangnya :</h3>Masuk blog anda dan <span style="color: red;">sign in</span>, kemudian pilih dasboard dan pilih template<br />Lalu pilih edit template, selanjutnya anda cari kode <span style="color: red;">]]></b:skin></span> tekan <br />Ctrl + f untuk memudahkan pencarian anda, setelah ketemu kode yang<br />Anda cari copy kode di bawah ini dan paste tepat di atas kode <span style="color: red;">]]></b:skin></span><br /><div dir="ltr" trbidi="on"><br /><blockquote class="tr_bq">.popular-posts .item-thumbnail{float:left;} .popular-posts ul{padding-left:30px;} .popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;} .popular-posts ul li img<br />{padding:0px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;} .popular-posts ul li img:hover {border:2px solid #ccc;-moz-transform: scale(1.3) rotate(-360deg) ;-webkit-transform: scale(1.3) rotate(-360deg) ;-o-transform: scale(1.3) rotate(-360deg) ;-ms-transform: scale(1.2) rotate(-360deg) ;transform: scale(1.3) rotate(-360deg);}</blockquote><br />Masih di edit html Kemudian Cari koode <span style="color: red;"><b:section class='sidebar'</span><br />Atau lengkap cari kode nya seperti di bawah ini<br /><div dir="ltr" trbidi="on"><span style="color: red;"><div id='sidebar-wrapper'></span></div><div dir="ltr" trbidi="on"><span style="color: red;">          <div style='clear: both;'/></span></div><div dir="ltr" trbidi="on"><span style="color: red;">          <b:section class='sidebar' id='sidebar' preferred='yes'></span></div>Setelah ketemu copy kode di bawah ini dan pastekan tepat di bawah kode<br /><span style="color: red;"><b:section class='sidebar' id='sidebar' preferred='yes'></span><br /><br />Di bawah ini kode yang harus anda copy :</div><div dir="ltr" trbidi="on"><br /><blockquote class="tr_bq"><b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'><br />              <b:includable id='main'><br />  <b:if cond='data:title'><h3><data:title/></h3></b:if><br />  <div class='widget-content popular-posts'><br />    <ul><br />      <b:loop values='data:posts' var='post'><br />      <li><br />        <b:if cond='data:showThumbnails == &quot;false&quot;'><br />          <b:if cond='data:showSnippets == &quot;false&quot;'><br />            <!-- (1) No snippet/thumbnail --><br />            <a expr:href='data:post.href'><data:post.title/></a><br />          <b:else/><br />            <!-- (2) Show only snippets --><br />            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div><br />            <div class='item-snippet'><data:post.snippet/></div><br />          </b:if><br />        <b:else/><br />          <b:if cond='data:showSnippets == &quot;false&quot;'><br />            <!-- (3) Show only thumbnails --><br />            <div class='item-thumbnail-only'><br />              <b:if cond='data:post.thumbnail'><br />                <div class='item-thumbnail'><br />                  <a expr:href='data:post.href' target='_blank'><br />                    <img alt='' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail'<br />expr:width='data:thumbnailSize'/><br />                  </a><br />                </div><br />              </b:if><br />              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div><br />            </div><br />            <div style='clear: both;'/><br />          <b:else/><br />            <!-- (4) Show snippets and thumbnails --><br />            <div class='item-content'><br />              <b:if cond='data:post.thumbnail'><br />                <div class='item-thumbnail'><br />                  <a expr:href='data:post.href' target='_blank'><br />                    <img alt='' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail'<br />expr:width='data:thumbnailSize'/><br />                  </a><br />                </div><br />              </b:if><br />              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div><br />              <div class='item-snippet'><data:post.snippet/></div><br />            </div><br />            <div style='clear: both;'/><br />          </b:if><br />        </b:if><br />      </li><br />      </b:loop><br />    </ul><br />  </div><br /></b:includable><br />            </b:widget></blockquote><div dir="ltr" trbidi="on"><br /></div><h4 style="text-align: left;">Keterangan :</h4>Setelah penempatan kode nya,  terpasang dengan benar,  silahkan klik save - simpan<br />Dan buka  blog anda,  dan cek popular  posts nya,  bekerja  dengan oftimal atau  tidak<br />Jika belum tampil di blog anda, silahkan baca kembali dengan seksama artikel diatas<br />Dan jika anda, ingin mengatur jumlah pos t yang tampil pada   popular posts  silahkan <br />Anda atur ulang menurut jumlah yang di inginkan,  dengan membuka halaman  layout<br />Pilih  tata letak  dan edit widget popular post,  silahkan  atur  jumlah posts atau  lainya<br />Menurut yang anda kehendaki, sekian semoga tutorial sederhana ini bisa bermanfaat</div></div>

Trik Membuat Popular Posts Effects Spin Dimana ada kemauan disitu ada jalan, seperti di hari ini ada kesempatan Waktu luang,  untuk berbagi ...

Read More

Check Validator Meta Tag pada Blog

<div dir="ltr" style="text-align: left;" trbidi="on"><h2 style="text-align: left;"><a href="http://karristaent.blogspot.com/2013/09/check-validator-meta-tag-pada-blog_24.html" rel="nofollow" style="color: green;" target="_blank">Check Validator Meta Tag pada Blog</a></h2><h2 style="text-align: left;"> </h2>Pembahasan  tentang  meta tag  pada blog,  tidak lepas  dari  dunia blogging<br />Dan kaitan eratnya trik salah satu optimasi seo, terkadang untuk  menjadikan<br />Blog kita menjadi  super seo friendly,  bisa  di katakan ribet  dan penuh aturan<br />Seperti apa yang,  pernah  saya  posting,<b>  <a href="http://karristaent.blogspot.com/2013/09/tekhnik-awal-untuk-blog-super-seo.html">Tehnik Awal untuk Blog Super SEO</a></b><br />Maka di artikel kali ini,  giliran  untuk  memvalidasi  meta tag  blog kita, secara<br />Standar sudah memenuhi standar seo atau belum? penasaran simak di sini<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="http://karristaent.blogspot.com/2013/09/check-validator-meta-tag-pada-blog_24.html" imageanchor="1" style="margin-left: auto; margin-right: auto;" target="_blank"><img alt="Tips Trik SEO" border="0" height="181" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinU3X8wdoBkeQ9IQl50itOsmjtYbjFAhE1_aSZG2qKUFP_uNUJPFzVy1ZDXxbkAHD2VWnYRsK8mxLjYJQoM-eJay7XXrZp7_nkhQocy31F4Oeu1HSYloTcyTCBu_dJu7lvzmVgOcA_XQcv/s320/SEO+centro+blogger+Karrysta.jpg" title="Check Validator Meta Tag pada Blog" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Check Validator Meta Tag pada Blog</td></tr></tbody></table><br /><h3 style="text-align: left;">Check Validator Meta Tag pada Blog</h3><b>Meta tag</b>,  atau kita sebut. lebih  mudah nya,  tujuan label,  pada  web atau  blog  dan<br />Meta  tag  tersebut,  ialah  sekumpulan   kode  script,  yang   terdapat  pada  template<br />Sebuah web site atau blog,  di mana  meta tag  tersebut  sudah ada dengan bawaan<br />Dari pengguna platform,  blogger  misalnya   yang saya pakai  saat ini  jika memakai<br /><b><a href="http://karristaent.blogspot.com/p/blog-page.html" target="_blank">Template</a></b>   asli  dari blogger,  tentu meta tag  nya pun  masih defaul  original  blogger<br />Namun dewasa ini,  semakin meningkatnya  tekhnology khusus  nya  pada blogging<br /><br />Tentu berbagai cara, untuk membuat blog nya ramah di mesin pencari, juga di serp <u>google</u><br />Banyak sekali para blogging, membuat meta tag nya, di edit sedemikian rupa secara  style<br />Namun di kesemua nya, itu  terkadang pemblogging,  tidak  memperdulikan pada  titik dan <br />Sudut panadang yang waspada apakah meta tag yang di buat nya sudah benar memenuhi <br />Standar <b>Seo</b>, atau belum,? Nah pada artikel kali ini saya, akan sedikit  berbagi  untuk  lebih <br />Mengetahui  <i>Meta tag</i> anda, barangkali  error.!!  atau belum  memenuhi standar dari   <b><a href="http://karristaent.blogspot.com/search/label/Tips%20Trik%20SEO" target="_blank">SEO</a></b><br /><br /><h4 style="text-align: left;">Validator Meta Tag </h4><b>Silahkan buka halaman di bawah ini untuk Mengecek meta tag blog anda :</b><br /><div style="text-align: left;"><b>Buka page seocentro :</b> <b><a href="http://www.seocentro.com/tools/search-engines/metatag-analyzer.html" target="_blank">Validator Meta Tag</a></b></div><br /><h3>Keterangan :</h3>Setelah anda masuk ke halaman seocentro,  maka anda akan menjumpai<br />Halaman seperti contoh screnshoot nya, pada gambar  di bawah  ini sobat<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="http://karristaent.blogspot.com/2013/09/check-validator-meta-tag-pada-blog_24.html" imageanchor="1" style="margin-left: auto; margin-right: auto;" target="_blank"><img alt="Tips Trik SEO " border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitrboWsdLbIp9wqIngS-_YxG9yJN_EpBkksttSyaaSqgQg921HaN-zuXfnAdnuL7bZq9QaAQUZESxZWVsCRgJbmbB3MQ09livXwVjs9Tuz_dnXdQDLHLPbRpjfO3LbG1FGIx6I8JzLsEYs/s1600/Meta+Tag+Analyzer.+01.jpg" title="Check Validator Meta Tag pada Blog" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Check Validator Meta Tag pada Blog</td></tr></tbody></table><br />Pada gambar diatas itu halaman, Check Validator Meta Tag, untuk mengecek meta tag blog<br />Anda, masukan url blog anda berikut keterangan lengkapnya pada number di lingkar merah :<br /><ol style="text-align: left;"><li>Masukan URL halaman blog anda</li><li>Pilih optional meta robot anda contoh (Spider Robot)</li><li>Masukan Title atau nama blog anda pada kolom (<small>User Agen)</small> </li><li>Masukan captah access code pada kolom (Access code)</li><li>Setelah kolom terisi dengan benar, lalu klik <b>Submit</b><small><br /></small></li></ol><br />Setelah anda klik Submit,  maka seocentro validator <b>meta tag</b> akan mendeteksi  halaman<br />Blog anda, dan akan menerangkan,  <b>Meta Tag</b>  anda error,  atau dengan persentase  nilai<br /><u>Meta tags analysis</u>, lengkap dengan keterangan. Web page analysis juga. kata kunci yang <br />Ditemukan dalam tag jangkar, seperti contoh gambar berikut screnshoot nya  di bawah ini<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="http://karristaent.blogspot.com/2013/09/check-validator-meta-tag-pada-blog_24.html" imageanchor="1" style="margin-left: auto; margin-right: auto;" target="_blank"><img alt="Tips Trik SEO" border="0" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7UcoETOVkBBS3l_T3WR1RAUCXV4aBnr4rf_9w1ndPW897APK3lNQAdnDi3rEnVirZCBUmUvVrNjmuMMkOvx2wpKfR1Zn3eD6E8y3oRD6ym8IL5o_juAq4GoxNDGXeDzPZEAWarL2E7htp/s320/Meta+Tag+cex.4.jpg" title="Check Validator Meta Tag pada Blog" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Check Validator Meta Tag pada Blog</td></tr></tbody></table><br />Ini lah hasil Check Validator Meta Tag, pada gambar diatas berikut keteranganya :<br /><ol style="text-align: left;"><li> <span class="good">Title contains no errors. </span><span class="short_text" id="result_box" lang="id"><span class="hps">(tidak ada kesalahan)</span></span></li><li><span class="good"> </span><span class="good">Description meta tag contains no errors. </span><span class="short_text" id="result_box" lang="id"><span class="hps">(tidak ada kesalahan)</span></span></li><li><span class="good"> </span><span class="good">Keywords meta tag contains no errors. </span><span class="short_text" id="result_box" lang="id"><span class="hps">(tidak ada kesalahan)</span></span></li><li><span class="good"> </span><span class="good">The Robots meta tag contains no errors. </span><span class="short_text" id="result_box" lang="id"><span class="hps">(tidak ada kesalahan)</span></span></li></ol><br /><h4>Kesimpulan :</h4>Contoh <u>Check  Validator Meta Tag</u>,  diatas itu sudah cukup  untuk  sebuah blog<br />Dan untuk lebih memaximal kan  meta tag anda,  tingkatkan  terus  traffick blog<br />Anda dengan cara yang sudah  di jelaskan oleh para pakar seo,  baiklah untuk<br />Artikel kali ini saya cukup samapai disini, semoga bisa bermanfaat buat sobat<br /><br />Mohon  maaf,..   jika ada salah   atau  keliru  dalam artikel ini,  seperti  biasa<br />Apabila anda ingin  melengkapi teks,  artikel saya,  silahkan  masukan  teks<br />Komentar anda pada kolom,  form comments di bawah ini,  happy blogging</div>

Check Validator Meta Tag pada Blog   Pembahasan  tentang  meta tag  pada blog,  tidak lepas  dari  dunia blogging Dan kaitan eratnya trik sa...

Read More

Membuat Effect Balloon Menghiasi Blog

<div dir="ltr" style="text-align: left;" trbidi="on"><span id="goog_410124249"><span id="goog_410124266"></span><span id="goog_410124267"></span></span>Apa kabar teman juga sobat semua dimana saja.  semoga anda baik-baik saja yah..?<br />Pada hari ini saya akan berbagi buat sobat yang berminat memodivasi web-blog nya<br />Dengan effect bubble atau ballon, yang menghiasi  homepage web-blog sobat semua<br />Sebagai <a dofollow="" href="http://karristaent.blogspot.com/2013/06/membuat-gambar-berputar-dan-zoom-diblog.html" style="color: red;" target="_blank">accessories blog anda</a> ok sobat yang berminat mencobanya  silahkan simak<br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><img alt="Effect,Ballon,Karrysta" border="0" height="217" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZcU_SFuQ8Mgley-uWW469S3rrpl-oSvjL3pKT6tMNhZJJCImpKSZ280vAP9-c_JWx-JzqOtnmupl4bZZeXY1vr-_Spi2AwXNXVHl9_JsUU_rW2tPXbWCy4SLUvfJs6DpZTYSq4b6OAIXV/s320/Effect+Ballon1.jpg" style="margin-left: auto; margin-right: auto;" title="Effect,Ballon,Karrysta" width="320" /></td></tr><tr><td class="tr-caption" style="text-align: center;">Effect Balloon</td></tr></tbody></table>Ada dua script effect ballon ini sobat yang saya posting kali ini,<br />Silahkan anda pilih yang mana? berikut tutorial memasang nya :<br /><br /><b>Cara memasang nya :</b><br />Pertama anda masuk blog anda dan sigin, lalu masuk dasboard<br />Kemudian pilih layout-tata letak, pilih tambah gadget lalu copy kode java<br />Script di bawah ini ke dalam gadgte baru tadi di  kolom html - java script<br /><br />Ini kode effect ballon no 01<br /><div style="background-color: moccasin; border-left: 7px solid limegreen; width: auto;"><span style="color: deeppink;"> <script src='http://karrysta.googlecode.com/files/effectbalonkarrysta.js'/></script></span></div><br />Setelah di paste kode di atas lalu save dan lihat hasil nya. <br />Selain kode effect ballon di atas di bawah ini adalah kode effect balloon<br />Yang lebih keren, dari yang diatas  silahkan copy kode nya di bawah ini<br /><br />Copy kode dibawah ini dan cara menimpan nya seperti contoh cara no 1<br />Ini kode effect bubbles menghiasi blog no 02 klik di bawah ini :<br /><div style="text-align: justify;"><br /><div style="border: 6px Groove GREEN; height: 130px; overflow: auto; padding: 5px; width: 350px;"><script type='text/javascript'><br />//<![CDATA[<br />var Ymax=8; //MAX # OF PIXEL STEPS IN THE "X" DIRECTION<br />var Xmax=8; //MAX # OF PIXEL STEPS IN THE "Y" DIRECTION<br />var Tmax=10000; //MAX # OF MILLISECONDS BETWEEN PARAMETER CHANGES<br /><br />//FLOATING IMAGE URLS FOR EACH IMAGE. ADD OR DELETE ENTRIES. KEEP ELEMENT NUMERICAL ORDER STARTING WITH "0" !!<br />var floatimages=new Array();<br />floatimages[0]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhIpbnr6chKJigNydSOxyO8N7qxfLzx3AcwQbfmpqav5dWc_pIBpbUD6X-HHBJf5zUMhAoP0ZYxOHeOeQ7yRMxWi3hQuivRmo_217rTUvu14QLOoS8rYl390LNxwDx6gdsx9GLDyiteid9/s400/filiex-bubbles+1.png';<br />floatimages[1]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit32970g-avl-idUQbuGHfWjl-NTK9m7TKbpA-dmNThCP8MYAWGRBt4HkC5NzlLJQMXRv5YqNfecIQHt_rZ4rvKuFLo4pexMSxjq3W_aDaaYdbRPIwHUVlafB7vwxfeNeIq-fDXMYx0E9e/s400/filiex-bubbles+3.png';<br />floatimages[2]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEz8h9pG6nLftYuw-lLE73s5JTrKzzIyszHcQISIFup0IpqIOTlTENzNgfjEy6pp3_gaHW59eE9AFgm04-p8bK0tG7hyphenhyphenV6kcR2JzRohTA93MIOftmpq6C07F5UOZSRJ6DZ9X7_5BfRfHUZ/s400/filiex-bubbles+4.png';<br />floatimages[3]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuVMCSSuQkeeq7vAeA3S5IihYs-2UELHofICRTbsRLz1kkAkJu5sz-AXYpFv9d42Vgooi3aySqP-87yCiDRKFDMzqoASYVQe8NfOpBlVmvmq6Ds4UjWsx0-GwX_i6lr9GZlxPWf_stpj8M/s400/filiex-bubbles+8.png';<br />floatimages[4]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqs6beWlXfRuGN2gAWLyZk3YubDQ6HL15KIKrQ1ivQjETQ16MGIJWlzyHEj_u8Pww-wFfkXhpCMU4D90-rgK3EE93zlM04-Oc9KdD-8lU0U7cJhGOkW-KDRxL8WlZ1NQ9UEo5mtLslQIuw/s400/filiex-bubbles+7.png';<br />//*********DO NOT EDIT BELOW***********<br />var NS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(navigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false;<br />var IE4 = (document.all)? true : false;<br />var NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf("Netscape")>=0 )? true: false;<br />var wind_w, wind_h, t='', IDs=new Array();<br />for(i=0; i<floatimages.length; i++){<br />t+=(NS4)?'<layer name="pic'+i+'" visibility="hide" width="10" height="10"><a href="javascript:hidebutterfly()">' : '<div id="pic'+i+'" style="position:absolute; visibility:hidden;width:10px; height:10px"><a href="javascript:hidebutterfly()">';<br />t+='<img src="'+floatimages[i]+'" name="p'+i+'" border="0">';<br />t+=(NS4)? '</a></layer>':'</a></div>';<br />}<br />document.write(t);<br />function moveimage(num){<br />if(getidleft(num)+IDs[num].W+IDs[num].Xstep >= wind_w+getscrollx())IDs[num].Xdir=false;<br />if(getidleft(num)-IDs[num].Xstep<=getscrollx())IDs[num].Xdir=true;<br />if(getidtop(num)+IDs[num].H+IDs[num].Ystep >= wind_h+getscrolly())IDs[num].Ydir=false;<br />if(getidtop(num)-IDs[num].Ystep<=getscrolly())IDs[num].Ydir=true;<br />moveidby(num, (IDs[num].Xdir)? IDs[num].Xstep : -IDs[num].Xstep , (IDs[num].Ydir)? IDs[num].Ystep: -IDs[num].Ystep);<br />}<br />function getnewprops(num){<br />IDs[num].Ydir=Math.floor(Math.random()*2)>0;<br />IDs[num].Xdir=Math.floor(Math.random()*2)>0;<br />IDs[num].Ystep=Math.ceil(Math.random()*Ymax);<br />IDs[num].Xstep=Math.ceil(Math.random()*Xmax)<br />setTimeout('getnewprops('+num+')', Math.floor(Math.random()*Tmax));<br />}<br />function getscrollx(){<br />if(NS4 || NS6)return window.pageXOffset;<br />if(IE4)return document.body.scrollLeft;<br />}<br />function getscrolly(){<br />if(NS4 || NS6)return window.pageYOffset;<br />if(IE4)return document.body.scrollTop;<br />}<br />function getid(name){<br />if(NS4)return document.layers[name];<br />if(IE4)return document.all[name];<br />if(NS6)return document.getElementById(name);<br />}<br />function moveidto(num,x,y){<br />if(NS4)IDs[num].moveTo(x,y);<br />if(IE4 || NS6){<br />IDs[num].style.left=x+'px';<br />IDs[num].style.top=y+'px';<br />}}<br />function getidleft(num){<br />if(NS4)return IDs[num].left;<br />if(IE4 || NS6)return parseInt(IDs[num].style.left);<br />}<br />function getidtop(num){<br />if(NS4)return IDs[num].top;<br />if(IE4 || NS6)return parseInt(IDs[num].style.top);<br />}<br />function moveidby(num,dx,dy){<br />if(NS4)IDs[num].moveBy(dx, dy);<br />if(IE4 || NS6){<br />IDs[num].style.left=(getidleft(num)+dx)+'px';<br />IDs[num].style.top=(getidtop(num)+dy)+'px';<br />}}<br />function getwindowwidth(){<br />if(NS4 || NS6)return window.innerWidth;<br />if(IE4)return document.body.clientWidth;<br />}<br />function getwindowheight(){<br />if(NS4 || NS6)return window.innerHeight;<br />if(IE4)return document.body.clientHeight;<br />}<br />function init(){<br />wind_w=getwindowwidth();<br />wind_h=getwindowheight();<br />for(i=0; i<floatimages.length; i++){<br />IDs[i]=getid('pic'+i);<br />if(NS4){<br />IDs[i].W=IDs[i].document.images["p"+i].width;<br />IDs[i].H=IDs[i].document.images["p"+i].height;<br />}<br />if(NS6 || IE4){<br />IDs[i].W=document.images["p"+i].width;<br />IDs[i].H=document.images["p"+i].height;<br />}<br />getnewprops(i);<br />moveidto(i , Math.floor(Math.random()*(wind_w-IDs[i].W)), Math.floor(Math.random()*(wind_h-IDs[i].H)));<br />if(NS4)IDs[i].visibility = "show";<br />if(IE4 || NS6)IDs[i].style.visibility = "visible";<br />startfly=setInterval('moveimage('+i+')',Math.floor(Math.random()*100)+100);<br />}}<br />function hidebutterfly(){<br />for(i=0; i<floatimages.length; i++){<br />if (IE4)<br />eval("document.all.pic"+i+".style.visibility='hidden'")<br />else if (NS6)<br />document.getElementById("pic"+i).style.visibility='hidden'<br />else if (NS4)<br />eval("document.pic"+i+".visibility='hide'")<br />clearInterval(startfly)<br />}<br />}<br />if (NS4||NS6||IE4){<br />window.onload=init;<br />window.onresize=function(){ wind_w=getwindowwidth(); wind_h=getwindowheight(); }<br />}<br />//]]><br /></script></div><br />Setelah di paste kode nya lalu save dan lihat hasil nya<br />Saya rasa cukup sekian semoga anda berhasil  memsang  kode effect ballon ini<br />Kalau ada kesulitan silahkan bertanya, atau berkomentar di kolom di bawah ini</div></div>

Apa kabar teman juga sobat semua dimana saja.  semoga anda baik-baik saja yah..? Pada hari ini saya akan berbagi buat sobat yang berminat me...

Read More

Membuat Gambar Berputar Dan Zoom Diblog

<div dir="ltr" style="text-align: left;" trbidi="on"><b>Membuat Gambar Berputar Dan Zoom Diblog</b><br />Selamat datang di blog  <span style="color: #20124d;"><a href="http://karristaent.blogspot.com/" target="_blank">Karrysta™ Berbagi Tips Dan Trik SEO</a></span><i>,</i> di kesempatan kali ini<br />Saya akan membahas tentang gambar yang sering kita pakai untuk melengkapi  sebuah<br />Atau artikel postingan, karna pada dasar nya gambar itu juga bisa menjadi pengundang<br />Pengunjung atau visitor dimana kalau meta tag di terap kan di dalam properties gambar<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6UG88G3PHa7Rtk0reNcx0ujTnl7ceIzf3G7WAGzmKwf7u3D-Ca95nB9VOPdhWL5fhdatzki_TkteYQHZKVNBEOUHhbukPo8RF_dCF4-P2RDS2cr3x2oZUVRmkMDLI_bRk-YVvALRIWZY/s1600/Karrysta+Tips+Dan+Trik+SEO.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="309" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6UG88G3PHa7Rtk0reNcx0ujTnl7ceIzf3G7WAGzmKwf7u3D-Ca95nB9VOPdhWL5fhdatzki_TkteYQHZKVNBEOUHhbukPo8RF_dCF4-P2RDS2cr3x2oZUVRmkMDLI_bRk-YVvALRIWZY/s320/Karrysta+Tips+Dan+Trik+SEO.jpg" width="320" /> </a></div>Demo dari effect  <a href="http://karristaent.blogspot.com/2013/06/membuat-gambar-berputar-dan-zoom-diblog.html" target="_blank">Cara Membuaat Gambar Berputar Dan Zoom Diblog</a>  coba arahkan coursor<br />Anda pada gambar di postingan ini atau semua gambar yang ada di blog ini secara sepontanitas<br />Gambar akan berputar, dan zoom sampai lebar dan tinggi nya 360px dari gambar asli postingan <br /><br /><b>Cara memasang kode css nya :</b><br />Masuk ke account web - blog anda lalu sigin<br />Pilih dasboard lalu pilih element edit template<br />Cari kode  ]]></b:skin>  Pastekan kode dibawah ini tepat <br />Diatas kode ]]></b:skin> jangan di bawah nya tanpa spasi<br /><br /><b><span style="color: blue;">Ini kode css javascript nya :</span></b><br /><br /><div style="border: 6px Groove CYAN; height: 150px; overflow: auto; padding: 10px; width: 400px;"><span style="color: deeppink;">.post img{-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s </span><br /><span style="color: deeppink;">ease}.post img:hover{-o-transform:scale(1.2) rotate(360deg) translate(0px);-moz-transform:scale</span><br /><span style="color: deeppink;">(1.2) rotate(360deg) translate(0px);-webkit-transform:scale(1.2) rotate(360deg) translate(0px);-</span><br /><span style="color: deeppink;">o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}}</span></div><br />Sebelum save previews - peninjauan barang kali ada kesalahan  memasang kode tersebut<br />Setelah previews tidak ada laporan eror maka anda tinggal klik tomol save  lihat hasil nya<br />Sekian semoga artikel ini bermanfa,at untuk menghiasi blog anda guna memanjakan visitor<br /><br /><b>Saling Mereviews Rank </b><a href="http://alexa.com/" target="_blank">Alexa</a> <b>klik icon di bawah ini :</b><br /><br /><div class="page-width page-top-shadow row"><div class="col-8"><a href="http://www.alexa.com/write/review/karristaent.blogspot.com" id="logo" target="_blank"><img alt="Alexa Internet" src="http://www.alexa.com/images/layout/logo.gif" /> </a></div><div class="col-8"></div><div class="col-8"></div></div></div>

Membuat Gambar Berputar Dan Zoom Diblog Selamat datang di blog  Karrysta™ Berbagi Tips Dan Trik SEO , di kesempatan kali ini Saya akan memb...

Read More

Membuat Effects Zoom Semua Gambar Diblog

<div dir="ltr" style="text-align: left;" trbidi="on"><span style="color: blue;"><span style="font-size: large;">Membuat Effects Zoom Semua Gambar Diblog</span></span><br /><span class="awal">K</span>ali ini saya akan membahas tentang Effects pada gambar,foto atau semua yang ada di blog<br />Script ini kita namai ialah Zoom Effects Gambar atau Hover Zoom Smooth Effects images.<br />Walau pun sebagian besar para blogger dan webmaster sudah banyak yang memakai dan<br />Memposting Zoom Effects ini, tapi barang kali sobat semua ada yang belum tau atau ingin,<br />Ingin memasang dan mencoba script cara  <a href="http://karristaent.blogspot.com/2013/05/membuat-effects-zoom-semua-gambar-diblog.html" target="_blank">Membuat Effects Zoom Semua Gambar Diblog</a><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLNfyyMOXStSNtJdcjaUst5bOVyxLHMZPHeuEGS7wZLDFewFDW8ONe8VuAF4wtfCAq66qgL-8YA5UvfUlZp-tUjenrWxUa5QGZL-BtCpbt_Vr0_d1PO_PL8_n1dXGfYXUM5boSRxQhDzI/s1600/@.ZOOM+KARRYSTA.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="197" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLNfyyMOXStSNtJdcjaUst5bOVyxLHMZPHeuEGS7wZLDFewFDW8ONe8VuAF4wtfCAq66qgL-8YA5UvfUlZp-tUjenrWxUa5QGZL-BtCpbt_Vr0_d1PO_PL8_n1dXGfYXUM5boSRxQhDzI/s320/@.ZOOM+KARRYSTA.jpg" width="320" /></a></div><br /><span class="awal">U</span>ntuk Melihat hasil Zoom Effects hover coba sobat arah kan Cursor pada gambar di atas <br />Seacara otomatic gambar tersebut akan membesar sampai max-width:550px - height: auto<br />Buat sobat yang mau mencobanya silakan simak cara memasang nya berikut di bawah ini<br /><br />Cara Memasang nya :<br />Masuk ke blog anda sigin ke | <a href="http://draft.blogger.com/home" target="_blank"><span style="color: blue;">Blogger</span></a><br />Kemudian pilih dasboard ,lalu edit | <a href="http://draft.blogger.com/blogger.g?blogID=157331295234574147#template/src=dashboard" target="_blank"><span style="color: darkblue;">Template</span></a><br />Lalu cari code, ]]></b:skin> gunakan Ctrl + F untuk memudah kan pencarian<br />Setelah ketemu code nya | lalu copy code di bawah ini dan paste kan tepat<br />Di atas code ]]></b:skin> tidak kurang tidak lebih agar hasil nya lebih maximal<br /><br />Ini code css javascript nya :<br /><br /><span style="color: deeppink;"> </span><br /><div style="background-color: antiquewhite; border-color: lawngreen; border-style: Ridge; border-width: 7px; width: 300;"><span style="color: deeppink;">.post img, table.tr-caption-container { border:none; max-width:560px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; } .post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }</span></div><br /><span style="color: red;">Keterangan :</span><br />Sebelum save template nya ada baik nya preview-peninjauan dulu atau back-up dulu <br />template nya, menjaga, barang kali ada kesalahan sa,at memasang code css javascript ini,<br />Kalau di rasa pass Silakan sobat save template nya, buka blog anda dan lihat hasil nya.?<br /><br />Semoga Artikel ini berguna dan membantu anda untuk memodivicasi accecoriess blogger<br />Selamat Berkarya tetap semangat blogger indonesia kamu bisa,!! kalau sobat ada kesulitan<br />Silakan bertanya melalui kotak komentar, atau melalui account sosial saya atau lain nya thx                                                                  By :<span style="color: red;"> <a href="http://karristaent.blogspot.com/" target="_blank">Karrysta™ </a></span><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6CAwe4L8rx9iYnrn_GaK6PVgB65TvK1xQ0kgCphJkaR0_VH4_q_H8kaE6fVIvtxlcCE7hRtTVQjgIMw1UseOs2izkjaJi4SANXIbxZq2Ruk0iM2gqUy79_Sc0V1iDicfqoJgzEUPARes/s1600/@.TANDA+TANGAN+SAUD+S+KN.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"> <img border="0" height="87" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6CAwe4L8rx9iYnrn_GaK6PVgB65TvK1xQ0kgCphJkaR0_VH4_q_H8kaE6fVIvtxlcCE7hRtTVQjgIMw1UseOs2izkjaJi4SANXIbxZq2Ruk0iM2gqUy79_Sc0V1iDicfqoJgzEUPARes/s200/@.TANDA+TANGAN+SAUD+S+KN.png" width="200" /></a></div></div>

Membuat Effects Zoom Semua Gambar Diblog K ali ini saya akan membahas tentang Effects pada gambar,foto atau semua yang ada di blog Script in...

Read More