1/12/2017

Cara Membuat Catatan Seperti Arlina Design


Cara Membuat Catatan Seperti Arlina Design - Nah saat mengunjungi blog Arlina Design pasti akan melihat sesuatu yang unik dan baru serta bikin orang terkagum dengan karya-karyanya. Kali ini saya +Wahyu Perwira akan membagikan, bagaimana cara membuat catatan seperti Arlina tersebut? Sebagai contohnya, silahkan lihat demo dibawah ini

Ini Catatan yang ada di Arlina Design. Ingin blog kamu tampil indah dan elegan seperti ini? Ikuti tutorialnya dibawah.

Bagaimana mirip dan bagus bukan? Jika kamu berminat, silahkan simak tutorial berikut. Ikuti secara teliti, agar tidak terjadi kesalahan.

Cara Membuat Catatan Seperti Arlina Design

1. Buka blogger.com
2. Masuk ke template > edit HTML
3. Cari tulisan ]]></b:skin> atau </style>
4. Copy kode CSS dibawah, dan taruh diatas ]]></b:skin> atau </style>
/* BLOCKQUOTE WREP17 */
.post-body blockquote{background:#6591c2;position:relative;padding:55px 20px 20px 20px;color:#fff;margin:10px 0;border-radius:3px}
.post-body blockquote:before{position:absolute;content:&#39;Catatan&#39;;background:rgbaundefined255,255,255,1);right:3px;left:3px;top:3px;padding:5px 20px;display:block;font-weight:700;border-radius:3px 3px 0 0;color:#6591c2}
.post-body blockquote:after{position:absolute;content:&#39;\f027&#39;;right:10px;bottom:5px;font-family:FontAwesome;font-style:normal;font-weight:normal;font-size:160%;color:rgbaundefined255,255,255,.6)}
.post-body blockquote a,.post-body blockquote a:hover {color:#fff;}

5. Setelah itu klik simpan.
6. Buatlah sebuah postingan dan menggunakan fitur quote atau blockquote.
7. Selamat sudah jadi

Bagaimana mudah bukan tutorialnya? Selamat mencoba dan selamat memodifikasi kembali fitur catatan tersebut agar lebih paham dan sesuai dengan keinginan. Apabila masih kebingungan, silahkan untuk bertanya di komentar. Selamat mencoba

Referensi Arlinadesign
Read More

1/10/2017

Niat Shalat Sunnah Qabliyah dan Ba'ddiyah

Niat Shalat Sunnah Qabliyah dan Ba'ddiyah

Niat Shalat Sunnah Qabliyah dan Ba'ddiyah - Sebelumnya saya telah membuat artikel tentang Kenapa Masih Banyak Orang Yang Tidak Mau Bersyukur. Kali ini saya akan membagikan sebuah postingan tentang niat shalat sunnah qabliyah dan ba'diyah.

Apa itu shalat sunnah qabliyah dan ba'diyah? Shalat sunnah ini dilakukan sebelum menjalankan shalat wajib 5 waktu. Jadi, saat pergi ke masjid dan shalat wajib belum dimulai pun, kamu bisa melakukan shalat sunnah tersebut. Walaupun shalat ini sunnah, jadi apabila dilakukan akan mendapatkan pahala, kalau tidak dilakukan tidak akan mendapatkan dosa.

Perlu diketahui Shalat Sunnah Qabliyah artinya shalat yang dilakukan sebelum shalat wajib mulai. Sedangkan untuk Shalat Sunnah Ba'diyah artinya shalat yang dilakukan sesudah shalat wajib selesai

Macam-Macam Shalat Qabliyah

  • Subuh
  • Dzuhur

Macam-Macam Shalat Ba'diyyah

  • Dzuhur
  • Maghrib
  • Isya
Adapun pula hadits-hadits yang menjelaskan tentang shalat sunnah qabliyah dan ba'diyah, dimana shalat ini jumlahnya sebanyak 10 rakaat seperti yang dijelaskan dalam hadits yang sahih.
Hadits :
Dari Ibnu Umar radhiyallahu 'anhuma, beliau berkata: "Telah aku hapal dari Rasulullah SAW 10 raka'at; 2 raka'at sebelum Zhuhur, 2 raka'at setelahnya, 2 raka'at setelah Maghrib di rumahnya, 2 raka'at setelah Isya' di rumahnya dan 2 raka'at sebelum shalat shubuh". Hadits riwayat Bukhari. Hadits :
Dari Ummu Habibah radhiyallahu 'anha berkata: "Rasulullah SAW bersabda: "Barangsiapa yang shalat di dalam sehari dan semalam 12 raka'at maka dibangunkan baginya sebuah rumah di dalam surga, (12 raka'at tersebut) adalah 4 raka'at sebelum Zhuhur, 2 raka'at setelahnya, 2 raka'at setelah Maghrib, 2 raka'at setelah Isya' dan 2 raka'at sebelum Fajar". Hadits riwayat Tirmidzi (no. 414) dan dishahihkan oleh Al Albani di dalam Shahihut Tirmidzi (1/131).

Niat Shalat Sunnah Qabliyah dan Ba'ddiyah

Shalat Qabliyah Subuh

اُصَلِّى سُنَّةَ الصُّبْحِ رَكْعَتَيْنِ قَبْلِيَّةً مُسْتَقْبِلَ الْقِبْلَةِ ِللهِ تَعَالَى
USHOLLI SUNNATASH-SHUBHI ROK'ATAINI QOBLIYYATAN MUSTAQBILAL QIBLATI LILLAAHI TA'AALA

Shalat Qabliyah Dzuhur

اُصَلِّى سُنَّةً الظُّهْرِرَكْعَتَيْنِ قَبْلِيَّةً مُسْتَقْبِلَ الْقِبْلَةِ ِللهِ تَعَالَى

USHOLLI SUNNATAZH-ZHUHRI ROK'ATAINI QOBLIYYATAN MUSTAQBILAL QIBLATI LILLAAHI TA'AALA

Shalat Ba'diyyah Dzuhur

اُصَلِّى سُنَّةً الظُّهْرِرَكْعَتَيْنِ بَعْدِيَّةً مُسْتَقْبِلَ الْقِبْلَةِ ِللهِ تَعَالَى

USHOLLI SUNNATAZH-ZHUHRI ROK'ATAINI BA'DIYYATAN MUSTAQBILAL QIBLATI LILLAAHI TA'AALA

Shalat Ba'diyyah Maghrib

اُصَلِّى سُنَّةً الْمَغْرِبِ رَكْعَتَيْنِ بَعْدِيَّةً مُسْتَقْبِلَ الْقِبْلَةِ ِللهِ تَعَالَى

USHOLLI SUNNATAL MAGHRIBI ROK'ATAINI BA'DIYYATAN MUSTAQBILAL QIBLATI LILLAAHI TA'AALA

Shalat Ba'diyyah Isya

اُصَلِّى سُنَّةً الْعِشَاءِ رَكْعَتَيْنِ بَعْدِيَّةً مُسْتَقْبِلَ الْقِبْلَةِ ِللهِ تَعَالَى

USHOLLI SUNNATAL 'ISYAA'I ROK'ATAINI BA'DIYYATAN MUSTAQBILAL QIBLATI LILLAAHI TA'AALA

Selamat belajar dan mempelajari untuk menghafalkan niat-niat shalat sunnah tersebut. Semoga bisa hafal dan bisa dijalankan walau hanya sehari satu sakli, yang penting tetap istiqomah dan dijalankan terus menerus.
Read More

1/09/2017

Cara Membuat Syntax Highlight Seperti Arlina Design

Cara Membuat Syntax Highlight Seperti Arlina Design

Cara Membuat Syntax Highlight Seperti Arlina Design - Pasti para blogger mengenal siapa itu Arlina Design? Dia merupakan seorang pembuat template, dimana template nya disukai banyak orang, bahkan banyak para blogger Indonesia yang menggunakan template buatan arlina.

Kali ini saya +Wahyu Perwira akan membagikan bagaimana cara membuat syntax highlight, lalu syntax highlight itu apa sih? Syntax highlight itu merupakan pembungkus kode, yang berguna untuk menaruh kode html, css, javscript dan bahasa pemrograman lainnya.

Cara Membuat Syntax Highlight Seperti Arlina Design

1. Buka blogger.com
2. Template > Edit HTML
3. Cari kode ]]></b:skin> atau </style>
4. Lalu taruh kode CSS berikut diatas ]]></b:skin> atau </style>
/* CSS Syntax Highlighter */
/* MODIFIED BY WREP17 */

pre {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    padding: 0;
    margin: .5em auto;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
    background-color: #443e50;
    position: relative;
    padding-top: 33px;
    width: 100%;
    -moz-tab-size: 2;
    -o-tab-size: 2;
    tab-size: 2;
    word-break: normal;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    border-radius: 3px;
}
pre::-webkit-scrollbar,
pre::-moz-scrollbar,
pre code::-webkit-scrollbar,
pre code::-moz-scrollbar,
code::-webkit-scrollbar,
code::-moz-scrollbar {
    display: none;
}
pre::before {
    font-size: 15px;
    font-weight: 700;
    content: attrundefinedtitle);
    position: absolute;
    top: 0;
    padding: 9px 0;
    left: 0;
    right: 0;
    color: #79798d;
    display: block;
    margin: 0;
    text-indent: 15px
}
pre:after {
    display: inline-block;
    content: &quot;\f121&quot;;
    font-family: fontAwesome;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    color: #79798d;
    top: 0;
    right: 0;
    padding: 9px 14px;
    position: absolute
}
pre code {
    display: block;
    background: none;
    border: none;
    color: #bec3ce;
    padding: 25px 20px 20px 20px;
    font-family: &#39;Source Code Pro&#39;, Menlo, Consolas, Monaco, monospace;
    font-size: .83rem;
    white-space: pre;
    overflow: auto
}
code .token.important {
    font-weight: bold;
}
code .token.entity {
    cursor: help;
}
pre mark,
code mark,
pre code mark {
    background-color: #3498db!important;
    color: #fff!important;
    padding: 2px;
    margin: 0 2px;
    border-radius: 2px;
}
pre[data-codetype=&quot;codeku&quot;]:before
{background-color:#fff;box-shadow:inset 0 0 0 1px #eee;}
    background-color: #fff;
    box-shadow: inset 0 0 0 1px #eee;
}

5. Klik simpan.
6. Lalu taruh kode HTML dibawah ini di dalam postingan tab HTML (bukan Compose).
<pre data-codetype="codeku" title="HTML"><code class="language-markup">
/* TARUH KODE HTML, CSS, JAVA SCRIPT, BAHASA PEMROGRAMAN LAINNYA DISINI */
</code></pre>

7. Jangan lupa kode yang ingin dimasukkan ke dalam postingan diparse terlebih dahulu di htmlparse.com.

Untuk kode title='HTML'. Bagian yang saya tebalkan bisa diganti sesuai keinginan. Misalnya CSS atau bahasa pemrograman lainnya

Bagi kamu yang penasaran, bagaimana hasilnya? Hasilnya sama seperti yang ada di blog ini. Jika kamu masih kebingungan bisa ditanyakan melalui kolom komentar.
Read More

1/08/2017

Cara Membuat Popular Post Warna Warni

Cara Membuat Popular Post Warna Warni

Cara Membuat Popular Post Warna Warni - Ya ketemu kembali di blog ini, berbagi kembali dengan ilmu-ilmu bloggernya. Ilmu yang selalu diperbarui dan dibagikan secara cuma-cuma alias gratis dan tidak membayar. Tentu hal ini merupakan kabar gembira untuk para pencari ilmu. Karena ilmu itu memang harus dibagikan jangan disimpan sendiri.

Kali ini, saya akan membagikan sebuah widget untuk blogger yaitu tentang bagaimana Cara Membuat Popular Post Warna Warni. Langsung saja disimak dan diikuti caranya agar berhasil.

Cara Membuat Popular Post Warna Warni

1. Buka blogger teman-teman.
2. Buka template > Edit HTML
3. Cari kode ]]></b:skin> atau </style>
4. Masukkan kode CSS dibawah ini dan taruh diatas ]]></b:skin> atau </style>
/*Custom Popular Post*/
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0 0;padding:0 0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:.5em 0;list-style:none;color:black;counter-reset:num}
.PopularPosts ul li{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}
.PopularPosts img{float:left;margin:0 5px -10px 0;display:inline;opacity:10}
.PopularPosts a{color:#fff!important;}
.PopularPosts a:hover{color:#222!important}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;text-decoration:none}
.PopularPosts ul li:before{content:counterundefinednum)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important}

/* Pengaturan Warna */
.PopularPosts ul li:nth-childundefined1){background-color:#f1c40f;}
.PopularPosts ul li:nth-childundefined2){background-color:#f39c12;}
.PopularPosts ul li:nth-childundefined3){background-color:#2ecc71;}
.PopularPosts ul li:nth-childundefined4){background-color:#27ae60;}
.PopularPosts ul li:nth-childundefined5){background-color:#e67e22;}
.PopularPosts ul li:nth-childundefined6){background-color:#d35400;}
.PopularPosts ul li:nth-childundefined7){background-color:#3498db;}
.PopularPosts ul li:nth-childundefined8){background-color:#2980b9;}
.PopularPosts ul li:nth-childundefined9){background-color:#ea6153;}
.PopularPosts ul li:nth-childundefined10){background-color:#c0392b;}
.PopularPosts .item-thumbnail{margin:0 0 0 0}
.PopularPosts .item-snippet{font-size:11px}

5. Klik simpan
6. Lalu reload blog teman-teman lalu lihat hasilnya

Bagi yang ingin melihat hasilnya, silahkan klik result dibawah

Bagaimana keren bukan? Silahkan untuk masalah pewarnaan dikreasikan sendiri agar lebih menarik dan enak dipandang oleh para pembaca blog teman-teman.
Read More

1/07/2017

Cara Membuat Button Material Design di Blogger

Cara Membuat Button Material Design di Blogger

Cara Membuat Button Material Design di Blogger - Button merupakan sebuah hal yang penting digunakan, apabila kita menggunakan blog yang bertema tentang download. Kali ini saya akan membagikan bagaimana cara membuat button dengan nuansa material design.

Cara Membuat Button Material Design di Blogger

1. Buka Blogger
2. Pilih Template > Edit HTML
3. Masukkan CSS berikut diatas kode ]]></b:skin> atau </style>
.buttonmaterialdesign {
display:inline-flex;
border-radius:4px;
cursor:pointer;
box-shadow:0 10px 15px 0 rgbaundefined0,0,0,0.16), 0 2px 10px 0 rgbaundefined0,0,0,0.12);
font-size:16px;
font-weight:700;
text-transform:uppercase;
color:#FFF!important;
background-color:#e74c3c!important;
text-shadow:none;
transition:all 1s;
margin:5px;
padding:15px 35px;
}

.buttonmaterialdesign:hover,.buttonmaterialdesign:hover,.buttonmaterialdesign.link:hover {
background:#64B5F6!important;
box-shadow:0 10px 15px 0 rgbaundefined0,0,0,0.16), 0 2px 15px 0 rgbaundefined0,0,0,0.12);
}

.buttonmaterialdesign:focus {
background:#1D7891;
}

4. Setelah itu klik simpan.
5. Buatlah postingan dan pilih tab HTML
6. Masukkan kode html berikut di bagian tab HTML (bukan Compose)
<div style="text-align: center;">
<a class="buttonmaterialdesign" href="https://www.salahtempat.com" target="_blank">Demo</a></div>

7. Selamat mencoba

Hasilnya akan seperti ini
Silahkan dikreasikan sendiri mulai edit border atau merubah warna sesuai yang diinginkan. Jika ada yang ingin ditanyakan, silahkan bertanya di kolom komentar. Terima kasih.
Read More

1/06/2017

Kenapa Masih Banyak Orang Yang Tidak Mau Bersyukur?

Kenapa Masih Banyak Orang Yang Tidak Mau Bersyukur

Kenapa Masih Banyak Orang Yang Tidak Mau Bersyukur - Sebentar, sudah berapa banyak nikmat Allah yang berikan kepada kita (manusia) ? Apakah kita bisa menghitung kan nikmat tersebut ? Tentu jawabannya TIDAK. Menghitung nikmat yang diberikan oleh Allah mulai dari lahir sampai sekarang, tidak ada yang bisa menghitung, dipaksakan menghitung pun tidak akan tepat.

Lalu nikmat apa saja yang Allah berikat kepada hamba-hamba nya?
  • Bernafas
  • Sehat Jasmani
  • Dan Sangat Banyak
Ada sebuah ayat dari Surat An Nahl dan tepatnya di ayat 18 yang berbunyi seperti ini.
Ayat Al-Qur'an
“Dan jika kamu menghitung-hitung nikmat Allah, niscaya kamu tak dapat menentukan jumlahnya. Sesungguhnya Allah benar-benar Maha Pengampun lagi Maha Penyayang.” (Qs. An Nahl: 18).

Setelah mendapatkan banyaknya nikmat yang diberikan oleh Allah, apa yang harus kita lakukan? Mensyukurinya atau mengkufurinya? Jika sudah bersyukur, apakah kita termasuk orang-orang yang sudah melakukan rasa syukur terhadap nikmat-nikmat yang telah diberikan?

Allah pun sangat menyukai hamba-hamba nya yang bersyukur dan tidak menyukai orang-orang yang tidak mensyukuri nikmatnya atau biasa disebut kufur. Berikut ada tiga hal jika manusia memang benar telah dikatakan bersyukur.

Tiga Hal Agar Bisa Bersyukur

1. Meyakini Semua Berasal dari Allah SWT

Bahwa orang-orang yang meyakini kalau nikmat-nikmat yang didapatkan dari Allah, dia merupakan kategori orang-orang yang telah bersyukur apa yang telah diberikan.
Ayat Al-Qur'an
“Dan apa saja nikmat yang ada pada kamu, maka dari Allah-lah (datangnya)”. (Qs. An Nahl: 53).

2. Mengucapkan Pujian kepada Allah SWT

Hamba yang bersyukur kepada Allah SWT ialah yang selalu mengucapkan pujian-pujian kepada Allah SWT. Dengan cara melakukan dzikir, shalawat dan kalimat-kalimat lainnya yang bermanfaat.
Ayat Al-Qur'an
“Dan terhadap nikmat Tuhanmu maka hendaklah kamu menyebut-nyebutnya (dengan bersyukur)”. (Qs. Adh Dhuha: 11).

3. Menggunakan Nikmat dengan Semestinya

Nikmat-nikmat yang diberikan Allah SWT kepada hamba-hamba nya sudah sangatlah banyak, tinggal bagaimana hamba nya tersebut ingin mempergunakan nikmat tersebut dengan kebaikan atau keburukan.

Selain itu ada juga beberapa hadits yang menganjurkan untuk kita bersyukur atas nikmat yang diberikan Allah SWT.

Hadits-Hadits Bersyukur

Hadits :
“Yang paling pandai bersyukur kepada Allah adalah orang yang paling pandai bersyukur kepada manusia.” (HR. Ath-Thabrani).
Hadits :
“Apabila seorang melihat orang cacat lalu berkata (tanpa didengar oleh orang tadi) :“Alhamdulillah yang telah menyelamatkan aku dari apa yang diujikan Allah kepadanya dan melebihkan aku dengan kelebihan sempurna atas kebanyakan makhlukNya”, maka dia tidak akan terkena ujian seperti itu betapapun keadaannya.” (HR. Abu Dawud).
Hadits :
“Dua hal apabila dimiliki oleh seseorang dia dicatat oleh Allah sebagai orang yang bersyukur dan sabar. Dalam urusan agama (ilmu dan ibadah) dia melihat kepada yang lebih tinggi lalu meniru dan mencontohnya. Dalam urusan dunia dia melihat kepada yang lebih bawah, lalu bersyukur kepada Allah bahwa dia masih diberi kelebihan.” (HR. Tirmidzi).

Apakah kamu sudah bersyukur hari ini dan sekarang juga? Kalau belum, mari intropeksi diri kenapa kita tidak bersyukur? Semoga kita bisa selalu bersyukur dan menggunakan nikmat-nikmat Allah untuk hal-hal kebaikan.
Read More