Toàn tập về bộ gõ tiếng Việt , mudim , avim

[CPFounder]

Bộ gõ tiếng Việt cho forum (Mudim, AVIM)

Mô tả: TUT này sẽ giúp bạn chèn 1 bộ gõ trực tiếp lên forum để thành viên có thể gõ tiếng Việt mà không cần dùng chương trình hỗ trợ nào khác. KT chung: Cách upload file lên host Cách vào CSS của forum Các bước thực hiện: Bước 1: Download file .js sau về [You must be registered and logged in to see this link.] . Có thể dùng file đó luôn nhưng để chủ động bạn nên download về. Danh sách các file mới : Code: http://code.google.com/p/mudim/downloads/list Bước 2: Upload file vừa download đó lên 1 host cho hotlinking (fileave.com, webng, fileden v.v...) Bước 3:Chúng ta sẽ có 1 link dạng [You must be registered and logged in to see this link.] , bạn đưa nguyên đường dẫn đó vào code sau : <script src="Đường dẫn/mudim.js"></script> Bước 4: Chèn vào overall_footer của template. Hoặc chèn cái đoạn code từ trang tạo script cho vào ACP>>Quản lý tổng thể>>Cấu hình diễn đàn>>Mô tả. NÂNG CAO: Trong suốt bộ gõ (c3zone) Chèn vào CSS: Code: #mudimPanel {   -moz-opacity: 0.4;   opacity: 0.4;   filter: alpha(opacity=40); } #mudimPanel:hover {   -moz-opacity: 1;   opacity: 1;   filter: alpha(opacity=100); } Bộ gõ ẩn hiện (by ) Code: #mudimPanel {-webkit-transition: all 2s ease;-moz-transition: all 2s ease;background:#FFF url('http://c3zone.net/users/2611/10/63/87/album/go10.jpg') no-repeat right center!important;-moz-opacity: 0.9;opacity: 0.9;filter: alpha(opacity=90);bottom: 9px!important;left:-333px!important;width: 330px!important;height: 47px!important;padding: 4px 26px 4px 4px!important;font-size: 9px!important;font-weight:bold;vertical-align:middle;-moz-box-shadow: 5px 5px 5px #000;  -webkit-box-shadow: 5px 5px 5px #000;  box-shadow: 5px 5px 5px #000;} #mudimPanel:hover {-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-moz-opacity: 1; opacity: 1; filter: alpha(opacity=100);left:0!important}

Nguồn: chinhphuc.info

Bộ gõ khác:

Code:

<script language=javascript1.2 type=text/javascript src=http://lamson.webng.com/Bogovn.js></script>

Bộ gõ AVIM: Xem bài bên dưới!

[Beelly]

em không biết cái này có ai chia sẻ chưa
nếu có rồi thì mod del giúp em nhé
B1: Add code sau vào css

Code:

#AVIMRControl {
   background-image: url(http://vienit.com/forum/transparent.png);
   -moz-border-radius-bottomleft: 3px;
   -khtml-border-bottom-left-radius: 3px;
   -webkit-border-bottom-left-radius: 3px;
   border-bottom-left-radius: 3px;
   -moz-border-radius-bottomright: 3px;
   -khtml-border-bottom-right-radius: 3px;
   -webkit-border-bottom-right-radius: 3px;
   border-bottom-right-radius: 3px;
   border:1px solid #5b958e;
   top: 5px;
   left: 5px;
   position:fixed;
   text-align:left;
   width: 230px;
   z-index: 999;
}
body > #AVIMRControl {
   position: fixed;
}
#AVIMRControl input {
   margin: 0 0 0 9px;
   position: relative;
   top: -1px;
   vertical-align: middle;
}
.AVIMRControl {
   float: left;
   padding: 0;
   margin: 0;
   color: #137e70;
   font-family:Verdana,Tahoma;
   font-size:10px;
   font-weight:bold;
   font-style: normal;
}
.AVIMRControl #separator {
   margin: 0 15px;
}
.AVIMRControl_r {
   float: right;
   padding-right: 9px;
}
.AVIMRControl_r a#AVIMRlink {
   color: #b62727;
   font-family:Verdana,Tahoma;
   font-size:10px;
   font-weight:bold;
   font-style: normal;
   text-decoration: none;
   cursor: pointer;
}

Bước 2 chèn code sau vào over_header

Code:

<script src="http://codeforum.googlecode.com/files/a1avimr.js" type="text/javascript"></script>

Demo:

Code:

http://skin4u.co.cc/index.htm
http://a1tinhgia3.co.cc/index.htm


Muốn đổi màu chữ thì sửa trong css nhé

[Việt]

Mặc định, bộ gõ mudim nằm dưới đáy diễn đàn. Thủ thuật này giúp bạn di chuyển khung điều chỉnh bộ gõ đến 1 vị trí khác tùy ý.

• Demo :
  [You must be registered and logged in to see this image.]
• Code (chèn vào CSS):
  

  Code:

  #mudimPanel {-moz-opacity: 0.4;opacity: 0.4;filter: alpha(opacity=40);top: 5px!important;left: 5px!important;width: 330px!important;height: 47px!important;background-color:#FFF!important;padding: 4px!important;font-size: 9px!important;font-weight:bold;vertical-align:middle;}
#mudimPanel:hover { -moz-opacity: 0.7; opacity: 0.7; filter: alpha(opacity=70);}

• Tùy chỉnh:
  • top hoặc bottom - phía trên hoặc phía dưới trang
  • left hoặc right - bên phải hay bên trái trang.
  • 5px : khoảng cách đến phía trên hoặc phía dưới, bên phải hay bên trái trang.
  • width: 330px và height: 47px: chiều rộng và chiều cao của khung
  • font-size: 9px cỡ chữ.
  • background-color:#FFF : màu nền, nếu xoá sẽ trở thành màu vàng nhạt như mudim mặc định
  • Chú ý : không được bỏ !important ở bất kì thuộc tính nào.
    

Việt K

[Việt]

Demo:

[You must be registered and logged in to see this image.]

Cách làm: Đầu tiên làm gọn bảng mudim và di chuyển nó như hướng dẫn phía trên.

• Sửa các thuộc tính của id mudimPanel.
  
  • Vào CSS tìm #mudimPanel
    
  • Sửa thuộc tính background để thêm ảnh "Bộ gõ" vào khung điều khiển bộ gõ. Ở đây mình sử dụng ảnh này : [You must be registered and logged in to see this image.]
    

    background:#FFF url('http://www.c3zone.net/users/2611/10/63/87/album/go10.jpg') no-repeat right center!important;

  • Tiếp đó sửa thuộc tính padding cho nội dung bên trong không đè lên ảnh nền phía trên:
    

    padding: 4px 26px 4px 4px!important;

  • Đặt thuộc tính left là -333 để khung điều khiển bộ gõ thụt vào bên trong.
    

    left:-333px!important;

  
  
  
• Sửa thuộc tính của mudimPanel khi di chuyển chuột vào.
  
  • CSS. tìm #mudimPanel:hover
    
  • thêm vào thuộc tính:

    left:0!important;

Code hoàn chỉnh - Chèn vào CSS:

Code:

#mudimPanel {
-webkit-transition: all 2s ease; -moz-transition: all 2s ease;
background: white url('http://www.c3zone.net/users/2611/10/63/87/album/go10.jpg') no-repeat right center!important;
-moz-opacity: 0.9; opacity: 0.9; filter: alpha(opacity=90);
bottom: 9px!important;
left: -333px!important;
width: 330px!important;
height: 47px!important;
padding: 4px 26px 4px 4px!important;
font-size: 9px!important;
font-weight: bold;
vertical-align: middle;
-moz-box-shadow: 5px 5px 5px black;
-webkit-box-shadow: 5px 5px 5px black;
box-shadow: 5px 5px 5px black;
}
#mudimPanel:hover {
-webkit-transition: all 1s ease;-moz-transition: all 1s ease;
-moz-opacity: 1;opacity: 1;filter: alpha(opacity=100);
left: 0!important;
}

Việt K

[Việt]

• Trước tiên, cần gắn bộ gõ mudim - nó sẽ hiện thế này :
  
  [You must be registered and logged in to see this image.]
  (cách gắn bộ gõ chắc mình không cần nhắc lại nhé )
  
• Muốn ẩn đi bạn chèn dòng sau vào CSS :
  

  Code:

  #mudimPanel {display: none;}

• Chèn vào template:
  
  1. Chèn ở Quick Reply :
     demo:
     
     [You must be registered and logged in to see this image.]
     
     * Vào Temp > Quản lý tổng thể > viewtopic_body. Tìm
     

     Code:

     {QUICK_REPLY_FORM}


     chèn vào phía sau đoạn:
     

     Code:

     <span class="gensmall">Chọn kiểu gõ :<input name="mudim" id="mudim-off" onclick="Mudim.SetMethod(0);" type="radio"> Tắt<input name="mudim" id="mudim-vni" onclick="Mudim.SetMethod(1);" type="radio"> VNI <input name="mudim" id="mudim-telex" onclick="Mudim.SetMethod(2);" type="radio"> Telex <input name="mudim" id="mudim-viqr" onclick="Mudim.SetMethod(3);" type="radio"> Viqr <input name="mudim" id="mudim-auto" onclick="Mudim.SetMethod(4);" type="radio"> Tổng hợp</span>

     
     
  2. Chèn trong trang gửi bài mới
     demo:
     
     [You must be registered and logged in to see this image.]
     
     * Vào Temp > Post & tin nhắn > posting_body : tìm
     

     Code:

     <img src="{PATH_IMG_FA}i/switch_wysiwyg.gif" alt="{SWITCH_EDITOR_MODE}" /></button>

     Chèn vào phía sau đoạn :
     

     Code:

      <span class="gensmall"><b>Kiểu gõ :</b>  <input name="mudim" id="mudim-off" onclick="Mudim.SetMethod(0);" type="radio">Tắt<input name="mudim" id="mudim-vni" onclick="Mudim.SetMethod(1);" type="radio">VNI <input name="mudim" id="mudim-telex" onclick="Mudim.SetMethod(2);" type="radio">Telex <input name="mudim" id="mudim-viqr" onclick="Mudim.SetMethod(3);" type="radio">Viqr <input name="mudim" id="mudim-auto" onclick="Mudim.SetMethod(4);" type="radio">Tổng hợp</span>

Ngoài ra có thể chèn vào bất kì chỗ nào các bạn muốn ...
Chúc thành công ~!

Written by

[Rin]

Mượn topic này, sửa lại 1 chút ở code và bổ sung thêm 1 vài kiểu
___Việt K

---

Dưới đây là 1 số style khác, được sửa lại từ cái ảnh xấu xí mình làm sưu tầm từ nhiều nơi :tongue:

• Style Orange : [You must be registered and logged in to see this image.]
  
  

  Code:

  #mudimPanel {
background: white url('http://i45.servimg.com/u/f45/16/55/88/76/bogo11.png') no-repeat right center!important;
border: 2px solid #DDD!important;
position: fixed!important;
width: 295px!important;
height: 35px;
padding: 11px 25px 11px 4px!important;
font-size: 9px!important;
vertical-align: middle;
bottom: 100px!important;
left: -302px!important;
border-radius: 10px 0px 0px 10px;
}
#mudimPanel:hover {
left: -2px!important;
}

  
  
• Style Ribbon : [You must be registered and logged in to see this image.]
  

  Code:

  #mudimPanel {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
background: url('http://c3zone.forumj.net/users/1214/94/30/93/album/ribb10.png') 333px 0 no-repeat,url('http://c3zone.forumj.net/users/1214/94/30/93/album/ribb11.png') center right no-repeat, url('http://c3zone.forumj.net/users/1214/94/30/93/album/ribb12.png') repeat-x 0 center !important;
bottom: 20px!important;
left: -333px!important;
width: 330px!important;
height: 45px!important;
padding: 11px 48px 11px 5px !important;
font-size: 9px!important;
font-weight: bold;
vertical-align: middle;
border: none !important;
}
#mudimPanel:hover {
left: 0!important;
}

  
  
• Lightblue background: [You must be registered and logged in to see this image.]
  
  

  Code:

  #mudimPanel {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
background: white url('http://c3zone.forumj.net/users/1214/94/30/93/album/lblue10.png') no-repeat right center!important;
-moz-opacity: 0.5;
opacity: 0.5;
filter: alpha(opacity=90);
bottom: 9px!important;
left: -333px!important;
width: 330px!important;
height: 45px!important;
padding: 4px 50px 4px 4px!important;
font-size: 9px!important;
font-weight: bold;
vertical-align: middle;
-webkit-border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
#mudimPanel:hover {
left: 0!important;
}

  
  
• Style Ribbon 2: [You must be registered and logged in to see this image.]
  
  

  Code:

  #mudimPanel {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
background:url('http://c3zone.forumj.net/users/1214/94/30/93/album/rib10.png') center right no-repeat,url('http://c3zone.forumj.net/users/1214/94/30/93/album/ribbg10.png') center left repeat-x!important;
bottom: 9px!important;
left: -335px!important;
width: 330px!important;
height: 34px;
padding: 20px 40px 11px 5px!important;
font-size: 9px!important;
font-weight: bold;
vertical-align: middle;
border:0!important
}
#mudimPanel:hover {
left: 0!important;
}

Việt K

[_Alexander_]

like mạnh, thank nhiều

[bian_vodanh]

hic k co hướng dẫn chi tiết

[handsomevip007]

hic k co hướng dẫn chi tiết

bài này mà không chi tiết thì không còn bài nào chi tiết hơn đâu

[Sponsored content]