Archive

Archive for the ‘Blogging’ Category

10 Sosial Bookmark Terbaik 2013

16 October 2013 Leave a comment

Sosial Bookmarking

Pada kesempatan malam ini saya akan share bookmarking DoFollow terbaik 2013 yang bisa menjadi pilhan anda Read more…

Advertisements
Categories: Blogging

Cara Cepat dan Mudah Menambah Linking Alexa

15 October 2013 Leave a comment

Linking Alexa

Cara Meningkatkan Site Link In Alexa Rank Cara Meningkatkan Site Linking Alexa Rank saya baca ketika berkunjung di blog sahabat, Read more…

Categories: Blogging

100 Web Directory Terbaik

13 October 2013 Leave a comment

Web Directory

Inilah 100 Web Directory terbaik 2013 ber PageRank tinggi 8-5, yang saya kumpulkan dari mbah google. Read more…

Categories: Blogging

Cara Memasang Syntaxhighlighter di Blogger

11 April 2012 4 comments

Tutorial Blogger

Syntaxhighlighter adalah sebuah javascript yang berguna untuk menampilkan bahasa-bahasa pemrograman seperti HTML, PHP, ASP dll. Tanpa mengubah/prase kode tersebut, sehingga memudahkan kita untuk membuat sebuat tutorial webmaster :D.

Nah, langsung saja deh karna tutorial ini sangat panjang.

Pertama tempatkan CSS dibawah ini sebelum kode ]]</b:skin> atau tambahkan ke template blogger anda.


.dp-highlighter {
font-family: "Consolas", "Courier New", Courier, mono, serif;
font-size: 12px;
background-color: #E7E5DC;
width: 99%;
overflow: auto;
margin: 18px 0 18px 0 !important;
padding-top: 1px;
}
.dp-highlighter ol, .dp-highlighter ol li, .dp-highlighter ol li span {
margin: 0;
padding: 0;
border: none;
}
.dp-highlighter a,
.dp-highlighter a:hover {
background: none;
border: none;
padding: 0;
margin: 0;
}
.dp-highlighter .bar {
padding-left: 45px;
}
.dp-highlighter.collapsed .bar, .dp-highlighter.nogutter .bar {
padding-left: 0px;
}
.dp-highlighter ol {
list-style: decimal;
background-color: #fff;
margin: 0px 0px 1px 45px !important;
padding: 0px;
color: #5C5C5C;
}
.dp-highlighter.nogutter ol, .dp-highlighter.nogutter ol li {
list-style: none !important;
margin-left: 0px !important;
}
.dp-highlighter ol li, .dp-highlighter .columns div {
list-style: decimal-leading-zero;
list-style-position: outside !important;
border-left: 3px solid #6CE26C;
background-color: #F8F8F8;
color: #5C5C5C;
padding: 0 3px 0 10px !important;
margin: 0 !important;
line-height: 14px;
}
.dp-highlighter.nogutter ol li, .dp-highlighter.nogutter .columns div {
border: 0;
}
.dp-highlighter .columns {
background-color: #F8F8F8;
color: gray;
overflow: hidden;
width: 100%;
}
.dp-highlighter .columns div {
padding-bottom: 5px;
}
.dp-highlighter ol li.alt {
background-color: #FFF;
color: inherit;
}
.dp-highlighter ol li span {
color: black;
background-color: inherit;
}
.dp-highlighter.collapsed ol {
margin: 0px;
}
.dp-highlighter.collapsed ol li {
display: none;
}
.dp-highlighter.printing
{
border: none;
}
.dp-highlighter.printing .tools {
display: none !important;
}
.dp-highlighter.printing li {
display: list-item !important;
}
.dp-highlighter .tools {
padding: 3px 8px 3px 10px;
font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: silver;
background-color: #f8f8f8;
padding-bottom: 10px;
border-left: 3px solid #6CE26C;
}
.dp-highlighter.nogutter .tools {
border-left: 0;
}
.dp-highlighter.collapsed .tools {
border-bottom: 0;
}
.dp-highlighter .tools a {
font-size: 9px;
color: #a0a0a0;
background-color: inherit;
text-decoration: none;
margin-right: 10px;
}
.dp-highlighter .tools a:hover {
color: red;
background-color: inherit;
text-decoration: underline;
}
.dp-about {
background-color: #fff;
color: #333;
margin: 0px;
padding: 0px;
}
.dp-about table {
width: 100%;
height: 100%;
font-size: 11px;
font-family: Tahoma, Verdana, Arial, sans-serif !important;
}
.dp-about td {
padding: 10px;
vertical-align: top;
}
.dp-about .copy {
border-bottom: 1px solid #ACA899;
height: 95%; }
.dp-about .title {
color: red;
background-color: inherit;
font-weight: bold;
}
.dp-about .para {
margin: 0 0 4px 0;
}
.dp-about .footer {
background-color: #ECEADB;
color: #333;
border-top: 1px solid #fff; text-align: right;
}
.dp-about .close {
font-size: 11px;
font-family: Tahoma, Verdana, Arial, sans-serif !important;
background-color: #ECEADB;
color: #333;
width: 60px;
height: 22px;
}
.dp-highlighter .comment, .dp-highlighter .comments {
color: #008200;
background-color: inherit; }
.dp-highlighter .string {
color: blue;
background-color: inherit;
}
.dp-highlighter .keyword {
color: #069;
font-weight: bold;
background-color: inherit;
}
.dp-highlighter .preprocessor {
color: gray;
background-color: inherit;
}

Setelah selesai menempatkan CSS diatas, selanjutnya Copy script dibawah ini dan tempatkan sebelum kode </head> .















Dan yang terakhir Copy script dibawah ini lalu tempatkan sebelum kode </body> atau tepat diatasnya.



dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');

Jika sudah silahkan save template, dan Selesai!!

Sedangkan cara menggunakannya anda harus menempatkan kode di dalam tag pre .

Contoh seperti dibawah ini :



Tempatkan kode pemrograman anda disini.

Semoga bermanfaat…

Jangan lupa follow blog ini yach 😀 .

Categories: Blogging

Cara Membuat Read More di Blogger

10 April 2012 3 comments

Blogger
Nah, setelah kemarin kita belajar bagaimana membuat Related Post, sekarang mari kita belajar membuat Read more otomatis di blogger, walaupun kayanya sudah basi dan kebanyakan template blogger sekarang sudah support read more, tapi tak apalah.

Seperti biasa, login / masuk blogger.com -> klik blog yang akan diedit. Klik Template -> Edit HTML -> kasih tanda centang pada Expand Widget Template, Cari kode ini </head>, lalu letakkan kode berikut di atasnya.



summary_noimg = 350;
summary_img = 250;
img_thumb_height = 150;
img_thumb_width = 200;


//<![CDATA[

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 = '';
summ = summary_img;
}

var summary = imgtag + '
' + removeHtmlTag(div.innerHTML,summ) + '
';
div.innerHTML = summary;
}

//]]>

Terakhir anda cari <data:post.body/&g; , hapus kode itu dan ganti dengan kode dibawah ini.


<b:if cond='data:blog.
pageType != "item"'>
<div expr:id='"summary
" + data:post.id'>

create SummaryAndThumb
("summary");
READ MORE


Simpanlah template jika sudah Selesai…
Jangan lupa follow blog ini yach 😀
Semoga bermanfaat…

Categories: Blogging

Cara Membuat Related Post di Blogger

9 April 2012 9 comments

Blogger

Nah, posting kali ini kita akan belajar bagaimana membuat Related Post atau juga Artikel Terkait di blogger.

Seperti biasa, login / masuk blogger.com -> klik blog yang akan diedit. Klik Template -> Edit HTML -> kasih tanda centang pada Expand Widget Template, Cari kode ini ]]><b:skin>, lalu letakkan kode CSS berikut di atasnya.


#related-posts { float : left; width : 468px; margin-left : 5px; font-size: 12px; line-height : 1.8em; margin-bottom:10px; }
#related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; }
#related-posts a { text-decoration : none; }
#related-posts a:hover { text-decoration : none; }
#related-posts ul { margin : 10px 5px 5px 20px; padding : 0; }

Lalu anda cari kode </head>. Letakkan kode beirkut ini, di atasnya :



Terakhir, cari kode <data:post.body>. Letakkan kode beirkut di bawahnya kode itu :





Selesai. Coba lihat posting pada blog anda.

Tips: Jika anda pengguna ponsel dan kesulitan saat mengedit template di dashboard blogger, download saja dulu template yang dipake lalu editnya di File Manager Opmin atau aplikasi editor yang lainnya 😀 .

Sumber: bloggerplugin.org

Jangan Lupa Follow Blog Ini yach…

Semoga Bermanfaat…

Categories: Blogging

Cara Membuat Blog di Blogger

3 April 2012 3 comments


Nah, pada hari ini saya akan membuat sebuah catatan bagaimana membuat blog di blogger.com.
Langsung saja jika anda punya email Gmail, langsung ke Blogger.com, Masuk / login dengan nama dan password Gmail Anda. Lalu klik “Buat Blog”.

Selanjutnya anda di minta untuk mengisi beberapa form.

  • Judul blog: isi dengan nama blog yang diinginkan.
  • Alamat blog (URL): isi dengan nama yang
    diinginkan tapi Nama URL semua huruf kecil dan bersambung.
  • Klik Cek Ketersediaan.
    Kalau pesannya “Alamat
    blog ini tersedia.” Berarti
    OK. Kalau tidak tersedia,
    buat alamat yang lain.
  • Verifikasi kata: isi kata yang ada.
  • kemudian Klik lanjutkan.

Tahap selanjutnya anda akan diminta untuk memilih template, template ini cuma sementara anda juga bisa menggantinya nanti.
Pilih salah satu template yang sudah tersedia. Klik Lanjutkan, dan jika ada pesan “Blog Anda sudah Jadi!” Klik “Mulai Blogging” untuk menulis artikel.

Cara menulis artikel di blogger cukup sederhana, anda tinggal:

  • Masuk ke Blogger.com dan masukkan nama email dan password kemudian klik Blog Anda.
  • Klik “Entri Baru” pada
    blog Anda.
  • Pada judul: isi Judul tulisan.
  • Pada kotak di bawahnya: tulis isi
    artikel Anda.
  • Untuk Label: isi dengan label / Categori postingan anda.
  • Klik “Terbitkan / Publikasikan Entri” untuk menerbitkan (publish) artikel.
  • Selesai. Selamat, Anda sudah menulis satu artikel.

Lakukan hal yang sama setiap kali akan
menulis artikel ke blog.

Untuk mengganti template di blogge seperti ini.

  • Download file template format .xml yang akan dipasang di blog. Kalau dalam format zip, di extract dulu.
  • Masuk ke blogger.com -> Rancangan -> Edit HTML
  • Klik Browse, pilih file xml template blogger yang baru anda
    download tadi
  • Klik Unggah / Upload
  • Kalau ada pesan: Peringatan: Template baru Anda tidak berisi widget berikut: klik Hapus Widget
  • Simpan Template.
    Selesai.

Nah, sekian tutorial singkat Cara membuat blog di blogger 😀
Semoga Bermanfaat…

Categories: Blogging