Cara Mudah Menulis Huruf Arab Untuk Postingan Blog

Selamat sore sob...
Semoga dalam keadaan sehat wal'afiat...

Pada kesempatan ini saya akan sahare tentang Cara Mudah Menulis Huruf Arab Untuk Postingan Blog, sebuah cara yang mungkin sobat cari untuk keperluan memosting artikel di blog. Yang bertujuan memberikan informasi berkenaan topik yang diberikan di dalam blog nya masing-masing. Khususnya blog yang bertopik agama islam.

Tentunya kita harus tahu sebagai admin blog, perihal cara menulis tulisan Arab di kolom postingan blog sebelum kita publikasikan, agar para pengunjung dan pembaca blog kita bisa membacanya dengan jelas dan mudah. Sehingga para pembaca tersebut betah mencari konten-konten yang kita suguhkan didalam blog.

Okeh langsung saja, caranya adalah sebagai berikut :

1. Sobat kunjungi situs ini.
* Sobat akan bertemu dengan tampilan seperti ini :

2. Klik Bagian Edit nya untuk menggunakan Harokat.

* Sobat akan bertemu dengan tampilan seperti ini :

3. Klik pada bagian click here to show the arabic keybord. Dan mulailah membuat tulisan Arab nya.

Apabila sobat tidak akan menggunakan Harokat, abaikan no 3. Silahkan saja langsung membuat tulisan arab nya.

4. Setelah beres membuat tulisan Arab nya, tinggal Copy hasil tulisan Arab nya.

5. Dan Paste kan ke halaman entri postingan yang biasa kita gunakan. Paste nya di bagian HTML, dan atur ukurannya.

* Contoh :

<div style="font-family: 'traditional arabic'; font-size: 23px;">
بِسْــــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم
</div>

Maka akan setelah di Publikasikan, akan tampil seperti ini :

بِسْــــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم 

Gimana sob, mudahkan caranya??...

Demikianlah postingan tentang Cara Mudah Menulis Huruf Arab Untuk Postingan Blog, semoga dapat membantu dan bermanfaat.

Cara Menampilkan Postingan Terbaru Dengan Gambar Thumbnail di Blog

Selamat siang sob...
Semoga dalam keadaan sehat dan optimis...

Pada kesempatan kali ini saya kan share Cara Menampilkan Postingan Terbaru Dengan Gambar Thumbnail di Blog. Suatu cara yang mungkin sobat cari untuk menampilkan recent post postingan blog seperti tampilan recent post di blog ini.

Cara yang satu ini merupakan cara menampilkan recent post dengan adanya foto thumbnail. Jadi para pengunjung blog akan bisa membaca dan melihat foto disetiap postingan yang ada di bagian recent post yang di tempatkan di bagian sidebar blog. Caranya mudah saja, sobat tinggal ikuti langkah-langkah caranya sebagai berikut :

1. Sign In ke Blogger.com.
2. Klik dibagian Tata Letak >>Tambahkan Gedget>>HTML/JavaScrift.
3. Copy dan Paste kan kode diwah ini.

Catatan!

<style type='text/css'> img.recent_thumb {padding:1px;width:75px;height:75px;border:1px solid silver;border-radius:50%;float:left;margin:5px;} .recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;} ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;} .recent_posts_with_thumbs a {text-decoration:none;} .recent_posts_with_thumbs strong {font-size:10px;}</style> <script style='text/javascript' src='https://cdn.rawgit.com/dedi96/keneono/7abd0c02/recentpost.js'></script> <script style='text/javascript'> var numposts = 5; var showpostthumbnails = true; var displaymore = false; var displayseparator = true; var showcommentnum = true; var showpostdate = true; var showpostsummary = false; var numchars = 100;</script> <script src='https://agunbharok.blogspot.co.id/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

4. Klik Simpan.

* ganti tulisan merah dengan url blog sobat.

Demiikian post tentang Cara Menampilakan Postingan Terbaru Dengan Gambar Thumbnail di Blog, semoga dapat membantu dan bermanfaat..

Cara Memasang Widget Facebook Like Box di Blog Terbaru

Selamat pagi sob,,
Semoga dalam keadaan sehat wal'afiat...

Sebagaimana yang sering kita jumpai di setiap blog memiliki Like Box Facebook yang berasal dari Halaman Facebook atau Fans Page yang berkaitan dengan blognya ,jadi pada kesempatan kali ini saya akan share bagaimana langkah-langkah cara nya.Ya biar blog yang kita miliki terpasang Like Box Facebook nya.Supaya blog kita bisa menjaring pemirsa dalam eksistensidi media sosial dan juga sekaligus menambah cantik blog yang kita miliki.

Oke langsung saja,berikut langkah-langkah caranya :

1. Sobat harus mempunyai Halaman Facebook/Fans Page nya terlebih dahulu.
2. Log in Facebook dan kunjungi url ini
3. Silahkan isi kolom-kolom yang disediakan.

4. Klik Dapatkan Kode nya,lalu Copy.
5. Pasang Widget Facebook Like Box di Blog dengan Log in di Blog sobat.
6. Dashboard > Tata Letak > Klik Tambahkan Widget / Gedget.
7. Pilih Widget HTML / JavaScript.
8. Paste Kode yang sobat dapatkan tadi.
9. Klik Save dan lihat hasilnya.

Demikian post tentang Cara Memasang Widget Facebook Like Box di Blog Terbaru,semoga dapat membantu dan bermanfaat.

Cara Membuat Dan Menampilkan Widget Label Cloud Cantik Pada Blogger

Selamat siang sob,,
Semoga dalam keadaan berbahagia...

Pada kesempatan kali ini saya akan share post tentang Cara Membuat Dan Menampilkan Widget Label Cloud Cantik Pada Blogger,yang mana barangkali sobat semua ingin mencobanya dan menjadikan tampilan labels di blog yang akan dibuat atau malah yang sudah dibuat.Agar pengunjung blog yang sedang singgah dan bertamu merasa betah karena tampilan labels nya enak dilihat.Hehe

Tanpa panjang lebar,,silahkan ikuti cara-cara nya :

1. Masuk akun Blogger sobat.
2. Sobat harus pasang Labels terlebih dahulu. >>pilih tata letak >> Tambahkan Gedget >> Labels.
* Lihat screenshot ini !!

  

3. Pilih Tamplate >> Edit HTML

4. Cari kode " ]]></b:skin> ",untuk mempercepat gunakan dengan Ctrl+F pada Keyboard sobat.

5. Jika sudah ketemu,Copy dan Paste kan kode dibawah ini,dan letakan di atas kode "]]></b;skin>".

/*-----Labels Cloud Styled widget by proBlogiz.blogspot.com----*/ .label-size{ margin:0; padding:0; position:relative; } .label-size a , .label-size span{ float:left; height:24px; line-height:24px; position:relative;font-size:12px; margin-bottom: 9px; margin-left:20px; padding:0 10px 0 12px; background:#0089e0; color:#fff; text-decoration:none; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px; border-bottom-right-radius:4px; -moz-border-radius-topright:4px; -webkit-border-top-right-radius:4px; border-top-right-radius:4px; } .label-size a:before , .label-size span::before{ content:""; float:left; position:absolute; top:0; left:-12px; width:0; height:0; border-color:transparent #0089e0 transparent transparent;border-style:solid; border-width:12px 12px 12px 0; } .label-size a:after , .label-size span::after{ content:""; position:absolute; top:10px; left:0; float:left; width:4px;height:4px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; background:#fff; -moz-box-shadow:-1px -1px 2px #004977; -webkit-box-shadow:-1px -1px 2px #004977; box-shadow:-1px -1px 2px #004977; } .label-size a:hover , .label-size span::hover { background:#555;} .label-size a:hover:before , .label-size span::hover::before{border-color:transparent #555 transparent transparent;}

6. Simpan Tamplate.

Demikian lah postingan tentang Cara Membuat Dan Menampilkan Widget Label Cloud Cantik Pada Blogger,semoga dapat bermanfaat.

Salam Zae

Cara Membuat Scroll Pada Entri Populer Di Blogspot

Pada postingan sebelumnya saya sudah share tentang dunia blog yang berjudul Cara Membuat Kolom Scroll Pada Arsip Blog Di Blogspot,nah sekarang saya akan share lagi tentang bagaimana cara membuat scroll pada entri populer,di blogspot juga.

 

Cara ini bertujuan untuk membuat tampilan blog yang ringkas dan enak untuk dipandang,jadi akan terlihat rapih dan menghemat tempat pastinya.Blog sobat akan kelihatan profesionall dangan memakai scroll.Untuk membuat scroll ini sangat mudah dan gampang sekali sob.

Screenshot :

Untuk membuatnya ikuti langkah-langkah berikut ini :

1.Login ke  akun Blogger sobat.
2.Sobat harus pasang Entri populer nya terlebih dahulu.
>>pilih tata letak >> Tambahkan Gedget >> Pilh Entri Populer.

3.Pilih Tamplate >> Edit HTML

4.Cari kode " ]]></b:skin> ",untuk mempercepar gunakan dengan Ctrl+F pada Keyboard sobat.

5.Jika sudah ketemu,Copy dan Paste kan kode dibawah ini,dan letakan di atas kode "]]></b;skin>".

Klik show untuk melihat

#PopularPosts1 .widget-content{ height:170px; width:auto; overflow:auto; }

6.Simpan Tamplate

Kode diatas juga berlaku untuk Pemasangan Pcroll  pada Arsip Blog ,Label dan Categori Blog.Sobat bisa mengganti tulisan Entri populer dengan kata-kata yang lain sesuai dengan widget sidebar blog sobat.Untuk mendapatkan ukuran scroll yang diinginkan sobat bisa mengganti Ukuran dengan ukuran yang sobat inginkan.
Sebaiknya sebelum menyimpan,lakukan pratijau terlebih dahulu,untuk melihat pemasangan kode diatas sudah benar apa belum.Kalau sudah berhasil klik Simpan Template.

Demikian lah postingan tentang dunia blog ini saya tulis,semoga dapat bermanfaat.

Salam Zae

Cara Membuat Kolom Scroll Pada Arsip Blog Di Blogger

Pada kesempatan ini saya akan share bagaimana menjadikan efek scroll pada arsip blog.
Umumnya,cara ini sering digunakan para blogger untuk mengubah tampilan arsip pada blognya yang sangat panjang,tapi agar tidak terlihat panjang dan agar bisa di persingkat,maka para blogger suka membuat cara yang ini.

Screenshot :

Cara nya cukup mudah sekali,sobat tinggal mempraktekanya mengikuti cara sebagai berikut :

1.Pasang arsip blog sobat dahulu di Halaman Dasbor Blogger.
>>> Pilih Tata Letak >>> Tambahakan Gedget >>> Pilih Arsip Blog.
2.Sudah terpasang sesuai dengan bentuk dan tempat keinginan sobat,kembali lagi ke Halaman Dasbor Blogger.
>>> Tamplate >>> Pilih Edit HTML >>>Cari Cari kode berikut <div id='ArchiveList'> atau ArchiveList agar lebih mudah gunakan ctrl+F.
3.cari kode berikut ini :

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>

 4.Tambahkan kode dibawah ini :

<div style='overflow:auto; width:ancho; height:200px;'> dan </div>

4.Penerapanya seperti contoh dibawah ini :

 <b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:200px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul>
<li expr:class='&quot;archivedate &quot; + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
<span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:loop>
</b:includable>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == &quot;expanded&quot;'>
<a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; + &quot;&amp;dir=close&amp;toggle=&quot; + data:interval.toggleId + &quot;&amp;toggleopen=&quot; + data:toggleopen'>
<span class='zippy toggle-open'>&#9660; </span>
</a>
<b:else/>
<a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; + &quot;&amp;dir=open&amp;toggle=&quot; + data:interval.toggleId + &quot;&amp;toggleopen=&quot; + data:toggleopen'>
<span class='zippy'>
<b:if cond='data:blog.languageDirection == &quot;rtl&quot;'>
&#9668;
<b:else/>
&#9658;
</b:if>
</span>
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
</b:widget>

 7. Kode warna Biru dan Merah adalah kode yang ditambahkan kedalam script tersebut, 200 adalah tingginya, dan kita bisa ubah seseuai selera.
 8. Simpan jika sudah selesai.

Semoga Bermanfaat,,
Salam Zae