Tampilkan postingan dengan label Blogging. Tampilkan semua postingan
Tampilkan postingan dengan label Blogging. Tampilkan semua postingan

Jumat, 12 Juli 2013

Cara Memasukan Kode HTML pada Postingan

Hallo semua kembali lagi dengan saya. Pada postingan kali ini buat kalian yang suka bingung pas pengen buat postingan yang tutorial misalnya, terus anda memasukan kode html ke dalam postingan tutorial tersebut dan setelah di publikasikan kok kode html nya gk muncul? Yah karena kode html nya harus kita parsekan dulu terlebih dahulu.

Terkadang para blogger ada yang memakai cara menyelipkan tanda * pada setiap tag penutupnya, untuk memunculkan kode html maupun script di postingan. Contoh seperti ini.

<*div style="text-align:center;">teks kamu <*/div>

yupps dulu saya juga sering memakai cara di atas. Tapi saya punya solusi yang lebih mudah dengan cara meparse kodenya.

Gimana cara memparsenya?

1. Pertama asukan kode html maupun scriptnya di tool di bawah ini.




 © www.seopemulaseo.blogspot.com |Get This Widget |




2. Setelah itu klik parse kode. Nanti akan muncul kodenya dan siap kalin publikasikan.

Di jamin pada saat anda memasukan html maupun script nanti setelah kalian memparsenya pasti akan muncul seperti di bawah ini tanpa harus menambah tanda * di setiap tak penutupnya.

<div style="text-align:center;">teks kamu </div>

Oke mudah-mudahan dapat membantu, bermanfaat di postingan kali ini. Akhir kata sekian dan terima kasih.

Sabtu, 06 Juli 2013

3 Platform Terbaik Untuk Membuat Blog


Apa kabarnya semua teman-teman blogger maupun para penghuni setia blog ini? Mudah-mudahan kalian di berikan kesehatan selalu. Oke pada kesempatan kali ini saya ingin memberikan cara untuk membuat blog. Yah artikel ini hanya untuk iseng-iseng aja siapa tau masih ada yang belum tau untuk cara membuatnya.

Sebelum kalian membuatnya kalian harus sudah paham apa keuntungan dan kerugian ngeblog. Jika kalian yakin sih yang namanya ngeblog pasti gk ada yang namanya rugi dalam ngeblog bahkan dengan ngeblog ini anda akan dapat keuntungan lho.

Yah kalau terus di lanjutin soal itu untung ruginya tergantung anda mengelolala blog tersebut dengan sabar. Oke kembali lagi pada topik utamanya. Disini saya ingin memberikan tiga pilihan platform dengan hosting gratis untuk anda memulai membuat blog, oke langsung saja simak berikut ini.

1. www.blogger.com
Nah blogger ini didirikan pada 23 Agustus 1999 yang di buat oleh Pyra Labs dan sekarang dan diakusisi oleh Google pada tahun 2003. Contoh blognya seperti yang sekarang saya pakai ini blognya. Dengan mendaftar di www.gmail.com layanan email dari google, anda bisa langsung masuk otomatis ke blogger.com dan mulai ngeblog disana.

2. www.mywapblog.com
Kalo platfrom yang satu ini buat yang suka ngeblog dari HP. Soalnya situs platform ini sangat mudah di kelola bagi blogger hp. Oh yah saya mulai terbang pertama kali ngeblog dari layanan platform iniloh, jadi buruan daftar dah buat yang bingung buat ngeblog via hp.

3. www.wordpress.com
Saya gk tau banyak tentang platform yang satu ini tapi udah banyak juga yang sukses pake platform di wordpress ini dan juga ini mudah di kelola dari hp juga.

Nah gimana tinggal kalian kunjungi satu-satu aja situs kalo bisa buat akunnya di masing-masing di platform micro blogging di atas dan bandingkan mana yang baik. Kalo saya sih paling merokemendasikan untuk kalian untuk daftar di yang pertama di blogger.com. Yasudahlah selamat mencoba membuat untuk blog semoga sukses, sekian dari saya dan terima kasih.

Rabu, 03 Juli 2013

Cara Pasang Artikel Terkait Dengan Thumbnail

Kembali lagi dengan saya, setelah udah lumayan lama gk ngepost. Pada kesempatan kali ini saya mau ngasih tutorial lagi yaitu untuk cara membuat artikel terkait pake thumbnail (gambar). Sebelumnya saya juga udah membuat tutorial untuk buat artikel terkait ini tapi gk memakai gambar nih baca disini tutorialnya.

Nah jadi anda punya dua pilihan untuk membuatnya mau make yang pake gambar atau tidak sesuikan dengan selera. Oke kembali untuk membuat yang pakai gambar. Nah kira-kira seperti di bawah inilah penampakan artikel terkait tersebut.


Atau lebih jelasnya, pasti udah pada tau wujudnya kayak gimana untuk yang biasa berkunjung di blog ini. Oke buat yang udah gk sabar untuk membuatnya langsung saja ikuti langkah-langkah di bawah ini.

1. Pertama seperti biasa masuk dulu ke akun blogger anda.
2. Kemudian masuk ke template terus ke EDIT Html.
3. Kemudian cari kode </head> kalau sudah ketemu letakan kode di bawah ini tepat di atasnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#at-gambar{text-transform:none;overflow:hidden;margin:0;padding:0}#at-gambar h2{font-size:17px;font-weight:bold;padding:0 0 8px;margin:0}#at-gambar a{color:#222;overflow:hidden;text-align:left;font-size:13px}#at-gambar a:hover{background:#999;color:#fff}#at-gambar img{width:100%;margin:0;padding:0}
</style>
<script> var defaultnoimage = &quot;http://bit.ly/ZVN3pG&quot;; var maxresults = 7; var splittercolor = &quot;#ddd &quot;; var relatedpoststitle = &quot;Artikel Terkait :&quot;; </script>
<script src='http://msugeng.googlecode.com/files/terkait6.js'/>
</b:if>

4.Setelah meletakan kode script tadi, mari anda cari lagi kode <data:post.body/>. Kalau sudah ketemu letakan kode di bawah ini di bawah kode tersebut.

<div id='at-gambar'>
<b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=999&quot;' type='text/javascript'/> </b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;); </script>
</div>

Jika belum muncul artikel terkaitnya coba anda letakan kode di atas di <data:post.body/> yang kedua, karena kode <data:post.body/> banyak di dalam template. Ingat yang ke dua dari atas. Atau sesuikan saja pada template anda.

5. Terakakhir tinggal Klik 'SAVE TEMPLATE'.

Gimana mudahkan? Kalau masih ada yang kebingungan silahkan berkomentar untuk bertanya. Ohya buat yang templatenya belum ada read more nya bisa anda baca tutorialnya disini untuk cara memasangnya. Oke semoga bermanfaat dan terima kasih.

Minggu, 30 Juni 2013

Cara Pasang Read More With Thumbnail di Blog

Hallo-hallo kembali dengan saya yang akan menemani anda pada postingan di weekend saat ini. Kali ini kembali buat yang suka design dan otak-atik templatenya dan khususnya buat yang masih memakai template default dari blogger. Karena apa? Saya ingin memberikan tutorial cara pasang read more with thumbnail (gambar). Karena kita tahu sendiri template default dari blogger belum terpasang read morenya, atau juga atau ada juga yang template kebetulan belum ada read morenya kalian juga bisa pake cara ini.

Yah sedikit penjelasan manfaat pasang read more pada blog agar terlihat profesional saja agar para pengunjung juga betah dan coba nanti anda bandingkan saat sudah memasang dan pada saat anda belum memasangnya. Pasti lebih baik pada saat anda memasangnya, di jamin!
Oke langsung saja lah yang ingin memasangnya ikuti langkah-langkah berikut ini dan lihat screenshot contoh read more nya di bawah ini kalau sudah tertarik langsung aja mari kita buat.


1. Masuk dulu lah ke blogger setelah itu langsung saja anda menuju ke bagian EDIT Html template anda.
2. Kemudian anda cari kode </head> kalau sudah ketemu letakan kode script di bawah ini tepat di atasnya.

<script type='text/javascript'>
var thumbnail_mode = &quot;item&quot; ;
summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script>
<script src='http://otowebsite.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

3. Selanjutnya kembali lagi cari kode <data:post.body/> kalau sudah ketemu hapus kode tersebut dan ganti dengan kode di bawah ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;); </script>
<span style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'><img src="http://goo.gl/UYbJm"></img></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Perhatikan saat menganti dan menghapus kode <data:post.body/> dengan kode tersebut silahkan anda coba satu per satu kode <data:post.body/>. Karena kode <data:post.body/> ada banyak di dalam template kita paling tidak coba dulu <data:post.body/> nya yang anda temukan pertama kali dan kalo gk bisa coba di yang kedua.

4. Next, klik pratinjau dulu kalau sudah mantep tampilanya baru klik "SAVE TEMPLATE".

Mudahkan? Kalau masih ada yang kebingungan silahkan saja bertanya pada kolom komentar. Oke mudah-mudahan bermanfaat lah apa yang saya bagikan kali ini sekian, terima kasih dan semoga weekend kalian dengan nongkrongin blog ini 'berkah' amin.

Rabu, 26 Juni 2013

Cara Membuat Link Download Pake Gambar

Apa kabar semua pengunjung atau pun teman-teman blogger sekalian? Semoga baik-baik aja ye dan juga saya mau ngucapin 'Selamat Hari Anti Narkoba Internasional' walaupun sedikit telat ngucapinya. Tapi di sini saya gk mau ngebahas tentang Narkoba, yang pasti kalian sudah tau tidak pentingnya mengunakan narkoba.

Kembali lagi pada topik utama yang akan saya bahas yaitu cara membuat link download memakai gambar. Ini khusus untuk untuk yang suka variasi lebih aja biar keliatan profesional dikit. Caranya cukup terbilang gampang, oke langsung saja yang mau membuatnya ikuti langkah-langkahnya sebagai berikut.

Pokok penting yang di butuhkan pasti url gambar dan link downloadnya dengan memakai kode berikut.

<a href="URL LINK DOWNLOAD DISINI"><img src="URL GAMBAR DISINI"/></a>

Atau anda bisa mengunakan gambar yang sudah saya sediakan sebagai berikut.


Seperti gambar di atas copas kodenya di bawah ini.

<a href="URL LINK DOWNLOAD DISINI"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_HvOdWcQwUycV6zfYWSbJZIDi1JO_NESn3jeUt0_YVsuHrWn_Zs4KKwYOjUojCLWSsbu7Df_5lOHTiNYzjB2umczdg40F1AJxBe9gdwaXcTMy_tvTcuCkVYLScpZBukN6zhvBm3XZhKk/s320/sruput2-782724.png"/></a>


Seperti gambar di atas copas kodenya di bawah ini.

<a href="URL LINK DOWNLOAD DISINI"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiJ713qOq-lp4bss-76HonGiYXQ8VsbqHdmHK9z0PRIuofUjW4TCHYzMlvq-lH2CiKt7ALyyJT4wmyo-mO70IPV76dCy09E21eQUtXkfWAEjY-k9LRNLUcONplGqtJkD6MLm3UJaDu9Fw/s320/sedot-784350.png"/></a>


Dan untuk gambar terakhir seperti atas langsung aja copas lagi kodenya sebagai berikut.

<a href="URL LINK DOWNLOAD DISINI"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfSPoRTreOGBcq-7vWBOx0cLoCYLbcW-PFXSPuOK5qD4VgWPJ-W9HryR_D7DAeyd4ayZUHpRUu6AiVPdxlsCvsUZ0Q5_NDFbpopdZnmsdP7IutPEEGtnrY7DoQUj96srR1k-cFVkESGJ8/s320/download-785680.png"/></a>

Perhatikan itu hanya gambar rekomendasi dari saya jika tidak cocok anda bisa mengantinya dengan gambar kalian masing-masing dan itu tingal hanya memasukan url link downloadnya saja. Gimana mudahkan, oke mudah-mudahan bermanfaat sekian dan terima kasih.

Senin, 24 Juni 2013

Cara Buat 3 Kolom Widget Keren


Pada artikel hari ini ada sedikit request dari teman blogger saya yang menayakan bagaimana cara untuk membuat tiga kolom footer seperti di blog saya atau tepatnya seperti gambar di atas sana. Sebenarnya sebelumnya saya telah membuat cara seperti ini di artikel saya sebelumnya dengan judul artikel 'Cara Membuat 3 Kolom Di Atas Footer.

Tapi anggap saja artikel itu untuk edisi pertamanya dan artikel judul ini untuk edisi keduanya. Oke buat teman blogger saya yang tadi merequestnya atau teman yang lainya seperti yang punya saya ini simak dan praktekan cara di bawah ini dengan baik dan benar.

1. Seperti biasanya masuk ke blogger terus ke dasboard blog yang akan anda buat klik template dan kemudian klik Edit HTML.
2. Kemudian silahkan anda cari kode ]]></b:skin> ini di dalam template anda dan letakan kode di bawah ini di atasnya. Terserah di mana saja yang penting di atas ]]></b:skin> tadi.

/* BOTTOM-BAR */
#bottom-bar{overflow:hidden;background:#eaeaea;margin:0;padding:10px;border-top:1px solid #fafafa;display:block}#bottom-bar h2, #bottom-bar h3{padding:3px 0;margin:0;font-size:15px;font-weight:bold;text-shadow:0px 1px 0px #fafafa;text-transform:uppercase;border-bottom:1px solid #ccc}#bottom-bar .widget{margin:0 0 10px;clear:both}#bottom-bar .widget-content{padding:8px 0;border-top:1px solid #fafafa}#bottom-bar .widget-content ul li{margin:0;padding:3px 2px;border-top:1px solid #fafafa;border-bottom:1px solid #ddd}#bottom-bar .widget-content ul li:first-child{border-top:medium none !important}#bottom-bar .widget-content ul li:last-child{border-bottom:medium none !important}#bottom-bar .widget-content ul li a{color:#333}#bottom-bar .widget-content ul li a:hover{color:#c80441}#bottom-bar #LinkList1 .widget-content ul{height:100px;overflow-y:auto}#bottom-bar .kiri{float:left;width:310px;margin:0 5px 0 0;display:inline}#bottom-bar .tengah{float:left;width:310px;margin:0 5px 0 5px;display:inline}#bottom-bar .kanan{float:right;width:310px;margin:0 0 0 5px;display:inline}

3. Selanjutnya kembali lagi mencari. Carilah kode <div id='footer'>, kemudian letakan kode di bawah tepat di atasnya (pokoknya sesuaikan saja pada template masing-masing).


<div style='margin:0;padding:0;height:1px;background:#ccc;clear:both;'/>
<aside id='bottom-bar'>

<b:section class='kiri' id='kiri' preferred='yes'/>

<b:section class='tengah' id='tengah' preferred='yes'/>

<b:section class='kanan' id='kanan' preferred='yes'/>

</aside>

4. Terakhir jurus pamungkasnya klik "SAVE TEMPLATE".

Lebar maupun backgroundnya bisa kalian atur sendiri. Kalau masih ada yang kebingungan silahkan berkomentar, mudah-mudahan berhasil semua. Dan buat yang mau download template keren bisa anda download di artikel saya yang berjudul "Download Template Keren Dan Pasti SEO' yups mudah-mudahan bermanfaat artikel saya kali ini dan terima kasih.

Selasa, 18 Juni 2013

Manfaat Memoderasikan Komentar Blogger

Blogger


Apa kabar semua? Kali ini saya mau ngebahas sedikit tentang memoderasikan komentar. Setelah sebelumnya saya telah membahas bagaimana caranya mendapatkan banyak like di facebook 'Tips Agar Status Facebook Banyak yang Like.

Kembali lagi pada topik, saya akan memberikan beberapa manfaat yang dapat di hasilkan dari memaksimalkan komentar dengan memoderasikannya di blogger. Oke langsung saja berikut ini manfaat yang telah saya rasakan dalam memoderasikan komentar.

  • Mencegah Link Aktif
    Yups buat teman-teman blogger yang kesal dengan teman yang lain karena sering ngelink di artikel komentar kita. Kita dapat mencegahnya dengan cara di publikasikan komentar itu sendiri, karena setelah kita mengaktifkan moderasi komentar kita dapat membilah komentar-komentar tersebut.
  • Menghindari Kata-Kata 'Binatang mau pun Sara'
    Terkadang banyak juga para blogger yang berani berkomentar dengan cara mengeluar kata-kata tersebut. Terkadang ada yang tidak menyimak kata-kata yang kita sampaikan di dalam artikel sehingga terjadinnya salah paham dan keluarnya perkataan tersebut. Buat teman-teman yang kesal dengan hal tersebut, sama hal dengan poin pertama anda dapat membilah komentar tersebut
  • Publikasikan, Spam atau Hapus
    Kembali pada si para komentar tersebut, bagaimana dia memberi kritik dan saranya dengan bahasa yang sopan. Karena saya yakin para blogger mau menerima komentar yang kalian (si komentator) lontarkan. Dan para blogger yang memanfaatkan moderasi komentar harus bijak dalam mempulikasikan komentarnya.

Yang itulah poin-poin yang telah saya rasakan dan saya bagikan kepada anda-anda betapa pentingnya suatu komentar bagi artikel-artikel kita para blogger. Oh yah jangan lupa juga baca rekomendasi artikel dari saya 'Belanja produk gaya hidup kontemporer dari desainer berbakat dengan harga terjangkau!'. Yah mungkin hanya ini saja yang dapat saya sharing kepada kalian, semoga bermanfaat dan terima kasih.

Selasa, 21 Mei 2013

Cara Menghapus Widget Yang Terkunci

Hallo teman-teman kembali lagi dengan saya setelah tiga hari tidak ngeblog karna mendapatkan musibah. Di kesempatan kali ini saya akan memberikan cara untuk menghapus widget yang terkunci, yah permasalahan ini sering kita jumpai pada saat menganti template.

Kira-kira seperti inilah penampakan widget yang tak bisa kita hapus atau terkunci.

widget terkunci

Oke langsung saja kita selesaikan permasalahannya dengan cara mengikuti langkah-langkah dibawah ini:
  1. Masuk ke blogger > dashboard > Edit HTML.
  2. Setelah masuk langsung kalian cari title atau judulnya widget yang gk bisa terhapus itu, misalkan titlenya Entri Populer maka jika nanti kode wigetnya sudah ketemu akan seperti dibawah ini kira kodenya:

    <b:widget id='PopularPosts3' locked='true' title='Entri Populer' type='popularposts'>
    kode bla bla bla.....
    Dan seteresusnya....
    </b:widget>

    Setelah itu gantikan tulisan true dengan tulisan false, hingga seperti kode dibawah ini:

    <b:widget id='PopularPosts3' locked='false' title='Entri Populer' type='popularposts'>
    kode bla bla bla.....
    Dan seteresusnya....
    </b:widget>
  3. Terakhir klik "Save Template".
    Insyalloh widgetnya bisa dihapus seperti gambar dibawah ini:

    widget gk bisa di hapus

    Nb: lakukan cara seperti ini pada widget-widget yang terkunci atau gk di hapus lainya.

Oke sekian postingan acak-acakan saya mudah-mudahan dapat kalian pahami. Semoga bermanfaat sekian dan terima kasih.

Rabu, 15 Mei 2013

Mencegah Link Aktif Pada Komentar Blog

Mencegah Link Aktif

Pada siang hari ini saya akan memberikan cara untuk mencegah link aktif yang marak di lakukan pada komentar blog. Sedikit penjelasaan, bahwa adanya link aktif pada komentar blog kita dapat membuat popularitas blog kita turun.

Siapa sih yang gk seneng blognya di komentarin? Tapi kalo kita udah pake moderenisasi komentar tapi tetep aja pake link aktif bagaimana? Yah kesel lah (soalnya dimoderenisasi bingung juga ngebedainya mana yang link aktif mana yang engak).

Oke langsung saja berikut ini cara pencegahanya:
  • Masuk ke blogger > dashboard > template > EDIT Html > centang expand template widgetnya.
  • Kemudian cari kode ]]></b:skin>
  • Selanjutnya tambahkan kode di bawah ini di atasnya:
    #comments p a {display:none !important;}
  • Cara pamungkas terakhir yaitu klik "Save Template".

Dengan memakai cara diatas walaupun si komentator menaro link aktif, link aktif itu gk akan muncul alias percuma.
Sebenernya banyak cara untuk memusnahkan link aktif dengan script maupun dengan kode lainya. Tapi menurut saya dengan memakai kode diatas yang sangat simple tapi bekerja cukup memuaskan.

Yah mungkin ini aja yang bisa saya sampaikan mudah-mudahan bermanfaat, jika ada yang masih bingung juga silahkan berkomentar dan terima kasih.

Selasa, 30 April 2013

Cara Pasang Form Email Di Blog

Selamat siang semua, pada kali ini saya ingin memberikan tutorial cara pasang form Email di blog. Singkat cerita form Email adalah tempat di mana kita mensubmit dan mengirimkan pesan tanpa harus log in.

Form Email biasanya di gunakan para teman-teman Bloggers untuk saling mempermudah mengontak antara admin dan pengunjung, suatu website maupun blog.

Oke untuk kalian yang ingin membuanya ikuti langkah-langkah mudah di bawah ini dan berikut contoh screenshotnya :


  1. Pertama masuk dulu ke blogger.
  2. Biasanya para bloggers memasang pada suatu artikel tertentu seperti 'Contact Us' maupun menambah widget baru.
  3. Berikut ini kode yang harus kalian letakan di artikel baru maupun widget baru :

    <form action="mailto: <a href="mailto:markussitohangg@gmail.com">markussitohangg@gmail.com</a>" method="post" enctype="text/plain">
    Name:<input type="text" name="nama" value="Nama" size="20" />
    Email:<input type="text" name="mail" value="email" size="20" />
    Pesan:<input type="text" name="pesan" value="Isi pesan di sini" size="20" />
    <input type="submit" value="Kirim" /><input type="reset" value="Batal" />
    </form>
  4. Terakhir pubhlikasikan artikelnya atau simpan pada widget baru, dan selesai

Perhatikan: ganti email saya (markussitohangg@gmail.com) dengan email anda dan untuk mengatur uluranya ganti akan 20 pada sizenya.

Mudah bukan? Jika masih ada yang kebingungan silahkan berkomentar dibawah ini. Sekian mudah-mudahan dapat membantu dan terima kasih.

Jumat, 12 April 2013

Cara Membuat Privacy Policy Untuk Blog

Selamat siang dan apa kabar buat teman-teman bloggers? Di kesempatan kali ini saya ingin memberikan tutorial membuat privasy policy untuk blog. Karena kita tahu sendiri privasy policy ini adalah salah satu syarat yang katanya untuk di terima di google adsense.

Dan bukan untuk google adsense saja, privasy policy ini juga dapat memberitahukan om google bahwa content yang anda sajikan di blog kalian real tidak copast. Dan berikut ini contoh privacy policy yang telah saya buat DISINI.

Oke langsung saja ikuti langkah-langkah mudah di bawah ini untuk pembuatanya :

  1. Pertama anda masuk ke www.privacypolicyonline.com .
  2. Lalu nanti kalian akan langsung di bawakan ke halaman seperti di bawah ini.


    Lalu kalian isikan data tentang blog anda, seperti contact blog anda, judul blog dan lain-lainya yang sudah di sediakan disana.
  3. Setelah anda selesai mengisinya klik Generate Policy. Selanjutnya kalian akan di bawa ke halaman selanjutnya yang berupa tulisan privacy policy untuk blog anda seperti gambar dibawah ini.


    Kemudian klik Generate HTML yang berada di bawahnya, setelah itu copy pastekan tulisan yang di berikan dan pasang di blog kalian.

Itu dia tadi langkah-langkahnya sangat mudahkan silahkan kalian praktekan. Mudah-mudahan dapat bermanfaat dan terima kasih.

Kamis, 04 April 2013

Cara Membuat Tombol Share Keren Di Blog

Di hari jumat yang lumayan panas ini saya kembali lagi setelanh sebelumnya saya sudah memberikan tutorial tentang cara membuat permalink di blogspot. Oke kali ini saya ingin memberikan cara membuat tombol share keren di blog.

Oke yang mau membuatnya seperti gambar di bawah ini cukup mengikuti langkah mudah dibawah ini:



  1. Pertama masuk ke blogger > dashboard > template > edit HTML.
  2. Lalu cari kode ]]></b:skin> , kemudian letakan kode dibawah ini di atas kode ]]></b:skin> tadi:

    #share-keren{margin:0 0 8px;padding:0;overflow:hidden}
    #share-keren p{float:left;box-shadow:1px 1px 5px rgba(1,1,1,.1);background:#fafafa;display:block;padding:5px 8px !important; margin:0 3px 3px 0;border-radius:6px 6px;border:1px solid #fff}
    #share-keren a{position:relative;float:left;box-shadow:1px 1px 5px rgba(1,1,1,.1);border-radius:6px 6px;display:block;color:#fafafa;padding:5px 8px;margin:0 3px 3px;border:1px solid #fff}
    #share-keren a:hover{top:1px;left:1px;box-shadow:0px 0px 3px rgba(1,1,1,.1)}


  3. Selanjutnya cari kode ini <div class='post-footer'> , dan letakan kode dibawah ini dibawah kode <div class='post-footer'> tadi:

    <div id='share-keren'>
    <p>Bagikan ke</p>
    <a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:blog.url' rel='nofollow' style='background:#3b5998;'>Facebook</a>
    <a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' style='background:#c0361a;'>Google+</a>
    <a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url' rel='nofollow' style='background:#4099ff;'>Twitter</a>
    </div>


    Ingat: sesuaikan menempatkan kodenya sesuai template anda.

  4. Selanjutnya klik pratinjau dulu kalau sudah sesuai baru klik save.


Sangat mudahkan ayo jangan hanya di baca coba di praktekin yah. Oke kalo ada pertanyaan anda soal cara-cara yang kurang di pahami, silahkan berkomentar. Akhir kata dalam perjumpaan kita kali ini semoga bermanfaat dan terima kasih.

Minggu, 31 Maret 2013

Cara Membuat Permalink di Blogspot

Pada kesempatan kali ini saya ingin berbagi cara membuat permalink di blogspot. Sebelum kita membuatnya kita harus tahu terlebih dahulu tentang apa itu permalink, karna banyak teman-teman di blogger yang belum tahu.

Apa itu permalink?? Permalink adalah singkatan dari 'Permanent Link' merupakan alamat URL atau link yang permanent tentang suatu postingan. Permalink juga mempunyai kedudukan yang penting dalam ikut andil berperan dalam membantu artikel kita berada di halaman SE dan ini juga salah satu optimasi SEO juga lho.


Oke yang ingin membuat permalink di blognya seperti gambar diatas cukup ikuti tiga langkah dibawah ini:

  1. Pertama cari kode berikut ]]></b:skin>, kemudian letakan kode di bawah ini di atas kode ]]></b:skin> tadi:

    .permalink {teks-color:#000000;border: 1px dotted #000000; padding: 5px; background:#eaeaea;-moz-border-radius:5px;} .permalink a {background:none;} img.float-right {margin: 5px 0px 0 10px;} img.float-left {margin: 5px 10px 0 0px;}
  2. Selanjutnya cari kode <div class='post-footer'>, kemudian letakan kode di bawah ini di bawah kode <div class='post-footer'> tadi:

    <div class='permalink'>Anda sedang membaca artikel tentang <strong><u><data:blog.pageName/></u></strong> Anda juga dapat menemukan artikel <data:blog.pageName/> ini dengan url <strong><data:post.url/></strong>, juga bisa menyebar luaskannya jika artikel <strong><data:blog.pageName/></strong> ini dianggap bermanfaat bagi teman-teman.</div>

    Ingat sesuikan letak kodenya sesuai kode di template anda.
  3. Terakhir klik pratinjau kalau udah sesuai baru klik save template.

Nah cukup mudahkan, mudah-mudahan dapat bermanfaat bagi anda akhir kata saya ucapkan terima kasih.

Rabu, 27 Maret 2013

Cara Membuat Background Text Postingan

Halo teman-teman bloggers, lagi malas ngeblog gk tau kenapa nih. Oh yasudahlah, kali ini saya ingin memberi cara untuk membuat background bada text semacam blockquote tapi bukan blockquote.

Oke langsung saja yang ingin membuatnya cukup mudah tinggal kalian copy pastekan kode di bawah ini.



Hasilnya nanti akan seperti di bawah ini:

Ini adalah text yang akan anda rubah backgroundnya, text yang ada disini akan memiliki background dan berada didalam border / bingkai yang anda tentukan

Perhatikan: Ganti kode warnanya untuk background:#999; dan sesuai dengan warna yang kalian inginkan. Oke mudahkan mudah-mudahan dapat membantu dan terima kasih.

Sabtu, 23 Maret 2013

Cara Agar Artikel Cepat Terindex Google

Kali ini saya kembali lagi dengan ngeshare cara agar artikel blog cepat terindex google. Oke langsung aja buat para bloggers yang pengen cepet-cepet artikelnya mau keindex google ikuti tahap-tahapnya di bawah ini.

  1. Artikel Original
    Artikel orginal atau artikel yang kita buat sendiri, tidak copy paste lebih disukai oleh google, dan kemungkinan dapat cepat di index google.
  2. Pasang Sitemap
    Memasang sitemap juga dapat memudahkan blog dan artikel cepat terindex. Untuk cara membuat sitemap silahkan anda googling, sudah beribu-ribu manusia yang posting tentang ini.
  3. Share Artikel
    Dengan kita share atau bagikan artikel kita ke social bookmark ataupun sosial media dapat memudahkan Search Engine untuk mengindex artikel kita.
  4. Ping kan Artikel
    Dengan kita ngeping dapat memberikan alarm untuk google bahwa blog kita telah di perbaharui. Untuk situs pingnya bisa anda googling dan juga jangan terlalu banyak ngeping karna akan di anggap spam.
  5. Submit Artikel ke Google
    Untuk langkah terakhir submit artikel blog ke google kalian bisa menuju situs www.google.com/addurl, caranya tinggal masukan url blog anda dan kirim.

Mudah bukan caranya semuanya itu tergantung kemauan kita aja, mudah-mudahan dapat membantu dan terima kasih.

Rabu, 20 Maret 2013

Cara Membuat Daftar Label Tertentu di Blog

Di postingan ini saya mau memberi tutorial membuat daftar label tertentu di blog, dan biasa para teman-teman bloggers menaruhnya di tiga kolom diatas footer.

Kalo ada yang mau membuatnya silahkan di ikutin langkahnya yang saya berikan di bawah ini.

Caranya sebenarnya sangat mudah sekali anda tinggal copy kode di bawah ini
<script src='http://raxterblog.googlecode.com/files/Daftar%20isi%20otomatis.js'/> </script> <script src="http://seopemulaseo.blogspot.com/feeds/posts/summary/-/Tutorial?max-results=6&alt=json-in-script&callback=recentpostslist"></script>

untuk meletakannya masuk Dasbhoard > Tata Letak > dan masukan kodenya di HTML/javascript .

Perhatikan: untuk url http://seopemulaseo.blogspot.com itu ganti tengan url blog anda, untuk tulisan Tutorial itu labelnya dan ganti dengan label anda dan terakhir angka 6 ini untuk menampilkan jumlah judul dari labelnya.

Untuk melihat live demonya tinggal anda liat sendiri di blog ini tepat di tiga kolom diatas footer, oke mudah-mudahan bermanfaat dan terima kasih.

Sabtu, 16 Maret 2013

Cara Membuat Artikel Terkait di Blogger

Kali ini saya mau ngeshare tutorial membuat artikel terkait di blogger. Sedikit pengertian dengan adanya artikel terkait ini dapat mempermudah para pengunjung dalam suatu hal dalam postingan yang sama dan artikel terkait ini bagus untuk optimasi SEO.


Oke langsung saja tak usah berlama-lama lagi simak langkah-langkahnya bagi yang mau membuat artikel terkait.

  1. Pertama lo harus punya akun blogger tentunya habis itu login.

  2. Kemudian klik dashboard blog kamu klik Template > Edit HTML > centang Expand Widget Template.

  3. Cari kode </head> dan letakan kode di bawah ini tepat di atasnya.
    <script type="text/javascript">
    //<![CDATA[
    var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break;}}}}
    function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];}}
    relatedTitles=tmp2;relatedUrls=tmp;} function contains(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false;}
    function printRelatedLabel(){var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;document.write('<ol>');while(i<relatedTitles.length&&i<20){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++;}else{r=0;}
    i++;}
    document.write('</ol>');document.write();}//]]>
    </script>

  4. Selanjutnya cari kode <data:post.body/> dan letakan kode dibawah ini dibawahnya.
    <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'> <b:if cond='data:blog.pageType == "item";'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
    </b:if>
    </b:loop>
    </b:if>
    <b:if cond='data:blog.pageType == "item";'>
    <h4>Artikel Terkait: </h4>
    <script type="text/javascript"> removeRelatedDuplicates(); printRelatedLabels(); </script>
    </b:if>

  5. Terakhir klik Simpan Template dan lihat Hasilnya

Perhatikan: 10 tanda 10 yang berwarna merah di kodenya adalah tampilan judul yang di tampilkan di artikel terkaitnya dan tulisan Artikel Terkait merah di kodenya bisa kalian ganti dengan kata lain.

Sekian dari saya semoga dapat membantu juga bermanfaat dan terima kasih.

Senin, 11 Maret 2013

Cara Mudah Membuat Daftar Isi di Blog

Sore sobat Blogger. Kali ini saya akan ngeshare tutorial cara membuat Daftar Isi. Daftar isi penting lho untuk blog kita manfaatnya agar para pengunjung kita dapat mudah mengaskses postingan terbaru kita.

Yang mau buat berikut ini di screenshot Daftar Isinya.



Oke langsung saja ikuti langkah-langkahnya untuk cara pembuata daftar isi seperti di atas.

  • Login dulu ke blogger.

  • Selanjutnya, klik entri/postingan baru dan pilih menu HTML.

  • Kemudian copy kode di bawah ini pada entri/postingan baru kalian.
    <script src="http://me-sitemap.googlecode.com/files/sitemapblog.js" type="text/javascript">
    </script>
    <script src="http://seopemulaseo.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
    </script>

  • Lalu gantikan url http://seopemulaseo.blogspot.com dengan url blog kalian masing-masing.

  • Kemudian terbitkan entri baru anda dan lihat hasilnya.


Nah mudahkan silahkan anda peraktekan pada blog kalian. Sekian mudah-mudahan postingan saya kali ini dapat membantu dan terima kasih.

Sabtu, 09 Maret 2013

Cara Membuat 3 Kolom Di Atas Footer

Hallo, kali ini saya akan memberikan sedikit tuturial cara membuat 3 kolom di atas footer. Bagi yang sudah mempuni dalam hal mengedit-edit template pasti sudah paham betul soal ini. Tapi untuk yang belum paham ini dia singkat pengertianya.

Membuat 3 kolom di atas footer tak lain adalah membuat 3 element baru untuk menambah widget pada element biasanya.


Bagi yang mau memperindah blognya dengan menambahkan 3 kolom baru ini silahkan anda ikuti langkah-langkah di bawah ini.


  • Pertama masuk ke blogger dulu tentunya.

  • Kemudian masuk bagian Template > Edit HTML

  • Selanjutnya cari kode ]]></b:skin>, Dan copy serta letakan kode di bawah ini tepat di atasnya.


#widget-bawah {
width: 900px;background:#fff;
position: relative;display:inline;
clear:both;
margin:0 auto 0;
color:#000;
float: left;
padding:10px;
}
#bawah-kiri {
width: 270px;
float: left;display:inline;
margin:10px 5px 0 5px;
padding:5px
}
#bawah-tengah {
width: 280px;
float: left;
margin:10px 5px 0;
padding:5px
}
#bawah-kanan {
width: 270px;
float: left;display:inline;
margin:10px 5px 0;
padding:5px
}


  • Berikutnya cari kode <div id='footer'>, kemudian copy dan letakan kode di bawah ini tepat di astasnya.


<div id='widget-bawah'>
<b:section class='widget-bawah' id='bawah-kiri' preferred='yes' showaddelement='yes'>
</b:section>

<b:section class='widget-bawah' id='bawah-tengah' preferred='yes' showaddelement='yes'>
</b:section>

<b:section class='widget-bawah' id='bawah-kanan' preferred='yes' showaddelement='yes'>
</b:section>
</div>


  • Kemudian klik save template dan lihat hasilnya.


Perhatikan: Kalian bisa menyesuaikan backgroundnya dengan menganti warnanya #fff dan menyesuikan lebarnya dengan mengganti 900px dan 270px sesui dengan blog anda.

Semoga postingan saya kali ini dapat membantu walaupun sedikit dan juga bermanfaat dan di akhirkata saya ucapkan terima kasih.

Rabu, 27 Februari 2013

Kode-Kode HTML Untuk Blog


Kali ini saya akan memberikan kode-kode HTML pada blog karna kita ketahui sendiri menulis postingan pada blog tidak asal menulis, kita perlu mengenal kode-kode HTMLnya terlebih dahulu.

Oke langsung saja sebagai berikut kode htmlnya.

1. Text Berada Di Tengah


Hansilnya:

Text kamu


2. Text Berada Di Kanan

Hasilnya:

Text Kamu


3. Text Berada Di Kiri

Hasilnya:

Text Kamu


4. Text tebal

Hasilnya:
Text kamu

5. Text Bergaris Bawah

Hasilnya:
Text kamu

6. Text Bergaris Atas

Hasilnya:
Text kamu

7. Text Bergaris Tengah

Hasilnya:
Text kamu

8. Text Berwarna

Hasilnya:
Text kamu

9. Membuat Text Dot Bolong

Hasilnya:
  • Text kamu
  • Text kamu
  • Text kamu

10. Membuat Text Dot Kotak

Hasilnya:
  • Text kamu
  • Text kamu
  • Text kamu

11. Membuat Text Dot Bulat

Hasilnya:
  • Text kamu
  • Text kamu
  • Text kamu

12. Membuat Text Area

Hasilnya:


Perhatikan: silahkan di copas kodenya dan hapus tanda * pada di setiap tag-tag kodenya sebelum anda menpostingnya.

Oke munkin itu saja yang bisa saya bagikan kali ini. Jika ada yang mau nambahin kode html lainya bisa berkomentar. Sekian dan terima kasih.

Posting Lama ►
 

Copyright © 2012. Seo Pemula - All Rights Reserved Template IdTester by Blog Bamz