Menambahkan Basmalah dan Hamdalah di Awal dan Akhir Artikel

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

Salam sahabat blogger, alhamdulillah dapat menyapa anda kembali, semoga dimanapun anda berada selalu dalam penjagaan-Nya. Setelah beberapa waktu sempat fakum, request tutorial yang disampaikan lewat komentar atau emailpun akhirnya menumpuk. Mohon maaf juga untuk pertanyaan-pertanyaan yang belum sempat terjawab satu persatu. Hari ini dan kedepan insyaAllah saya ingin mencicil request sahabat blogger, tapi mohon jangan ditambah dulu sebelum PR yang satu ini selesai! Baiklah tutorial kali ini saya ingin mengetengahkan cara menambahkan basmalah dan hamdalah diawal dan akhir artikel blog.
Hampir setiap muslim pasti mengenal kalimat basmalah dan hamdalah. Kalimat pendek sarat makna ini biasanya dipakai ketika akan memulai suatu pekerjaan dan usai mengerjakannya. Karena bacaannya yang pendek ini pula, banyak yang menyepelekan kalimat basmalah dan hamdalah. Padahal jika dikaji lebih mendalam, di samping sebagai sarana meraih cinta Allah, ternyata kedua kalimat ini mengandung kekuatan luar biasa dalam meraih kesuksesan dan keberkahan hidup. Tidaklah mengherankan jika para Nabi, Rasul, dan orang-orang sukses selalu membaca basmalah setiap memulai aktivitasnya dan mengakhiri dengan hamdalah sebagai ungkapan syukur.
Tapi tak menambahkan kedua kalimat ini dalam artikel yang anda tulis, dan mencukupkannya dilisan sendiri saja tentu juga sudah cukup dan baik karena menambahkan keduanya dipostingan bukanlah kewajiban.
Baiklah cukup untuk pengantar, berikut cara menambahkan basmalah dan hamdalah diawal dan akhir posting blog

• Setelah login ke akun blogger anda
• Pada dasbor >> klik  tab template >> Edit HTML
• Klik tab drop down Lompat ke widget >> Blog1 >> Klik tanda panah kecil disamping kode dengan id Blog1
• Klik tanda panah kecil disamping kode <b:includable id='post' var='post'>
• Click Ctrl+F >> cari kode <data:post.body/>

Untuk menambahkan basmalah diawal posting tambahkan kode berikut diatas <data:post.body/>

<div style='text-align: center;'><span style='font-size: medium;'><span class='messageBody' data-ft='{&quot;type&quot;:3}'><span dir='rtl'>ب&#1616;س&#1618;ــــــــــــــــم&#1616; اﷲ&#1616;الر&#1614;&#1617;ح&#1618;م&#1614;ن&#1616; اار&#1614;&#1617;ح&#1616;يم</span></span></span></div><br/>

Untuk menambahkan hamdalah diakhir postingan tambahkan kode berikut dibawah <data:post.body/>

<div align='center'><span style='font-size: medium;'>ٱل&#1618;ح&#1614;م&#1618;د&#1615; ل&#1616;ل&#1614;&#1617;ه&#1616; ر&#1614;ب&#1616;&#1617;
ٱل&#1618;ع&#1614;&#1648;ل&#1614;م&#1616;ين</span></div>

• Simpan template dan lihat hasilnya di blog anda.

Demikian tutorial kali ini, cara menambahkan basmalah dan hamdalah diawal dan akhir artikel blog. Semoga bermanfaat dan berkah.
Terimakasih.

Membuat Social Profile Widget Keren: Metro UI

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

Alhamdulillah setelah sebelumnya saya posting tutorial membuat modifikasi pada widget profil blogger, kali ini saya ingin mengetengahkan cara membuat widget profil sosial networking menarik dengan colored style. Widget ini dinamai Metro UI oleh designernya Vinay Prajapati.

View Demo

Fitur

• Meliputi 7 jejaring social yang paling sering digunakan
• Efek hover dan desain yang elegan,
• Sangat rapi dan bersih
• Tidak ada JavaScript, No Jquery, murni dengan CSS

Cara menambahkan widget ini ke blog

Untuk menginstal widget ini ke blog sangat mudah, baik blog anda dengan flatfrom blogger, wordpress atau layanan blogging lainnya dimana style CSS dan HTML diterima pada widget atau template. Anda hanya perlu menambahkan kode gadget/widget pada bagian HTML/JavaScript.
Step by step for blogger

• Pada dasbor >> Masuk menu Tata Letak >> Tambah Gadget >> Pilih HTML/JavaScript
• Copy dan paste kode berikut pada kolom konten:

<div class='metro-social'>
<li><a class="fb" href=http://www.facebook.com/amatullah.syukur rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/amatullahsyukur></a></li>
<li><a class="gp" href="https://plus.google.com/116382152511220195182"></a></li>
<li><a class="pi" href=http://pinterest.com/amatullahsyukur rel="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/in/amatullahsyukur rel="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/amatullahsyukur></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/amatullahsyukur rel="nofollow"></a></li>
</div>
<style>
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .gp{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38}
.metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}
</style>

Kustomisasi: Ganti link profil saya dengan link profil milik anda.

• Simpan dan lihat hasilnya diblog anda.

Kontes SEO Terbaru Juli sampe Oktober 2013

Kebetulan anne lagi searching-searching tentang kontes SEO, akhirnya nemun juga nih kontes seo terbaru bulan juli 2013 yaitu Kontes seo dari Agen Bola Terpercaya 828bet.com. Dari informasi yang anne dapet Kontes seo ini dilaksanakan pada tanggal 6 Juli 2013 sampai dengan 7 Oktober 2013 pengumuman pemenangnya.

Hai gan hadiah untuk pememang kontes seo ini lumayan juga loh,,,,gile total hadiah Rp 30 Juta,,,,wawww mantap kan, ente kuud berusaha penuh nih dapetin jadi pemenang kontes di Pejwan ya. Berikut rincian hadiah untuk para pemenang Kontes seo.

Total Hadiah 30 Juta Rupiah untuk 20 pemenang :(Dengan Rincian Sebagai berikut)

• Hadiah pertama = Rp 10.000.000,-

• Hadiah kedua = Rp 7.500.000,-

• Hadiah ketiga = Rp 5.000.000,-

• Hadiah keempat = Rp 2.000.000,-

• Hadiah kelima = Rp 1.000,000,-

• Hadiah ke 6 – 10 = Rp 500.000,-

• Hadiah ke 11 – 20 = Rp 200.000,-

Tuh gan liat Juara pertama dapetin duit Rp10 juta, pengen ikutan juga sih tapi ilmunya masih newbie masih kudu belajar banyak hehehehe. Ayo gan bagi kalian yang memang master atau newbie yang mau ikutan kontes seo ini silahkan klik link berikut http://kontes-seo.828bet.com 

.

10 Daftar Template Blog Responsive untuk Blogger

Berbeda dengan beberapa tahun silam, perkembangan template blog gratis berplatform blogger saat ini sangat pesat dan bagus-bagus. Apalagi, setelah ngetren istilah "template responsive web design #RWD". Awesome... Walaupun, tetap kalah jika dibandingkan dengan template wordpress, tapi tetap saja tampilan yang dihasilkan cukup oke, menurut saya.
Berikut ini, saya sudah mengumpulkan beberapa template blog yang responsive dari beberapa pembuat template dalam dan luar negeri. Dan telah pula saya buat daftarnya. Yeah, sekiranya teman-teman Bersosial ada yang membutuhkan, silakan download template blog berikut ini (daripada nyari satu per satu kan?)

Hide Spoiler

Demo | Download

Hide Spoiler

Demo | Download

Hide Spoiler

Demo | Download

Hide Spoiler

Demo | Download

Hide Spoiler

Demo | Download

Hide Spoiler

Demo | Download

Hide Spoiler

Demo | Download

Hide Spoiler

Demo | Download

Hide Spoiler

Demo | Download

Hide Spoiler

Demo | Download

PS: daftar template di atas, didasarkan pada template responsive yang saya sukai. Tentu masih banyak template blog responsive lain yang bagus-bagus di luar sana, yang mungkin terlewati oleh pengamatan saya. Teman-teman Bersosial bisa menambahkannya.

—

http://365ceritarakyatindonesia.blogspot.com | http://ceritapendekhoror.blogspot.com

• Like 0

Get the Welcome Bar | AddThis

Get the Welcome Bar | AddThis

Cara Membuat Read More Otomatis Plus Thumbnail Versi 3

Kali ini saya akan berbagi dengan temen-temen semua tentang cara membuat readmore otomatis plus thumbnail (versi 3). Sebenarnya apa sih pentingnya readmore pada sebuah blog? Salah satunya adalah dengan menggunakan read more pada blog kita, memungkinkan artikel yang di tampilkan pada halaman utama blog kita akan terpotong alias lebih pendek, sehingga menghemat halaman juga. Lalu, bagi yang sebelumnya sudah pernah mencoba membuat read more ini dengan cara yang manual, kali ini kita akan membuatnya dengan cara otomatis.

O..ya, bagi temen-temen blogger semua yang sebelumnya telah membuat read more manual, silahkan edit terlebih dahulu kode pada templatenya ke dalam kode yang semula. Silahkan perhatikan kode di bawah ini yang merupakan contoh pembuatan readmore yang manual :

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>

Silahkan hapus kode yang saya tandai dengan huruf cetak tebal. Namun kemungkinan, kode pada setiap blog akan berbeda, jadi sesuaikan saja.....he..he..he...

Setelah selesai melakukan langkah-langkah diatas, lalu kita lanjutkan ke langkah berikut ini. Silahkan masuk terlebih dahulu ke menu edit html kemudian centang pada expand widget template, oya...jangan lupa backup dulu templatenya. Agar mudah dikembalikan seperti semula jika terjadi kesalahan, yaitu dengan cara klik download template lengkap. Setelah itu, silhakan letakan script di bawah ini tepat di atas kode </head>,setelah itu jangan lupa untuk menyimpannya.

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 200;
summary_img = 200;
img_thumb_height = 100;
img_thumb_width = 100;
</script>

<script type='text/javascript'>

//<![CDATA[

/******************************************

Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks

********************************************/

function removeHtmlTag(strx,chop){

if(strx.indexOf("<")!=-1)

{

var s = strx.split("<");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=-1){

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

}

}

strx = s.join("");

}

chop = (chop < strx.length-1) ? chop : strx.length-2;

while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

strx = strx.substring(0,chop-1);

return strx+'...';

}

function createSummaryAndThumb(pID){

var div = document.getElementById(pID);

var imgtag = "";

var img = div.getElementsByTagName("img");

var summ = summary_noimg;

if(img.length>=1) {

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';

summ = summary_img;

}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>

Nah, belum selesai, selanjutnya silahkan cari kode seperti ini <data:post.body/>, nah kalau udah ketemu, ganti kode <data:post.body/> dengan kode dibawah ini:

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Catatan:

• img_thumb_height = 100;, merupakan tinggi thumbnail dalam piksel. 
• img_thumb_width = 100;, merupakan lebar thumbnail dalam piksel. 
• summary_noimg = 200;, yaitu untuk menentukan banyaknya karakter yang ingin ditampilkan pada posting yang tanpa thumbnail atau gambar. 
• summary_img = 200; , yaitu untuk menentukan banyaknya karakter yang ingin ditampilkan pada posting dengan thumbnail atau gambar.  
• Pada bagian Read More, silahkan anda ubah sesuai keinginan, misalnya; selanjutnya, dll.

Selesailah sudah, selamat mencoba dan silahkan lihat hasilnya.

 

 

Sumber :http://www.maskolis.com/2011/03/cara-membuat-read-more-otomatis-plus.html

Gmcitterlsm

Untuk mengecek tampilan responsif sebuah blog anda bisa menggunakan jasa Test Responsive online seperti http://responsivetest.net
- See more at: http://www.odingk.com/2013/04/keunggulan-template-responsif.html#sthash.6QfF56ee.dpuf

Cara Membuat gambar kiri Postingan Otomatis di Blogger

 

 

Cara Membuat gambar kiri Postingan Otomatis di Blogger yang lebih berkualitas terhadap SEO :

1. Login ke Blogger > Template > Edit HTML.
    Kemudian tempatkan kursor dibagian pengeditan template dan klik salah satu script, lalu tekan CTRL+F untuk melakukan pencarian.

2. Cari kode </head> , dan letakkan kode ini diatasnya :

<script type='text/javascript'>

var thumbnail_mode = &quot;float&quot; ;

summary_noimg = 250;

summary_img = 220;

img_thumb_height = 120;

img_thumb_width = 220;

</script>

 

SELESAI 

Cara Memasang Banner Iklan di Kiri dan Kanan Blog

Sobat Blogger, pasti ingin sekali blog sobat ditawarkan pemasangan iklan pada blog sobat. Pemasangan iklan pada website/blog dapat mendatangkan keuntungan pada si pemilik blog. Oleh karena itu sobat blogger semua mesti membuat blog yang bagus sehingga blog sobat menjadi ramai pengunjung. Dengan ramainya pengunjung, InsaAllah akan menarik para pemasang iklan yang ingin memasang iklan di Blog sobat. Saya sarankan agar sobat menyediakan kotak iklan di blog sobat yang terletak dikiri dan kanan blog. Kelebihan posisi ini adalah ketika halaman blog digulir, maka kotak iklan tersebut terus mengikuti dan akan terus terlihat di halaman blog. Sehingga para pemasang iklan tertarik untuk memasang iklan di blog sobat,

Berikut cara membuat/menyediakan kotak iklan di kiri dan kanan blog:
1. Login ke akun blog sobat.
2. Pada menu dropdown, masuk ke bagian Template dan pilih Edit Html.
3. Cari kode ]]></b:skin>, gunakan tombol ctrl+F untuk mempermudah pencarian. 
4. Masukan kode berikut di atas kode ]]></b:skin> .

#adslayoutleft {
position:fixed;
top:5px;
margin-left :-180px;
float:left;
z-index:10;
}
#adslayoutleft .iklankiri {
float:right;
clear:both;
}
#adslayoutleftright {
float:right;
position:fixed;
top:5px;
margin-left:990px;
z-index:10;
}
#adslayoutleftright.iklankanan {
float:left;
clear:both;
}

Perhatikan kode berwarna merah adalah jarak antara banner iklan dengan halaman blog, sobat bisa sesuaikan dengan template yang sobat gunakan.

5. Setelah selesai, klik simpan Template.

6. Masuk pada bagian Tata letak.

7. Klik tmabah gadget, di posisi mana saja tidak masalah.

8. Pilih HTML/Javascript.

9. Masukan kode berikut.

<div id='adslayoutleft'><div class='iklankiri'><a href="Masukkan-Url" target="_blank" title="Title-Iklan"><img alt="Alt/Text Gambar" src="Url Gambar" /></a></div></div>
<div id='adslayoutleftright'><div class='iklankanan'><a href="Masukkan-Url" target="_blank" title="Title-Iklan"><img alt="Alt/Text Gambar" src="Url Gambar" /></a></div></div>

Catatan, Untuk kode warna merah adalah Url tujuan gambar, untuk kode warna hijau adalah Title gambar, untuk kode warna kuning adalah Alt/Text Gambar, untuk kode warna biru adalah Url gambar.

10. OK, semua sudah selesai. Sobat tinggal menyimpan pengaturan dan lihat hasilnya.

 

 

sumber :http://regibrader-free.blogspot.com/2013/02/cara-memasang-banner-iklan-di-kiri-dan_16.html

METRO MODERN SOLAR TEMPLATE BLOGG

 

                                                  View Live Demo Download this template

cara meningkatkan page rank

Cara meningkatkan jumlah Sites Linking In dan Alexa rank, saya baca ketika berkunjung di blog sahabat, kemudian saya lihat Widget Alexa Ranknya. Woowww…. Site Link In - nya banyak sekali. Sudah lama sebenarnya saya menemukan posting seperti ini, namun dulu saya sanksi apakah benar cara ini bisa berhasil menaikkan PR dan backlink. Setelah saya membacanya kembali dan masih kurang yakin atas Site Link In Alexa Rank yang saya lihat di alexa-nya sayapun kembali lagi mengunjungi blog-blog yang telah mengikuti cara ini. Dan ternyata benar, blog-blog yang menerapkan cara ini Page Rank juga ikut meningkat namun yang paling menonjol adalah Site Linking yang dimiliki blog-blog tersebut sungguh banyak sekali.

Jika kita memiliki PR yang bagus dan backlink yang banyak, maka sangat cocok jika kita ikut program semacam paid reviews. Saya sungguh menyesal tidak menerapkan cara ini sejak dulu. Lebih baik terlambat daripada tidak sama sekali. Karena saya ingin memoneytize kan blog ini ke program paid reviews.

Caranya sangatlah mudah, Anda hanya tinggal copy link yang berada di bawah ini dengan syarat harus menghapus link pada peringkat 1 dari daftar, lalu pindahkan yang tadinya nomor 2 menjadi nomor 1, nomor 3 menjadi nomor 2, nomor 4 menjadi nomor 3, dst. Kemudian masukan link blog Anda sendiri pada urutan paling bawah ( nomor 10). Dan silahkan ajak teman Anda untuk mengikuti cara ini serta sebarkan cara ini ke banyak Situs Jejaring Sosial.

01.  resep.web.id
02.  Link Tea
03.  Blogodolar
04.  Alwi's Blog
05.  TrijayaNews
06.  Bimo Hery Prabowo
07.  Bayu Mukti
08.  Cosarosta.com
09.  wakakak.net
10.  BlogBizTutor

Keterangan:
Jika Anda mampu mengajak lima orang saja untuk mengcopy artikel ini maka jumlah backlink yang akan didapat adalah:

Posisi 10, jumlah backlink = 1
Posisi 9, jumlah backlink = 5
Posisi 8, jumlah backlink = 25
Posisi 7, jumlah backlink = 125
Posisi 6, jumlah backlink = 625
Posisi 5, jumlah backlink = 3,125
Posisi 4, jumlah backlink =15,625
Posisi 3, jumlah backlink = 78,125
Posisi 2, jumlah backlink = 390,625
Posisi 1, jumlah backlink = 1,953,125

Dan nama dari alamat blog dapat dimasukan kata kunci yang anda inginkan yang juga dapat menarik perhatian untuk segera diklik. Dari sisi SEO anda sudah mendapatkan 1,953,125 backlink dan efek sampingnya jika pengunjung downline mengklik link anda maka anda juga mendapat traffic tambahan.

Saya sarankan Anda mencoba cara ini dan silakan copy lalu sebarkan artikel ini atau bisa dengan cara mengkopi kode di bawah ini agar simple tanpa repot, kemudian buat sebuah postingan menggunakan menu Edit Html (agar link-linknya tidak hilang karena di sinilah letak Site Link in Alexa itu). Hilangkan link nomor 1 dan masukan alamat blog Anda pada nomor 10. Buktikan sendiri hasilnya setelah itu baru kementar.