2 Desain Daftar Isi Untuk Blog Bernuansa Hitam

2 Desain Daftar Isi Untuk Blog Bernuansa Hitam - Melakukan penjelajahan untuk mengetahui serta mencari semua informasi pada sebuah blog, hanya akan lebih mudah jika blog tersebut telah membuat rangkuman keseluruhan artikelnya dengan tampilan daftar isi. Biasanya pemilik blog menuliskan text dengan link "Daftar Isi, Sitemap Blog" dan lain sebagainya yang ditampilkan dalam bentuk URL pada menu navigasi, tujuannya hanya untuk mempermudah pengunjung dalam mencari dan mengetahui apa saja informasi atau artikel yang mengisi blog tersebut sebagai tempat untuk berbagi dan bertanya.

Bahkan demi memberikan kepuasan pengunjung, banyak pemilik blog yang selalu berupaya mendesain tampilan blog mereka agar terlihat menarik, seperti menyisipkan beberapa widget pada sidebar page dengan Membuat Menu Blogger Dengan Target Gambar, atau mengubah tampilan casing blog dengan balutan warna border yang beragam warna. Namun tidak sedikt juga sahabat lain yang memilih untuk memodifikasi tampilan blog mereka dengan tampilan blog yang bernuansa warna hitam, dari warna cover, background body-posting yang semuanya bernuansa hitam.

2 Desain Daftar Isi kali ini akan sangat cocok untuk menghias tampilan blog sahabat semua pecinta SAHABAT BLOGGER 77 yang memiliki desain blog bernuansa hitam dengan 2 desain berikut:

1. Black Red Light Theme
2. Elegan Black Color

1. Black Red Light Theme

Desain warna hitam samar, tidak terlalu pekat agar tidak membuat mata perih saat melihatnya berlama-lama. Sedangkan untuk teks judul artikel saya beri warna white-smoke dengan efek embos yang saya balut dengan background merah menggunakan elemen linear-gradient agar tampilannya terlihat seakan menyala (light) dengan kode CSS seperti ini:


.span {
  background-color:#981216;
  background:-webkit-linear-gradient(#FD0303 0%, #B20207 50%, #981216 51%, #B20207 100%);
  background:-moz-linear-gradient(#FD0303 0%, #B20207 50%, #981216 51%, #B20207 100%);
  background:-ms-linear-gradient(#FD0303 0%, #B20207 50%, #981216 51%, #B20207 100%);
  background:-o-linear-gradient(#FD0303 0%, #B20207 50%, #981216 51%, #B20207 100%);
  background:linear-gradient(#FD0303 0%, #B20207 50%, #981216 51%, #B20207 100%);

Jika tampilan warna diatas kurang menarik, Anda bisa sesuaikan tampilan background warnanya disni - Mengenal Lebih Jauh Tentang CSS3 Linear Gradient. Untuk desain menu seperti tanggal terbit, jumlah komentar dan link read more (Selengkapnya..) saya balut dengan efek cembung bulat dengan model gulungan kertas dengan elemen seperti ini:


.span {
  background-image:-webkit-linear-gradient(#333, #444, #333, #222);
  background-image:-moz-linear-gradient(#333, #444, #333, #222);
  background-image:-ms-linear-gradient(#333, #444, #333, #222);
  background-image:-o-linear-gradient(#333, #444, #333, #222);
  background-image:linear-gradient(#333, #444, #333, #222);

Hasilnya:



DEMO SHOW        GET IN CODE




2. Elegan Black Color

Tidak jauh berbeda dengan tampilan Black Red Light Theme pada desain pertama, namun untuk desain daftar isi model ke-2 kali ini tampilannya sekilas berbentuk Klise Roll Film. Sedangkan untuk keseluruhan tampilan menggunakan background yang sama warna hitam, namun untuk thumbanail gambar posting saya bentuk dengan border-radius untuk membuat bentuk lingkaran.

Dan yang terpenting adalah, 2 Desain Daftar Isi Blog ini sudah saya lengkapi dengan link pagination-page, sehingga akan mempermudah pengunjung dalam menavigasi halaman sebelumnya dan berikutnya dengan efek focus pada halaman yang telah dikunjungi dengan warna aktif seperti ini:

DEMO SHOW        GET IN CODE

Keteguhan Hati Seorang Ayah

Memperingati Hari Ayah Sedunia 12 November

Keteguhan Hati Seorang Ayah - Cerita ini hanya kutipan dari sebuah Inspirasi saya, dimana tepat pada tanggal 12 November lalu banyak sahabat blogger yang menulis artikel tentang memperingati hari Ayah. Mungkin niat dan tujuan dari sebagian mereka adalah dengan tulus untuk mengajak dan memberitahukan kepada kita semua yang saat ini jauh dari Ayah, jarang bertemu dengan Ayah, bahkan kita sering tidak perduli kepadanya. Yukk...!!! saya mengajak sahabat semua pecinta SAHABAT BLOGGER 77, dihari yang berbahagia ini, hari dimana hanya milik seorang Ayah, dengan keteguhan hati dan dengan rasa bangga, sama-sama kita ucapkan "I Love U Ayah".

Kenapa kata itu yang harus saya ucapkan, karena kalau kata "Kangen" yang saya ucapkan, beliau sudah pasti tidak akan pernah lagi berada disisi saya, tidak akan bisa lagi menepuk bahu saya, tidak pernah terdengar lagi ucapan yang lembut dengan nada "Nak" disaat saya menangis, tidak ada lagi tempat berlindung disaat saya ingin bersandar, karena nama Ayah sudah terukir dibatu nisan untuk selamanya disisi Tuhan.

Kini dan sampai nanti, saya hanya bisa mengenang celoteh dan nasehat Ayah dulu, hanya bisa berharap semoga Tuhan menyampaikan rasa kangen ini kepada ayah lewat Doa, dan menuliskan coretan kecil ini buat sahabat semua yang berbahagia karena masih bisa melihat senyum ayah dengan cerita kisahku - Keteguhan Hati Seorang Ayah, semoga kisah ini dapat membuat sahabat semua menjadi lebih sayang kepada Ayah setelah membaca kisah singkat dariku ini:

Kisah - Keteguhan Hati Seorang Ayah

Suatu ketika, ada seorang anak wanita yang tidak sengaja melihat ayahnya sedang mengusap wajahnya yang terlihat mulai berkerut-merut, dengan badan yang dahulu kekar kini sudah terbungkuk-bungkuk dan disertai suara batuk-batuk. Anak wanita itupun bertanya pada ayahnya yang sembari santai sehabis pulang dari tempat kerja:
" Ayah, mengapa wajah ayah kian mengkerut-merut dengan badan ayah yang kian hari kian terbungkuk? "

Dengan nada lembut dan tersenyum, ayahnya hanya menjawab:
" Sebab Aku Laki-laki, Nak..!! "

Anak wanita itupun tercenung dan melamun menjadi bingung dengan jawaban ayahnya, lalu anak wanita itu berguman: " Aku tidak mengerti maksud ayah! "

Dengan kerut-kening mendengar jawaban ayahnya yang penuh dengan rasa penasaran, ayahnya hanya tersenyum, lalu dibelainya rambut anak wanita itu dan menepuk-nepuk bahunya, kemudian ayahnya mengatakan : " Anakku, kamu memang belum mengerti tentang laki-laki " mengharapkan jawaban, tetapi malah membuat anak wanita itu semakin kebingungan.

Karena sudah penuh rasa penasaran dengan jawaban ayahnya yang membingungkan, anak wanita itupun menghampiri ibunya dan bertanya: " Ibu, mengapa wajah ayah menjadi mengkerut-merut dan badannya kian terbungkuk?, Tetapi ayah tidak pernah mengeluhkan rasa sakit! "

Ibunya menjawab: "Anakku sayang!, jika seorang laki-laki yang benar-benar bertanggung jawab terhadap keluarga, hal itu memang akan demikian "

Anak wanita itupun kemudian tumbuh menjadi dewasa, namun dia tetap saja masih dipenuhi oleh rasa penasaran dengan pertanyaannya yang belum terjawab. Hingga pada suatu malam, Anak wanita itu bermimpi, seolah-olah dalam mimpinya dia mendengar suara yang lembut namun sangat jelas terdengar, dan ternyata suara itu adalah suatu rangkaian kalimat sebagai jawaban dari rasa penasarannya selama ini, lalu kalimat apa yang terdengar dalam mimpi anak wanita itu?

Inilah rangkaian kalimat dalam mimpi anak wanita itu:

Saat seoarang ayah hadir ke dunia ini, bersamaan dengan itu kuciptakan bahunya yang kekar dengan otot-otot yang kuat untuk dapat membanting tulang menghidupi seluruh keluarganya, dan kuciptakan pula kegagahannya agar cukup kuat pula dalam melindungi keluarganya.

Kuberikan kemauan padanya agar selalu berusaha mencari rizeki dan sesuap nasi yang berasal dari tetesan keringatnya sendiri yang halal dan bersih, agar keluarganya tidak terlantar, walaupun tatkala seringkali dia mendapat cercaan dari anak-anaknya.

Kuberikan keperkasaan dan mental baja yang akan membuat dirinya pantang menyerah, walaupun tatkala dia merelakan kulitnya tersengat panasnya matahari demi keluarganya, demi keluarganya dia merelakan badannya basah kuyup kedinginan karena tersiram hujan dan hembusan angin, dia relakan tenaga perkasanya terkuras hanya demi keluarganya, dan dia tidak pernah lupa sedikitpun kalau disana ada yang menanti kedatangannya yang mengharapkan hasil dari jerih payahnya.

Kuberikan perasaan keras dan gigih untuk berusaha berjuang dalam kondisi dan situasi apapun demi mencintai dan mengasihi keluarganya, walau terkadang anak-anaknya melukai perasaan dan hatinya. Padahal perasaannya itu pula yang telah memberikan perlindungan rasa aman pada saat dimana anak-anaknya tertidur lelap, serta dengan sentuhan perasaannya itu pula yang memberikan kenyamanan agar anak-anaknya selalu menyayangi dan mengasihi sesama saudara.

Kuberikan kerutan diwajahnya agar menjadi bukti bahwa laki-laki itu senantiasa berusaha sekuat daya pikirnya untuk mencari dan menemukan cara agar keluarganya bisa hidup dalam keluarga yang bahagia, dan badannya yang terbungkuk agar dapat membuktikan, bahwa sebagai laki-laki yang bertanggung jawab kepada seluruh keluarganya, senantiasa berusaha mencurahkan sekuat tenaga, segenap perasaannya serta keuletannya hanya demi kelangsungan hidup keluarganya.

Dan saat kuciptakan laki-laki, bersamaan dengan itu aku sudah membuatnya sebagai pemimpin keluarga serta sebagai tiang penyangga dari bangunan keluarga, dan dia akan senantiasa menahan setiap ujungnya, agar keluarganya merasa AMAN, DAMAI, TEDUH dan TERLINDUNGI dari berbagai musibah apapun yang datang menerpa.

Lalu terbangun anak wanita itu dan dia terus berlari mengambil air wudhu, berlutut dan berdoa hingga menjelang subuh. Setelah itu dengan rasa bersalah akan beban kesalahan yang mungkin pernah ia lontarkan pada ayahnya, anak wanita itu menghampiri kamar ayahnya, dan melihat ayahnya sedang sholat dan berdoa. Ketika ayahnya berdiri selesai sholat, anak wanita itu merunduk dan mencium tangan ayahnya dan berkata: " Aku sudah mendengar, mengerti dan merasakan bebanmu ayah! ", yang kemudian memeluk ayahnya.

Berbahagialah Yang Masih Memiliki Ayah Dan Lakukanlah Yang Terbaik Untuknya Saat Ini dan Selamanya...

Membuat Pesan Teks Melayang Saat Halaman Terbuka

Membuat Pesan Teks Melayang Saat Halaman Terbuka - Sebuah informasi, pesan teks atau tampilan widget sosial yang ditampilkan secara pop-up (melayang) seperti ini sudah sering kita temui pada beberapa situs atau web blog. Dimana saat halaman tersebut terbuka, maka ada sekilas pesan teks yang tampil secara melayang (fixed-position), baik itu saat membuka halaman beranda/home ataupun saat membuka halaman postingan. Isi dari tampilan widget tersebut juga beragam variasi, ada yang menampilkan jumlah fans google plus blog tersebut beserta gambar follower, ada yang hanya sekedar ucapan Selamat Datang dan ada juga yang membuat beberapa link aktif yang mengarah pada sebuah halaman yang berbeda untuk dituju.

Banyak sahabat blogger yang berpendapat bahwa membuat dan menampilkan widget berupa pesan teks melayang seperti ini amatlah mengganggu pengunjung, dengan alasan widget tersebut menutupi beberapa tulisan pada postingan saat halaman selesai dimuat. Dengan alasan itu banyak juga diantara mereka memutuskan untuk enggan berkunjung kembali, karena mereka menilai harus melihat dan membaca pesan teks tersebut terlebih dahulu sebelum akhirnya menutupnya dengan meng-Klik tombol ( X ) seperti tampilan gambar berikut:

Baca juga - Membuat Pesan Informasi Dengan Blockquote


Saya juga pernah membuat pesan teks melayang seperti ini sebelumnya, karena banyak sahabat yang mengkritik tampilan widget tersebut, akhirnya widgetnya saya lepas kembali untuk dimusnahkan hehe..!!, Pertemuan kali ini, saya kembali memberikan tutorial yang sama tentang Cara Membuat Pesan Teks Melayang Saat Halaman Terbuka, namun saya hadirkan dengan versi yang berbeda.

Widget pesan teks melayang kali ini sudah saya rancang dengan menganalisa berdasarkan alasan pengunjung yang terganggu karena tampilnya widget ini pada halaman. Jadi, widget ini hanya akan tampil pada halaman yang Anda tentukan saja, misalnya Anda ingin hanya akan ditampilkan pada beberapa postingan saja, atau hanya tampil saat pengunjung membuka halaman HOME saja, semuanya terserah Anda akan ditampilkan dihalaman yang mana (Up To You My Friend), tetapi ingat, jangan ditampilkan gambar Devy ya hehe..!!

Buat sahabat semua pecinta SAHABAT BLOGGER 77, Cara Membuat Pesan Teks Melayang Saat Halaman Terbuka seperti ini, saya akan berikan dalam 2 versi tampil:

1. Pesan Teks Pop-Up (Melayang)
Salin kode berikut, lalu letakkan pada formulir postingan mode HTML, perhatikan teks yang saya beri warna Merah, disana Anda bebas membuat hal apa saja yang ingin Anda tampilkan sebagai pesan teks Anda dengan penerapan script seperti ini:

<style>
#kotak-pesan {
  position:fixed !important;
  position:absolute;top:-1000px;
  left:50%;margin:0 auto;width:600px;
  background:#333;padding:16px;
  border:2px solid #fff;color:#fff;
  font:normal 1em Cambria,Georgia,Serif;
  box-shadow:0px 1px 3px rgba(0,0,0,0.4);}

#kotak-pesan a.close:hover {background:red;color:#fff;}
#kotak-pesan a.close {
  position:absolute;
  top:5px;right:5px;background:#fff;
  font:bold 13px Arial,Sans-Serif;
  line-height:15px;width:15px;text-align:center;
  color:red;border:2px solid #fff;
  box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  border-radius:15px;cursor:pointer;}
</style>
<script type='text/javascript'>
$(window).bind("load", function() {

    // kotak pesan akan tampil saat halaman telah selesai dimuat
    $('#kotak-pesan').animate({top:"150px"}, 1000);

    // menghilangkan kotak pesan saat tombol (x) diklik
    $('a.close').click(function() {
        $(this).parent().fadeOut();
        return false;
    });
});
</script>
<div id='kotak-pesan'>

Tulis Pesan Anda Disini...

<a class='close' href='#'>&times;</a>
</div>

Hasilnya:



DEMO SHOW



2. Pesan Teks Dengan Tombol Perintah
Menyimpan elemen pesan teks yang jauh diluar halaman, lalu dihubungkan dengan perintah JavaScript open-button untuk memanggil fungsi elemen-data dengan Tombol KLIK seperti ini:

<button class="open">Buka Teks Pesan</button>

Jadi pesan teks Anda hanya akan tampil jika tombol tersebut di KLIK saja, sedangkan untuk memberikan tampilan yang berbeda, saya menggunakan efek transisi slide-top, fade-out saat tombol CLOSE ( X ) di klik, kodenya seperti ini:

<script type='text/javascript'>
$(function() {
    $('button.open').click(function() {
        $('#kotak-pesan').animate({top:"200px"}, 1000);
        return false;
    });
    $('a.close').click(function() {
        $(this).parent().animate({top:"-600px"}, 1000);
        return false;
    });
});
</script>
<div id='kotak-pesan'>

Tulis Pesan Anda Disini....

<a class='close' href='#' title='Close'>&times;</a>
</div>

<button class="open">Buka Teks Pesan</button>

Hasilnya:


DEMO SHOW


Bagaimana terlihat lebih menarik bukan dari pada widget-widget yang sejenis seperti ini.!. Jadi Anda yang memilih, apakah pesan teks ini akan Anda tampilkan pada postingan Anda berikutnya, atau untuk halaman beranda saja. Pilihan ada ditangan Anda guys..!!? sampai jumpa...

Game Menyusun Angka

The Numbers Game With JavaScript Versi 1.0 By. Sahabat Blogger 77

Game Menyusun Angka - Permainan ini adalah sebuah game clasic (Jadul) yang sudah pasti sahabat semua mengenalnya, bahkan pernah memainkannya. Disela-sela kejenuhan, pikiran mampet kata orang jawa, terlebih lagi kalau sudah main dan singgah ke blog ini yang semuanya tentang pembahasan kode CSS, HTML dan JavaScript yang menambah pusing lagi kata +kang jum hehe..!!! Tetapi, bersamaan disaat itu pula saya akan memberikan sedikit hiburan buat sahabat semua pecinta SAHABAT BLOGGER 77 dengan permainan yang mengandalkan strategi, kecepatan serta ketepatan Anda dalam menyusun Angka acak dalam game kali ini.

Dahulu sewaktu masih kanak-kanak, saya bahkan sangat menyukai game ini, sampai-sampai saya punya 2 buah mainan ini dengan objek berbeda, pertama game menyusun angka dan yang kedua menyusun deretan huruf acak. Cara memainkannya dengan menggeser susunan angka yang sudah teracak sampai membentuk deretan angka yang semestinya dengan jari telunjuk seperti ini:




PLAY GAME



CARA BERMAIN
Game ini mungkin terlihat biasa saja, sangat mudah. Namun disana saya menampilkan alat penghitung untuk mengukur berapa kali Anda melakukan geseran pada setiap angka (Total Slide) saat Anda akan mulai memainkannya. Dan susunan angka akan teracak kembali jika Anda menekan tombol "RESTART" saat akan mengulang. Jadi, pikirkan strategi apa yang akan Anda gunakan untuk menyelesaikan permainan pada game ini, Karena game kali ini bukan hanya sekedar permainan seperti ➟ Game Test Kecerdasan Ala Sahabat Blogger 77 pada artikel sebelumnya. jika Anda berhasil menyelesaikan game ini dengan Total Slide: 151 kali dan deretan angka sudah tersusun dengan benar dan tepat, secara otomatis kotak cell angka akan berputar (Flipping) untuk menampilkan "Sesuatu" yang pasti Anda menginginkannya.

Perintah Cell Tab :
Disana saya membuang 1 kotak tab cell pada Angka, sehingga 1 kotak terlihat kosong, Untuk menggeser dan memindahkan angka, Anda cukup KLIK angka yang terdekat pada tab yang kosong, begitu seterusnya sampai angka tersebut tersusun dengan benar dan tepat.

Buat sahabat semua yang ingin membuat game menyusun angka seperti ini sebagai hiburan buat pengunjung blog, disini sudah saya siapkan kode-kode untuk membuat game ini, seperti CSS, HTML dan JavaScript secara lengkap seperti ini:

<style type='text/css'>
.game-field {
   margin: 0 auto;padding: 2px;font-size: 0;
   border-radius: 10px; border: 10px solid #333;
   width: 272px;background: black;
   background: -moz-linear-gradient(30deg, #222 0%, #666 100%);
   background: -webkit-linear-gradient(30deg, #222 0%, #666 100%);
   background: -o-linear-gradient(30deg, #222 0%, #666 100%);
   background: -ms-linear-gradient(30deg, #222 0%, #666 100%);
   background: linear-gradient(120deg, #222 0%, #666 100%);
   -webkit-box-shadow: inset 0px 0px 20px 0px rgba(0, 0, 0, 0.80);
   -moz-box-shadow: inset 0px 0px 20px 0px rgba(0, 0, 0, 0.80);
   box-shadow: inset 0px 0px 20px 0px rgba(0, 0, 0, 0.80);}

.game-field._hide {display: none;}
.cell {
   display: inline-block;position: relative;margin: 2px;
   border-radius: 8px;vertical-align: top;
   width: 64px;height: 64px;font-size: 0;
   background: rgba(0, 0, 0, 0.2);}

.tag {
   position: relative;width: 64px;height: 64px;
   border-radius: 8px;border: 6px solid #eee;
   box-sizing: border-box;background: #fff;
   vertical-align: top;text-align: center;
   line-height: 52px;font-size: 28px;
   text-shadow: 1px 1px 4px #969696;color: #6f3622;
   -webkit-box-shadow: inset 0px 0px 10px 0px black;
   -moz-box-shadow: inset 0px 0px 10px 0px black;
   box-shadow: inset 0px 0px 10px 0px black;}

.tag:hover {cursor: pointer;}
.tag._active {color: #495b3b;}
.move-count {
   display: inline-block;width: 150px;
   padding: 5px;border: 2px solid #B6B493;
   color: #B6B493;margin-left: 28.2%;
   background: rgba(0, 0, 0, 0.2);}

.restart {
   padding: 7px;width: 150px;margin: 120px 0 0 20px;
   font-size: 16px;border: 2px solid #B6B493;
   color: #B6B493;background: rgba(111, 54, 34, 0.8);}

.restart:hover {cursor: pointer;background: #6f3622;}
.restart:focus {outline: none;}
.ver {font-size:11px;margin:0 0 0 70%;}
</style>
//hapus kode ini jika Template Anda sudah menggunakan jQuery...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
  Array.prototype.shuffle = function(){
    for (var i = 0; i < this.length; i++){
      var a = this[i];
      var b = Math.floor(Math.random() * this.length);
      this[i] = this[b];
      this[b] = a;
    }
  };

  var $el = {
    cell: $('.cell'),
    moves: $('.moves'),
    field: $('.game-field'),
    restart: $('.restart')
  };
</script>
<script src="https://s-blogger77.googlecode.com/svn/trunk/the-numbers-game.js"></script>
<div class="game-field">
   <div class="cell" data-cell="1"></div>
   <div class="cell" data-cell="2"></div>
   <div class="cell" data-cell="3"></div>
   .....
   //teruskan sampai data-cell="16" seperti ini...
   <div class="cell" data-cell="16"></div>
</div>
      <div class="move-count">
          Total Slide: <span class="moves"></span>
      </div>
<button class="restart">Restart</button>
<div class="ver">ver.1.0.0 | Design by: </div>

Jangan terlalu keasyikan ya bermainnya, hehe..!! dan jangan sampai Anda melewatkan artikel menarik lainnya disini:

TOP GOOGLE SEARCH
      ➟ Membuat Tombol Share Terbaru Efek Transisi
      ➟ Tampilkan Foto Kecil Saat Gambar Utama Dihover
      ➟ Membuat Menu Navigasi Fixed Fly Out Dengan CSS3

Membuat Menu Blogger Dengan Target Gambar

Membuat Menu Blogger Dengan Target Gambar - Bergegas dari pembahasan pada artikel sebelumnya tentang Cara Membuat Panel Slide Halaman Posting, pertemuan kali ini SAHABAT BLOGGER 77 kembali menyapa sahabat semua dengan obrolan singkat seputar pembahasan tips sederhana untuk mendesain serta membuat tampilan blog agar terlihat lebih menarik dan keren dengan Membuat Menu Blogger Dengan Target Gambar sebagai tampilan widget pada halaman sidebar. Widget ini saya khususkan untuk ditampilkan pada sidebar page, karena bentuk dan tampilan sudah saya desain mengikuti lebar kolom sidebar blog pada umumnya seperti tampilan gambar berikut:

Referensi URL - Pengenalan Elemen CSS Target


Tidak jauh berbeda saat Anda memberikan title teks pada sebuah link-url, yang mana sebelum link pada menu tersebut di klik akan menampilkan sejumlah teks sebelum akhirnya Anda dialihkan pada halaman baru. Namun untuk Membuat Menu Blogger Dengan Target Gambar seperti ini, saya membungkus setiap kode pada link-menu dengan Elemen first-child img {z-index:1; opacity:1;} untuk dapat memanggil gambar sebagai title jika salah satu menu di hover. Singkatnya, setiap satu menu sudah saya beri satu buah gambar sebagai target sebelum Anda menuju tautan tersebut. Kode lengkapnya seperti ini:

<style type='text/css'>
//* Image target show menu for sidebar widget
input data='css-target' id='sm-container'
visit: http://sahabatblogger77.blogspot.com
modified by. Devy Indriyani
publish date: November 23, 2014
*/
#img-sm {
  border-radius:20px;
  background:#3F3935;
  padding-top:290px;
  width:300px;
  position:relative;
  margin:0 auto;}

#img-sm a {
  display:block !important;
  color:#CFCECE;
  font-family:Lato, sans-serif;
  border-left:2px solid #e06666;
  font-size:14px;
  text-transform:uppercase;
  box-sizing:border-box;
  transition:.7s all linear;
  text-shadow:2px 2px 2px rgba(0,0,0,0.6);
  padding:8px 8px;}

#img-sm a:first-child img {z-index:1; opacity:1;}
#img-sm a:hover img {opacity:1; z-index:2;}
#img-sm a:hover {border-left-width:20px;}
#img-sm a img {
  width:250px;
  border-radius:50%;
  overflow:hidden;
  position:absolute;
  top:25px;left:25px;opacity:0;
  transition:.7s all linear;
  box-shadow:0 0 0 3px #eee;}
</style>

Hasilnya:




DEMO SHOW


Semua kode-kode diatas sudah saya ringkas termasuk penggunaan perintah javascript, agar nantinya widget ini tidak membuat loading halaman blog Anda menjadi berat. Tahap selanjutnya tinggal menambahkan link menu sebanyak yang Anda inginkan pada HTML berikut:

<div id="img-sm">
<a href="#">MENU 1<img src="http://Url-Gambar.jpg" alt=".."></a>
<a href="#">MENU 2<img src="http://Url-Gambar.jpg" alt=".."></a>
<a href="#">MENU 3<img src="http://Url-Gambar.jpg" alt=".."></a>
<a href="#">MENU 4<img src="http://Url-Gambar.jpg" alt=".."></a>
</div>

Terlihat keren dan menarik bukan, hehe..!! widget ini saya tampilkan dengan tampilan default seperti warna background, hover link color yang saya desain sesuai dengan warna blog saya, jika sekiranya Anda ingin mengubah tampilan warnanya, Anda bisa pilah-pilih warna yang sesuai dengan blog Anda pada ► Tabel Kode Color Heksa Terlengkap (Ragam Warna).

Akhir kata saya ucapkan terima kasih dan happy blogging..

Cara Membuat Panel Slide Halaman Posting

Cara Membuat Panel Slide Halaman Posting - Kangen rasanya ingin menyapa sahabat semua pecinta SAHABAT BLOGGER 77, yang tanpa kehadiran Anda semua di blog yang sederhana ini, mungkin blog ini sudah lama saya tinggalkan. Berhubung beberapa waktu lalu ada sedikit masalah dengan laptop saya, sehingga ngeposting artikel, blogwalking serta bercerita dan bercanda ria pada kolom komentar tidak bisa saya lakukan karena Laptop tecinta terkena virus, tetapi bukan virus dari Slank loh, hehe...!!!, jadi Devy mohon maaf jika sekiranya beberapa hari ini tidak bisa hadir di blog sahabat semua (mau kan maafin Devy.!?).

Syukur masih ada beberapa file yang sempat saya selamatkan sebelum laptop saya masuk bengkel. Pertemuan kali ini saya kembali hadir untuk berbagi pengetahuan seputar tutorial blog dalam membahas CSS-Widget tentang Cara Membuat Panel Slide Halaman Posting seperti tampilan gambar berikut:

Baca juga - Cara Mudah Membuat Menu Navigasi Pada Postingan


Untuk menyimpan beberapa tulisan penting, kode-kode script tutorial atau beberapa gambar yang Anda sertakan saat menulis artikel pada halaman posting, disana Anda bsa menghemat ruang postingan Anda dengan Membuat Panel Slide Untuk Menyimpan Text. Desain tampilan hampir sama, namun untuk panel slide halaman posting kali ini, ruang kosong saat panel dibuka akan menampilkan menu, sedangankan event gerakan untuk efek slide pada panel saya membuatnya dengan pergeseran position-right dengan perintah @viewport {width: device-width;}, sehingga conten yang berada diluar halaman tidak ikut bergeser saat panel di KLIK seperti ini:




DEMO SHOW


Coba perhatikan pada halaman menu, disana saya menyisipkan banyak link yang berarti jika halaman menu melebihi tinggi muatan conten artikel, maka efek scroll akan ditampilkan. Namun agar bar-scroll tidak tampil, tambahkan kode overflow-scrolling: touch. Tujuannya agar efek scroll hanya akan berfungsi pada halaman menu saja, sedangkan pada halaman posting tidak ikut bergeser saat scroll terjadi.
Kode lengkapnya seperti ini:

<style type='text/css'>
@-ms-viewport {width: device-width;}
@viewport {width: device-width;}
.group:before, .group:after {content:""; display:table;}
.group:after {clear:both;}
.container {font-size: 1.6rem; padding: 2em;}
#wrap {position: relative; overflow: hidden; width: 100%;}
#header {
   background: #333;
   height: 100%;left: 0;
   overflow: auto;
   position: absolute;
   top: 10px;width: 100%;
   -webkit-overflow-scrolling: touch;}

#header ul a {
   color: #81d8d0;display: inline-block;
   font: bold 11px/18px Verdana,serif;
   padding: 8px 10px;}

#header a:hover  {color:#e06666;}
#header ul {margin: 0; padding: 0;}
#header li {display: block; list-style: none;}
#content {
   background: #fff;
   position: relative;
   width: 100%;
   transform: translate3d(0px, 0px, 0px);
   transition: transform 500ms ease 0s;}

#header span {
   color:#fff;width:500px;
   text-shadow:0px 1px 2px #333;
   font: bold 12px/26px Verdana,serif;
   padding: 5px 10px;display:block;
   margin-top:-13px;box-shadow:1px 1px 1px black;
   background-image:-webkit-linear-gradient(#333, #444, #333, #222);
   background-image:-moz-linear-gradient(#333, #444, #333, #222);
   background-image:-ms-linear-gradient(#333, #444, #333, #222);
   background-image:-o-linear-gradient(#333, #444, #333, #222);
   background-image:linear-gradient(#333, #444, #333, #222);}

#footer {
  background: #000;color: #fff;
  display: block;font-size: 1.6rem;
  padding: 1em;}

#wrap:target #content,
.nav-open #content {transform: translate3d(53%, 0px, 0px);}

.button {
   background: #000;color: #CCC;
   display: block;font-size: 15px;
   padding: 8px;width: 80px;
  -webkit-tap-highlight-color: rgba(125, 142, 56, 3);}
</style>

Tambahkan script berikut setelah tag penutup </style> untuk mengaktifkan fungsi OPEN/CLOSE pada Tab-Menu, namun hapus kode script-jQuery yang saya beri warna MERAH jika Template Anda sudah menggunakan jenis jQuery yang sama seperti ini:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(window).load(function(){
  $('.button').click(function (e) {
   e.preventDefault();
   if ($('#wrap').hasClass('nav-open')) {
    closeNav();
   } else {
    showNav();
   }
  });
 });

 function closeNav(){
  $('#wrap').removeClass('nav-open');
 }
 function showNav(){
  $('#wrap').addClass('nav-open');
 }
</script>

Tahap akhir, disini Anda bebas menambahkan seberapa banyak link-menu sesuai dengan label-label artikel blog Anda sesuai keinginan pada HTML berikut:

<div id="wrap" class="trans">
    <div id="header" class="panel overthrow">
        <nav>
            <ul id="nav"><span>DESAIN TEMPLATE</span>
            <li><a href="#">Desain Template Menu 1</a></li>
            <li><a href="#">Desain Template Menu 2</a></li>
            <li><a href="#">Desain Template Menu 3</a></li>
            <li><a href="#">Desain Template Menu 4</a></li>
            <li><a href="#">Desain Template Menu 5</a></li>
            <li><a href="#">Desain Template Menu 6</a></li>
            <span>CSS WIDGET</span>
           <li><a href="#">CSS Widget Menu 1</a></li>
           <li><a href="#">CSS Widget Menu 2</a></li>
           <li><a href="#">CSS Widget Menu 3</a></li>
           <li><a href="#">CSS Widget Menu 4</a></li>
<!..Silahkan tambahkan beberapa menu lagi..!>
           </ul>
       </nav>
   </div>

        <div id="content" class="panel trans">
  <a class="button icon-menu" href="#wrap" data-action="showNav">Open Menu</a>
            <div class="container">

                <p> ... Tulis Artikel Anda Disisni....</p>

            </div>
            <div id="footer">
                <p>Copyright 2014 Design by. SAHABAT BLOGGER 77</p>
            </div>
        </div><!.. Ending panel trans ..!>
</div><!.. Ending id='wrap' ..!>

Memberi Tanggal Terbit Pada Gambar Saat Hover

Memberi Tanggal Terbit Pada Gambar Saat Hover - Salah satu hal termudah dalam mengubah tampilan blog agar terlihat menarik adalah dengan cara mengubah tampilan gambar pada postingan. Seperti pertemuan kali ini SAHABAT BLOGGER 77 kembali menyapa sahabat semua dengan tutorial sederhana tentang cara memberi tanda pada gambar postingan dengan tanggal terbit, judul gambar dengan efek hover.

Tampilan gambar akan terlihat wajarnya saat Anda menyisipkan gambar pada postingan, namun tanggal terbit pada gambar akan ditampilkan hanya jika gambar dilintasi oleh mouse seperti ini:

Seperti Efek Hover Gambar Dengan Desain Buka Tutup untuk menampilkan descripsi keterangan gambar, efek gambar kali ini saya memberi efek background blur-transparent pada gambarnya dengan kode pembentuk CSS seperti ini:

.info {width: 300px;height: 225px;}
.img-line .item-hover .mask {
  background-color:#000;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);        
  opacity:0.5;
  z-index:0;}

Hasilnya :




DEMO SHOW



Inspirasi ini saya desain ulang karena beberapa waktu lalu saya pernah melihat gallery Template buatan Kate Michelin, dimana setiap gallery gambar beliau diberikan efek seperti ini saat akan mereview tampilan templatenya sebelum menekan tombol link download. Mungkin dengan efek seperti ini, akan memberikan sentuhan menarik jika Anda ingin membuat beberapa gallery gambar dengan memberi judul pada gambar, tanggal gambar diterbitkan, sehingga setiap masing-masing gambar akan memiliki keterangan.

Bagaimana, sahabat mau mencoba?
Berikut kode lengkapnya:

<style type='text/css'>
//* Image hover effect on dates show with css
input data: no javascript
visit: http://sahabatblogger77.blogspot.com
published on November 14, 2014
modified by. Devy Indiyani */
.stage {margin:0 auto;position:relative;padding:5px;text-align:center;}
.stage,.item-hover,.item-hover .mask,.item-img,
.info {width: 300px;height: 225px;}
.item-hover,.item-hover .mask,
.img-line .item-hover:hover .line {width:90%;}
.img-line .item-hover:hover {opacity:1;}
.item-img {
  background-color:#7a548f;
  z-index:0;
  position:absolute;
  top:0;left:0;}

.img-line .item-hover {
  z-index:100;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  opacity:0;
  cursor:pointer;     
  display:block;
  text-decoration:underline;
  text-align:center;}
  
.img-line .info {
  z-index:10;
  color:#00ff00;
  display:table-cell;
  vertical-align:middle;
  position:relative;
  z-index:5;}
  
.img-line .info .text {font-size:18px;}
.img-line .info .line {
  height:1px;
  width:0%;
  margin:5px auto;
  background-color:#ffffff;
  -webkit-transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  -o-transition: all 500ms ease-out;
  transition: all 500ms ease-out;}
  
.img-line .info .date {font-size:12px;}
.img-line .item-hover .mask {
  background-color:#000;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  opacity:0.5;
  z-index:0;}
</style>

Cukup copy kode CSS diatas, lalu temukan kode ]]></b:skin> pada Template Anda, selanjutnya letakkan kode tersebut diatasnya. Selanjutnya tempatkan kode HTML berikut pada formulir postingan Anda mode tulis HTML bukan yang Compose, seperti ini:

<div class="stage">
   <div class="stage img-line">
     <a class="item-hover" href="">
       <div class="info">
         <div class="text">
            Sahabat Blogger 77
         </div>
       <div class="line"></div>
         <div class="date">
            November 14, 2014
         </div>
       </div> <!..ending info..!>
     <div class="mask"></div>
     </a>
       <div class="item-img">
        <img alt="" src="Url-Gambar Anda.jpg"/>
       </div>
   </div> <!..ending img-line..!>
</div> <!..ending stage..!>

Diary Notes Theme Sitemap Responsive

Diary Notes Theme Sitemap Responsive - Mengubah tampilan daftar artikel pada halaman beranda/home mungkin sangat jarang yang melakukannya, lebih memilih menggunakan apa yang sebelumnya sudah tersedia saat template diadopsi ke blog (Bawaan Template). Tutorial kali ini hanya merupakan sebuah pilihan buat sahabat semua pecinta SAHABAT BLOGGER 77 yang barangkali saat ini sedang berusaha melakukan perbaikan pada tampilan blog, mempercantik tampilan blog serta mendesain dan memodifikasi ulang tampilan dibeberapa halaman blog terutama pada halaman beranda. Karena untuk HOME PAGE, disanalah tersusun daftar postingan terbaru ditampilkan saat Anda telah mempublikasikan sebuah artikel.

Selain Daftar Isi yang pada umumnya Anda letakkan pada formulir laman posting, pada halaman Home/Beranda juga terdapat daftar postingan yang semuanya itu dapat kita ubah bentuk tampilannya sekeren mungkin seperti Diary Notes Theme Sitemap Responsive seperti ini:




DEMO SHOW



Tidak jauh berbeda dengan Daftar Isi Responsive Model Tema Facebook pada postingan sebelumnya, namun untuk Diary Notes Theme Sitemap Responsive kali ini akan kita tempatkan pada halaman Home untuk menggantikan daftar artikel yang Anda gunakan saat ini.

Agar memudahkan pekerjaan sahabat semua, saya sudah memodifikasi semua tampilan sekeren mungkin, seperti melengkapinya dengan ringkasan posting setelah judul, memberi tanggal terbit dan jumlah komentar dan Anda juga bisa memilih artikel yang tampil berdasarkan label tertentu dengan format pengaturan JavaScript dengan mengganti nilai-nilai pada masing-masing elemen data.

DESAIN TAMPILAN
Sebelum Anda akan meng-Copy kode script dibawah ini, terlebih dahulu silahkan sesuaikan desain tampilan sesuai dengan selera Anda sendiri, caranya cukup ganti nilai yang ada pada elemen data script seperti ini:

<script>
var showPostDate   = true,
    showComments   = true,
    idMode         = true,
    sortByLabel    = false,
    labelSorter    = "JQuery",
    loadingText    = "Loading...",
    totalPostLabel = "Jumlah posting:",
    jumpPageLabel  = "Halaman",
    commentsLabel  = "Komentar",
    rmoreText      = "Selengkapnya &#9658;",
    prevText       = "Sebelumnya",
    nextText       = "Berikutnya",
    siteUrl        = "http://sahabatblogger77.blogspot.com",
    postPerPage    = 10,
    numChars       = 370,
    imgBlank       = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibhIQv1bVU1YhM9b0ru8Eg2VzcvKD6cU_7_-debPuOgux7f1MoI-e1ptd6kc5iAzDv24bc5PZBFedXS1Q_mhWuJO6AQxc6jm_AOomYWf_Ep_4-CBT0Njl7nitPftHxTZQh7jtjO6KUL9A/s1600/sb77-image6.jpg";
</script>
<script src="https://s-blogger77.googlecode.com/svn/trunk/diary-notes-theme-sitemap.js"></script>

KETERANGAN DATA ELEMEN

DATA	NILAI ELEMENT	KETERANGAN FUNGSI
showPostDate	true | false	Nilai true untuk menampilkan bulan terbit. Ganti nilainya menjadi false jika tidak ingin tampil
showComments	true | false	true untuk menampilkan jumlah komentar false untuk tidak menampilkannya
idMode	true | false	Sistem penggunaan bahasa pada tanggal. true - Tanggal terbit dengan bahasa Indonesia false - Tanggal terbit dengan bahasa Inggris
sortByLabel	true | false	Untuk menampilkan posting dengan label tertentu
labelSorter	"jQuery","nama label.."	Tentukan nama label, jika nilai data pada sortByLabel bernilai true
totalPostLabel	"Jumlah posting"	Ganti teks berikut sesuai selera Anda
jumpPageLabel	"Halaman"	Ganti teks berikut sesuai selera Anda (Teks Dibawah Navigasi)
commentsLabel	"Komentar"	Untuk menentukan jumlah komentar, seperti: 10,20 Komentar
rmoreText	"Selengkapnya"	Link untuk menuju halaman posting
prevText	"Sebelumnya""	Pagination untuk menuju halaman sebelumnya
nextText	"Berikutnya"	Pagination untuk menuju halaman selanjutnya
siteUrl	URL Link	Ganti dengan URL Blog Anda
postsPerPage	10,15	Untuk menentukan jumlah posting yang tampil pada satu halaman penuh
numChars	100,300	Untuk menentukan jumlah karakter yang tampil pada ringkasan posting
imgBlank	URL-Gambar	Digunakan untuk menggantikan jika artikel tidak memiliki gambar

TAHAP PENERAPAN KE BLOG
Untuk menempatkan tampilan widget ini ke halaman beranda, tentu saja terlebih dahulu Anda harus menghilangkan daftar artikel yang sebelumnya saat ini Anda gunakan.

INGAT: Jangan dihapus, hanya menghilangkan isi tampilan agar tidak terlihat saat halaman Home terbuka. Sehingga pada opsi tata-letak halaman home akan kosong (No Posting), dan sudah berubah menjadi formulir kosong untuk menambahkan widget-gadget.
Caranya Baca ► Menghilangkan Daftar Artikel Pada Halaman Beranda

Setelah halaman home dikosongkan, selanjutnya copy kode script diatas, lalu letakkan pada formulir kosong tadi, namun jangan lupa untuk sebelumnya meletakkan CSS berikut pada Template Anda untuk mendukung performa tampilan.

PREVIEW CSS

Snake Game With Javascript

Snake Game With Javascript - Ada saatnya waktu dimana rasa lelah akan sesuatu menghampiri diri kita, seperti mendesain atau mengubah tampilan blog agar terlihat tampil menarik, membuat widget pada halaman sidebar dan lain-lain yang semuanya itu banyak dibahas dalam blog sederhana ini "SAHABAT BLOGGER 77". Tetapi bukannya Devy mau berhenti untuk berbagi pengetahuan seputar tutorial blog dan cara-cara mendesain tampilan template, hanya libur sesaat membahas hal tentang itu, butuh hiburan untuk meringankan sedikit pikiran dengan bermain permainan JADUL (Jaman Dulu) yaitu SNAKE GAME.

Snake game, permainan ular-ularan yang pasti sahabat semua pernah melihat bahkan memainkan game ini pada beberapa type mobile phone. Hanya karena saat ini kita berada pada zamannya Android, sehingga game ini berangsur-angsur hilang ditelan mas +Aldino Sya dan mas +Fiu S hehe...!!!!, pertemuan kali ini saya akan tampilkan kembali langsung pada blog Anda Permainan Simple Snake Game With Javascript seperti ini:




PLAY GAME


Gambar Loading Please Wait...


Game ini saya bentuk dengan menggunakan JavaScript variable, sedangkan untuk menghindari beban loading halaman, saya tidak menggunakan efek loading pada game (Super Ringan). Untuk menjalankan game ini, saya menghubungkan komponen pada keyboard PC Anda sebagai perintah untuk menggerakkan animasi snake kekiri, kekanan, keatas dan kebawah dengan tombol panah pada papan keyboard PC Anda.

SEKILAS INFORMASI :
Game ini hanya support untuk Template HTML5, karena elemen yang saya gunakan adalah canvas data sebagai dasar pembuatan game, sehingga game ini bisa dijalankan pada blog.

Game Test Kecerdasan Ala SAHABAT BLOGGER 77 pada permainan sebelumnya, saya tidak memberikan kode cara membuatnya, tetapi karena hari ini saya lagi baik hati dan tidak sombong hehe..!!, terspesial buat sahabat semua pecinta SAHABAT BLOGGER 77, berikut kode lengkap cara membuat Snake Game With Javascript di blog Anda:


<style type='text/css'>
//*snake games
original type: script variable game element
support: html v-5 (canvas data)
design by. http://sahabatblogger77.blogspot.com
date on: November 09, 2014
author: Devy Indriyani*/
canvas {border: 2px solid rgb(151, 149, 149);}
.container {text-align:center;margin:0 auto;}
.ribbon-top {
  font:bold 25px Cambria,Georgia,Times,Serif;
  color:#fff;
  width:555px;
  padding:0px 20px;
  background:green;
  position:relative;
  line-height:48px;
  margin:0 auto;
  text-align:center;}

.ribbon-top:before {
  content:"";
  position:absolute;
  top:100%;
  left:0px;
  width:0px;
  height:10px;
  border-width:8px;
  border-style:solid;
  border-color:green green transparent transparent;}

.ribbon-top:after {
  content:"";
  position:absolute;
  top:100%;
  right:0px;
  width:0px;
  height:10px;
  border-width:8px;
  border-style:solid;
  border-color:green transparent transparent green;}

.ribbon-bottom {
  font:bold 16px Cambria,Georgia,Times,Serif;
  color:#fff;
  width:543px;
  padding:0px 10px;
  background:green;
  position:relative;
  line-height:30px;
  margin: -6.5px auto;
  text-align:center;}

.ribbon-bottom:before {
  content:"";
  position:absolute;
  bottom:100%;
  right:0px;
  width:0px;
  height:0px;
  border-width:5px;
  border-style:solid;
  border-color:transparent transparent green green;}

.ribbon-bottom:after {
  content:"";
  position:absolute;
  bottom:100%;
  left:0px;
  width:0px;
  height:0px;
  border-width:5px;
  border-style:solid;
  border-color:transparent green green transparent;}
</style>
<script type='text/javascript'>
//<![CDATA[
var Game      = Game      || {};
var Keyboard  = Keyboard  || {};
var Component = Component || {};

Keyboard.Keymap = {
  37: 'left',
  38: 'up',
  39: 'right',
  40: 'down'
};
//]]>
</script>
<script src="https://s-blogger77.googlecode.com/svn/trunk/snake-game.js"></script>
<div class="container">
   <div class="ribbon-top">SNAKE GAME</div>
     <canvas id="stage" height="400" width="520"></canvas>
   <h4 class="ribbon-bottom">Selamat Bermain</h4>
</div>

Game Test Kecerdasan Ala SAHABAT BLOGGER 77

Game Test Kecerdasan Ala SAHABAT BLOGGER 77 - Beberapa hari ini ada suatu pekerjaan yang tidak bisa untuk ditinggalkan, sehingga ngeblog, blogwalking dan membuat artikel baru cukup berjarak jauh dengan postingan sebelumnya tentang ► Cara Membuat Galeri Gambar Efek Slider Desain Terbaru. Hari yang berbahagia ini, saya kembali hadir untuk menyapa sahabat semua pecinta SAHABAT BLOGGER 77 dengan pembahasan seputar hiburan permainan untuk menguji kecerdasan Anda dalam Game Test IQ Ala SB-77.

Saya mengerjakan proyek ini membutuhkan waktu 2 minggu 5 hari agar siap untuk dirilis, hmmm....lumayan lama bukan? hehe..!! maklum dech saya belum sehebat mereka para webmaster, tetapi saya akan selalu memberikan yang terbaik buat sahabat semua untuk dinikmati. Seperti game kali ini, sedikit banyaknya akan menguji kecerdasan serta wawasan Anda untuk menjawab pertanyaan-pertanyaan yang sudah saya pisahkan dalam 3 Category pilihan seperti ini:

1. Category Nama Aktris Dan Aktor
2. Category Nama-Nama Menteri Kabinet JOKOWI - JK
3. Nama Kota Terindah Dan Terkenal Di Dunia

Category Aktris Dan Aktor
Nama-nama Aktris dan Aktor dalam kategori ini saya ambil dari situs informasi wikipedia, jadi benar keberadaannya dan sudah cukup terkenal dari Aktris dan Aktor Lokal dan Interlokal. Semuanya saya sajikan dalam 10 nama, bisa saja salah satu dari mereka adalah FANS Anda yang bila sudah tampil dilayar kaca, Anda tidak mau ketinggalan acara mereka.

Category Susunan Kabinet Menteri JOKOWI - JK
Karena informasi ini sedang booming, jadi saya ikut sertakan dalam game kali ini. Ada 34 nama-nama Menteri kabinet JOKOWI - JK saat ini, namun disana saya hanya menampilkan 8 nama Menteri saja sebagai tambahan pelajaran. Jadi silahkan ditebak ya, hehe..!!

Category Kota
Bisa saja salah satu dari kota ini sudah pernah Anda kunjungi, atau menjadi kota impian Anda, yang kelak akan Anda kunjungi suatu saat nanti. sebagai contoh- negara ini dikenal dengan sebutan "KINCIR ANGIN" maka, jawabannya adalah "BELANDA", namun dikota manakah Kincir Angin tersebut berada, (Kurang lebih seperti itu permainan ini). Tetapi walau hal itu tidak akan pernah terwujud, Anda sudah mengenal nama-nama kota yang terindah di dunia versi SAHABAT BLOGGER 77.

Bagaimana kalau jalan-jalan sebentar mengunjungi artikel dibawah ini:

► Membuat Artikel 3 Kolom Dalam 1 Halaman
► Pentingnya Atribut | Title Tag Untuk Optimasi SEO
► Membuat Carousel Gambar 3D Dengan CSS Transform



CARA BERMAIN
Sedikit saya jelaskan cara bermain game test kecerdasan ini, permainan ini hanya sekedar menguji wawasan Anda untuk menebak jawaban dalam setiap pertanyaan pada kategori yang sudah saya jelaskan diatas. Disana sudah saya susun deretan HURUF dan ANGKA yang nantinya Anda gunakan untuk menjawab pertanyaan pada masing-masing kategori.

PERHATIKAN :
Anda cukup klik salah satu Huruf atau Angka pada papan keyboard sampai membentuk satu kalimat sebagai jawaban. Dan saya beri 10 kesempatan untuk menjawab.

Agar memudahkan Anda menebak jawaban atas pertanyaan diatas, disana Anda bisa gunakan bantuan "Clue" untuk menampilkan pertanyaan yang berhubungan dengan kategori tersebut. Bagaimana? mudah bukan..!! MAU MENCOBA?

PLAY GAME

Cara Mengatur Halaman Blog Agar Responsive

Cara Mengatur Halaman Blog Agar Responsive - Responsive atau "RESPON" berarti menerima dan dapat menyesuaikan diri terhadap hal-hal yang diterima serta dapat mengatur letaknya sesuai dengan dimana halaman tersebut terbuka sebagai tempat. Responsive bisa juga diartikan sebagai fleksibel area halaman blog, jika halaman dibuka pada resolusi layar yang kecil, maka tampilan halaman blog akan mengikuti lebar layar yang Anda gunakan saat membuka halaman blog saat ini. Sebagai contoh coba Anda minimalkan ukuran layar monitor Anda saat ini, maka secara otomatis halaman akan ikut menyusut mengikuti resolusi layar, hal inilah yang disebut dengan Responsive Page.

Bukan hanya itu, bahkan sebuah website dituntut harus mampu malakukan pendekatan untuk mengatur hasil tampilan halaman yang menunjukkan bahwa desain dan perkembangan dapat merepon dan tanggap pada perilaku pengguna berdasarkan ukuran, platform dan orientasi layar secara otomatis. Dengan kata lain sebuah website harus memiliki sistem teknologi otomatis untuk dapat merespon preferensi pengguna berdasarkan resolusi layar yang digunakan seperti Komputer PC, Laptop, Netbook, Tablet, SmartPhone dan Mobile Phone.

Top Artikel - CSS Flower Navigasi Efek Rotasi

Tidak semua ukuran resolusi layar pada perangkat yang Anda gunakan sama, semua memiliki lebar dan tinggi yang berbeda-beda, untuk itu kita perlu mengatur halaman blog agar responsive, sehingga letak dan layout halaman tetap dalam tampilan yang rapi dimanapun halaman tersebut terbuka dengan menambahkan kode @media-screen, contoh seperti ini:

//halaman hanya akan tampil dengan lebar maksimal 800 piksel
@media only screen and (max-width:800px) {

//pengaturan halaman full (1, 2 atau 3 kolom)
#outer-wrapper {width:750px; margin:0 auto;}

//halaman posting (jika pada mobile phone akan tampil individu)
#main-wrapper {width:750px;}
//layout sidebar
#sidebar-wrapper {width:750px;}
//layout kolom footer
#footer {width:750px;}
}

Dengan pengaturan @media-layout diatas, maka jika halaman blog terbuka pada resolusi layar yang kurang dari 800px, halaman akan secara otomatis berubah tampilan menjadi 1 kolom full, contohnya pada layar tablet atau mobile phone yang memiliki ukuran layar yang cukup kecil, sehingga tampilan halaman akan menempatkan kolom sidebar dibawah setelah halaman posting secara sejajar dalam 1 kolom.


Berikut Cara Mengatur Halaman Blog Agar Responsive
1. Penempatan Kode
1.1. Tag Meta Responsive
Temukan kode <head> pada Template Anda, lalu letakkan kode ini dibawahnya:

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

1.2. CSS Lay Out Media
Kemudian letakkan kode berikut pada HTML Template Anda sesuai elemen id pada area masing-masing untuk mengatur lebar tampilan halaman yang responsive seperti ini:

<style type='text/css'>
@media only screen and (min-width:768px) and (max-width:999px){
   #outer-wrapper{width:754px}
   #main-wrapper{width:60%}
   #sidebar-wrapper{width:40%}
   #headnya{max-width:260px;min-width:250px}
   #head-ads .widget{margin:15px 0}
   #header h1,#header p{padding:15px 0 0;font-size:240%}
   #header .description{padding:0 0 10px}
   //tambahkan elemen id lainnya disini...
}

@media only screen and (max-width:767px){
   #outer-wrapper{width:440px}
   #sidebar-wrapper,#main-wrapper,#isifooternya{width:100%}
   #isifooternya .footer-wrap{width:100%}
   #nav{...}
   #search-result-container{width:100%}
   //tambahkan elemen id lainnya disini... 
}

@media only screen and (max-width:479px){
   #outer-wrapper{width:310px}
   #header h1,#header p{font-size:230%}
   //tambahkan elemen id lainnya disini... 
}

@media only screen and (min-width:768px) and (max-width:999px){
   #slides ul{height:200px}
   #slides h4{font-size:15px}
   #slides li:nth-child(3) h4,#slides li:nth-child(2) h4{font-size:11px}
   .post-outer{width:100%}
   .post{width:370px}
   .blog-posts.hfeed::before{left:27px}
   .post-body p{overflow:visible}
   .post h2.post-title{height:auto;}
   //tambahkan elemen id lainnya disini... 
}

@media only screen and (max-width:479px){
   #slides ul{height:450px}
   .post{width:228px}
   .post h2.post-title{max-height:200px;}
   .post-body p{font-size:11px;padding:0}
   //tambahkan elemen id lainnya disini... 
}

@media only screen and (max-width:479px){
   #social-side2{padding:0}
   #social-side2::before{content:""}
   //tambahkan elemen id lainnya disini... 
}
</style>

2. Penyesuaian Kode
Pengaturan kode ini saya ambil langsung untuk mengatur halaman blog ini agar responsive, bahkan letak menu navigasi, kolom pencarian dan tombol share semua sudah saya atur agar responsive yang artinya elemen ID untuk halaman yang saya gunakan belum tentu sama seperti yang Anda gunakan, jadi silahkan Anda sesuaikan terlebih dahulu ID apa yang Anda gunakan untuk mengatur letak halaman pada Template Anda. Contoh seperti kode ini:

#outer-wrapper
#main-wrapper
#sidebar-wrapper

Nah jika sudah ketemu, Anda bisa tambahkan pada pengaturan media-screen pada masing-masing area pada CSS diatas, mudah bukan..!!! hehe.... semoga artikel ini dapat membantu sahabat semua pecinta SAHABAT BLOGGER 77 dalam mengatur halaman blog yang responsive dengan tampilan yang rapi. Happy blogging.

Membuat Tombol Share Terbaru Efek Transisi

Tombol Share Terbaru Ala Sahabat Blogger 77

Desain Icon Media Share Dengan Efek Transisi - Cara terbaik membantu reputasi blog agar dikenal banyak orang adalah dengan membagikan ulang artikel blog ke situs-situs media sosial seperti google plus, facebook dan twitter. Karena mustahil Anda bisa mendapatkan trafik sebesar 500 pageview/hari (minimal) jika itu hanya Anda yang malakukannya, blog butuh trafik agar bisa naik 1 tingkat dari level sebelumnya, yang sudah pasti blog butuh pengunjung.

KESIMPULAN
Semakin banyak terjadi lalu lintas dalam blog, maka besar kemungkinan blog akan cepat terkenal seiring bertambahnya jumlah artikel pada blog.

Dengan menambahkan widget tombol share di blog merupakan salah satu cara termudah untuk mempromosikan blog Anda kepada banyak orang, karena nyatanya kita tidak bisa memaksakan seseorang untuk melakukan hal yang sama saat kita melakukan blogwalking (hanya bisa berharap, agar blog yang kita kunjungi melakukan hal yang sama dengan berkunjung juga ke blog kita). Pertemuan kali ini, saya sudah mendesain widget tombol share terbaru ala SAHABAT BLOGGER 77 buat sahabat semua dengan menggunakan efek transisi seperti tampilan screenshort dibawah ini:

Baca juga - Daftar Isi Responsive Model Tema Facebook


Bentuk tampilan menu yang hanya menampilkan sebuah tombol knock ON/OFF, sedangkan untuk icon media, saya hanya menambahkan 3 icon saja yang secara umum banyak digunakan seperti google plus, facebook dan twitter dengan efek transisi.
Kode lengkapnya seperti ini:

<style type='text/css'>
/*icon media share transition design
css type:id element input[sb77]
released on November 01, 2014
visit: http://sahabatblogger77.blogspot.com
modified: Devy Indriyani*/
#share {
  width: 550px;
  display: block;
  position: relative;
  margin:0px auto;}

.open-menu /*!id='sb77'*/ {display: none;}
.open-menu:checked ~ .g-plus {top: 80px;}
.open-menu:checked ~ .fb {left: 310px;top:145px;}
.open-menu:checked ~ .twitter {left: 115px;top:145px;}

.show-menu {
  font: bold italic large Georgia;
  background: #DC143C;
  width: 105px;height: 105px;
  display: block;cursor: pointer;
  border-radius: 50%;
  position: absolute;
  color:#fff;text-align:center;
  line-height:105px;z-index: 10;
  top:200px;left:200px;
  box-shadow:inset 0px 0px 2px 10px #F0F8FF;
  text-shadow: 1px 2px 2px #111}

.text /*!id='sb77'*/ {
  width: 80px;height: 80px;
  display: block;
  border-radius: 50%;
  position: absolute;
  top: 215px;left: 215px;
  background: #ecf0f1;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;}

.g-plus {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyQM9Ucc77iIiPqbmEl8Zy58KaYDjSzooeBfiNzNbEJPlgIun0bCxWw6t1yCvdN2Vel4nNz8vBWK6BSC9q8pLp9BKapgvK23PSZbxGmH9Nz-symjjNT-SZ5hzYJ6Ap-uTR33fDq4wlPt8/s80/sb77-googleplus.png) no-repeat center center;}

.fb {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPvliC6wLRf_XSo-4tKY9jqRg75CdrZmT1PhF454Vj3fCk3Ofb4UZPHP07NcrTL891XLe_JxErzWl4dSno_UBE8rZzyzEHUwa_tv4oIdw_xgLxP5IX0BAE1BTPDI1msMayxdEiBY0K5U4/s80/sb77-facebook.png) no-repeat center center;}

.twitter {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCPFE90Zc-o_8ryO_fpZydQNpetTNYfPAHQCgdnQerQpq3DZsfFMhv_P0wCRni22za-xRei8OQrgM2lVyF2FRtiuIfljCwUx3UddEvtgkcRJcE-0-dOwhN5EUgc6QkaETkZSs_bjI8ll0/s80/sb77-twitter.png) no-repeat center center;}
</style>

Hasilnya:



DEMO SHOW



Untuk HTML berikut saya menggunakan kode fungsi input-checkbox untuk menghilangkan perintah link URL pada tombol, lengkapnya seperti ini:

<div id="share">
<input type="checkbox" id="sb77_id" class="open-menu">
<label for="sb77_id" class="show-menu">SHARE</label>
<a href="#" class="g-plus text"></a>
<a href="#" class="fb text"></a>
<a href="#" class="twitter text"></a>
</input>
</div>

Mungkin saat ini mereka sedang aktif dalam media facebook, ajak mereka untuk berkunjung ke blog Anda dengan membuat sebuah status pada facebook sebagai link tautan, saya yakin beberapa diantara mereka pasti akan KLIK tautan yang Anda kirimkan pada status kronologi di facebook Anda. Hal yang menguntungkan bukan.? hehe..!! *SALAM MANIS*