PUISI : Sahabat Jadi Cinta

PUISI : Sahabat Jadi Cinta
Mencari seoarang sahabat tidak semudah menemukan seorang teman, walau defenisinya tidak jauh berbeda, namun mencari teman akan jauh lebih mudah kita dapatkan daripada mencari seorang sahabat. Saya mengenal Anda dan sebaliknya Anda sudah mengenal saya, itu sudah bisa dikatakan sebagai teman, tetapi seorang sahabat tidak hanya sekedar kenal, lebih daripada itu, seorang sahabat tanpa kita minta akan mau melengkapi apa yang menjadi kekurangan kita, menjaga dan saling berbagi layaknya sebuah keluarga, bahkan terkadang ada rasa kangen yang begitu dalam saat kita jauh dari sahabat. Tetapi pernahkah Anda menjadi CINTA karena semua hal itu kepada SAHABAT Anda.? (dijawab sendiri ya? hehe..!!).

Sebenarnya lucu juga sih.! site SB-77 (Sahabat Blogger 77) membahas romantica CINTA tentang puisi Cinta lagi hehe..!!. Padahal hampir 100% blog ini berbagi hal seputar tutorial blog dan dunia kode, dari cara mendesain dan modifikasi tampilan Template, widget tutorial, informasi SEO sampai efek- efek blog, yang semuanya menggunakan kode script dalam penerapannya, tetapi pikiran juga butuh di istirahatkan agar fresh bukan.? biar sahabat semua tidak semeriuh melihat kode-kode CSS, HTML dan JavaScript jika berkunjung kesini.

BACA JUGA

Faktor Utama Penyebab Putus Cinta



Admin juga bisa kok jatuh Cinta sama seperti sahabat semua, hanya sekedar berbagi sekaligus menyampaikan informasi kepada dia (Sahabat Aku) disana, semoga membaca isi hati ini kalau semua perhatian itu, kasih sayang itu dan semua kebaikannya selama ini telah saya artikan sebagai cinta dalam goretan kertas kecil beberapa bait PUISI - Sahabat Jadi Cinta.

Puisi Ku

SAHABAT JADI CINTA
Engkau selalu ada..
Saat aku terluka dan bahagia
Senyummu tulus tanpa pamrih
Tanganmu begitu ringan saat memberi

Engkau sungguh " SAHABAT SEJATI "
Yang tak' pernah ucapkan kata " NANTI "

Apakah aku bisa....
Sungguhkah aku sanggup....
Menahan rasa Cinta ini
Menahan Rindu akan dekapmu

Engkau peluk aku, sebagai SAHABAT
Tapi...ku ingin itu pelukan CINTA
Kau sayang aku sebagai SAHABAT
Tapi...ku ingin itu sayang sebagai KEKASIH

Ya.....ALLAH
Apakah aku salah Mencintainya....?
Dosakah aku yang t'lah menyayanginya...?
Ku hanya ingin memilikinya
Setulus hati dalam CINTA

Seandainya engkau tahu..
Ku memendam rasa Cinta
Rasa sayang yang begitu dalam padamu
Ku' hanya ingin ucapkan.......
     MAAF........!!!!!!!
                      " Aku Cinta padamu bukan sebagai SAHABAT "

---

Devy Indriyani

Hayoo...!! siapa yang pernah mengalami hal seperti ini hehe..!!, saya yakin diantara beberapa sahabat semua pasti pernah merasakan hal seperti ini, hanya bingung atau rasa takut untuk mengatakan yang sebenarnya. Jadi, sebelum sidia (Sahabat) diambil orang, katakan apa yang Anda rasakan, daripada kelak rasa penyesalan itu datang, Anda tinggal gigit jari dech hehe..!!.

36 Contoh Text Animation

36 Contoh Text Animation - Ini hanyalah sebuah panduan buat sahabat semua pecinta SAHABAT BLOGGER 77 untuk mengenal dan mengetahui bagaimana bentuk dan cara kerja efek animation sesuai dengan nama-nama gerakan pada text. Contoh seperti Jumping Text Effect, Trembling Text Effect, Animation Tetx Fill Color dan Blink yang sudah saya rangkum dalam sebuah tutorial tentang 4 Model Efek Animasi Pada Teks yang dapat Anda coba gunakan jika ingin membuat efek gerak (animation) di blog Anda dengan berbagai style.

Kali ini saya akan menambahkan lagi dengan memberikan 36 contoh nama dan bentuk efek gerak pada teks dengan CSS-animation. Dari 36 contoh nama efek berikut, saya bagi lagi dengan 2 kelas kategori FANCY (Indah) dan SIMPLE (Sederhana) seperti ini:

FANCY CATEGORY EFFECT

• Shadow Level-2
• Slide Around Level-3
• Zoom Big And Zoom Small
• Jitter
• Bounce (Up Down, All, Left Right)
• Roll (Left And Right)
• Rainbow

SIMPLE CATEGORY EFFECT

• Plain
• Fade In Fast And Fade In Slow
• Slide (Down, Top, Right and Left)
• Font Size (Down and Top)
• Rotate
• 3D
• Scale
• Skew
• Color (Slow, Fast and Subtle)
• Background

BACA JUGA

Menampilkan Bayangan Teks Saat Hover


Anda cukup pilih dan KLIK nama efek pada tab sebelah KIRI, maka teks yang berada disebelah KANAN akan bergerak sesuai nama efek yang sudah Anda tentukan, dengan begitu bagaimana bentuk gerakan efek Rotate, Jitter, Bounce bisa Anda kenal. Bagaimana mau mencoba.?

LIHAT EFEK

3 Colection Ribbon Style Boxes Info

3 Colection Ribbon Style Boxes Info - Banyak cara untuk membuat dan menampilkan text info dengan berbagai style, salah satunya adalah dengan memberikan hiasan border pada sisi text sehingga berbentuk box. Seperti Membuat Panel Slide Untuk Menyimpan Text merupakan salah satu tampilan SPOILER BOX yang sudah saya modifikasi dengan efek ribbon pita.

Efek kali ini saya akan memberikan 3 Colection Ribbon Style Boxes Info yang bisa Anda gunakan untuk memberikan hiasan gaya cantik dan keren untuk tampilan info teks Anda, tampilan gambarnya seperti ini:

BACA JUGA

Penyebab Menurunnya Kualitas SEO Pada Blog

Elemen CSS dibawah ini saya jabarkan dalam 1 wilayah deklarasi, Anda tinggal pilih salah satu diantara ke-3 Colection Ribbon Style Boxes Info untuk menghias teks Anda, masing-masing box sudah saya tandai dengan teks berwarna MERAH seperti ini:

<style type="text/css">
.boxes1-info,.boxes3-info {padding:63px 5px;text-align:left;color:#999}
.boxes {
  background: #fff;box-shadow: 0 0 3px rgba(0,0,0,0.25);
  float: left;height: 220px;margin: -20px 42px 0 0;
  position: relative;text-align: center;width: 210px}

.boxes p {
  background: #08b;
  background-image: radial-gradient(transparent 30%, rgba(0, 0, 0, 0.2));
  background-image: -webkit-radial-gradient(transparent 30%, rgba(0, 0, 0, 0.2));
  background-image: -moz-radial-gradient(transparent 30%, rgba(0, 0, 0, 0.2));
  background-image: -ms-radial-gradient(transparent 30%, rgba(0, 0, 0, 0.2));
  background-image: -o-radial-gradient(transparent 30%, rgba(0, 0, 0, 0.2));
  color: #fff;font-size: 18px;font-weight: bold;
  position: relative;text-shadow: -1px -1px 1px rgba(0,0,0,0.2)}

/* Ribbon Style 1 (Folded) */
.ribbon1:before, .ribbon1:after {
  bottom: 30px;box-shadow: 0 30px 10px rgba(0,0,0,0.8);
  content: "";height: 50px;position: absolute;width: 47.5%;z-index: -1}

.ribbon1:before {left: 3%;transform: rotate(-5deg)}
.ribbon1:after {right: 3%;transform: rotate(5deg)}
.ribbon1 p {
  border-width: 1px 1px 2px;box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  padding: 4px 40px;position: absolute;right: -14px;top: 12px}

.ribbon1 p:after {
  border-width: 7px;border-style: solid;
  border-color: #134 transparent transparent #134;bottom: -15px;
  content: "";position: absolute;right: -1px}

/* Ribbon Style 2 (Cutter) */
.ribbon2 {z-index: -1}
.boxes2-info {padding:5px 5px;text-align:left;color:#999}
.ribbon2 p {
  border-color: rgba(0,0,0,0.1);box-shadow: 0 0 4px rgba(0,0,0,0.3);
  display: inline-block;margin: 12px auto;padding: 4px 30px;width:150px}

.ribbon2 p:before, .ribbon2 p:after {
  bottom: 24px;box-shadow: 0 28px 8px rgba(0,0,0,0.3);content: "";
  height: 25px;position: absolute;width: 47%;z-index: -1}

.ribbon2 p:before {left: 1%;transform: rotate(-6deg)}
.ribbon2 p:after {right: 1%;transform: rotate(6deg)}

/* Ribbon Style 3 (Corner) */
.ribbon3 {overflow: hidden}
.ribbon3 p {
  background-image: linear-gradient(0deg, transparent 50%, rgba(0, 0, 0, 0.3));
  background-image: -webkit-linear-gradient(0deg, transparent 50%, rgba(0, 0, 0, 0.3));
  background-image: -moz-linear-gradient(0deg, transparent 50%, rgba(0, 0, 0, 0.3));
  background-image: -ms-linear-gradient(0deg, transparent 50%, rgba(0, 0, 0, 0.3));
  background-image: -o-linear-gradient(0deg, transparent 50%, rgba(0, 0, 0, 0.3));
  border-width:1px 0;border-color:rgba(0,0,0,0.3);box-shadow:0 2px 6px rgba(0,0,0,0.5);
  padding: 4px 28px;position: absolute;width:180px;left:-13px}

.ribbon3 p:after {
  border-width: 7px;border-style: solid;
  border-color: #134 transparent transparent #134;bottom: -15px;
  content: "";position: absolute;right: -1px}

.ribbon3 p:before {
  border-width: 7px;border-style: solid;
  border-color: #134 #134 transparent transparent;bottom: -15px;
  content: "";position: absolute;left: -1px}
</style>

Hasilnya:




DEMO SHOW



Tahap selanjutnya tinggal menempatkan kode HTML berikut pada postingan Anda mode tulis HTML (bukan yang Compose), lengkapnya seperti ini:

<div class="boxes ribbon1"> <!..Ribbon Style 1 (Folded)..>
   <p>Info</p>
      <div class="boxes1-info">
          ...Insert Your Info In Here...
      </div>
</div>

<div class="boxes ribbon2"> <!..Ribbon Style 2 (Cutter)..>
   <p>Info</p>
      <div class="boxes2-info">
          ...Insert Your Info In Here...
      </div>
</div>

<div class="boxes">
  <div class="ribbon3"> <!..Ribbon Style 3 (Corner)..>
    <p>Info</p>
       <div class="boxes3-info">
          ...Insert Your Info In Here...
       </div>
  </div>
</div>

Manfaat Sering Berkomentar Di Blog Lain

Manfaat Sering Berkomentar Di Blog Lain - Berbagi, bertanya, berkenalan atau sekedar memberi salam hingga mengkritik tulisan yang kita baca di blog lain sering kita lakukan saat berkomentar. Tetapi banyak juga sahabat blogger yang terkesan serius memberi komentar dengan tujuan ingin membahas apa yang mereka baca kepada sipenulis artikel, karena secara umum fungsi ditampilkannya kolom komentar tujuannya adalah memang kearah sana. Namun, hasil apa yang akan kita dapatkan jika kita sering melakukan hal itu?. Dalam dunia blogging selalu ada unsur SEO didalamnya, yang jika kita hubungkan dengan apa "Manfaat Jika Sering Berkomentar Di Blog Lain", maka kalimat komentar seperti:

• Terimakasih gan..!
• Kunjungi juga donk.!
• Sangat bermanfaat
• Blognya keren
• Izin nyimak
• Artikelnya sangat membantu
• Bahkan hanya menyisipkan ICON Comment

Tidak akan pernah lagi Anda ucapkan atau tuliskan sebagai bahasa komentar, bukan karena cara berkomentar seperti itu tidak baik atau tidak bermanfaat, namun apa yang Anda lakukan hanya membuat pekerjaan Anda sia-sia. Lalu kalimat apa yang sepantasnya kita tuliskan dalam komentar?, ini hanyalah sebuah pilihan, karena » Memberi Komentar Secara Baik Dan Benar Di Blog sebenarnya ada peraturan dan tata cara yang harus kita lakukan, agar apa yang sudah kita tuliskan dapat memberikan manfaat buat optimasi blog kita. Pertemuan kali ini, saya akan memberikan poin-poin seberapa manfaat jika kita sering berkomentar di blog lain, diantaranya:

1. TRAFIK
Banyak sumber untuk mendapatkan trafik blog agar meningkat, seperti share artikel pada sosial media, akan tetapi kita tidak dapat memastikan apakah artikel tersebut akan mereka (pengunjung) baca atau tidak, namun jika kita sering berkomentar di blog lain sudah pasti 40% diantaranya blog akan mendapatkan kunjungan balik (backlink).

Jika Anda berkomentar di blog lain dengan jumlah 100 blog/hari, dipastikan minimal 40 diantaranya akan melakukan hal yang sama ke blog Anda, dan itu sudah pasti blog Anda mendapat 40 visitor/hari, karena seorang blogger sejati akan dengan senang hati berkunjung ke blog Anda dan berkomentar jika Anda berkomentar juga di blog mereka, jadi kalimat komentar seperti "Ditunggu Kunjugan Baliknya" tidak perlu Anda ucapkan, bahasa komentar seperti itu akan membuat sipemilik blog enggan atau MALAS bertamu di blog Anda, karena diduga artikel yang ia informasikan tidak Anda baca.

2. PROMOSI BLOG

Dengan berkomentar di blog lain, secara tidak langsung Anda sudah mempromosikan blog Anda, bukan hanya kepada admin blog, tetapi kepada semua sahabat blogger yang juga berkomentar di blog yang sama dengan Anda. Itu sebabnya Mencari Backlink Melalui Kolom Komentar | Serp Blog banyak dilakukan webmaster sebagai trik ampuh untuk meningkatkan lalu lintas page view, karena tidak menutup kemungkinan orang lain yang juga berkomentar di blog yang sama akan tertarik dengan bahasa komentar Anda, dan melakukan KLIK ke blog Anda. Suatu hal yang bermanfaat bukan?

TIPS

Berkomentar ibarat kita berbicara, jika Anda berbicara untuk membahas topik artikel tentang "Manfaat Buah Semangka Buat Kesehatan", lalu lawan bicara Anda membalas dengan kalimat "Artikelnya Keren" apa yang Anda rasakan? kira-kira nyambung tidak, hehe..!!.
Dan jika ingin blog Anda banyak yang berkomentar, permudah cara berkomentar di blog Anda, karena saya dan sahabat lain yang akan berkomentar hari ini hanya sebagai tamu, yang bisa saja pergi jika pintu rumah Anda selalu terkunci.

Defenisinya adalah sikap saling menghargai, singkatnya "Buatlah Orang Lain Senang, Layaknya Anda Ingin Di Buat Senang".

3. DESKRIPSI KATA KUNCI
Mungkin kalimat seperti ini sering Anda temukan, saat mencari sebuah informasi pada Google Penelusuran, maka dengan mengetikkan kata kunci sebagai target ada beberapa dekripsi singkat setelah judul artikel. Saat kita buka, kita tidak menemukan kalimat itu dalam artikel, karena kalimat itu sumbernya dari komentar Anda. Jika Anda memberi komentar di blog lain secara baik dan relevan (sesuai topik bahasan), google akan menilai kualitas tulisan itu sebagai deskripsi kata kunci yang bermanfaat, dan sumbernya adalah dari komentar Anda, maka posisi blog Anda akan diperhitungkan dalam data base google penelusuran.

4. REVIEW
Beberapa sahabat ada yang sekedar iseng saja berkomentar, tetapi ada juga yang serius berkomentar. Mereka yang serius berpendapat ngeblog adalah berdiskusi, berbagi dan saling bertukar informasi antar sesama, seperti komentar yang panjang, komentar yang membangun dan saling melengkapi akan membuat beberapa pihak suka dengan bahasa komentar itu. Hal ini akan membuat mereka terkesan dengan blog kita, dan tanpa kita minta mereka membuat sebuah artikel yang membahas seputar blog kita. Artinya ada beberapa pihak yang membuat sebuah artikel yang membahas seputar nice blog Anda, itu tidak Anda minta, tetapi karena komentar Anda baik dan relevan mereka akan senang hati me-Riview blog Anda. Manfaatnya, hanya karena komentar Anda yang baik dan bijak dan itu sering Anda lakukan, blog Anda dipromosikan orang lain tanpa Anda minta.


Poin-poin diatas sudah pasti kita dapatkan, dan mungkin masih banyak manfaat lagi yang bisa kita peroleh jika kita sering berkomentar di blog lain, Anda bisa melengkapi tulisan ini jika kiranya masih ada manfaat yang terlewat. Dan saya mohon maaf, jika kiranya ada salah bahasa dalam tulisan ini, bukan sebagai sindirin, tetapi untuk mengajak sahabat semua pecinta SAHABAT BLOGGER 77 untuk lebih menghargai tulisan orang lain dengan cara berkomentar. Salam SB-77 Web Design.

Tahap Awal Belajar Tag Kondisional

Tahap Awal Belajar Tag Kondisional - Tag berarti kegiatan yang kita lakukan untuk memberikan beberapa tanda pada sebuah area, sedangkan kondisional/conditional adalah nilai kondisi atau penunjuk untuk mengartikan isi dari area tag tersebut. Secara keseluruhan tag kondisional dapat kita artikan sebagai tanda yang digunakan untuk menjelaskan dan mengatur elemen-elemen tertentu pada HTML Template, apakah fungsi kode tersebut ingin ditampilkan atau tidak, ingin diaktifkan atau tidak difungsikan sesuai dengan nilai-nilai objek area tertentu yang sudah terkondisi.

Karena kita berbicara tentang bahasa perkodean HTML, CSS dan JavaScript, saya akan menjelaskan sedikit tahap awal bagaimana membaca tag kondisional dan fungsi-fungsinya, agar sahabat semua pecinta SAHABAT BLOGGER 77 bisa belajar menggunakan tag kondisional untuk mengatur sebuah halaman ingin ditampilkan atau tidak ditampilkan berdasarkan nilai-nilai yang sudah Anda tentukan, namun tutorial kali ini saya khususkan untuk flatform blogspot.

BACA JUGA

Pengertian HTML Template Berdasarkan Versi



Sebelum kita lanjutkan tahap mambaca tag kondisional, ada baiknya kita mengenal terlebih dahulu bentuk tag kondisional seperti apa. Kita ambil contoh awal yang paling sering digunakan pada sebuah halaman adalah seperti ini:

1. Membaca Bentuk Tag Kondisional


<b:if cond='data:blog.url == data:blog.homepageUrl'>
....
  ....
</b:if>

Pengertiannya:
Jika kondisi halaman saat ini sama dengan URL halaman depan atau Home-page, maka nilai objek yang ada didalamnya akan ditampilkan. Atau Anda bisa buat sebaliknya untuk tidak menampilkan nilai objek dengan mengganti kode pembanding (==). Artinya, Jika nilainya kita putar balik, maka Anda ganti kode pembanding == menjadi != yang berarti tidak sama dengan atau kondisi halaman saat ini "BUKAN" URL halaman Home.

Tag kondisional selalu diawali dengan tag pembuka <b:if> dan diakhiri dengan tag penutup </b:if>. Setelah tag pembuka ada atribut cond seperti ini: <b:if cond='...'>. Nah.! atribut cond inilah elemen penentu yang digunakan untuk menunjukkan suatu kondisi, sedangkan kode data:blog.url == data:blog.homepageUrl adalah nilai atribut cond yang digunakan untuk menjelaskan maksud dari kondisi (Kondisional) yang diinginkan.

Kode data:blog.url adalah suatu pernyataan yang mewakili keadaan sebuah URL halaman, sementara kode data:blog.homepageUrl adalah perwakilan dari URL halaman beranda (homepage).

2. Menggunakan Tag Kondisional
Menggunakan tag kondisioanal masih terbagi lagi dengan 2 cara penerapan, yaitu:

2.1 Secara Langsung (Tunggal)
Jika Anda terapkan kondisinya secara langsung, maka Anda sudah menyiapkan sebuah target sasaran yang akan diapit oleh tag ini, contoh seperti ini:


<b:if cond='data:blog.url == data:blog.homepageUrl'>
...
elemen target
...
</b:if>

Fungsinya:
Jika saat ini Anda berada pada halaman HOME, maka URL beranda yang ditampilkan, tetapi jika saat ini Anda berada pada halaman bukan halaman depan (misal pada halaman posting), maka URL posting yang difungsikan.

2.2 Secara Tidak Langsung (Kondisi Tertentu)
Cara seperti ini biasanya penerapan yang dilakukan dengan mengapitkan tag kondisional dalam selektor objek yang menjadi target sasaran. Misal kita fungsikan pada elemen CSS yang memiliki atribut #(ID), sedangkan kondisi perintahnya adalah untuk menghilangkan objek sasaran, maka gunakan deklarasi display:none dengan tag pembanding !=, contoh seperti ini:


<b:if cond='data:blog.url != data:blog.homepageUrl'>
<style type='text/css'>
#target {display:none;}
</style>
</b:if>

Fungsinya:
Disana terdapat selektor CSS dengan atribut ID. Jadi seluruh elemen yang memiliki atribut ID atau HTML pemanggil <div id='target'>SB-77 Design</div> akan disembunyikan/hilang atau tidak ditampilkan apabila kondisi halaman saat ini tidak sama dengan halaman home/beranda.


Saat kondisi Anda saat ini sedang berada di halaman HOME, maka disana terdapat sebuah objek untuk menampilkan sejumlah postingan (daftar artikel). Pertanyaannya, apakah objek tersebut bisa kita hilangkan atau tidak ditampilkan.? jawabannya: YA, dengan membungkus elemen objek tersebut dengan tag kondisional, maka saat Anda membuka URL Home-page, Anda akan menemui halaman yang kosong. Caranya baca - Cara Menghilangkan Daftar Artikel Pada Halaman Beranda.

Itu hanya merupakan contoh kecil tahap awal belajar membaca dan menggunakan tag kondisional, karena pada prinsipnya apapun bisa kita hilangkan atau jangan ditampilkan jika kondisi halaman saat ini berada dimana, karena dalam Menentukan tag <div> pembuka memang sangat mudah, karena dalam tiap-tiap tubuh tag pembuka pasti terdapat atribut id='' atau class='' yang sudah memiliki nilai-nilai tertentu yang spesifik, akan tetapi dalam menentukan di mana kode yang menjadi </div> penutup dari divisi elemen yang dimaksud tidaklah semudah itu, karena jika Anda membuka Template, maka Anda akan melihat sekumpulan kode yang terbentuk dalam sebuah kesatuan objek.

Membuat Gambar Dengan CSS Box Shadow

Membuat Gambar Dengan CSS Box Shadow - Cara membuat gambar seperti ini merupakan peletakan simbol-simbol HTML untuk membentuk dan menghubungkannya menjadi satu, sehingga terbentuk sebuah gambar tanpa kita menyisipkan URL-gambar pada elemen CSS. Hanya dengan menyusun nilai-nilai offset sumbu pada box shadow, Anda bisa Membuat Gambar Dengan CSS Box Shadow tanpa ada sentuhan link URL-gambar yang pada umumnya terkonsep seperti ini:

.img {
  max-width: 200px !important;
  height: 230px;
  margin: 12px 0 auto;
  padding: 5px 8px;
  border: double 4px #39f;

 //menyisipkan gambar dengan Link URL
  background: url(http://3.bp.blogspot.com/-YWT2f..../s1600/SB-77 Image.jpg);
}

Maka gambar akan ditampilkan berdasarkan link URL, berbeda lagi seperti icon smile, icon tertawa, icon marah dan icon menangis pada beberapa kolom komentar blog, gambar tersebut terbentuk tidak menggunakan link URL, tetapi hanya dengan CSS yang penulisannya menggunakan simbol HTML seperti:

:) smile
;(( menangis
=)) tertawa, dan masih banyak lagi

dan simbol tersebut dihubungkan dengan perintah JavaScript animation, sehingga ada gerakan disana yang membuat tampilan gambar tersebut menjadi nyata (hidup). Pertemuan kali ini saya akan coba membuat sebuah tampilan gambar kartun DORAEMON tanpa menyisipkan link URL-Gambar hanya dengan CSS box shadow seperti ini:


<style type='text/css'>
/* Doraemon Cartoon Pictures
Design by. http://sahabatblogger77.blogspot.com
Value input: CSS box-shadow element */
.doraemon {
  cursor: pointer;font-size:20px;width:10em;height:9.9em;
  margin:1.5em auto 10em;position:relative;border-radius:50%;
  background:#fff;/*bentuk wajah*/
  box-shadow:
  2.5em 10.7em 0 -3.5em #fff,
  2.5em 10.9em 0 -3.2em #ddd,
  2.5em 10.9em 0 -3.1em #000,
  /*bentuk tangan kanan*/
  -5.9em 4.3em 0 -3.5em #fff,-5.7em 4.4em 0 -3.2em #ddd,
  0 5.5em 0 -4.5em #dd0,0 5.5em 0 -4.4em #000,
  /*bentuk leher*/
  0 1.2em 0 -1em #000,0 2em 0 -1.3em #d00,0 2.1em 0 -1.3em #000,
  /*badan*/
  0 7.1em 0 -1.8em #f8f8f8,0 7.1em 0 -1.2em #26f,-4.6em 5.0em 0 -3.8em #15e,
  -3.3em 5.4em 0 -4em #15e,-1.3em 10.8em 0 -3.6em #26f,-1.3em 11.8em 0 -3.6em #eee,
  3.2em 5.9em 0 -4.0em #26f,3.6em 6.0em 0 -4.0em #26f,3.9em 6.1em 0 -4.0em #26f,
  4.0em 6.2em 0 -4.0em #26f,4.1em 6.3em 0 -4.0em #26f,4.2em 6.4em 0 -4.0em #26f,
  4.3em 6.5em 0 -4.0em #26f,
  /*bentuk tangan kiri*/
  5.4em 7.1em 0 -4.1em #eee,
  /*bentuk kepala*/
  0 1em 0 1em #26f inset,0 7.1em 0 -1.1em #000,0 0 0 0.1em #000,
  -5.7em 4.4em 0 -3.1em #000,5.4em 7.1em 0 -4.0em #000,
  -1.3em 11.8em 0 -3.5em #000,3.2em 5.9em 0 -3.9em #000,
  3.6em 6.0em 0 -3.9em #000,3.9em 6.1em 0 -3.9em #000,
  4.0em 6.2em 0 -3.9em #000,4.1em 6.3em 0 -3.9em #000,
  4.2em 6.4em 0 -3.9em #000,4.3em 6.5em 0 -3.9em #000,
  -4.6em 5.0em 0 -3.7em #000,-3.3em 5.4em 0 -3.9em #000,
  -1.3em 10.8em 0 -3.5em #000,0 0 0 0 transparent}

.doraemon:after {
  font-size:1em;display:block;width:1em;height:1em;position:absolute;
  top:3em;left:4.5em;border-radius:50%;content:"|";line-height:1;color:transparent;
  /*garis hidung*/
  text-shadow:0 0em 0 #000,0 0.74em 0 #000,0 0 0 transparent;
  text-align:center;line-height:2.8;
  background:#fff;
  box-shadow:-0.1em 0 0 0.3em #c00 inset,
  /*bentuk mata kiri*/
  0.9em -1.5em 0 -0.4em #fff,1em -1.3em 0 -0.2em #000,1.1em -1.3em 0 0.5em #fff,
  1.1em -1.3em 0 0.6em #333,
  /*bentuk mata kanan*/
  -1.1em -1.5em 0 -0.4em #fff,-1em -1.3em 0 -0.2em #000,
  -1em -1.3em 0 0.5em #fff,-1em -1.3em 0 0.6em #333,0 0 0 0 transparent}

.doraemon:before {
  font-size:1em;width:5em;height:2.5em;display:block;margin:5em auto;
  position:absolute;top:1em;left:2.5em;content:"-";color:transparent;
  letter-spacing:-0.26em;
  text-shadow:
  3em -2em 0 #000,3em -2.5em 0 #000,3em -3em 0 #000,
  -3em -2em 0 #000,-3em -2.5em 0 #000,-3em -3em 0 #000,0 0 0 transparent;
  text-align:center;border-radius:0 0 50% 50% / 0 0 100% 100%;
  background:#d33;
  /*bentuk kantong ajaib*/
  box-shadow:
  0 2em 0em -1em #c00 inset,0 6.2em 0 0 #f8f8f8,
  0 6.2em 0 0.1em #333,0 0 0 0 transparent}

/* perpaduan transition saat gambar dihover */
.doraemon, .doraemon:before,
.doraemon:after {
  -webkit-transform: translate3d(0,0,0);-webkit-transition:0.5s;
  -moz-transform: translate3d(0,0,0);-moz-transition:0.5s;
  transform: translate3d(0,0,0);transition:0.5s}

.doraemon:hover, .doraemon:hover:before,
.doraemon:hover:after {
  border-radius: 0;box-shadow:none;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0)}
</style>
<div class="doraemon">
</div>

Hasilnya:




DEMO SHOW

Bagaimana menurut sahabat semua pecinta SAHABAT BLOGGER 77 tentang gambar diatas, cukup mirip bukan dengan tokoh kartun DORAEMON, silahkan Anda perhatikan pada konsep CSS diatas, tidak ada penulisan link URL-gambar, murni hanya dengan panggunaan CSS Box Shadow. Dasar kanvas untuk melihat gambar asli tersebut bisa Anda lihat jika Gambar di HOVER.

Setelah ini Anda mau membuat gambar apa lagi neh dengan CSS Box Shadow seperti diatas, sambil berpikir mencari inpirasi, bagaimana kalau jalan-jalan sebentar di:

» Desain Gallery Photo Efek Tumpukan
» Membuka Gambar Dengan Perintah Fungsi Klik
» Slide Gambar Dengan Tooltip

CSS3 Input Generator Box Shadow

CSS3 Input Generator Box Shadow - Box Shadow merupakan kegiatan untuk membuat atau memberi efek bayangan (shadow) pada box. Dalam penerapan Elemen Input CSS box-shadow terbagi lagi dalam beberapa deklerasi model, diantaranya sebagai berikut:

1. Radius Out Shadow
Elemen ini dibentuk untuk memberi efek bayangan pada sisi box bagian terluar, sehingga bayangan yang akan ditampilkan akan berada disisi luar objek, sedangkan jarak radius bayangan dengan box bisa Anda tentukan nilainya pada masing-masing sisi offset. Contoh seperti ini:

.box {
  width:200px;
  height:250px;
  margin:0 auto;
  border:solid 2px #39f;

  /* Nilai offset box-shadow */
  box-shadow:9px 10px 6px 2px #000000;
}

2. Radius Inset Shadow
Efek shadow dengan atribut inset adalah efek banyangan pada sisi box bagian terdalam, kegiatan seperti ini biasanya untuk memberikan tampilan box agar terlihat seakan cembung, karena bayangan yang dibentuk hanya bagian sisi offset terdalam pada objek. Contoh seperti ini:

.box {
  width:200px;
  height:250px;
  margin:0 auto;
  border:solid 2px #39f;

  /* Nilai offset box-shadow inset*/
  box-shadow: inset -1px 5px 80px 12px #000000
}

Hal yang terpenting untuk membuat atau memberi efek bayangan pada sebuah box adalah nilai dan letak sisi-sisi sumbu offset, sedangkan penambahan out-shadow dan inset-shadow itu hanya merupakan model deklerasi bentuk tampilan box. Penulisan nilai sumbu offset pada CSS Box Shadow umumnya seperti ini:

box-shadow: 5px 15px 20px 25px #000000

PENJELASAN
Nilai 5px pertama adalah offset X (Untuk Mengatur sisi efek shadow sebelah KANAN)
Nilai 15px kedua adalah offset Y (Untuk Mengatur sisi efek shadow sebelah BAWAH)
Nilai 20px ketiga adalah efek blur (Untuk Mengatur ketebalan WARNA bayangan)
Nilai 25px keempat adalah efek spread (Untuk Mengatur SEMUA sisi box)
#000000 adalah warna efek banyangan.

Pertemuan kali ini semua pekerjaan Anda akan saya permudah, jadi Anda tidak akan kebingungan lagi untuk menentukan besarnya efek bayangan (shadow) pada semua nilai sisi offset pada box dengan CSS3 Input Generator Box Shadow seperti ini:




COBA ALAT

BACA JUGA

Daftar Generator Penulisan Simbol HTML Terlengkap



Tampilan generator box shadow disana sudah saya siapkan 3 TAB yang bisa Anda gunakan untuk membuat efek bayangan pada box Anda. Penjelasan lebih lengkapnya seperti tabel berikut:

KETERANGAN TAB DAN FUNGSI KODE

STYLE TAB	KETERANGAN FUNGSI
TAB PERTAMA	adalah hasil tampilan box-shadow, sedangkan untuk elemen kode CSS box-shadow, cukup COPY hasilnya pada box yang saya beri warna merah.
TAB KEDUA	adalah untuk mengatur nilai sumbu pada box seperti Offset X, Offset Y, Blur dan Spread, Cukup KLIK tombol (+) untuk menambah angka dan (-) untuk mengurangi Angka.
Color (HEX)	Memberikan warna yang berbeda pada efek bayangan, Anda tinggal hapus kode 000000 lalu ganti dengan kode color-hex sesuai keinginan. Anda bisa pilih warna kesukaan Anda pada Tabel Kode Color Heksa Terlengkap (Ragam Warna).
inset	merupakan model shadow, silahkan centang jika model yang Anda inginkan untuk memberi efek bayangan bagian dalam box.
TAB KETIGA	adalah style (gaya) tampilan box shadow.

Cara Membuat Game Ular-Ularan Diblog

Cara Membuat Game Ular-Ularan Diblog - Hanya sekedar iseng, sambil blogwalking dan berkomentar diblog tetangga, sambil bermain game ular-ularan deh ala SAHABAT BLOGGER 77 hehe..!!. Game ini merupakan versi ke-2 setelah diartikel sebelumnya telah saya buat permainan yang sama Snake Game (permainan jadul ular-ularan) dengan JavaScript Only. Untuk game kali ini akan saya permudah cara bermainnya, seperti zaman pertama kali punya HandPhone, pilih game lalu tekan tombol play maka si ular akan mencari mangsanya dengan berputar-putar sesuai perintah Anda.


CARA BERMAIN
Pada tab sebelah kanan area game, sudah saya tuliskan semua perintah untuk menjalankan game ular-ularan ini diblog Anda. Untuk memulainya cukup tekan tombol SPACE (Spasi) pada keyboard PC Anda, lalu arahkan dan gerakkan si ular menuju food (makanan) sedekat mungkin menggunakan tombol ARROW ICON (Tanda Panah) kiri, kanan, atas dan bawah yang terletak dipapan keyboard komputer Anda.

PERHATIAN :
INGAT..!! Jangan sampai siular menabrak garis list area game, jika itu terjadi game akan berhenti dan Anda KALAH (Game Over), karena kecepatan level satu saya atur dengan 1.555/m.detik, lumayan cukup cepat. Game dimulai dari level 1, semakin banyak si ular makan maka siularpun semakin panjang dan level semakin bertambah seiring bertambahnya skor yang Anda dapatkan, begitupun untuk kecepatannya. Untuk keluar dari game ini, Anda tekan tombol ESC. Bagaimana, mau mencoba..?

PLAY GAME

BACA JUGA

Mengajak Pengunjung Agar Tertarik Untuk Berkomentar


Oh iya, barangkali sahabat semua ingin bermain game ini diblog Anda sendiri, berikut elemen-elemen kode untuk Membuat Game Classic Ular-Ularan secara komplit. Elemen CSS pembentuk tampilan, lengkapnya seperti ini:

<style type='text/css'>
#game {width: 650px;margin: 0 auto}
#gameStage {
  width: 400px;height: 300px;float: left;margin-right: 20px;
  border: 4px double #1D6609;background:#ebe2ce;position:relative}

#gameInfo {
  width: 210px;height: 300px;float: left;border-radius:15px;
  background:#ebe2ce;font-family:sans-serif; font-weight:bold;
  text-align:center;color: darkred;border: 4px dotted #111}

.bodypart {height: 8px;width: 8px;position:absolute;background: red;border-radius:3px}
#points {margin:5px;height:120px;margin-top: 10px}
#rules {
  margin:3px; font-size:12pt;border: 1px solid black;
  border-radius:15px;box-shadow:2px 2px 3px #333;color:green}

.food {height: 8px;width: 8px;position:absolute;background: green;border-radius:5px}
#gamemsg {font-size:16pt;margin-top:-35px;visibility:hidden;color:#E01B6A}
</style>

Menyisipkan JavaScript untuk memanggil perintah TAB keyboard seperti: SPACE, ESC dan ICON ARROW di komputer Anda, namun perhatikan script yang saya beri warna MERAH. JavaScript perintah, lengkapnya seperti ini:

// Hapus script ini, jika Template Anda sudah menggnakan script-jQuery yang sama...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript'>
//<![CDATA[
var gameBoard;
var snake;
var moveDirection = 'right';
var gameExecutor;
var gameSpeed=100;
var roundNum = 1;
var eatenItemsCount =0;
var MAX_FOOD_ITEMS = 12;
var gameFieldRelativeWidth = 30;
var gameFieldRelativeHeight = 30;
var snakeElementWidth = 8;
var snakeElementHeight = 8;
var ESC = 27;
var SPACE = 32;
var LEFT_ARROW = 37;
var UP_ARROW = 38;
var RIGHT_ARROW = 39;
var DOWN_ARROW = 40;
var food;
$(document).ready(function() {$('body').keydown(keyPressedHandler);});
//]]>
</script>
<script src="https://s-blogger77.googlecode.com/svn/trunk/game.js"></script>

HTML Markup

<div id='game'>
  <div id='gameStage'></div>
    <div id='gameInfo'>
      <div id='points'>
           <div>Your Score:</div>
           <div id='score'>0</div>
           <div>Speed Level:</div>
           <div id='speed'>1</div>
      </div>
      <div id='gamemsg'>
           <div id='nextRndMsg'>Next Round!</div>
           <div id='loseMsg'>You lose! Try again</div>
      </div>
         <div id='rules'>
Press <span style="color:red">SPACE</span> to start or restart the game.
* Use arrows to move *
Press Esc to quit
         </div>
    </div>
</div>

Semoga kejenuhan Anda dapat berubah menjadi keceriaan dengan bermain game ular-ularan ini, pekerjaan sudah selesai, waktunya Devy mohon pamit ya guys..!! semoga terhibur..

Happy blogging..!!

Tombol Klik Show Info

Cara Membuat Widget Tombol Klik Diblog

Tombol Klik Show Info - Tombol klik biasanya dibuat untuk menampilkan halaman tersembunyi dengan sistem pemanggil new tab (jumping link), seperti link tombol DEMO misalnya, yang apabila kita KLIK maka halaman akan diarahkan pada tab baru untuk menampilkan info yang sudah termuat didalam halaman tersebut. Cara membuat tombol KLIK seperti ini juga terbilang mudah, hanya dengan menyisipkan atribut a:href pada teks link, lalu area teks kita bentuk dengan memberi border pada semua sisi, maka link akan terbentuk seperti tombol perintah KLIK Show Info, simple dengan element CSS seperti ini:


<style type='text/css'>
.klik {
  background:#39f;
  font:bold 15px/40px Verdana,serif;
  width:200px;
  color:#fff;
  text-shadow:1px 2px 1px #111;
  border:solid 2px blue;
  border-radius:8px;
text-transform: uppercase;
}
.klik:hover {background:#e06666}
</style>
<a class="klik">Klik Saya</a>

Untuk memanggil perintah halaman yang tersembunyi pada tombol klik seperti ini banyak ragam variasi yang dapat kita bentuk, misalnya dengan menambahkan beberapa efek seperti transition-delay. ► Membuat Pesan Teks Melayang Saat Halaman Terbuka adalah salah satu model yang pernah saya desain dengan bentuk Tombol KLIK, untuk tampilan disana saya menyisipkan perintah animation untuk menampilkan info teks dengan nilai delay-top:200px saat tombol di KLIK.

Desain tombol klik kali ini akan saya buat dengan efek transfer input, memanggil elemen perintah hash (lompatan) untuk menampilkan info yang sudah Anda sembunyikan pada halaman berbeda, namun efek tampil hanya berada dalam satu area halaman. Singkatnya, saat tombol di klik, maka info yang sudah Anda tuliskan disana akan ditampilkan dalam 1 area seperti ini:




DEMO SHOW



Menggantikan fungsi atribut a:link pada tombol dengan elemen kode button, tujuannya agar saat tombol di klik tidak akan mengarah pada sebuah link tautan, CSS lengkapnya seperti ini:

<style type='text/css'>
.click {
  display: block !important;height: 80px;width: 300px;
  position: absolute;top: calc(50% - 40px);left: calc(50% - 150px);
  background: #39f;text-transform: uppercase;
  color: #fff;border-radius: 6px;top:120px;
  font:bold 20px Verdana,serif;text-shadow:1px 2px 1px #111}

.click:focus {outline: none}
.click:hover {background: #e06666}
.click:active {background: #1b000f}
.info {
  position: absolute;width: 100%;height:430px;
  top: calc(50% - 40px);left: calc(50% - 300px);
  z-index: 1000;background: #333;
  color: button;padding: 10px;
  box-sizing: border-box;border:3px double #fff;
  -webkit-transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  opacity: 0}

.info.active {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
  opacity: 1}

.exit:focus {outline: none}
.exit:hover {background: #e8967b}
.exit:active {background: #ca4c22}
.exit {
  position:absolute;display: block!important;
  height: 25px;width: 70px;background: #e68a6c;
  text-transform: uppercase;color: #fff;
  border-radius: 6px;visibility:visible!important;
  opacity:1!important;bottom:10px;right:14px;
  font:normal bold 9px Arial,Sans-Serif!important}
</style>

Kita tambahkan sedikit kode script untuk perintah tombol exit (close) saat Anda berada pada halaman info, namun sebelum itu efek ini hanya akan bekerja jika Template blog Anda sudah dilengkapi dengan script-jQuery. Abaikan script yang saya beri warna MERAH jika template Anda sudah memasang jQuery ini, lalu letakkan script berikut dibawah tag penutup </style> pada CSS diatas, lengkapnya seperti ini:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript'>
(function() {
  $(function() {
    $("button").click(function(event) {
      event.stopPropagation();
      $(".info").addClass("active");
    });
    $(".info").click(function(event) {
      event.stopPropagation();
    });
    $(document).add(".exit").click(function() {
      $(".info").removeClass("active");
    });
  });
}).call(this);
</script>

Semua pekerjaan Anda sudah selesai, tinggal menyusun info apa yang akan Anda tampilkan saat tombol di klik pada pengaturan HTML dibawah ini:

<button class="click">Click me in here!</button>
<div class="info">
....
Letakkan Info Anda Disini
....

<button class="exit">Close</button>
</div>

Sebagai tambahan buat sahabat semua pecinta SAHABAT BLOGGER 77, untuk tampilan Anda jangan terfokus hanya menampilkan sebuah teks informasi disana, beberapa gambar atau widget juga bisa Anda letakkan didalamnya, Anda bisa pilih beberapa efek gambar dan widget blog dibawah ini sebagai referensi, silahkan tinggal dipilih disini:

» Membuat Artikel Terbaru Auto Slide Di Sidebar Blog
» Membuat Tombol Share Terbaru Efek Transisi
» Desain Gallery Photo Efek Tumpukan
» Katakan Cinta Dengan Tampilan Gambar Efek Rotate

JavaScript Pengukur Waktu

JavaScript Pengukur Waktu - Mengambil event atau kejadian saat ini berdasarkan pengukur waktu, dengan istilah Greenwich Mean Time atau yang kita kenal dengan GMT adalah Waktu Dunia dan dasar dari setiap zona pengukur waktu di dunia. GMT memiliki koreksi untuk menentukan waktu setempat (Dimana Pengukur Waktu Ini Ditampilkan), waktunya tetap sepanjang tahun dan tidak akan beralih berdasarkan musim di negara tersebut, artinya waktu akan ditentukan berdasarkan negara, dan ditampilkan mengikuti waktu yang terjadi pada negara tersebut.

Seperti jam digital, stopwacth time atau yang sering Anda lihat pada beberapa blog yang menampilkan widget pengukur waktu seperti itu,  sama seperti cara Membuat Widget Jam Analog Dengan CSS diartikel sebelumnya yang menggunakan JavaScript pengukur waktu GMT.
Disini akan saya tampilkan 3 versi pengukur waktu dengan JavaScript seperti ini:

Versi 24jam


<script type="text/javascript">
var d         = new Date();
var curr_hour = d.getHours();
var curr_min  = d.getMinutes();
document.write(curr_hour + " : " + curr_min);
</script>

Versi AM & PM


<script type="text/javascript">
var a_p       = "";
var d         = new Date();
var curr_hour = d.getHours();
if (curr_hour < 12) {
   a_p = "AM";
} else {
   a_p = "PM";
}
if (curr_hour == 0) {
   curr_hour = 12;
}
if (curr_hour > 12) {
   curr_hour = curr_hour - 12;
}
var curr_min = d.getMinutes();
curr_min = curr_min + "";
if (curr_min.length == 1) {
   curr_min = "0" + curr_min;
}
document.write(curr_hour + " : " + curr_min + " " + a_p);
</script>

Versi Stopwatch


<time id="clock"></time>
<script type="text/javascript">
(function() {
    var clock = document.getElementById('clock');
    setInterval(function() {
        var time = new Date().toString().split(' ')[4];
        clock.innerHTML = time;
    }, 13);
})();
</script>

Amplop Surat Design Model Untuk Teks

Amplop Surat Design Model Untuk Teks - Ingin menyampaikan suatu kata-kata kepada sahabat Anda, tetapi malu jika harus mengucapkannya secara langung, Anda bisa menyampaikan rangkaian kata-kata Anda dalam selembar kertas surat dalam amplop. Setidaknya orang yang menerima amplop dari Anda bisa membaca isi surat Anda, dan Anda pun mendapatkan maaf darinya dengan tampilan Amplop Surat Design Model Untuk Teks seperti ini:




DEMO SHOW



Tampilan design sama seperti Anda membuat content box atau teks box untuk menyampaikan beberapa tulisan/teks singkat dalam posting artikel. Koleksinya lihat pada TAB dibawah ini:

Description Teks Box

• Teks Box Versi Google Chrome
• Blockquote Info Design
• Konten Light On Off
• Panel Slide Teks Info

Untuk membuat content box design Amplop surat seperti ini, pada tampilan saya hanya menggunakan bakcground:linear-gradient, namun kita gunakan format repeating untuk memberikan warna hanya pada sisi objek saja (max-height="20px") dengan efek kemiringan 45deg, elemen CSS-nya seperti ini:

.bgColor {
background: repeating-linear-gradient (
  45deg, #114abc, #114abc 10px, #fff 10px,
  #fff 20px, #bf2010 20px, #bf2010 30px,
  #fff 30px, #fff 40px);
}

Background Info

Mengenal Lebih Jauh Tentang CSS3 Linear Gradient


PENERAPAN KE BLOG
1.1 Elemen CSS

<style type='text/css'>
/* Licensi Codes by. http://pastebin.com
don't copy this code unlicensed source links to share, your blog will be deleted
visit link: http://sahabatblogger77.blogspot.com */
@import url(http://fonts.googleapis.com/css?family=IM+Fell+English);
.amplop {
  width: 400px;margin: 0px auto;padding: 10px 20px;
  background: #fff;position: relative;border-radius: 3px}

.amplop:after {
  content: '';
  background:-webkit-repeating-linear-gradient(45deg, #114abc, #114abc 10px, #fff 10px, #fff 20px, #bf2010 20px, #bf2010 30px, #fff 30px, #fff 40px);
  background:-moz-repeating-linear-gradient(45deg, #114abc, #114abc 10px, #fff 10px, #fff 20px, #bf2010 20px, #bf2010 30px, #fff 30px, #fff 40px);
  background:-ms-repeating-linear-gradient(45deg, #114abc, #114abc 10px, #fff 10px, #fff 20px, #bf2010 20px, #bf2010 30px, #fff 30px, #fff 40px);
  background:-o-repeating-linear-gradient(45deg, #114abc, #114abc 10px, #fff 10px, #fff 20px, #bf2010 20px, #bf2010 30px, #fff 30px, #fff 40px);
  background:repeating-linear-gradient(45deg, #114abc, #114abc 10px, #fff 10px, #fff 20px, #bf2010 20px, #bf2010 30px, #fff 30px, #fff 40px);
  padding: 20px;border-radius: 6px;
  box-shadow: 1px 2px 6px 1px rgba(76, 66, 47, 0.75);
  width: calc(100% - 24px);height: calc(100% - 24px);
  position: absolute;top: -8px;left: -8px;z-index: -1}

p {font-size:15px;line-height:24px;margin:20px 0;color:#111}
.kop {
  display: inline-block;margin: 15px 0 10px -28px;
  padding: 10px 15px 5px 30px;background: #bf2010;
  border-width: 1px 1px 1px 0px;border-style: dashed;
  color: #fff;text-shadow:1px 2px 1px #111;font-size:25px;
  box-shadow:2px 0 0 2px #bf2010, 2px 2px 0 2px #bf2010, 2px -2px 0 2px #bf2010, inset 0 0 5px 2px rgba(0, 0, 0, 0.2)}
</style>

1.2 HTML Markup

<div class="amplop">
   <div class="kop">From: SB-77 Design</div>

<p>...Tulis Surat Anda Disini...</p>
</div>

Tampilannya terlihat keren bukan.? tetapi jangan kirim amplop surat ini kepada Devy ya, soalnya kalau isi amplop tidak ada duitnya tidak Devy terima, (mata duitan Devy euy..!!) hehe..!!. Happy Blogging.

CSS Menu Navigasi Title Dengan 6 Pilihan

CSS Menu Navigasi Title Dengan 6 Pilihan - Banyak cara menampilkan label-label blog kepada pengunjung, salah satunya adalah dengan tampilan Menu Navigasi. Barang kali sahabat semua sudah bosan dengan bentuk desain menu navigasi blog saat ini, ingin mengubah tampilannya.?. Berikut tampilan CSS Menu Navigasi Title Dengan 6 Pilihan yang terspesial buat sahabat semua pecinta SAHABAT BLOGGER 77.




DEMO SHOW

BACA JUGA

Elemen Data HTML Template Halaman Komentar


Anda cukup pilih salah satu bentuk tampilan menu navigasi title pada elemen CSS dibawah ini. Agar lebih mudah, nama menu sudah saya beri warna MERAH, kode lengkapnya seperti ini:

.navigasi {margin: 0 auto}
#menu1 {
  background: #000;border-bottom: 3px solid #DC143C;
  display: inline-block;margin: 10px 0;
  position: relative;width: 100%;z-index: 999}

#menu1 ul {list-style: none;margin: 0;padding: 0;position: relative}
#menu1 ul li {border-right:1px dotted #999;float:left;margin:0;padding:0;position:relative}
#menu1 ul li a {
  color: #fff;display: block;font: italic 18px "Georgia";
  min-width: 5.5em;padding: .25em .5em;transition: all 0.5s ease 0s}

#menu1 ul li a span {display: block}
#menu1 ul li a .title {border-bottom: 1px dotted #999;padding: 0 0 .25em}
#menu1 ul li a .exp {
  font-size: 12px;padding: .25em 0 0;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  filter: alpha(opacity=0);-khtml-opacity: 0;
  -moz-opacity: 0;opacity: 0;text-align: right}

#menu1 ul li a:hover {background:#DC143C;color:#fff;text-shadow:1px 2px 1px #111}
#menu1 ul li a:hover .exp {
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  filter: alpha(opacity=100);-khtml-opacity: 1;-moz-opacity: 1;
  opacity: 1;color:#FFFF00}

#menu2 {
  background-image:linear-gradient(#ccc, #888, #ccc);
  border-bottom: 2px solid #666;border-top: 2px solid #666;
  display: inline-block;position: relative;
  width: 100%;height:38px;z-index: 999}

#menu2 ul {list-style: none;margin: 0;padding: 0;position: relative}
#menu2 ul li {float: left;margin: 0;padding: 0;position: relative}
#menu2 ul li a {
  font:bold 17px/30px sans-serif;transition:all 0.5s linear 0s;
  color:#111;display:block}

#menu2 ul li a span {display: block;}
#menu2 ul li a .title {text-align:center}
#menu2 ul li a .exp {
  background: rgba(0, 0, 0, 0.75);bottom: -5px;
  color: #f0f0f0;font: bold italic 12px/1 sans-serif;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  filter: alpha(opacity=0);opacity: 0;
  padding: 5px;position: absolute;right: 0;
  height:38px;width:92%;text-align: right;
  transition: all 0.5s linear 0s}

#menu2 ul li a:hover {background: #e0e0e0;color: #000;}
#menu2 ul li a:hover .exp {
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  filter: alpha(opacity=100);opacity: 1}

#menu3 {
  background: #DC143C;display: inline-block;margin: 10px 0;
  position: relative;width: 100%;z-index: 999}

#menu3 ul {list-style: none;margin: 0;padding: 0;position: relative}
#menu3 ul li {float: left;margin: 0;padding: 0;position: relative}
#menu3 ul li a {
  color: #fff;text-shadow:1px 2px 1px #111;
  display: block;font: 18px Georgia;min-width: 6em;
  margin: 0;padding: .5em .5em;transition: all 0.3s linear 0s}

#menu3 ul li a span {display: block;transition: all 0.3s linear 0s}
#menu3 ul li a .title {
  border-bottom: 1px solid;border-top: 3px double;
  padding-bottom:3.5px;margin-bottom: .5em;text-align: center}

#menu3 ul li a .exp {
  color: #fff;font: 11px/1 Georgia;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  filter: alpha(opacity=0);opacity: 0;
  text-align: center;text-transform: uppercase}

#menu3 ul li a:hover {background: rgba(255, 0, 0, 0.1);}
#menu3 ul li a:hover .title {color:yellow;}
#menu3 ul li a:hover .exp {
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  filter: alpha(opacity=100);opacity: 1}

#menu4 {
  background: #00FF7F;display: inline-block;margin: 10px 0;
  padding: 0;position: relative;width: 100%;z-index: 999}

#menu4 ul {list-style: none;margin: 0;padding: 0;position: relative}
#menu4 ul li {float: left;margin: 0;padding: 0;position: relative}
#menu4 ul li a {
  color: #333;display: block;font: bold 17px/1.5em sans-serif;
  min-width: 6em;margin: 0;padding: .25em .5em;transition: all 0.3s linear 0s}

#menu4 ul li a span {display: block;transition: all 0.3s linear 0s}
#menu4 ul li a .title {text-align: center}
#menu4 ul li a .exp {
  background: #FFC730;color: #333;font: bold 11px/1.5 Calibri;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  filter: alpha(opacity=0);opacity: 0;
  padding: 0 .75em 0 0;text-align: center;border-radius:8px}

#menu4 ul li a:hover {background:#DC143C;border-radius:25px;box-shadow:inset 0 3px 0 0 #fff;}
#menu4 ul li a:hover .title {color: #fff;text-shadow:1px 2px 1px #111}
#menu4 ul li a:hover .exp {
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  filter: alpha(opacity=100);opacity: 1}

#menu5 {
  background: #FFF;display: inline-block;margin: 10px 0;
  padding: 0;position: relative;width: 100%;z-index: 999}

#menu5 ul {list-style: none;margin: 0;padding: 0;position: relative;}
#menu5 ul li {
  border-left: 5px solid #888;float: left;margin: 0;
  padding: 0;position: relative}

#menu5 ul li:last-child {border-right: 5px solid #888}
#menu5 ul li a {
  color: #888;display: block;font: bold 18px/1.5em sans-serif;
  min-width: 6em;margin: 0}

#menu5 ul li a span {display: block;transition: all 0.5s linear 0s}
#menu5 ul li a .exp {
  color: #c00;font: bold 11px/1.5 sans-serif;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  filter: alpha(opacity=0);opacity: 0;padding: .25em 0 0;text-align: right;
  text-transform: uppercase}

#menu5 ul li a .exp:before {content: attr(data-hex) "\00a0";font: 18px/1 sans-serif}
#menu5 ul li a:hover .title {
  color: #fff;text-shadow:1px 2px 1px #111;
  background:#DC143C;width:6em;padding-left:5px}

#menu5 ul li a:hover .exp {
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  filter: alpha(opacity=100);opacity: 1}

#menu6 {
  background: #39f;border-radius: 10em;display: inline-block;
  margin: 10px 0;padding: 0;position: relative;width: 100%;z-index: 999}

#menu6 ul {
  float: right;list-style: none;margin: 0;
  padding: 0;position: relative;right: 50%}

#menu6 ul li {float: left;left: 50%;margin: 0;padding: 0;position: relative}
#menu6 ul li a {
  color: #00008B;display: block;border:4px double #39f;
  font:bold 14px/1.5em "Georgia";min-width: 8em;
  margin: 0;padding: .25em;text-align: center;
  text-transform: uppercase;transition: all 0.5s linear 0s}

#menu6 ul li a span {display: block;transition: all 0.5s linear 0s}
#menu6 ul li a .title {border-bottom: 2px solid #ccc}
#menu6 ul li a .exp {
  color: #FFFF00;font: 10px Georgia;letter-spacing: 1px;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  filter: alpha(opacity=0);opacity: 0;
  padding: .25em 0 0;text-align: center}

#menu6 ul li a:hover {background: #DC143C;border:4px double #ccc}
#menu6 ul li a:hover .title {color: #fff;text-shadow:1px 2px 1px #111}
#menu6 ul li a:hover .exp {
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  filter: alpha(opacity=100); opacity: 1}

Untuk Pemanggil HTML, cukup gunakan 1 atribut id pada menu navigasi title pilihan Anda, lalu ganti teks link-Url sesuai nice blog Anda pada kode yang saya beri warna Orange seperti ini:

<div class="navigasi">
   <div id="menu1"> <!..Tampilan Menu Navigasi 1 ..!>
<ul>
<li><a href="/"><span class="title">menu1</span><span class="exp">menu1</span></a></li>
<li><a href="/"><span class="title">menu2</span><span class="exp">menu2</span></a></li>
<li><a href="/"><span class="title">menu3</span><span class="exp">menu3</span></a></li>
<li><a href="/"><span class="title">menu4</span><span class="exp">menu4</span></a></li>
<li><a href="/"><span class="title">menu5</span><span class="exp">menu5</span></a></li>
</ul>
   </div>

   <div id="menu2">  <!..Tampilan Menu Navigasi 2 ..!>
<ul>
<li><a href="/"><span class="title">menu1</span><span class="exp">menu1</span></a></li>
<li><a href="/"><span class="title">menu2</span><span class="exp">menu2</span></a></li>
<li><a href="/"><span class="title">menu3</span><span class="exp">menu3</span></a></li>
<li><a href="/"><span class="title">menu4</span><span class="exp">menu4</span></a></li>
<li><a href="/"><span class="title">menu5</span><span class="exp">menu5</span></a></li>
</ul>
   </div>

   <div id="menu3"> <!..Tampilan Menu Navigasi 3 ..!>
<ul>
<li> .... </li>
.....
....
//dan seterusnya....
</ul>
   </div>
</div><!..ending navigasi..!>