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

Cara Membuat Breadcrumb Tampil di Blogspot

Breadcrumbmerupakan sebuah fitur navigasi yang biasanya terletak di atas atau di bawah judul postingan. Fitur yang biasa dikenal dengan nama breadcrumbini berisikan kategori atau label dari postingan dan bisanya selalu diawali dengan tombol menuju home (halaman depan blog), seperti tampak berikut. 

Breadcrumb disebut sebagai navigasi seo sebaris dengan tautan internal sehingga memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke halaman depan dengan cepat. 

Oleh sebab itu semakin relevan sebuah label dengan isi postingan (artikel) maka akan semakin mendapatkan kesempatan tampil di halaman depan google.

Langsung saja pada langkah-langkah pembuatan breadchumb ini : :

• Login dulu ke Blogger.
• Klik Template, kemudian  Edit HTML.
• Letakkan kode berikut ini tepat sebelum  kode ]]></b:skin> 

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef}

• Setelah itu, cari kode seperti ini :

<div class='post hentry'>

• Letakkan kode berikut ini tepat setelah kode <div class='post hentry'>

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'> Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if> </b:loop> </b:if> &#187; <data:post.title/> </div> </b:if> </b:if>

Simpan Template.

Segera lihat hasilnya

CARA LAIN

Langkah-langkahnya:

• Login ke Blogger.
• Klik Expand Template, Edit HTML.
• Letakkan kode berikut ini tepat sebelum  kode ]]></b:skin> 

.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px dotted #ccc;font-weight:normal}

Selanjutnya cari kode ini <b:includable id='main' var='top'> jika sudah ketemu gantilah dengan kode berikut:

 <b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'><b:if cond='data:blog.pageType == &quot;static_page&quot;'><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div><b:else/><b:if cond='data:blog.pageType == &quot;item&quot;'><!-- breadcrumb for the post page --><b:loop values='data:posts' var='post'><b:if cond='data:post.labels'><div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'><span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span><b:loop values='data:post.labels' var='label'>&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span></b:loop>&#187; <span><data:post.title/></span></div><b:else/><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div></b:if></b:loop><b:else/><b:if cond='data:blog.pageType == &quot;archive&quot;'><!-- breadcrumb for the label archive page and search pages.. --><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span></div><b:else/><b:if cond='data:blog.pageType == &quot;index&quot;'><div class='breadcrumbs'><b:if cond='data:blog.pageName == &quot;&quot;'><span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span><b:else/><span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span></b:if></div></b:if></b:if></b:if></b:if></b:if></b:includable><b:includable id='main' var='top'><b:include data='posts' name='breadcrumb'/>

Save Template (selesai).

Namun demikian untuk melihat penggunaan kode tersebut ada error atau tidak kunjungi alamat ini Testing Tool - Google Developers.

Ikuti langkah-langkahnya sehingga hasilnya sperti berikut, 

Berarti sudah benar dan segera lihat hasilnya, namun jika belum perbaiki kesalahan yang ditunjukkan.

Read More

Cara Merubah Ukuran, Jenis Font dan Warna pada Judul Postingan

Cara Merubah Font, Ukuran, dan Warna pada Judul Postingan,  untuk melakukannya membutuhkan ketelatenan, ketekunan terutama ketelitian dalam mencemati beberapa kode HTML pada template blog yang dihadapi. Apabila telah memiliki ketelatenan, ketekunan terutama ketelitian mari melanjutkan bagaimana Cara Merubah Font, Ukuran, dan Warna pada Judul Postingan.

 

Langkah-langkahnya:

• Login di Blogger
• Di menu drop down, klik template - Edit HTML
• Lakukan backup template lebih dahulu (untuk menghindari error sebaiknya backup terlebih dahulu template blog, dan jika ada kesalahan maka template bisa dikembalikan seperti semula.)
• Cari kode beikut ini :

.post h3 {text-shadow: 1px 1px 3px #fff;
margin:.25em 0 15px;border-bottom:1px dashed $bordercolor;
padding:1px 0px 4px;
font:normal normal 24px Oswald;
font-weight:normal;
line-height:1.4em;
color:#333;
font:$titlefont;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
font:normal normal 24px Oswald;color:#333;
}
.post h3 strong, .post h3 a:hover {
color:#c22400;
}

Ada kemungkinannya kode dalam template blog tidak sama persis dengan di atas, karena itu bisa dicari saja yang mirip, secara default biasanya kode .post h3 akan selalu ada, jadi kalau tidak ketemu cari caja kode .post h3 {........sampai tanda terakhirnya }.
 Jika sudah ketemu kode tersebut, maka hapuslah kode tersebut dan ganti dengan kode berikut :

.post h3 { margin: .25em 0 0; padding: 0 0 4px; color: $titlecolor; font: $posttitlefont; } .post h3 a, .post h3 a:visited, .post h3 strong { text-decoration: none; color: $titlecolor; } .post h3 strong, .post h3 a:hover { color: $titlehovercolor; }

Berikutnya cari lagi kode /* Variable definitions dan letakan kode berikut tepat dibawah kode /* Variable definitions.

<Variable name="titlecolor" description="Post Title Color"type="color" default="#c60" value="#cc6600"><Variable name="titlehovercolor" description="Post Title Hover Color"type="color" default="#c60" value="#cc6600"><Variable name="posttitlefont" description="Post Title Font"type="font" default="normal normal 18px 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 18px 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">

Lakukan save template terlebih dahulu, berikutnya siap melakukan  Cara Merubah Font, Ukuran, dan Warna pada Judul Postingan dengan cara berikut.

• Selanjutnya Pilih Template >> Sesuaikan >> Tindak Lanjut

•  Silahkan atur sendiri Ukuran dan Warna Font sesuai dengan keinginan.

Nah itulah Cara Merubah Ukuran Dan Warna Font Judul Postingan yang bisa saya sharekan, bila ada kekurangan silahkan untuk diperbaiki. terimakasih

Read More

Tutorial Blog

Read More

Isi Animasi

Animasi

Read More

Daftar Isi

Read More

Membuat Gambar Berputar Dan Membesar Ketika Disentuh Mouse

Membuat Gambar Berputar Dan Membesar Ketika Disentuh Mouse - Ini tutorialnya sentuhan mouse pada gambar yang ada dalam postingan akan memberikan Efek Zoom, membesar dan berputar 360 derajad. Dan jika sentuhan mouse lepas dari gambar, maka gambar tersebut akan kembali seperti semula.
Untuk melihat efek sentuhan mouse pada gambar sebagaimana dimaksud dalam tutorial ini, sobat arahkan penunjuk mouse pada gambar disamping, maka akan terlihat efek yang terjadi pada gambar tersebut, yakni akan berputar 360 derajad disertai ukurannya membesar.. 


Adapun langkah-langkahnya adalah seperti berikut ini:
1. Login dulu di akun blog anda
2. Klik Template, dan pilih/klik Edit HTML dan lanjutkan
3. Anda cari kode </head> gunakan Ctrl F
5. Setelah ketemu anda copy paste code di bawah ini tepat di atas kode </head>

     <style>#oktri img{-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out;}
    #oktri img:hover{ -o-transform: scale(1.5) rotate(360deg); -moz-transform: scale(1.5) rotate(360deg); -webkit-transform: scale(1.5) rotate(360deg);}</style>

   seperti taampak berikut:

6. Klik Save / simpan template.
Langkah selanjutnya untuk penempatan gambar dalam postingan.
1. Sobat harus menambahkan kode  <div id="oktri"> sebelum url gambar dan jangan lupa ditutup dengan kode </div> contoh seperti di bawah ini:

 <div id="oktri">
    <a href="http://memperindahblogku.blogspot.co.id/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvNu9sZkMC9UyETVj6-BcjDsoxC-b2fB-Fh8y3D4yf8iyqwLAWjS9zYPKfYJmn0_yGk8ztRVhsXP7tf9kkfq3LDJoUu-q2cXX7PbG4FpmzZUPOdqCSFq5tsZ7FZ2gOmBq-Pn3rxZ1HADy8/s200/Foto024.jpg" /></a></div>

keterangan:

1. kode berwarna merah adala kode pembuka dan penutup
2. kode berwarna biru silahkan ganti dengan URL blog Anda dan URL gambar yang ingin Anda pasang di dalam postingan.
3. Jika sudah selesai klik Publikasikan. 
4. Lihat hasilnya.

Demikianlah tips "Membuat Gambar Berputar Dan Membesar Ketika Disentuh Mouse".
Semoga bermanfaat.

Read More

Cara Menambahkan Garis Bawah Pada Judul Postingan dan Sidebar

Cara Menambahkan Garis Bawah Pada Judul Postingan dan Sidebar. Salah satu cara memperindah tampilan pada postingan adalah menambahkan garis bawah pada judul postingan dan sidebar. Dengan langkah-langkah yang sangat sederhana singkat dan mudah seperti berikut.

Menambahkan Garis Bawah Pada Judul Postingan

1. Login  ke akun blogger sobat
2. Klik Template
3. Pilih Edit HTML
4. Cari kode .post h3{ (cari berdasar kan .post h3)
5. Kemudian tambahkan kode di bawah ini yang berwarna biru seperti contoh berikut:

.post h3{
border-bottom : 4px double #cadaef ;  
margin-bottom:7px;
.........
}

      6. Simpan dan Lihat Hasilnya

Menambahkan Garis Bawah Pada Judul Sidebar

1. Login  ke akun blogger sobat
2. Klik Template
3. Pilih Edit HTML
4. Cari kode .sidebar h2{ (cari berdasar kan .sidebar h2{)
5. Kemudian tambahkan kode di bawah ini yang berwarna biru seperti contoh berikut:

.sidebar h2{
border-bottom : 4px double #cadaef ;  
margin-bottom:7px;
.......
}

    



      6. Simpan dan Lihat Hasilnya
  
Warna biru merupakan jenis garis yang digunakan,  bisa diganti sesuai keinginan seperti kode dibawah ini:

1. border-bottom:1px dotted silver; 
2. border-bottom:1px solid black; 
3. border-bottom : 4px double #cadaef ; 

Keterangan kode :
dotted adalah garis yang putus-putus
solid adalah garis yang tidak putus-putus
double adalah dua garis

Demikian Cara Menambahkan Garis Bawah Pada Judul Postingan dan Sidebar,

Read More