SAHABAT BLOGGER 77: 2015

2 Juli 2015

Content Box With Menu Flip Out Title

Content Box With Menu Flip Out Title - Tanpa saya jelaskan secara rinci, pastinya sahabat semua pecinta SAHABAT BLOGGER 77 sudah mengenal apa itu content box dan fungsinya. Pekerjaannya sama seperti » Membuat Format Tulisan Dengan Text Area. Box bisa kita fungsikan sebagai kotak persegi atau sebagai wadah untuk kita menuliskan beberapa content informasi. Tujuannya untuk memberikan keterangan bahwa isi content dalam box tersebut PENTING untuk diketahui, atau bisa juga kita gunakan untuk memberikan tanda pada beberapa tulisan, sehingga bentuk dan tampilannya banyak saya desain dengan berbagai model pilihan seperti ini:

Dan masih banyak lagi yang selengkapnya bisa Anda cari dalam » Daftar Menu Blog. Untuk tampilan content box kali ini saya buat dengan gaya terbaru. Content Box With Menu Flip Out Title, dimana konsepnya saya desain menyerupai widget RELATED Post dengan thumbanail seperti gambar berikut:

Apa jadinya jika dalam content box kita sisipkan beberapa menu LABEL seperti itu, menarik bukan.? konsepnya mudah, disini saya menyiapkan 4 gambar dengan link menu yang nantinya akan kita letakkan disebelah kiri box content, jika ingin menambahkan menu lagi nanti bisa Anda modifikasi sendiri, kodenya seperti ini:

nav .home a {background:#e84c3d url(URL-Gambar) no-repeat center center}
nav .home a:hover:after {border-left:2px solid #d82a1a}
nav .home a:after {background:#e84c3d;content:"HOME"}

nav .bT a {background:#1dd1ae url(URL-Gambar) no-repeat center center}
nav .bT a:hover:after {border-left:2px solid #17a489}
nav .bT a:after {background:#1dd1ae;content:"BLOGGING TIPS"}

nav .mN a {background:#3598db url(URL-Gambar) no-repeat center center}
nav .mN a:hover:after {border-left:2px solid #217dbc}
nav .mN a:after {background:#3598db;content:"MENU NAVIGASI"}

nav .sT a {background:#f5c700 url(URL-Gambar) no-repeat center center}
nav .sT a:hover:after {border-left:2px solid #c29e00}
nav .sT a:after {background:#f5c700;content:"SEO TRICK"}

Yang perlu Anda lakukan untuk menyusun dan menempatkan menu itu agar sejajar dengan BOX adalah nilai posisi pada elemen display:flex-box (atur dan sesuaikan), lalu kita beri sedikit sentuhan hover pada menu dengan flip out effect, sedangkan untuk menampilkan title menu kita atur dengan CSS transform:rotateY(180deg) translateX(80px) dengan nilai content:"nama menu". Dan hasilnya :

DEMO SHOW

Sangat mudah bukan.!, bagaimana sahabat mau mencoba box informasi seperti tampilan diatas, cukup salin kode dibawah ini, lalu letakkan diarea postingan Anda, selengkapnya seperti ini:

23 Juni 2015

Gambar Zoom Responsive Dengan CSS

Gambar Zoom Responsive Dengan CSS - Efek zoom (membesar) biasanya akan terlihat pecah atau blur saat gambar default di hover, karena dimensi format pada gambar diperkecil saat ditampilkan sebagai pelengkap tulisan dan akan membesar saat efek hover bekerja. Gambar zoom dengan format efek seperti itu akan terlihat jelek atau kurang menarik. Bisa saja kita buat aturannya seperti ini:

//memotong ukuran gambar saat ditampilkan dengan nilai
img {
position: relative;
float: left;
width: 100px; //batas lebar gambar
max-height: 100px; //batas tinggi maksimal gambar
cursor: pointer
}

//saat objek dihover
hover {
margin: 0;
list-style: none;
/* zoom effect */
width: 300px;
height: 308px
}

Yang hasilnya bisa Anda lihat di : » Membuat Koleksi Gambar Hover Efek Zoom Right.
Agar gambar awal terlihat sama dengan gambar saat di zoom, yang perlu Anda lakukan adalah menyusun elemen objek (gambar) agar dapat mengikuti dimensi layar komputer dimana efek ini di tampilkan (responsive). Cukup susun media screen layar responsive dengan format yang sama seperti » Cara Mengatur Halaman Blog Agar Responsive dengan pola seperti ini:

@media all and (max-width: 600px) {
#i-zoom {flex-direction:column}
#i-zoom figcaption {top:102%;left:0;width:30%}
#i-zoom figure {max-width:100%}
#i-zoom img {border:none;text-align:center}
#i-zoom figure:nth-child(2) figcaption,
#i-zoom figure:last-child figcaption {top:-11%;left:auto;right:0;width:25%}
#i-zoom figure:last-child figcaption {top:-18%}
}

@media all and (max-width:400px) {
#i-zoom figure:hover {margin-bottom:4rem}
#i-zoom figcaption,#i-zoom figure:nth-child(2) figcaption,
#i-zoom figure:last-child figcaption {width:100%;text-align:center}
#i-zoom figure:nth-child(2) figcaption {top:-7%}
#i-zoom figure:nth-child(3) figcaption {top:-9%}
#i-zoom figure:nth-child(2):hover,
#i-zoom figure:nth-child(3):hover {margin-top:4rem;margin-bottom:0}
}

Maka hasilnya akan terlihat lebih baik seperti ini:

DEMO SHOW

Sangat mudah dan sederhana bukan.!?
Bagaimana, apakah Anda mau mencoba.? dibawah ini semua bahan-bahan untuk membuat gambar zoom responsive sudah saya siapkan, tidak perlu ada yang diubah dan diperbaharui, cukup COPY kode CSS dibawah ini, lalu letakkan dalam formulir editor HTML posting Anda, kode lengkapnya seperti ini:


<style type="text/css">
#i-zoom {
  display:-webkit-box; display:-webkit-flex; display:-ms-flexbox;
  display:flex; -webkit-box-pack:justify; -webkit-justify-content:space-between;
  -ms-flex-pack:justify; justify-content:space-between;
  max-width:1600px;margin:0 auto}

#i-zoom figure {
  position:relative; -webkit-box-flex:1; -webkit-flex:1; -ms-flex:1;
  flex:1; max-width:500px;-webkit-transition:1s;
  -moz-transition:1s;transition:1s; margin:0}

#i-zoom img {
  width:200px;max-height:200px;border:1px solid;object-fit:cover;
  object-position:0% 0%;-webkit-transition:1s;-moz-transition:1s;
  transition:1s;font-size:0;line-height:0}

#i-zoom figure:hover {-webkit-box-flex:2;-webkit-flex:2;-ms-flex:2;flex:2}
#i-zoom figcaption {
  position:absolute;top:43%; left:105%; opacity:0; width:50%;color:#ccc}

#i-zoom figure:hover img { width:100%; max-height:700px; object-fit:none}
#i-zoom figure:hover figcaption {
  -webkit-animation:captionfade forwards 1s 1s;
  -moz-animation:captionfade forwards 1s 1s;
  animation:captionfade forwards 1s 1s}

#i-zoom figure:nth-child(2) {text-align:center}
#i-zoom figure:nth-child(2) figcaption {text-align:left}
#i-zoom figure:last-child {text-align:right}
#i-zoom figure:last-child figcaption {left:-55%}
@keyframes captionfade {from {opacity:0} to {opacity:1}}
@media all and (max-width: 600px) {
#i-zoom {
  -webkit-box-orient:vertical;-webkit-box-direction:normal;
  -webkit-flex-direction:column;-ms-flex-direction:column;
  flex-direction:column}
#i-zoom figcaption {top:102%;left:0;width:30%}
#i-zoom figure {max-width:100%}
#i-zoom img {border:none;text-align:center}
#i-zoom figure:nth-child(2) figcaption,
#i-zoom figure:last-child figcaption  {top:-11%;left:auto;right:0;width:25%}
#i-zoom figure:last-child figcaption {top:-18%}}

@media all and (max-width:400px) {
#i-zoom figure:hover {margin-bottom:4rem}
#i-zoom figcaption,#i-zoom figure:nth-child(2) figcaption,
#i-zoom figure:last-child figcaption {width:100%;text-align:center}
#i-zoom figure:nth-child(2) figcaption {top:-7%}
#i-zoom figure:nth-child(3) figcaption {top:-9%}
#i-zoom figure:nth-child(2):hover,
#i-zoom figure:nth-child(3):hover {margin-top:4rem;margin-bottom:0}}
</style>

SELESAI..!! tinggal memanggil semua perintah elemen-elemen diatas dengan kode HTML seperti ini, namun sebelumnya ganti teks yang saya beri warna MERAH dengan gambar Anda, HTML lengkapnya seperti ini:

Info TERBARU:
» Tips Mencegah Komentar Spam Masuk Ke Situs
» Membuat Pesan Teks Melayang Saat Halaman Terbuka
» Diary Notes Theme Sitemap Responsive
» Daftar Domain Situs Penyedia Backlink Berkualitas | SEO


<div id="i-zoom">
  <figure>
    <img src="URL-Gambar.jpg" alt="SB-77 Design">
       <figcaption>Fhoto Diupload dari GOOGLE.
By. Sahabat Blogger 77</figcaption>
  </figure>
</div>

21 Juni 2015

9 Koleksi Gambar Efek Hover

Hello semua, gimana neh kabar sahabat semua pecinta SAHABAT BLOGGER 77, semoga senatiasa sehat dan berbahagia selalu. Kangen juga rasanya gak bersapa ria bersama kawan-kawan blogger, karena ya memang Devy juga beberapa minggu ini lagi OFF atau libur ngeblog dulu, hehe,,!!!, tetapi kali ini devy kembali mengajak sahabat semua untuk otak-atik kode-kodean lagi untuk membuat gambar efek hover dengan 9 model buat koleksi Anda.

Agar menarik, tampilannya saya buat dalam sebuah gambar background yang sebenarnya hasil modifikasi all in dari » 4 Variasi Slide Teks Pada Gambar di artikel terdahulu, hanya tampilannya saya ubah untuk membuat gambar backgroundnya juga bergerak dengan sedikit sentuhan efek teks yang timbul, dan itu terjadi saat di Hover seperti ini:

DEMO SHOW

Breaking NEWS :

Bagaimana Menentukan Judul Artikel Yang Benar?

9 Koleksi Gambar Efek Hover, diantaranya :

Hover Border Inset
Partial Border Position
Sepia Background Line
Background Line Waiting Delay
Centered Text Transition Delay
Revealing Text Effect
Fade In Text Rotate
Vertical Revealing Text
Rotate Text And Image Hover

Bagaimana.? sudah menemukan model yang unik dan menarik untuk Anda jadikan sebagai koleksi, atau sudah menemukan imajinasi untuk memodifikasi beberapa efek diatas dan menggabungkannya dengan efek lainnya, pasti Anda sudah menyiapkannya dan saya sudah meramu kodenya secara komplit dan menyeluruh pada masing-masing tampilan. Kalau Efek diatas dengan Hover bagaimana kalau Anda mencoba juga dengan efek otomatis yang satu ini, Devy yakin pasti lebih menarik lagi dalam tutorial » Mengganti Background Gambar Responsive Fullscreen

Selamat bersenang-senang guys..!! see you..!!

13 Juni 2015

Derita Sang Pemulung

Derita Sang Pemulung (Ku Juga Manusia)

Terkadang terlintas rasa iba saat melihat mereka yang sangat jauh berbeda dengan apa yang kita miliki, tetapi terkadang pula karena alasan itu membuat sebagian manusia merasa sombong, merasa sudah memiliki segalanya, merasa lebih baik dari orang itu, bahkan masih banyak diantara kita yang berpikir bahwa pekerjaan menjadi seorang pemulung itu sangat menjijikkan.

Kita pakai baju dan sepatu mewah, tetapi mereka menggunakan baju yang sobek dan tanpa alas kaki, kita duduk diatas empuknya sofa mobil, tetapi mereka berjalan kaki dan menarik gerobak bututnya, kita membuang SAMPAH disembarang tempat, dan merekalah yang membersihkannya. Akan tetapi masih banyak sikap diantara kita semua yang memandang rendah dan hina atas pekerjaan mereka. Apakah mereka yang sering berada ditempat kotor itu tidak pantas untuk dihargai? apakah mereka tidak berhak berbagi derita untuk menerima secuil kebahagiaan dari kita yang lebih punya?, sang pemulung juga manusia, sama seperti kita hamba Tuhan yang butuh Cinta bukan penghinaan.

Tulisan ini saya kutip dari kehidupan mereka sehari-hari, dan pekerjaan itu bukanlah yang mereka mau, Tuhan memberikan tangan dan kaki yang sehat. Jadi akan jauh lebih baik saya (mereka) gunakan untuk bekerja sebagai pemulung dari pada menjadi seorang pengemis yang hanya mengharapkan belahan kasihan dari orang lain.

DERITA SANG PEMULUNG (ku juga manusia)

Bertabur rasa gundah gulana
Melangkah harus kearah mana
T'lah hilang satu rasa dan asa
Berganti menjadi sejuta prahara dan derita

Tatapan jauh tak terlihat indah
Kosong bagai genta tak terpecah
Derita bagai sebuah anugerah
Tertoreh pada jiwa yang kian melemah

Apakah kehidupan bak fatamorgana?
Janji kebahagiaan hanya buaian semata
Berjuang, berkorban demi asa dan cita
Tapi derita selalu mendera dijiwa

Haruskah keterpurukan selalu mendera
Meskipun gurat-gurat derita terlihat nyata
Ku juga manusia, hamba TUHAN
Yang juga butuh CINTA, bukan penghinaan

Bila cindai indah dihiasi kabut misteri
Mengapa senyum itu menjauh dari hati
Ku hanya insan yang butuh dihargai
Ingin kasih, bukan tuk' dicaci dan dijolimi

Mungkin aku hina.....
Mencari nafkah dilahan kotor
Tapi ku punya hati mulia
Tak' seperti mereka, bersih tapi jiwa Koruptor

Oleh: Devy Indriyani
June 13, 2015

Semoga tulisan dengan secarik syair diatas dapat menginspirasi sahabat semua pecinta SAHABAT BLOGGER 77 untuk lebih bisa berbagi, memberi dan menyisihkan sedikit apa yang mereka butuhkan, dan sadarlah apa yang Anda buang hari ini dapat memberikan sejuta manfaat buat mereka yang membutuhkan. Salam sayang selalu..!!

9 Juni 2015

Item Menu Navigasi Dengan Efek Slide

Menu Navigasi Blog Efek Slide Teks

Item Menu Navigasi Dengan Efek Slide - Secara umum item menu navigasi blog dituliskan dalam bentuk teks link seperti: Home, Menu(1), Menu(2), Menu(3), Menu(4) dan seterusnya. Tampilan menu kali ini saya buat berbeda dengan menampilkan angka-angka dari 1, 2, 3 dan seterusnya sebagai pengganti teks menu, sedangkan teks keterangan (deskripsi title menu) saya sembunyikan dibalik angka tersebut, dan hanya akan tampil saat salah satu item di Hover dengan efek slide seperti ini:

DEMO SHOW

Tampilan dan model menu navigasi ini saya design dengan penggunaan CSS element transition:opacity, sedangkan efek slide untuk menampilkan teks menu saya modifikasi dari tutorial Efek According Pada Gambar Dengan Perintah Hover, hanya teks item menu saya ubah dengan menggunakan background-gambar seperti ini:

.item ul li a span {
transition:opacity 1s;
display:inline-block;
overflow:hidden;
opacity:0;
text-align:left;
width:130px}

//item menu dengan gambar...
a.menu1 {background:#FF8C00 url(URL-Gambar) no-repeat right center}
a.menu2 {background:#39f url(URL-Gambar) no-repeat right center}
a.menu3 {background:#8B008B url(URL-Gambar) no-repeat right center}
a.menu4 {background:#FF1493 url(URL-Gambar) no-repeat right center}

Tampak sederhana, dan belum ada yang menggunakan menu navigasi seperti ini, dan Anda bisa mengganti background gambar menu dengan icon-logo, misal menu(1) HOME, diganti dengan icon logo home (rumah) akan terlihat lebih menarik lagi, Namun sebelumnya beberapa koleksi model menu navigasi dibawah ini bisa Anda pilih untuk melengkapi tampilan menu di blog Anda, pilihannya sebagai berikut:

Model Menu Navigasi Blog :

➞ Tampilan Daftar Menu Terbaru Model Rolling Top
➞ Membuat Menu Daftar Isi Blog Efek Transisi
➞ Membuat Menu Blogger Dengan Target Gambar
➞ CSS Menu Navigasi Title Dengan 6 Pilihan
➞ Daftar Artikel Terbaru Dalam Menu Navigasi
➞ CSS Flower Navigasi Efek Rotasi

Penerapan Fungsi Elemen
1.1 CSS Elemen


.item {display:inline-block;float:right}
.item ul {padding:0;margin:0;text-align:right}
.item ul li {display:inline;list-style-type:none}
.item ul li a {
  transition:width 1s;-webkit-transition:width 1s;-moz-transition:width 1s;
  -ms-transition:width 1s;-o-transition:width 1s;color:#fff;
  display:inline-block;font-weight:bold;height:27px;overflow:hidden;
  padding:10px 10px;width:25px;vertical-align:bottom;text-shadow:1px 2px 3px #111}

.item ul li a:hover {width:130px}
.item ul li a:hover span {opacity:1}
.item ul li a span {
  transition:opacity 1s;-webkit-transition:opacity 1s;-moz-transition:opacity 1s;
  -ms-transition:opacity 1s;-o-transition:opacity 1s;display:inline-block;
  overflow:hidden;opacity:0;text-align:left;width:130px}

a.menu1 {background:#FF8C00 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGLqiHGz70FUIKC7PfgPraAuJNiki_Ph-Te7Ks-ZmnGFWOmuvS0g5bmf-QATsjdc_yqduic47rGVjL_sDFplxNFju1w1jA7a7F66KQ1Bvdv7rBbc_kIgPwIYqvzA6nx0F08cPyEhR0vBk/s47/kode1.png) no-repeat right center}
a.menu2 {background:#39f url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb_BOW3LIpvmcab0y3yAxgdZbuSd_fLAIyQEh0TunP402VSH76a8JbazaC0kOGpWwUe0EUR-1En2Kp0FIiQjxLQ6zZEEdrYoEAIsemuervDsIQ6WoZQtK5ekJERTfrDsYnBw9KZKruSc0/s47/kode2.png) no-repeat right center}
a.menu3 {background:#8B008B url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibRVST-8hYIZU8MBeGfgSAtwpRq5lFns6ifOthyMkQhIQBYPuhyphenhyphenjV5fGHOzvyCWmTihY6xVP03Jclx_cVfxn2fwvTNg_d2b0LmIfzYgfuyuxG-3i0uLcQiuC_QyiNTl6WYTQ-gWydWEAk/s47/kode3.png) no-repeat right center}
a.menu4 {background:#FF1493 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAx_RSKlGwxkuC5kuwgsbAb07YCMKAnyLIkX5CcDxp69J9SmOl2_prGq1OeLFgtmEh_B07qW0ubS1Og0fFlaq86cW4G2Mx1bXG_aYtzIMEhZ4nQUZYYgv_OOBwelp-m6WeNIKYWpelMpY/s47/kode4.png) no-repeat right center}

2.1 HTML Markup

Dalam kode ini Anda tinggal sesuaikan deskripsi teks menu yang tersembunyi, ganti teks yang berwarna MERAH dengan item menu yang Anda inginkan. HTML lengkapnya seperti ini:


<div class="item">
  <ul>
     <li><a class="menu1" href="#"><span>Tampilan &raquo;</span></a></li>
     <li><a class="menu2" href="#"><span>Tampilan &raquo;</span></a></li>
     <li><a class="menu3" href="#"><span>Tampilan &raquo;</span></a></li>
     <li><a class="menu4" href="#"><span>Tampilan &raquo;</span></a></li>
  </ul>
</div>

7 Juni 2015

Hati Yang Tersakiti

Syair Cinta Di Bulan Juni

Hati Yang Tersakiti - hmmm...!! sepertinya ini bulan penuh derita buat saya, tetapi derita tentang Cinta sih, kalau tentang kasih sayang, mama papa sangat sayang sama saya, dan sahabat semua pecinta SAHABAT BLOGGER 77 juga pasti sayang sama Devy, iya gak sih, hehe..!!

Soalnya bulan ini mau saya isi tulisan tentang Cinta di blog SB-77 Design, libur dulu dech membahas kode-kode HTML, takutnya gak nyambung karena hati lagi galau dan meriang (merindukan kasih sayang). Semoga saja kegalauan ini menjadi yang pertama dan terakhir, dan kelak bisa mendapatkan seorang pangeran dengan onta putih, dan berharap mereka disana yang sering menyakiti cepat tersadar, kalau sesungguhnya beginilah perasaan seorang wanita jika hatinya tersakiti.

MY diary
» PUISI : Sahabat Jadi Cinta
» Surat Untuk Sahabat

HATI YANG TERSAKITI

Sungguh indah mawar itu mekar
Walau berduri tetapi melambangkan Kesetiaan CINTA
Ku tak' ingin helaian mawar itu gugur
Seperti Cintaku padamu wahai pujangga

Hari ini, esok dan sampai nanti....
Mawar ini kan kujaga agar tumbuh abadi
Seperti kau yang tak' pernah terganti
Di Rindu...di senyum dan selamanya di hati

Kini.....!!!!!!
Ku hanya bisa menangisi semua ini
Melihat kau melangkah pergi
Kau tak' lagi hapus airmata ini....
Walau Engkau tahu meninggalkan luka dihati

Rinduku akan tawamu......
Bahagiaku akan ceriamu..
Semua t'lah berubah
Menjadi duri-duri mengisi kekosongan hati

Tak' ada lagi yang tersisa untukku
Hanya kenangan-kenangan indah saat bersamamu
Senyum indah yang dulu menyejukkan hati
Kasih sayang tulus yang dulu kau beri
Kini semuanya t'lah terasa jauh tuk' aku raih

Walau bagimu Cintaku tak' berarti lagi
Bawalah namaku kemanapun kau pergi
Agar Engkau bisa selalu kenang........
" Akulah Hati Yang T'lah Kau Sakiti "

By. Devy Indriyani

Hey kamu, pria-pria ganteng disana, jangan pernah menyakiti hati seorang wanita tau, karena seorang wanita itu akan dengan mudah meneteskan airmata hanya karena 1 ucapan yang menggores hati. Wanita itu butuh dimanja dan disayang, seperti aku, hehe..!!
Selamat berakhir pekan guys..!!

6 Juni 2015

Menata HTML Untuk Mempercepat Loading Blog

Cara Termudah Membuat Loading Blog Semakin Cepat | Fast Speed

Menata HTML Untuk Mempercepat Loading Blog - Pada sebagian orang yang jika dihadapkan dengan urusan kode-kodean seperti CSS, HTML dan JavaScript akan membuat kepala menjadi pusing kepalang, sehingga bentuk susunan stuktur HTML Template tidak pernah diperhatikan, bahkan tidak pernah terpikir untuk menata ulang susunan HTML kode yang ada dalam Template. Tetapi tahukah Anda pada baris dan kolom dalam kode HTML Template yang berantakan dapat menyebabkan loading blog menjadi lambat (loading berat), apakah Anda pernah mencoba untuk menata ulang susunan kode tersebut, atau membiarkan struktur kode tersebut saat Template itu Anda gunakan untuk membuat sebuah blog.?

Ibarat sebuah buku yang memiliki lembar halaman, jika 1 buku terdiri dari 30 lembar halaman dan Anda membutuhkan waktu 30 menit untuk membaca 1 halaman, maka berapa waktu yang akan Anda butuhkan untuk membaca semua isi buku tersebut yang terdiri dari 30 halaman? (30 menit X 30 Lembar halaman = 900 menit).

Waktu yang cukup lama bukan hanya membaca 1 buah buku dengan 30 halaman.!, sama seperti blog, yang terbentuk oleh susunan HTML markup bahasa dalam jabaran struktur kode, dan kode inilah yang akan dibaca oleh browser saat blog Anda terbuka. Semakin banyak Anda menempatkan atau menambahkan beberapa kode secara langsung dalam wilayah HTML, maka semakin lama pula waktu yang dibutuhkan browser untuk membaca semua kode-kode tersebut dalam Template blog Anda, sebelum akhirnya blog akan terbuka secara sempurna dan menyeluruh.

4 Juni 2015

Lebih Sering Blogwalking Atau Berkomentar?

Lebih Sering Blogwalking Atau Berkomentar? - Mana yang lebih sering Anda lakukan?, karena ke-2 hal ini merupakan kegiatan yang sangat penting untuk membangun popularitas sebuah web atau blog yang Anda jalankan saat ini. Tulisan Anda dalam blog (Artikel) adalah status, dimana tujuan Anda sesungguhnya adalah untuk memberitahukan kepada orang banyak tentang apa yang sudah Anda publikasikan, memberitahukan bahwa Anda sedang meng-informasikan sesuatu berita yang sangat penting, namun mereka yang diberitahu tidak akan mau tahu jika Anda tidak pernah singgah di status mereka.

Blogwalking merupakan acara jalan-jalan keblog tetangga, sahabat sampai mencari beberapa informasi penting, dan itu sering Anda lakukan tanpa ada sesuatu niat (pamrih) dari mereka sipemilik situs (Dengan tidak mengatakan "kunbal ya gan.!"). Jadi jika Anda berkomentar itu sudah pasti Anda blogwalking, namun berkunjung dan singgah diblog orang lain belum tentu Anda berkomentar, benar..?. Jadi mana yang harus kita lakukan seharusnya.

BLOGWALKING
Merupakan kegiatan jalan-jalan atau berkunjung ke blog orang lain, baik mereka yang sudah kita kenal atau sekedar mengenal dalam dunia MAYA, dengan tujuan membaca beberapa alinea sampai merangkum semua informasinya lalu pergi lagi. Apakah cara ini yang sering Anda lakukan?, lalu hal apa yang akan Anda peroleh dengan cara demikian?

» Menumbuhkan Ide Inspirasi Menulis Melalui Blogwalking akan dapat membantu Anda mengumpulkan bahan-bahan tulisan, saat dimana Anda kehabisan rangkaian kata untuk membuat sebuah cerita posting, kesempatan ini bisa Anda jadikan cerita untuk membuat postingan Anda berikutnya. Melihat sudah pasti tahu, namun dengan membaca sudah pasti lebih tahu dan paham, maka jadikan blogwalking bukan hanya sekedar ajang jalan-jalan ke blog orang lain, tetapi pahami bagaimana mereka menulis, baca apa yang mereka informasikan, dengan begitu Anda akan terbiasa menyusun kata dan merangkainya untuk tulisan Anda berikutnya.

Hy Guys..!!

Kebiasaan ini akan membuka imajinasi Anda, saat Anda melihat sesuatu yang langsung terperangkap dalam memori, maka bukan hal yang sulit lagi untuk menentukan tema apa yang akan Anda bahas untuk artikel blog Anda hari ini. Bukan hanya itu, dengan sering blogwalking akan lebih mudah menentukan Jumlah Kata Yang Ideal Untuk Membuat Artikel.

BERKOMENTAR
Komentar merupakan kegiatan tanya jawab, kritik sampai acara perkenalan dengan penuh canda, dengan berkomentar bisa menghidupkan suasana blog yang sepi. Bayangkan saja saat Anda membuat postingan dan mempublikasikannya, namun sudah 2 minggu baru ada 1 pengunjung yang berkomentar, bagaimana perasaan Anda, senang bukan..!! itu berarti postingan Anda sudah Ada yang melihat (membuka) walaupun tidak membacanya. Dalam perhitungan 1 komentar berarti 1 pageView, bagaimana jika postingan Anda mendapat sampai 200 komentar, sudah pasti banyak yang mengenalnya bukan.!.
Lakukan beberapa tips dengan cara » Mengajak Pengunjung Agar Tertarik Untuk Berkomentar disetiap postingan blog Anda.

Berkomentarlah secara baik dan sopan, karena Anda sebagai tamu, sekalipun tamu adalah RAJA, namun pemilik lebih berhak menentukan cara yang bagaimana yang sewajarnya bisa ditoleransi karena ada beberapa pesan peraturan, jadi bukan seenaknya Anda menuliskan teks komentar yang nantinya komentar Anda akan dihapus oleh admin (pekerjaan sia-sia bukan.!), coba perhatikan biasanya ada info tata cara berkomentar yang dituliskan sipemilik blog, gak ada salahnya kan jika hal itu kita patuhi.!?

Traffik blog sumber utamanya adalah dari komentar, semakin sering Anda berkomentar di blog orang lain, maka semakin besar pula kesempatan buat blog Anda mendapat kunjungan balik (Backlink). Namun hargai karya orang lain dengan » Memberi Komentar Secara Baik Dan Benar Di Blog mereka, dengan begitu lalu lintas kunjungan terlihat bersih tanpa adanya unsur SPAM.

Ke 2 kegiatan ini memang sangat penting, Blogwalking dan Berkomentar, namun mana yang harus kita dahulukan?. Saat dimana Anda kehabisan ide untuk membuat tulisan, cobalah blogwalking.!! cari blog-blog yang membahas informasi yang Anda butuhkan, luangkan waktu Anda sebentar untuk membaca, pahami, saya yakin Anda akan menemukan sejuta ide untuk membuat sebuah cerita yang akan Anda tuliskan dalam blog Anda. Dan jika itu terjadi jangan lupa berkomentar ya, karena sering berkomentar tidak kalah penting dengan blogwalking.
» Manfaat Sering Berkomentar Di Blog Lain itu sangat banyak, salah satunya adalah saya akan lebih mengenal Anda jika Anda berkomentar di blog ini.

Jadi mana yang harus Anda lakukan, Lebih Sering Blogwalking Atau Berkomentar?

3 Juni 2015

Cara Membuat Gambar Melengkung Dan Berputar

Cara Membuat Gambar Melengkung Dan Berputar - Sudah begitu banyak tutorial yang pernah saya tuliskan tentang cara membuat gambar di postingan dengan berbagai efek, dari gallery gambar, album image personal sampai tampilan gambar 3D yang semuanya bisa Anda pilah-pilih di » Efek Gambar By. Sahabat Blogger 77. Namun untuk tampilan gambar kali ini saya buat berbeda dengan efek melengkung dan berputar. Unik, menarik dan desain terbaru dari saya untuk sahabat semua, seperti tampilan gambar berikut:

Saat melihat artikel tentang » Cara Membuat Carousel Gambar 3D Dengan CSS Transform, terinspirasi ingin membuat efek yang sama, namun saya akan coba mengubah keseluruhan tampilannya menjadi individual show (1 tampilan gambar), karena memang efek ini menggunakan elemen perintah yang sama yaitu transform-rotate untuk membuat gambar bergerak dan berputar, sedangkan untuk membuat tampilan gambarnya terlihat melengkung, kita hubungkan semua sisi gambar, lalu kita tarik sisi miringnya dengan jarak tertentu seperti ini:

.gambar {
transform-style:preserve-3d;
transform:rotateX(35deg)rotateY(45deg)rotateZ(15deg)translate3d(325px,-70px,50px)
}

Selanjutnya gambar kita pecah lagi menjadi beberapa bagian dengan ukuran 33px, lalu pecahan inilah yang akan kita bentuk menjadi gambar melengkung dengan jarak posisi pada background per selisih 33px, selisih kemiringan 7.5px, susunannya seperti ini:

.curve div {
position: absolute;
background: #000 url(URL-Gambar Anda);
}

//pecahan gambar (background-position)
.curve .a {background-position:0 0;transform:rotateY(0deg) translateZ(248px)}
.curve .b {background-position:759px 0;transform:rotateY(7.5deg) translateZ(248px)}
.curve .c {background-position:726px 0;transform:rotateY(15deg) translateZ(248px)}
....
....
.curve .x {background-position:33px 0;transform:rotateY(172.5deg) translateZ(248px)}

Dan hasilnya :

DEMO SHOW

Dibilang mudah, tidak juga tetapi dibilang susah, cukup mudah kok, hehe..!! hal yang tersulit untuk membuat gambar melengkung lalu berputar seperti ini hanya pada pembagian saat menentukan selisih pecahan gambar, karena dimensinya harus tepat agar tampilan gambar terlihat melengkung, bukan seperti efek-efek berikut:

» 4 Variasi Slide Teks Pada Gambar
» Kumpulan Ragam Efek Pada Gambar
» Tampilkan Foto Kecil Saat Gambar Utama Dihover
» Membuat Menu Blogger Dengan Target Gambar

Oh iya, buat Anda yang ingin menampilkan efek seperti ini pada gambar postingan, cukup salin kode-kode berikut, namun sebelumnya tambahkan beberapa kode untuk mendukung vendor peramban agar efek dapat bekerja pada browser yang Anda gunakan. Kode lengkapnya seperti ini:

CSS Element


<style type="text/css">
#container {
  margin:40px 0 0 35%;width:550px;
  -moz-perspective:900px;-webkit-perspective:900px;
  -ms-perspective:900px;-o-perspective: 900px;perspective:900px}

#frame {
  width:33px;-moz-transform-style:preserve-3d;
  transform-style:preserve-3d;
  transform:rotateX(35deg) rotateY(45deg) rotateZ(15deg) translate3d(325px,-70px,50px)}

.curve {transform-style: preserve-3d;animation: curve 25s infinite linear}
.curve div {
  position: absolute;background: #000 url(URL-Gambar Anda);
  border: solid 2px yellow;border-width: thin 0;
  height:320px;width:34px;opacity: 1}

.curve .a {background-position:0 0;transform:rotateY(0deg) translateZ(248px)}
.curve .b {background-position:759px 0;transform:rotateY(7.5deg) translateZ(248px)}
.curve .c {background-position:726px 0;transform:rotateY(15deg) translateZ(248px)}
.curve .d {background-position:693px 0;transform:rotateY(22.5deg) translateZ(248px)}
.curve .e {background-position:660px 0;transform:rotateY(30deg) translateZ(248px)}
.curve .f {background-position:627px 0;transform:rotateY(37.5deg) translateZ(248px)}
.curve .g {background-position:594px 0;transform:rotateY(45deg) translateZ(248px)}
.curve .h {background-position:561px 0;transform:rotateY(52.5deg) translateZ(248px)}
.curve .i {background-position:528px 0;transform:rotateY(60deg) translateZ(248px)}
.curve .j {background-position:495px 0;transform:rotateY(67.5deg) translateZ(248px)}
.curve .k {background-position:462px 0;transform:rotateY(75deg) translateZ(248px)}
.curve .l {background-position:429px 0;transform:rotateY(82.5deg) translateZ(248px)}
.curve .m {background-position:396px 0;transform:rotateY(90deg) translateZ(248px)} 
.curve .n {background-position:363px 0;transform:rotateY(97.5deg) translateZ(248px)}
.curve .o {background-position:330px 0;transform:rotateY(105deg) translateZ(248px)}
.curve .p {background-position:297px 0;transform:rotateY(112.5deg) translateZ(248px)}
.curve .q {background-position:264px 0;transform:rotateY(120deg) translateZ(248px)}
.curve .r {background-position:231px 0;transform:rotateY(127.5deg) translateZ(248px)}
.curve .s {background-position:198px 0;transform:rotateY(135deg) translateZ(248px)}
.curve .t {background-position:165px 0;transform:rotateY(142.5deg) translateZ(248px)}
.curve .u {background-position:132px 0;transform:rotateY(150deg) translateZ(248px)}
.curve .v {background-position:99px 0;transform:rotateY(157.5deg) translateZ(248px)}
.curve .w {background-position:66px 0;transform:rotateY(165deg) translateZ(248px)}
.curve .x {background-position:33px 0;transform:rotateY(172.5deg) translateZ(248px)}

@keyframes curve {
from {transform:rotateY(0)}
to {transform:rotateY(-360deg)}}
</style>

HTML Markup


<div id="container">
   <div id="frame">
      <div class="curve">
         <div class="a"></div>
         <div class="b"></div>
         <div class="c"></div>
         <div class="d"></div>
         <div class="e"></div>
         <div class="f"></div>
         <div class="g"></div>
         <div class="h"></div>
         <div class="i"></div>
         <div class="j"></div>
         <div class="k"></div>
         <div class="l"></div>
         <div class="m"></div>
         <div class="n"></div>
         <div class="o"></div>
         <div class="p"></div>
         <div class="q"></div>
         <div class="r"></div>
         <div class="s"></div>
         <div class="t"></div>
         <div class="u"></div>
         <div class="v"></div>
         <div class="w"></div>
         <div class="x"></div>
      </div>
   </div>
</div>

2 Juni 2015

13 Model Tombol Dengan CSS

Collection Button Effect Pure CSS

13 Model Tombol Dengan CSS - Karena ada beberapa hal yang tidak mungkin untuk ditinggalkan, sehingga update artikel terbaru di blog ini, baru bisa saya publikasikan buat teman-teman semua pecinta SAHABAT BLOGGER 77 dengan tema 13 Model Tombol Dengan CSS, diantaranya:

DEMO SHOW

Anda Tinggal KLIK Tombol pilihan Anda disini..

Slide In Bottom Border
Slide In Top Border
Rotate Effect Skew
Background Swap
Pop Out Effect | Zoom
Quick Click
3D On Hover
Slide Down Background
Slide Up Background
Slide Right Background
Slide Left Background
Radiating Border
Spinning Diamond

BACA JUGA

Efek Zoom Gambar Mode Slide Teks

Collection Button Effect Pure CSS
Anda tinggal Copy kode tombol pilihan Anda, lalu letakkan dimana tombol ini akan Anda tampilkan dalam postingan, pilihannya:

1. Slide In Bottom Border
Efek yang terjadi pada tombol ini yaitu pemberian garis bawah (bottom border) saat tombol di hover dengan model tampilan slide border. CSS lengkapnya seperti ini:

2. Slide In Top Border

3. Rotate Effect Skew
Model tombol yang ini yang menarik, saya membuat kemiringan dengan dimensi 10px, dan itu terjadi saat tombol berputar » 360 deg. CSS lengkapnya seperti ini:

4. Background Swap
Membuat ragam warna background pada tombol, dan saya mengambil titik focus tengah dengan model skew (miring) menggunakan CSS background linear-gradient, efeknya background akan bertukar tempat (swap) saat tombol dihover dengan susunan kode CSS seperti ini:

5. Pop Out Effect | Zoom

6. Quick Click

7. 3D On Hover

8. Slide Down Background
Efek slide sama dengan tampilan tombol yang pertama dan kedua, namun model tombol ini saya buat dengan background full (tombol akan berubah warna saat di HOVER dengan efek slide-down), perpindahan warna akan terjadi dari bawah keatas dengan sistem slide. Kode lengkapanya seperti ini:

9. Slide Up Background

10. Slide Right Background

11. Slide left Background

12. Radiating Border
Memberi garis diluar tombol dengan jarak tertentu, dan itu akan terjadi saat tombol di hover, sedangkan kecepatan kemunculan garis saya atur dengan transition ease-in-out. Mau membuat model tombol ini, CSS lengkapnya seperti ini:

13. Spinning Diamond (Arrow)
Coba lihat disini » Membuat Tombol Download Dengan CSS Pseudo. Model hampir sama, namun efeknya saya modifikasi mirip tampilan tooltip teks dengan arrow, sedangkan efeknya saya buat berputar hanya pada tanda panahnya saja (spinning diamond), kodenya seperti ini: