Cara Membuat Teks Berbingkai Dalam Postingan Blog

Cara Membuat Teks Berbingkai Dalam Postingan Blog 

Kadangkala di dalam postingan kita ingin membuat sekelompok teks berbingkai (teks dalam kotak). Bukan hanya teks saja namun bisa saja link maupun gambar berbingkai, dan lain-lain. Ada banyak cara / script yang bisa anda gunakan untuk membuat kotak teks atau teks berbingkai (text box) tersebut. Di bawah ini merupakan salah satu cara membuat kotak teks (text box).


Adapun langkah-langkahnya adalah seperti berikut ini:
1. Login dulu di akun blog anda
2. Klik Entri Baru, dan pilih/klik HTML dan lanjutkan
3. Lakukan copy paste code di bawah ini pada mode HTML (bukan Compose)

<p style="border: 1px solid rgb(204, 204, 204); padding: 15px; display: block; background-color: #cfe2f3; text-align: center;">
ISI TEKS DI DALAM KOTAK
</p>

( Gantilah tulisan berwarna biru sesuai dengan kalimat teks Anda ) 

Keterangan:

• Teks rata tengah = text-align: center; center bisa diganti dengan left, right, justify
• Background warna = background-color: #cf32f3 bisa Anda ubah sesuai warna yang di inginkan
• Border = border: 1px solid, bisa Anda atur ketebalan garis luarnya

4. Klik Simpan (Save) postingan anda
5. Lihat hasilnya.


Sehingga akan tampak seperti berikut:

ISI TEKS DI DALAM KOTAK

Dalam mode Compose anda bisa mengedit atau mengganti  teks (teks yang berbingkai) di atas dengan teks lain yang anda inginkan. Langkah 1 s.d. 5 tersebut di atas bisa anda terapkan pada postingan lama (tidak harus postingan baru).
Begitulah Cara Membuat Teks Berbingkai Dalam Postingan Blog, semoga bermanfaat.

Read More

Membuat Bingkai (Kotak) Untuk Sebuah Tulisan

TULISAN ATAU GAMBAR
 Isi tks jika melebihi kotak ini akan muncul scroll bar
Lihat Scriptnya klik mode HTML



 

Read More

Cara Membingkai Area Posting dan Sidebar

Cara Membingkai Area Posting dan Sidebar. Dengan memberikan bingkai pada sekelompok teks maupun gambar yang ada pada postingan maupun pada sidebar, maka blog akan tampak menjadi rapi, menarik dan menyenangkan. Hasil yang dimaksud seperti yang ditunjuk oleh panah pada gambar di samping (bingkai pada sidebar). Karena itu, lagsung saja dipraktekkan seperti langkah berikut. 

Dengan cara yang sangat mudah dan sederhana seperti berikut, semua Gadget yang telah ada maupun yang akan ditambahkan pada sidebar akan menjadi berbingkai secara otomatis. Adappun langkah-langkah  Cara Membingkai Area Posting bisa diikuti seperti berikut ini.

Cara Membuat Border / Frame / Bingkai Pada Area Posting (main wrapper)

1)..Pertama login ke akun blogger atau dashboard.

2)..Pilih menu Template –> Edit HTML

3)..Selanjutnya cari code ini : .post { tekan CTRL+F untuk memudahkan mencari

4)..Tambahkan kode dibawah ini tepat dibawah code .post {

padding: 5px; 
Border-top: 3px solid #000000; 
Border-bottom: 3px solid #000000; 
Border-left: 3px solid #000000; 
Border-right: 3px solid #000000; 
Margin-bottom: 10px;

5)..Lakukan preview atau pratinjau dulu, jika sudah ok Lalu simpan template

Cara membuat Border / Frame / Bingkai Pada Sidebar BLOG

1).. login ke akun blogger atau dashboard.

2)..Pilih menu Template –> Edit HTML

3)..Cari code ini : ]]></b:skin>

      Agar lebih mudah mencari tekan control+F (contoh hasil penemuan kode seperti gambar berikut)

4)..Tambahkan kode dibawah ini tepat diatas code ]]></b:skin>

sidebar .widget{

padding:5px 5px 5px 5px;

border:1px solid #C11209;

margin-bottom:5px

5)..Lakukan preview atau pratinjau dulu, jika sudah ok Lalu simpan

Keterangan : Semua angka dan warna bisa diganti sesuai selera

Padding: 5px; = Jarak antara text post dengan garis pinggir 5px; makin tinggi angka jarak dari tepi akan semakin lebar

Border-top: 3px solid #000000; = garis pinggir atas 3px semakin tinggi angka, maka akan semakin tebal garisnya

Border-bottom: 3px solid #000000 ; = garis pinggir bawah 3px

Border-left: 3px solid #000000 ; = garis pinggir kiri 3px

Border-right: 3px solid #000000 ; = garis pinggir kanan 3px

Margin-bottom: 10px; = jarak antar post yang satu dengan lainnya 10px

Code warna #000000 adalah warna hitam

Catatan : Bentuk Frame bisa diganti sesuai selera

solid : bingkai menjadi garis biasa ( ___________ )

dotted : bingkai menjadi titik-titik ( .............................. )

dashed : bingkai menjadi garis putus-putus ( --------------------- )

double : Bingkai 2 garis biasa ( = )

Ridge

Groove

Inset

Outset

Radius ( Sudut melengkung )

dan lain-lain

Demikian artikel mengenai Cara Membingkai Area Posting dan Sidebar, semoga saja bisa memberikan manfaat siapa saja yang memerlukan tutorial ini.

Read More

Membuat Tulisan atau Gambar Berbingkai

TULISAN ATAU GAMBAR
Tulissan
atau Gambar
Scriptnyadi bawah ini

Kodenya ini

<div style="background-color: #fbfbee; border: 1px solid #ccc; height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;">
TULISAN ATAU GAMBAR<br />
Tulissan<br />
atau Gambar<br />
Scriptnyadi bawah ini </div>

Read More

Cara Membuat Bingkai Untuk Widget Yang Terdapat Di Area Footer Halaman Blog

Cara Membuat Bingkai Untuk Widget Yang Terdapat Di Area Footer Halaman Blog

1. buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > 

2. cari kode ]]></b:skin> dan kemudian sisipkan rangkaian kode CSS seperti dalam contoh berikut ini tepat di atasnya.

.footer-outer .widget h2 {
  color: #ffffff;
  text-align: center;
  background: #000000;
  border: 1px solid #ffffff;
  border-radius: 5px;
  padding: 5px;
  margin: 0px;
}

.foot.section .widget-content {
  color: #000000;
  text-align: center;
  background: #ffffff;
  border: 1px solid #000000;
  border-radius: 5px;
  padding: 5px;
  margin: 0px;
  height: 150px;
  overflow: auto;
}

.foot.section .widget.Attribution .widget-content {
  padding: 0px;
  margin: 0px;
  height: auto;
  border: none;
  background: inherit;
}

Read More

Membuat TeksArea

TULISAN ATAU GAMBAR

Read More

Membuat Kotak Sederhana

ARTIKEL PENTING
Kotak ini dibuat dengan cara membuka posting baru (awal) yang masih kosong kemudian klik mode HTML dan bukan Compose.
Kemudian kopykan kode di bawah ini.

<div class="MsoNormal" style="background: white; line-height: normal; margin-bottom: 7.5pt; mso-outline-level: 1;">
<br /></div>
<div style="background-color: lemonchiffon; border: 2px solid #90EE90; height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;">
<span style="font-family: &quot;verdana&quot; , sans-serif;"><b>ARTIKEL PENTING</b></span><br />
Tuliskan Teks atau Tempatkan Gambar Disini
<span style="font-size: x-small;"><span style="font-family: &quot;verdana&quot; , sans-serif;"><!--[if gte mso 9]><xml>
 <o:OfficeDocumentSettings>
  <o:AllowPNG/>
 </o:OfficeDocumentSettings>
</xml><![endif]--></span></span></div>

ARTIKEL PENTING
Tuliskan Teks atau Tempatkan Gambar Disini

Tuliskan Teks atau Tempatkan Gambar Disini. di tmpat teks yang berwarna merah inilah ganti dengan apa saja yang ingin  dimasukkan di dalam kotak

Read More

Membuat Tampilan LABEL Berbingkai

Langkah-langkahnya adalah:1. Login dulu ke blog 2. Pilih blog yang akan dipasang style ini3. Klik opsi TATA LETAK >> ADD GADGET >> LABEL  (Pada opsi ini silahkan centang model label cloud) >> Klik save4. Pilih opsi TEMPLATE >> EDIT HTML >> LANJUTKAN5. Cari kode ini   ]]></b:skin>6. Paste kode css3 di bawah ini tepat di atas kode tersebut.

/* Custom Labels Cloud widget by www.MyBloggerTricks.com
-------------------------------------------------------------*/
.label-size{
 margin:0 2px 6px 0;
 padding: 3px;
 text-transform: uppercase;
 border: solid 1px #C6C6C6;
 border-radius: 3px;
 float:left;
 text-decoration:none;
 font-size:10px;
 color:#666;
}

.label-size:hover {
 border:1px solid #6BB5FF;
 text-decoration: none;
 -webkit-transition: all 0.5s ease-out; 
    -moz-transition: all 0.5s ease-out; 
      -o-transition: all 0.5s ease-out; 
     -ms-transition: all 0.5s ease-out; 
         transition: all 0.5s ease-out;
 -webkit-transform: rotate(7deg); 
    -moz-transform: rotate(7deg); 
     -ms-transform: rotate(7deg); 
      -o-transform: rotate(7deg); 
         transform: rotate(7deg); 
 filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
 zoom: 1; 
}

.label-size a  {
 text-transform: uppercase;
 float:left;
 text-decoration: none;
}
.label-size a:hover  {
 text-decoration: none;
}

Selesai kemudian lihat hasil tampilannya.

Read More